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 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.