Google, Starbucks, Apple, 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 of flat UI design forward. Adoption from more and bigger brands will only encourage usage. Mid-size and smaller brands are expected follow the trend, which is a little ironic since “smaller” brands and designers were the first to champion flat design.
Best Practices for Flat UI Web Design
Following the design trends of some of the biggest brands is important because they have gone through rigorous testing to make the changes. It is equally important to study how these influential brands incorporate these changes, which, in our case, is flat design. There are a few commonalities when it comes to usage of flat UI design by big brands:
- 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, in fact. 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 into something more continuous. So, the animation does not just happen with the hover of a mouse. Instead, it happens continuously, directing users to 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), emphasizes 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.
Flat UI Elements 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 four effects above.
Corona: Flat Aesthetic for International Presence
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 uses this flat concept with plenty of trendy touches, including social media integration, ghost buttons and oversized navigation elements.
Adidas Stella Sport: Flat Layered Design
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.
Nike: Minimal Color Palettes
Photo credit:Nike
Nike’s web design is rooted in minimalism, which is accentuated by the use of minimal color palettes. There is plenty of white space. The use of flat colors helps make the images of athletes and products pop out, making them the center of attention on a page.
Nike has given more life to flat colors with the use of color gradients. Notice the duotone effect in all the hero images throughout the website. The duotone effect gives the images movement without taking the focus away from the product or the athlete. It is a lot subtler compared to Spotify, but still very noticeable.
Jet: Minimalism in E-commerce
Photo credit:Jet
Jet has used the flat design language to create a minimalist ecommerce store. Visually, it looks a lot less cleaner compared to the skeuomorphic style of older ecommerce sites. There are no shadows on buttons. In fact, there are hardly any noticeable design effects being used on the web store. Instead, the focus is on white space, which lends itself to a clean user interface design.
This is in sharp contrast to the skeuomorphic design styles of the past that relied on realism. Skeuomorphism serves a purpose – that of making new technologies more familiar for users. However, as the internet has become ubiquitous and people have gotten comfortable with shopping online, minimalism is where all ecommerce is headed.
Applying Flat UI Website Design Inspiration
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.
