As a design savvy person you’ve most likely come across the the term flat design somewhere in your online activity. Whether it be a website, an icon set, a poster or user-interface, flat design is everywhere.
A large amount of people are calling flat design a trend, something that will come and go relatively quickly. Whether this is the case or not, its important for designers to stay up to date and on top of trends. Good designers don’t refuse the existence or the acceptance of something they don’t like. Instead, they continually evolve their skillet with trends insuring their individual style stays relevant.
There are a number of articles on the web showing great examples of flat design, inspiration here, examples there. However there are very few explaining exactly how to achieve a flat design look.
Flat Design is somewhat difficult to define as it doesn’t really refer to one single concept. Instead it can be thought of as number of concepts and practices that together, makeup an umbrella term. -Joseph Howard, pencilscoop.com
Here is a quick recap of what we will be looking at.
- Color Choices
- Typography
- Icons
- Images
- Space
- Do Nots
Color Choices
Ok so first things first, let’s look into color palettes. There are a lot of people out there saying that flat design must use bold colors. This is untrue. Flat Design colors are not always bold, often they are quite the opposite. Often colors are not solid hue’s but rather off shades, with a significant amount of lightness, gray and lower than usual saturation levels. You will often find that pastel shades work quite well also. Lastly, solid bold colors can be used are are used with success, take the Windows 8 design theme for example.To find out more about color palettes, read our tips on Photoshop Color Swatches.
For a good list of free color palette resources check out this article here.
Here I have created a color palette that works well in Flat Design. Save it your computer and use it for future reference.
Typography
Ok, typography and Flat Design, another important consideration. Typography is a massive subject, with an almost endless amount of information and details. We have written, significantly about typography in the past, but for Flat Design there are some other considerations.Firstly, most traditional serif fonts will not look good and are not well suited to flat design. Having said that, feel free to use Slab-Serif typefaces like Rockwell or Sanchez. If you really want your flat design to look authentic, go for some modern, clean, Sans-Serif fonts.
Some good fonts to use are:
- Helvetica Neue
- Myriad Pro
- Open Sans
- PT Sans
- Proxima Nova
- Eight-One
- Continuum
- Melbourne
- Compass
- Aller
- Aleo
Icons
Icons make up an important part of any design, whether they are glyphs, symbols or large logos. In flat design it’s important that your choice of icons reflect your design theme. Over-sized icons can work well, as well as smaller glyphs. One thing, ensure your icons have no gradients and contain either completely sharp edges or strong rounded ones.For a good list of icon pack resources check out out Ultimate Collection of Free Glyph Icons.
Images
If you are going to include images, a good tip is to ensure they are filtered or stylized. Often many flat design websites use full width images that stretch the entire page. Image borders are a big no no in flat design, so ensure your images cut off directly without any borders.
Space
Using space correctly is hard thing to get right, too much empty space and your design will look bare. Too little and you run the risk of making it look cluttered. It’s always easier to subtract rather than ad, so a good practice is to include all the elements you want, and then subtract until you are left with only the essentials.Traditionally, Flat Design uses large amounts of open space, so try to keep your designs nice and broad.
Do Nots
There are some major considerations of things not do in flat design, some more important than others. Remember, flat design isn’t a science. As Morpheas says, ‘Some rules can be bent, others broken.’Here is some things that should not be done:
- Try not to use gradients. If you need to, ensure they a subtle.
- Don’t use drop shadows.
- Don’t use borders on design elements.
- Try to keep serif based fonts to minimum.
0 comments:
Post a Comment