Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year. It has frequently been compared with skeuomorphic design, because of its completely opposite principles and style.
Designers have voiced questions over whether this is a lasting trend or just another passing fad. Regardless of the future and the voices against flat, most designers have been tempted to try implementing this trend in some of their work. Here we’ll delve a little deeper into the style, its historical roots and how to start designing in the flat style right away.
read moreFlat design can be used to create really beautiful, simple interfaces, but it’s not necessarily appropriate for every project. Be mindful of what you’re trying to achieve visually and what you want to communicate.
As the name indicates, flat design is defined by flatness of style: simplifying an interface by removing extra elements such as shadows, bevels, textures and gradients that create a 3D look.
The idea is to create a finished design that lives in only two dimensions, without losing any of the functionality that a “regular” interface provides. This creates a new challenge for the designer, because by stripping an interface of its decorations and effects, it becomes harder to define the main actions and elements in a design.
When creating a button, using a border, gradient and drop-shadow will make the element stand out against the background and content. This makes it easily identifiable as a clickable element. When creating a flat button, you can’t use these details, so the focus should be put on grid organization and color contrast. You can use bevel and shadow as long as you keep the flat look of the button, but you’ll want to make these controls as simple as possible.
Forms are a crucial element to get right in a flat design. Text areas, inputs and dropdowns shouldn’t use inset shadows as they usually do by default. You can change this by styling the form elements with CSS yourself: see this post on how to create a simple login form and style. Or, if you want to have full control over your elements, try using a plugin that supports themes such as uniformjs and style these themes the way you want, or even create new ones.
Typography is a very important element in flat design. Since the interface is more minimalistic, you can use typography to help you create the style and mood you’re looking for. You can set a mood just by using a custom and specific font with a flat design outline. Since the background is simple, the font will pop out and set the style for itself. See these uses of typography in flat design to inspire you and learn how others are using it to achieve a particular look.
A fundamental part of designing an interface is defining a color palette. The color schemes used in flat design interfaces tend to be bolder and brighter than some other color palettes. Flat UI Colors was developed with this in mind and is a great place to check out some of the best (and most popular) colors being used in flat design today.Color choice is especially important in flat design, because when you’re using flat buttons, these colors will be one of the main identifiers that help the user recognize them.
Usually, you’ll want to make buttons square or square with rounded corners, depending on the style of the site. You can be more creative and use other shapes such as circles, triangles or even custom shapes, but keep in mind the latter might be a bit more risky.Be sure to maintain consistency throughout your interface controls, and to organize content in such a way that the user will be able to identify and recognize your titles, content and controls.
If you create a beautiful design that users can’t understand, then you are hurting the product. Trends and styles should always be used in harmony with the objectives of the project. It’s easy to lose yourself when creating visual work that’s clear in your mind, but at the end of the day, numbers and tests with users are always the best way to know what’s really working and what’s not. Sometimes a simple change can make a great difference to the user.
Historically, in design as in fashion, trends tend to shift continually between the complex and the simple. This is becoming more obvious in the visual design field, especially in web and multimedia, where designs are more ephemeral and don’t last as long as in traditional print supports.
The term “Flat Design” was coined and popularised by Allan Grinshtein, from LayerVault,a Version Control for Designers. In his post “The Flat Design Era”, Allan explains that “elegant interfaces are ones that have the most impact with the fewest elements”. The idea is that a minimalistic interface can be better suited to its function when compared to a more embellished, complex one. The community took this on board, having being bombarded with skeuomorphic interfaces over the past year. Since then, flat design has come on in leaps and bounds. Most flat design schemes have five characteristics – no added effects, simple design and UI elements, a focus on typography, a focus on color and an overall minimalist approach. You can find out more about these characteristics in Designmodo’s post on the Principles of Flat Design. You might also want to check out the Flat UI Free Interface Kit.
The biggest player in Flat Design, and the first to bring this style to the forefront, was Microsoft. In 2006, Microsoft launched the Zune music player. It was expensive, applied DRM to your music files and was a commercial flop. But even though Zune wasn’t commercially successful, it was a first step in defining the rest of Microsoft’s design for years to come. Zune’s interface was minimalistic, with a focus on light and big typography, and an interface free of surplus details and elements.
From 2006 to today, Microsoft has used Zune as a foundation to develop its image and visual interface, becoming cleaner and flatter. Other products from Microsoft also influenced this style, such as the Xbox 360 dashboard, a square-based interface that used simple iconography and typography. Windows 8 “Metro UI” was probably one of the biggest interface overhauls at Microsoft. Its simple geometric interface was replicated shortly after on the Windows Phone 7, a smaller, mobile version of Windows 8 interface.
If you want to receive my new topics about design, you can subscribe below: