Flat design types
Long ago, web designers were focusing on impressing their website visitors by their skills in drawings, whether it was animated or decorative then turned their thoughts to real life, where they considered it as their inspiration source and they worked on connecting it to the design, so, to be easier for the user to handle it, as this type of design was concerned in displaying elements in a real-life design image through some factors such as drop shadows and gradients ... etc, and was called "skeuomorphic".
Then the designers inspired from this type a design trend which is simpler, more elegant user friendly, easy to use and also comfortable to the eye while navigating the content of the website because of its bright colors and few details of its elements which are inspired from real life, so it is familiar to the user, this design trend is the "Flat Design."
So .. what Flat Design?
"It is the minimal design trend that achieves usability ways"and what do we mean by “the minimal”?
The purpose of the minimum is to give the designs the functional trait which means the lack of decorations that the design elements relies on like in the case of "skeuomorphic" trend, as it is not necessary, while what is important is to attract the attention of the user easily and be his guide in website, as to achieve the user's perception quickly.
For example, simple images deliver messages faster than which contain many details; for example: images that are similar to the icons indicate a particular purpose are been realized by the user quickly.
You can see in the next picture the difference between the skeuomorphic and the flat design, you will find sharp colors and relatively large shapes that attract the attention and the meanings of the icons are realized easily.
In the previous image problem of skeuomorphic appears, and it is designing things in realistic forms, and is placed to attract attention only but lacks in functional trait, that does not mean it is useless as we always need it because its elements are real and the user interact with it easily, but its only problem is the abundance of the details that may be useless and placed as a means of entertainment for the user.
While the Flat Design is engaged to the user experience, so it is dominated by the functional trait and the lack of details, and this also would bring it aesthetic touch as the websites are designed extent of how they work and they effectiveness with the user, more than what they look like to him.
And all this makes the advantages of Flat Design clear to us:
- Purity and the presence of open spaces, allowing the integration of detail without the interference of the design.
- Edges without shadows.
- Sharpness of colors, simplicity and lack of details.
- Finally dominated by its functional trait that makes it achieves user experience effectiveness.Its effectiveness lies in the user’s sense of hierarchy in the design as the items are placed in a comfortable way to the eye.
While the fundamentals of Flat Design are:
- Simple elements and are represented in buttons, icons and simple shapes that designers always tend to, like rectangles, circles and squares, and edges can be formed by angles and curves, taking into account the elements of the user interface and handling it such like buttons that navigate the user to new pages, it must be designed in a way that stimulates the user to click on them and be with distinctive colors and clear lines.
- Typography, fonts must be bold, clear and simply worded and the typefaces also be compatible as it is preferable in Flat Design the use of Sans Serif typeface where it is more compatible with weights for different lines, the important thing is to achieve craftsman and optical harmony even if it costs you creating new unexpected font.
- Color, as color palettes of Flat Design composed of large number of colors, but from 6 to 8 colors only can be used, as primary and secondary colors have a huge popularity in addition to the specific types used in Flat Design and has a particular popularity, such as purple, green, blue, yellow, orange, silver, cyan and also gradients, that we get it with high purity without dilution and without decreasing in color opacity, unlike the color palettes in other projects that focus on chromatin, or just three colors.
Flat 2 (Flat 2.0) Trend
Can be considered the last stage of the development of Flat Design, that turned radically from the first trend (skeuomorphic) which was widely separated and working with it too. Featuring with more fun through getting out from the hardness of Flat Design and this is what we will observe in the next picture.
Let's see how they are different.
- We can see the highlighting the of the hatt and thus the emergence of gradients shades on the front, the eye and the nose.
- A slight difference in skin freckles, we can find that the flat 2.0 takes different values.
- The tie also takes different values and has a drop shadow.
- Finally we can notice the highlighting on the glasses clearly and it also has dropped shadows with different angles.
Well .. let's see trends that Flat 2.0 tends to:
efficiency and simplicity of usability, but this task is not as easy as it looks, as this means fewer items that lead to the lose of fun and exciting traits to the user, so you must find a compensation that fulfils good impression and wonderful experience to the user.
One of the best techniques in the shade is the long shadow where the item is placed at an angle of 45 degrees and when focusing on the element the shadow is gradually fading shadow, that adds depth to the elements without sacrificing the minimalist look that makes an attractive design.
“Sans Serif” is used in the Flat 2.0 trend, but with the same thickness so as not to draw attention and the biggest focus be on the graphics, also to make sure of the ease of reading.
There was no objection to the traditional method of the clickable elements, such as blue links, raised buttons, three-dimensional effects buttons, from here ghost buttons appeared, as when it incorporate into your design can be used as CTA (as a means of interaction with the user) with an attractive style.
Ghost buttons are composed of colorful sharp borders with shiny colors, and inside it descriptive text as you can see in the picture, when you move the mouse over it, its color fades, and then you can click on them.
As we agreed that the minimum look made to keep UX with its few important elements which is a difficult task, whereas the user notice the lack of elements and the wide empty space in the design, leading him to boredom, so it was a solution to make designed with contrast colors with the background color, and by this contradiction the user won’t feel bored.
And so, a new coloring trend appeared the called “Accent Color”, its idea focusing on contrasting colors with a solid background and this will be good with the basic colors particularly with white and black, where they highlight the sharp colors of Flat Design and make them brighter also elements will be surrounding each other and this will give the designer the ability to control what to focus on and what not.
To keep the user exited about the website or the whole design and also leaving good impression to him, some icons must exist next to the basic elements, taking into account designing the icons in bright colors, cartoon designs and a size that allows adding more details, all of this make the icons an essential element for the vitality of the website.
Favored by designers for its flexibility and depth in designing the user interface, and also preferred by users for its bio-minute details, on the other hand is not favored by some designers who are dealing neutrality with it away from Flat Design, as they considered it loses the Flat Design characteristics.
We can now compare between the flat and the flat 2.0 in one sentence The Flat Design sacrificing by the needs of the user in order to achieve usability, simply, the element loses some of its details, however it isn’t flexible like Flat 2.0 trend where it is able to achieve the equation of the aesthetic and usability.