A letter from a flat designer.
Things you should know about flat design.
Dear Designers & Non-Designers,
This post is for both of you. For designers, this will serve as a good reminder of what we need to pay attention to. For non-designers, it will help you understand the shift from dimensional to flat design and what it implies on a technical level.
Flat and minimal design are my bread and butter. Since I started making work as a designer I have been simplifying dimension, minimizing design elements, and maximizing white space. Now that these two styles have merged together at the forefront of mobile design, I thought I’d share what I’ve learned.
Suddenly Ubiquitous
Unlike fans of underground bands who cry Sellout! when their favorite group goes mainstream, I was happy to see Apple slowly bring minimalist aesthetic to the forefront of design fashion [note: we’ll get to the “fashion” part in a moment].
Now it seems that Apple has also brought flat design to the mainstream audience—and they’re loving it. As expected, the flat iOS 7 update is being hailed as “new” and “fresh,” when really it’s just new and fresh for Apple. It’s been around for a long time.
Design As Fashion
Design aesthetics follow trends just like in fashion: things are cool for a while, then they’re not, and then they are again—usually after a long period of time in between. Anyone who tells you otherwise is a silly gnome (without the tremendous pointy red hat, of course).
If you’re one of those designers that just does his thing no matter the trend, then more power to you. That’s awesome. And may I be so bold as to say that’s the way it should be.
If you’re one of those designers who surfs the latest trends, then listen up, because if you’re going to start making flat design you better do it well. I don’t want you to ruin it for the rest of us.
Dimension: One
The primary challenge in moving from dimensional design to flat design is working on just one level. Before iOS 7 there were imaginary levels of dimension created by drop shadows, textures, and so on; now everything exists on a flat plane. Thus “flat” design.
Since we’re working with one less method of differentiation it’s important that what is left is even more refined than before. Essentially, the fewer elements we have to work with the more each must effectively speak to the viewer.
Three Things You Need To Master
There are three basic design concepts you need to keep in mind when designing in a flat environment: hierarchy, chunking, and eye line.
Hierarchy
In iOS 6 and below, design hierarchy included dimensional differentiation. You could apply a drop shadow to a menu bar, “lifting” it above the rest of the content and instantly communicating it’s “higher” level in the hierarchy. This is no more—and it’s about time.
Creating a visual hierarchy is essential to communicating successfully. The last thing you want to do is put strong emphasis on the least important parts of your design. To ensure you don’t do this, make a list of what matters most to least and make sure you design accordingly using size, color, weight, placement, and so on. This leads right into the second concept…
Chunking
One of the first things they teach you in design school is to step back and squint at your work. Doing this blurs everything together, helping you see general forms and view elements in a less detail-centric light. Chunking is derived from this same method of self appraisal.
The best way to explain chunking is by describing it as a macro hierarchy. In other words, you take the absolute most general features of a design and apply a hierarchy to it. You may have a dozen or so individual elements, but at a macro level there may only be two or three separate areas. These are chunks.
Once you figure out what your general chunks are you can then apply individual hierarchies to each, creating levels within levels, further eliminating the need for dated faux shadows and textures. This is achieved in much the same way as the general hierarchy described above: using size, color, weight, placement, etc. The final element in all of this—and the most important—is the viewer.
Eye Line
If an app launches in the middle of the woods and no one is around to see it, does it exist? The viewer is the litmus test for your hierarchy, an uncontrollable control group that we as designers have to do our best to estimate and plan for. In a nutshell, it’s how the visuals are viewed—the perception—that we’re working to optimize.
Eye Line is the trail by which hierarchy and chunking techniques lead the viewer’s eyes. In general, the eyes naturally begin at the top left and work their way down to the bottom right, “reading” the picture in much the same way as if reading a book. Top to bottom, left to right.
Controlling the visual weight of elements allows designers to manipulate the eye line and blaze trails of our own. We become pioneers of the screen, flexing our hierarchical powers and wrangling with viewers’ natural tendencies. Top to bottom, left to right eventually morphs into Hold my hand, I’ll show you where to go.
Three Peas In A Pod
By now it’s probably clear that these concepts are all intertwined. Hierarchy and Chunking are micro and macro methods of manipulating Eye Line, and Eye Line is a semi-flexible rule of thumb that helps distribute the elements in your Hierarchy and Chunks.
It takes smart consideration of all three—including their techniques, limitations, and tendencies—to create design that communicates effectively. Good luck out there in flatland.
With love,
—A flat designer.
