The web has moved a long way from its traditional roots. Where once it was perfectly fine to provide a basic text-only website, now it's practically expected that your sites convey not only information, but provide a modern, crisp and exciting user experience.
To that end, it's up to you as the designer or developer to create something that's visually interesting. This could be something as small as an awesome set of font pairings, or as complex as full-on animations and deep interactions.
Today we're going to look at a few sites that masterfully use micro-interactions, hover state animations, CSS gradients and transforms to create visual interest and guide users' actions. The whole point is to create something that users enjoy, either directly through interaction or through subtle effects users might not even notice, which nevertheless contribute to create positive connections with the site.
Stripe
Stripe is a US-based payment processing system for credit cards. It's a developer-focused solution and this comes across both in their system and their website. Their site is colorful, interactive and generally pretty awesome to use. Let's see which elements we can pick out and leverage in our designs.
Gradient Backgrounds & CSS Transforms
The Stripe website showcases a primary header section with a creative use of layout and design. The header changes colors on a page by page basis and is used as their main call to action element.
At its most basic level, it's a collection of containers that have been positioned to create a semi mosaic grid. These fragments have each their own linear gradient that blends or contrasts with other parts of the header.
What makes the header look even more visually interesting is the fact that it's been slanted. To get this type of effect, all you need to do is apply a skew(xdeg) transformation on the top element. Doing so instantly skews the inner elements.
The subtle skew, along with simple yet interesting images and colors, are all you need to bring about this inventive design. Getting a good mixture of low and high contrast sections here is important. If these sections were flat colors the effect wouldn't look so great. Instead, the gradient flowing from one section to another makes this look visually striking.
If you like the idea, you could incorporate a layout like this in your header, or even use it as a background in a call to action or feature block. Try experimenting with mixtures of colors, positions and transforms and create something that looks interesting and makes you stand out.
Here's a CodePen demo to get you started right away.
[caption id="attachment_154304" align="aligncenter" width="800"]
Creating Interactive, Interesting Menus
Menus have come a long way from the old left positioned vertical menu of past ages. Nowadays people expect your menus to be both useful, visually interesting, and of course mobile optimized.
Stripe has an interesting take on their menus.
Each of their main top level categories expands out and showcases several of their sub-pages in unique layouts. Their 'Products' menu, for example, features a large mega-menu style layout. Each of the sub-pages has its own styled icon, title and summary description to entice you to find out more.
As you'd expect, all these menus work perfectly on mobile, dynamically changing as required.
The idea here is that Stripe has taken something generally quite boring such as a drop down menu and turned it into a showcase, something of interest. You could, for example, incorporate a few animations into your menu to subtly change its position or opacity. Or, you can create dynamic layouts for your menu to showcase each page under a unique light.
In a previous article I touched on a few examples of different menus you can use, but the guiding principle is that they should be easy to use and visually interesting.
Help Scout
Help Scout is an easy to implement, dynamic help system. It exposes a front-end widget visitors can use to get help by browsing predefined help articles or sending the contact form.
Their website is fairly simple with a focus on content. However, it uses several subtle animations and icons to draw your attention.
Creating Subtle Repeating Animations
Continue reading %Inspirational UI Design Ideas for Your Next Website Project%
by Simon Codrington via SitePoint
No comments:
Post a Comment