Surprise & Delight your Customers: 10 Awesome Examples
Trends in web design are nothing new, every year you would have seen roundup of web design trends on various websites. Looking through these trends and understanding how these work, is a source of inspiration for many of us.
From the lengthy drop shadows, rounded corner and overly large buttons from the web 2.0 era to skeuomorphism and flat design in recent past, there are always exciting things happening in the world of web design.
With all the advancements in CSS and HTML, combined with the power of modern browsers, there has been no time like the present to push the boundaries of digital web design. In this article, I will focus on someweb design elements that helps these websites standout from the crowdand why I think this works for them.
Let us not waste any time and jump right in to see some great web designs.Here be dragons. Some of these could be considered to be experimental in nature and might not work well on all browsers and as such, it might not be a great idea to try this out on commercial sites.
iMac with Retina 5K display
On this page you will see how Apple uses web design, to highlight one of their productís key selling point. As you scroll down you will see the image shrinks and fits on to a iMac retina 5K display, hinting the fact you are able to fit a lot more on the screen with this new display. Using a bit of CSS and JavaScript you canget this amazing scrolling effectin your design too.
ReadME.io
You can use web design to wow your visitors, that is what readme.io did when I went tosignupand later when I tried tologinto the app. Try theCSS formssection on CodeCanyon, for some easy to use form designs. I recommendthisif you want to add some animation to your form.
Did you notice how thereadme.io homepageadds a signup button to the header when you scroll down. Return users would likely login when they visit the homepage, so only that option is shown when you are at the top of the page.
Frames – Tunnel Rats
A micro site that tells the story of Tunnel Rats (American, Australian and New Zealand soldiers who performed underground search and destroy missions during the Vietnam War). They make use of some nice text animations and typography to convey the message.
KTM Free Ride E 2015
This is a nice example where web design is used to sell the story and the brand. When you scroll down you will see the various components that goes into the KTMFreeRide E 2015. Apple did something similar with theMac Propage, check outihatetomatoesfor more info on how it all works.
Interactive Hero Content
The use of hero graphics is a relatively new trend in web design, instead of just using a stock photo try adding some subtle animation or avideo footageto enhance the userís experience. Using aslider plugincan help you easily achieve this.
NYTimes – Marijuana Legalization
The use of SVG is certainly on the rise. SVGs makes it a lot easier to get your message across using subtle animations like these. As you scroll down to read the article, you will see the five-pointed stars morph.
CSS Effects
There are some really cool new CSS features like background-blend-mode, CSS masks and clip-paths that can be used to create some interesting effects on websites. With the advances in browser technology, they aresteadily becoming more mainstreamin web design.
Animated Pre Loaders
Pre loaders can provide a visual cue when we want to load content in the background. TheseCSS3 animated pre loadersoffer a nice way to to inform users, the website is preparing the content to be displayed.
Using Hover Effects
If you want some inspiration for adding hover effects for your images, this article from codrops should have you covered. There are quite a bit of styles to choose from.
Tooltips for onboarding new users
In its most basic form onboarding is the process of helping a new user getting started by guiding them through the hoops that is your website. It’s a great strategy to convert a new user to an active one. Using tooltips to help new users understand some of the key aspect of your website, is one of the many way to go about it.
Source: justcreative.com
