Over the years, trends in design have come and gone. As printing technologies improved and full-color printing became more affordable, we saw a rise in full-color photography and smoothly blended gradients – sometimes just tacked on because they were possible. These behaviors were mirrored on the web – remember the Flash-heavy days a decade ago when broadband Internet was just becoming widespread, and designers seemed determined to add as much load time as possible to a web site? Or how about the skeuomorphic design craze, sparked by Apple and favoring drop shadows, carefully recreated textures and characteristics of real objects?
The latest trend is flat design, and it’s not only flourishing on the screen. It’s also transferring to the real world, where pamphlets, business cards, book covers and more are exhibiting elements of flat design. Designers and developers favor flat design because the elements are simpler and easier to make work across multiple environments. When we think of “modern” style for printed materials, book covers and even physical objects or architecture, we think of smooth lines, solid blocks of color and bright tones… basically all the things that are also true of “flat” design.
Read on to learn more about flat design and what impact it’s having on print design and beyond.
What is Flat Design?
Flat design came into vogue in part of a response to the trend of skeuomorphic design, which attempts to emulate real-life features with exaggerated characteristics. Imagine the dashboard in your car. It’s not real leather, but there’s an artificial texture that’s been added to try to make it look like leather. That’s skeuomorphic design.
The biggest proponent of skeuomorphic design has long been Apple, which uses it in the iPhone, iPad and Mac computers. Perhaps as a counter to this, and certainly to set themselves apart from what Apple embraced for so long before iOS 7 was released, Microsoft became one of the first companies to embrace flat design.
It eschewed the rounded edges and addition of real-life elements to apps, as found in so many Apple design elements. Instead, Microsoft embraced open spaces, hard edges, bright colors and the two-dimensional illustrations that put the “flat” in flat design.
Here are some things you will find in flat design:
- Minimalist approach – Instead of featuring many elements all begging for your attention, flat design pares these down to the basics and give a lot of breathing room.
- Bright colors – While it’s not a hard and fast rule, many flat designs take advantage of their simplicity to introduce a rainbow of colors.
- Simple images – Instead of complicated graphics or photographs, flat design is more likely to feature simple images created with basic shapes and just a few colors.
- Straightforward ideas – In a flat design, it is very clear what the piece is trying to communicate. You don’t need to search to understand.
- A focus on typography – With a simpler layout, designers are more able to focus on rendering beautiful letterforms and combining two or more fonts in interesting ways.
- Buttons or icons – Flat design is more likely to include graphics reminiscent of icons – the more simply the designer can convey the point, the better.
- Large images – There are less images in flat design, but when a photograph or visual is used, it will be treated as a very important element.
Here are some things that you will not find in flat design:
- Muted tones – There are exceptions, but typically flat design isn’t subtle.
- Overuse of weighty gradients – Gradients bring to mind the shading and dimension of real-world objects. However, brighter, more abstract gradients are still sometimes used.
- Real-life objects wrought into realistic digital forms – Called skeuomorphism, the digital rendering of realistic objects goes against the simple principles of flat design.
- Drop shadows – You won’t find smooth shadows in a flat design, but you might find blocky shadows with sharp edges, or long shadows, typically at an angle.
- Bevels – Beveled edges are intended to give dimension to objects. Instead you’ll see sharp and clean edges.
- Artificial textures – For the most part, flat design works with bold blocks of solid color instead of employing textures like paper, fabric, or woodgrain. These types of patterns are meant to digitally recreate something in the real world. Abstract textures can sometimes still fly, though.
Why Flat Design Works
So, why choose flat design over other approaches? There are a number of reasons why this trend is gaining acceptance both on- and offline. Here are some of the advantages of using flat design:
It embraces minimalism. Users aren’t distracted by decorative, but ultimately meaningless, design elements. If skeuomorphism is about details – lots of them – flat design is about simplicity. Whereas in the illustration below, the on button embraces texture, pattern, shadow, and reflection, the off button has the only elements it needs to be an off button: the word “off,” and a shape to press. That’s all. It’s easy and makes sense from a distance.
Everything serves a purpose. It’s easier to illustrate big ideas when you’re not worrying about where to add a drop shadow. Take the older and newer Safari icons for example:
The old design was skeuomorphic to the core, representing a compass, from the shiny chrome border to the explicitly labeled cardinal directions, to the tiny swing tag at the top where one could imagine hooking it to a lanyard. That’s a lot of detail for an icon – and at a tiny size, it’s almost impossible to make out the shapes of North and South America in the background.
The newer icon still features a subtle gradient, but instead of existing to represent a plane of glass, it just adds intrigue to the icon. Pared down to the dial and tics on the outside, it’s still clearly a compass – but more importantly, it’s easy to make out at any size and simple enough to understand at a glance.
It puts the emphasis on content. Without all the extra bells and whistles, the ideas behind a product come across much more clearly with flat design. It’s a simple on/off button, not a realistic button rendered in light and shadow. It’s an icon that instantly means “Safari,” not a physical compass sitting on your dock. It is what it is, and nothing more.
For example, one web site that utilizes flat design is 12 Keys Best Rehab, a drug and alcohol rehab center in Florida. Its site includes the use of a few bold colors throughout, as well as simple, two- or three-word calls to action. Extras like drop shadows and beveled edges are left off in favor of simple fonts and photos with square edges.
Flat design can work offline just as well. In particular, typography principles of flat design translate nicely to printed materials, such as folders, brochures or business cards. The most important thing to remember is the emphasis on simple design. Remember that when you are working with simple elements, every piece makes a bigger difference – make sure your font isn’t at odds with your other imagery, and that your color scheme works.
Flat Design Trends in Print
Now that you understand the ideas behind flat design and how it is implemented on the web, it’s time to explore how this trend is playing out in the real world. Here are just a few examples of the hot print design trends for 2014 and how they reflect flat design ideas.
Business cards have long used the type-only approach, but this is beginning to catch on in other areas, too, such as promotional postcards, posters and even book covers. The minimalist approach catches the eye because the words are the message. White space is often utilized with those words to make them stand out, perhaps by putting a large word at the top of the poster, leaving the middle wide open and adding small print at the bottom to convey the necessary contact information or call to action. Above is a good example of type-only design from a law firm outlining its forms of assistance, featured on Inspired Mag.
But type-only design doesn’t have to exist only in black and white, and it can have a degree of abstraction, too. Check out the marketing materials Designworks created for Benevolent Society, a charity in New Zealand, below. All of the bright overlapping forms are actually letters that make up the word “thanks.”
Below are a few more examples of flat design typographic business cards:
Flat design means emphasizing two-dimensional illustration. Without the traditional three-dimensional effects such as bevel and textures, familiar designs can take on a whole new look. For instance, the below group of postcards featuring reimagined superheroes is a great example of flat design’s straightforward approach.
Many companies like the idea of consistency in their products. They may find they like the flat design concept for their web site and want to echo it in their offline materials as well, such as report folders, business cards or pamphlets. That may also mean paying special attention to the colors that are chosen, because you need them to be compatible across platforms.
Reduction of Clutter
These days we’re in a constant state of information overload. From our mobile phones to tablets to laptops, it seems we’re always being inundated by information. Flat design is a remedy to that, so no surprise it’s being adopted offline, too, to counterbalance the clutter of words and information we find online. You can find that in book covers, posters or even T-shirts.
Flat design is here to stay. Whether it’s online or offline, this simplistic approach is a great way to put the emphasis on ideas and content, in a way that will never go out of style.