Trends

A Deeper Look into the Flat Web Design Trend

We scour the dark two-dimensional shadows of flat websites to share helpful trends for anyone curious about the elements of flat design.

Cultural trends often start small, but grow rapidly until people move onto the next big thing. Sometimes trends can be difficult to understand, and sometimes a good trend takes a while to emerge.¬†Although flat design has been around for years, it hasn’t been a mainstream topic of conversation until recently.

Nowadays, even big tech companies like Apple and Microsoft have taken a liking towards flat design. What makes this technique so appealing to designers? What makes a flat interface usable and relatable? In this post I’ll be scouring the dark two-dimensional shadows of flat websites to share helpful trends for anyone curious about the elements of flat design.

Block Elements

The overall composition of >flat design has veered towards a grid-focused structure. This idea lends itself to block elements which fit into a page as squares or rectangles. It’s common to see other shapes within the design but many layouts follow a block or grid formatting.

This is certainly not the only choice but many flat web page elements lend themselves to ideology. Since flat layouts push away from the concept of depth there is little need to break outside a predefined grid. Therefore it’s quite common and strikingly comfortable to see flat designers working with block elements to arrange page content.

united pixel workers website flat website design

Looking over the homepage for United Pixelworkers you can see this trend caught in the act of being awesome. Each product is listed in a block-style layout which restructures to different widths as you scroll. But look over the entire composition to notice the header and footer sections also seem like “blocks”.

Another way to look at the design is like a compilation of shapes. Without depth you just have 2D objects layed out next to each other. With the proper amount of whitespace each element seems like an individual shape. This might be considered the quintessential nature of flat UI design.

Simple Icons

Flat design ushered the largest resurgence of simplistic line icons used for website interfaces. Apple’s iOS 7 was a major contributor to this trend by suggesting that app designers only use simple icons. iOS 7 and now iOS 8 have pushed forward with support for these simplistic icons which have become a staple in flat website layouts.

The purpose of icon design is to convey an idea visually through metaphor. Flat line icons have made the process simpler by focusing on very clean minimalist foundations. While mobile apps use icons for enhancing UX design, flat websites typically use icons for enhancing content(or the context of content).

psd2html company flat web design

The website for PSD2HTML uses a typical flat design. All throughout the page you’ll find relatively simplistic color schemes and crisp font styles. But my favorite part of the homepage is repeated use of flat simple icons to expand upon content. In opposition to thin lines, these icons just use flat values to create glyphs without any depth.

sumall website design homepage layout

Another example can be seen on SumAll analytics which does use flat line icons. They still emanate the same concept but are more transparent than other flat icons. The design process is typically much easier without extra detail.

Flat icons are a huge trend that I’ve seen in the wild even on non-flat websites. Web designers who are not familiar with icon design have a chance to start with flat symbols and gradually work up to more complicated tasks. Overall this is one of the more defining trends of flat web design and I have a feeling it’s going to be around for a long time.

Lively Color Choices

Vibrant colors have permeated the culture of flat design. The earliest examples I can remember derive from Microsoft’s metro design as seen recently on Windows 8 & Windows Mobile Phone. This metro design uses brightly colored blocks and contrasting colors to generate a more distinguishable experience.

However flat designs do not always require vibrant color schemes. A matching compilation of various colors tied together in a sophisticated layout also create the same effect. Flamboyant panache is not a requirement to flat design – but it is a trend I’ve seen repeated many times over.

faktor vier flat website homepage

Take a peek at the Faktor Vier webpage to see a beautiful contrasting effect. Their layout is flat and focuses on block-style page elements. The primary colors are dark grey/black along with bright pink. There’s plenty of solid contrast which makes fonts and icons easy to recognize. The site looks very true-to-self regarding the flat style.

block level colorful flat website

If we traverse into another web server we’ll find Blocklevel. Their site does utilize the multi-colored angle with vibrant colors found all over the layout. It seems the website follows a theme of flat design paired with bright colorful blocks for the layout structure. This popular theme is difficult to pull off but definitely matches up with the flat/metro UI trend.

Clear Spaced Typography

Minimalist layouts have adopted this same technique for typography by clearing lots of free space on the page. Well-spaced typography is easier to read and often more crisp with a higher contrast ratio. Most flat websites that I’ve seen utilize clear focused typography for both filling in empty space and conveying a direct message to the visitor.

gecko board website flat homepage inspiration

Perhaps one of my favorite examples is Geckoboard because the whole page is structured around open breezy typography. Most of the links & page headers use all caps with extra letter spacing to create a distinction from regular paragraphs and web copy. I would describe their typography style as modern and chic yet efficient.

inky flat blue website homepage layout

The homepage design for Inky uses much larger text with more space between page content. Again contrast plays a huge role in the composition because colors are a big part of flat design. You’ll notice the site uses a small handful of typefaces but the overall design is relatable and easy to read. Well-spaced typography is quite easy to skim which is another benefit to using over-sized fonts.

Closing

The idea of flat web design encompasses so many distinct styles that it’s tough to nail down. I hope these examples can offer a magnified look at some popular design trends amongst designers using the flat style.

It’s still a fast-growing ideology which isn’t losing steam anytime soon. While flat layouts have become a large component of UI design they’re still just one option of the many persistent trends in web design.


About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.