4 Techniques To Add More Life to Flat UI Design

Google, Starbucks, Microsoft. Big brands are all going flat. Their sites, not their sales.

The influence of big brands making a change like this is enough to push the trend further forward. Adoption from more and bigger brands will only push usage. Mid-size and smaller brands will definitely follow. (Which is a little ironic since “smaller” brands and designers were the first to champion flat design.)

However, what’s equally important to study is how these influencers use flat design. There are a few commonalities:

Flat logos
Dominant use of one brand color
Plenty of simple shapes, particularly squares or circles
Flat user elements paired with big images or video
Simple, bold typography
Flat effects

While most of the common traits are representative of the flat design style altogether, some flat effects can exist individually. These effects can be isolated and transplanted into sites with other, varying aesthetics.

Once shunned by flat design purists, the use of subtle effects is becoming synonymous with flat design. Simple effects fix the biggest problem associated with the design style – that user interface elements and calls to action were often hidden, “lost,” or difficult to find. The addition of small effects have gone a long way to resolve this issue.

Here are 4 flat effects that you can use on their own, to give your site as much or as little of the flat benefits as you want.

1. Tiny Shadows

As explained in Flat Design Trends 2016, subtle drop shadows that most users won’t even see add an element of depth. The shadow should provide a bit of depth that helps “lift” the element off the background, but is not harsh and should not really stand out visually.

Photo credit: Publicis

2. Ghost Buttons

These aren’t buttons that are ghastly.

Quite the opposite, they’re box outlines with instructions inside. This design element has grown in popularity on sites that use hero images, illustrations, or video. These buttons are aptly named because the main part of the element is see-through and allows the background image or color to come through. Ghost buttons provide a great element for a call to action without taking away from the main image on the screen.

Photo Credit: Urban Influence

3. Hover Animations

Small movements that clue users into what actions to take as they move across the screen are a great navigational tool. Animation is often connected to buttons but can stand alone as well. Hover animations such as a bump, spin, color change or swirl help users focus on where an action should take place. For sites with more complicated visuals, designers are extending this animation so that it is continuous and does not just happen with the hover of a mouse to better connect with and direct users as to what actions they should perform.

Photo credit: Humaan

4. Color Gradients

Once taboo in terms of flat, color graduation is making a comeback. The big change this time around is that it is a lot less subtle, changing between two bright colors. This duotone effect, as made popular by Spotify (below) emphasis a gradient as a primary design element. This is in contrast to previous iterations of gradient trends where gradients were most commonly used as part of a background effect.

Photo credit: Spotify

Spotify embraces design trends – and leads the way – almost like no other brand. The image is constantly evolving and the Year in Review page exemplifies this. The design screams flat with a large, bright image, but look closer and there are small effects scattered throughout the design from a neon shadow on the image subject to a ghost button to sliding images with long shadows between movements.

Photo credit: Riiot Labs

Riiot Labs is just as striking with the page for a smart pool tool. From simple sans serif typography to a minimal outline using bold color, the site is distinctly flat. But the design also features a background with a color gradient, animations to draw the eye and a ghost button-filled button pair to encourage click actions.

Takeaway: Flat in Action

Brand names big and small are seeing the advantages of the flat style. Practical and visually stunning, the style saves on loading times, improves comprehension, and looks good while doing it. Let’s look at how some well-known names use flat — pay attention to their usage of the 4 effects above.

Photo credit: Corona

Corona uses a very flat aesthetic for its international presence. (The United States site is still a little less flat.) The design features a large iconic beach image – as the brand is known for – with color-blocked cards for more clickable content. Each page of the scroll and navigation use this flat concept with plenty of trendy touches, including social media integration, ghost buttons and oversized navigation elements.

Photo credit: Adidas Stella Sport

Adidas Stella Sport features a flat layered design that has touches of material design, flat design and an almost 80s vibe. The aesthetic uses plenty of bright colors with geometric shapes and simple sans serif typography. While there is a lot going on from screen to screen, the design still maintains a bit of a minimalist outline with plenty of space and clean lines.

Photo credit: Nike

Photo credit: Jet

In addition to aesthetics, flat design comes with other benefits as well. When done well, a flat framework can increase website conversions. Giles Thomas looked a flat button styles, among other things, and found a 35 percent increase in clicks when a flat design style was used. This factor alone might be why so many big brands are using flat and almost-flat design for their retail websites.

To learn more flat UI techniques, check out the free guide Flat Design Trends 2016. 20 examples are deconstructed into practical design tips.

The post 4 Techniques To Add More Life to Flat UI Design appeared first on Studio by UXPin.