Have every post delivered to your inbox and get access to hundreds of useful design freebies.
As a design savvy person you’ve most likely come across the flat design trend.
From Windows 8 to the blogging community, flat design is HUGE. And it’s only getting bigger…
As designers it’s important to stay on top of design trends. Good designers don’t stay stationary. We learn, evolve and master new skills and trends.
There have been a few articles circulating giving some solid examples of flat design. However, I felt it was important to explain exactly how to achieve the coveted flat design look.
Keep reading to learn the 9 key principles that will help you master flat design:
A signature element of flat design is bright, bold colors.
Take a look at the examples below. Large, brightly colored panels of color are a key element of flat design:
So how do you choose a suitable color palette?
Well you can always play around in Photoshop, but to make your life easier, DesignModo have put together FlatUIColors.com. The site provides a series of color swatches that you can easily click on to have the hex code copied for your usage.
The site has become so popular that these colors have come to define the trend. Check them out by clicking the image below:
To extend the bold color technique, you can get a little more varied with your color palette.
Generally speaking I like to limit my website’s color palettes to a minimal number of colors.
However, flat design often uses a variety of bright colors, often in the form of background panels.
As long as the colors are complimentary, you can combine multiple colors and background panels in a beautiful series:
Typography is a huge part of successful flat design. Often elegant typography will become the centerpiece of the design, as the flat background colors don’t detract from the textual elements.
It’s interesting to note that many successful flat design sites use uppercase lettering.
Take a look at the example below. Many sites are using uppercase text for navigation items and key headlines.
It’s also very popular to use white text over either a flat background color or a photographic background.
As we’re dealing with flat colors, this is perfectly suited for vector artwork. Vectors are inherently constructed by flat shapes and clearly distinct areas of color.
By adding some simple vector style illustrations you can accentuate the flat nature of your site.
Check out The Noun Project for some great flat style icons and illustrations.
If you’re a fan of great design being in the details, then don’t worry, you can still have these awesome details within your flat design.
Often flat designs add extra details to the panels of flat background color. These can often be more visually impactful than a basic gradient.
The important thing is to make these extra details or patterns flat in themselves. This way your background will still be very clean.
This technique is nothing new, but it’s very prevalent in flat design.
Make your page elements large and give them a lot of padding.
This way you avoid a cluttered, busy look and give your page a clean, minimal look, which perfectly fits with the flat design trend.
Another common feature of flat design is taking advantage of advancements in HTML and CSS.
Flat designed websites may be typically very simple, but the visual spectacle is often achieved by inspired transitions and other page effects.
Click through to the site below and scroll down to see a great example:
Whilst it’s not strictly ‘flat’, many flat designs are using panoramic photos.
Not only are these a strong visual centerpiece, but they often make the overlaid elements of your design (such as the headline text) look even flatter through contrast.
I’ve personally been using DesignModo’s Flat UI kit for some of my recent designs.
It takes a ton of the hassle out of designing from scratch, but is versatile enough to allow you to create highly original, professional designs.
DesignModo are absolute god’s in the UI design world, and are the go to place for huge, practical UI kits.
Check out some of the features included with this UI kit:
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.