Why study flat design?
What is flat design?
How to design like flat design
More tips on flat design
Some more on colors: basics
Some more on typography and text
Problems with flat design
Examples
Sources:
- Simply, it has become a trend since around 2012. It has been really big since Microsoft employed flat design on its Metro UI.
What is flat design?
- Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations.
- In flat design, ornamental elements are viewed as unnecessary clutter. If an aspect serves no functional purpose, it's a distraction from user experience. This is the reason for the minimalistic nature of flat design.
How to design like flat design
- Overall design: All elements of design should contribute to the idea of simplicity and yet usability.
- Colours: should be vivid and solid to give emphasis on important points.
- Typography: should be clear and clean to be noticed
- Text: should be concise and to the point.
- UI elements: clear and noticeable.
- Effects: no added, unnecessary effects. No drop shadows, bevels, embossing, gradients or other tools that add depth.
More tips on flat design
- Less is more: concentrate on drawing the user's attentions only.
- Flat means flat: minimise the use of shadows and 3Ds. Make it flat.
- Make it a better experience: avoid excessive ornaments. Make it more responsive to more devices. Decrease the loading speed by making the design elements less and simple. Focus on the function.
Some more on colors: basics
- The most saturated and bright colors stand out amongst any light or dark background.
- Utilize many different colors.
- Matching saturation and tones, picking shades that are complimentary when deciding between primary and secondary combinations or a different part of the colour wheel entirely, are all factors to take into account when creating a cohesive and stunning design.
- Color palettes for flat design projects often contain many more hues as well. While most color palettes focus on two or three colors at most, flat design palettes may use six to eight colors equally.
- When it comes to color and flat design, many of the traditional rules about color pairing and matching are thrown out of the window in favor of palettes that span the rainbow with lots of pop.
- What we are seeing more of with flat design and color though is the matching of tone and saturation. While designers may choose to use quite a few shades, they will often mirror each other in how deep the color is, whether it is a more primary or secondary color combination or from another part of the color wheel and whether colors contain more black or white mixes.
- see coolers.co for automatic color schemes.
- Flat design schemes often trend as super-saturated and bright, more retro or monotone.
- http://flatuicolors.com offers a set of great flat UI colors.
- If you want to pair your own bright colors in a flat design scheme, opt for simplicity. Choose colors that have similar color tones and saturation. Plus we’ve given you a few color swatches with values to get started.
- Retro color schemes are also popular when it comes to flat design.
- These less saturated, but hues build on the idea of bright colors but with the addition of white to make them more muted. The look is not that of a pastel but distinctly old-school. Retro color schemes often contain a lot of orange and yellow and sometimes red or blue.
- It is more common to see primary and secondary colors used in retro color schemes when working with flat design, because of the toning down of the color.
- Retro colors work best when they stand along as a dominant color element. Pair them with images or muted colors for the best results.
- Most monotone color schemes use a base color and two or three tints for effect. The most popular color choice seems to be blue, but many designers are opting for a monotone color scheme based on black (grays as well) with a pop of color such as red for buttons or calls to action.
- Another option is to create a monotone effect using slight variances in color. If you start with blue, for example, add tints of green to create a scheme of blue-green color.
- Just like with other color palettes, monotone schemes also need to include contrast. Mix tints to that each different “color” is distinct from the parent color. Start with a full color (100 percent) and tints of 50 percent, 20 percent and 8 percent.
Some more on typography and text
- Recommended font: Sans serif typefaces.
- Words are essential: they communicate a message, provide navigational tools and tells users what to do on your site.
- Typefaces that are crisp, sharp and use clean lines with even strokes typically fit well with flat designs, enhancing the aesthetics and overall minimalistic feel.
- Wisely adjust the font size and styles.
Problems with flat design
- Sacrifice of users' needs for the sake of trendy aesthetics: For years, users had been exposed to traditional signifiers of clickability, such as blue, underlined links and 3D effects on buttons. As design trends shift and users are exposed to new patterns, the average user’s ability to intuitively identify linked elements has evolved. But just because users are better at detecting linked elements doesn’t mean they don’t need any clues at all.
- “When it’s blue and underlined, that’s how you know initially. You see that even in Word and stuff. But really, especially when it’s underlined, that helps. Or if it’s a button, it doesn’t have to say Click here, but if it says, Buy now or Purchase or Add to cart.” - Things flat design may lack.
Examples
- Google cards
- Windows 8 metro UI
- Solar (Weather app)
- Nation (https://www.wearenation.co.uk)
- See the post Flat 2.0.
Sources:
- http://www.creativebloq.com/graphic-design/what-flat-design-3132112
- http://www.fltdsgn.com/7-benefits-flat-design-infographic/
- http://www.hongkiat.com/blog/flat-design-resources/#flat_popularity
- http://www.hongkiat.com/blog/flat-design-resources/#flat_guide
- https://designmodo.com/flat-design/
- https://designmodo.com/flat-design-principles/
- https://designmodo.com/flat-design-colors/
- https://www.nngroup.com/articles/flat-design/
- http://www.dtelepathy.com/blog/inspiration/50-flat-designs-for-inspiration
- https://think360studio.com/wp-content/uploads/2016/03/flat-design-interface.jpg (cover picture)