Flat design :
Sober design, uncluttered, it’s good…
But not losing its identity is better!
Since the arrival of responsive sites and templates more or less free, the era of flat design continues. Welcome to a world of purity and sobriety, where flat colors, iconography and typography are intermingled.
But (because there must be a but, without which this article could not exist), who has never heard: “Hey, I have a great site to show you!! oops … wait I can not find the name … many sites look alike!” You will have understood: the risk is to lose its identity, or to transcribe it only partially. What a frustration! So what tips can help you inject brand values and invest the entire user experience?
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
1 / The importance of the typography’s choice
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
The typographic choice for titles and subtitles is the continuity and/or complementarity of the logo.
- It must represent the values that the brand wishes to convey, thus: a round and voluptuous typeface can represent the greed, the taste / a fine typeface with bevelled serifs can transmit historical values / a round typeface with rigid serifs can put forward the particular technicality, everything can be interpreted infinitely! Whether it is serif or sans serif, full or empty, lowercase or capitals, the typeface brings a personality, and defines the character of the site / brand.
- In addition, the variation of sizes between title / cap and content is important: it allows to understand at a glance the structure of the text block.
- For content typography (i.e. paragraphs of text) we will prefer a typeface that is easy to read, especially on a screen that may be small, aka smartphones.
Some concrete examples:
https://nuri.com/
The typography of the titles is the continuity of the logo, it is thick, static and supports the seriousness, the robustness of the proposed financial solution.
https://spielzeit.jungesschauspielhaus.de/pinocchio/ The typography of the title complements the logo: it is at the same time playful, whimsical and brings movement thanks to the diagonal orientation of certain letters, which is rather adapted for a theatrical activity with children. The logo does not contain any fantasy but is still very playful because of its roundness.
https://ferro13.it/it The typography of the title comes in complement of the logo. The logo highlights the artisanal aspect of the wine brand; the typeface of the titles illustrates the strength, the quality of the taste of the proposed alcohol.
///////////////////////////////////////////////////////////////////////////////////////////////////
2/ A photographic choice of identity
//////////////////////////////////////////////////////////////////////////////////////////////////
To best illustrate its identity, the ideal is to find a common artistic direction to all the visuals present in the site.
For this, there are an infinite number of possibilities:
a common type of framing: overhead views, sharp foreground/blurred background, low angle…
a common type of light: low angle light, natural light inside or outside…
a particular graphic treatment: black and white, two-color, a reminder of a motif on each photo, addition of a filter of a specific color…
A few examples to illustrate these remarks:
https://www.davidwilliambaum.com The photos have a limited color range, a common contrast and saturation. Thus, the overlap between all the photos gives an impression of quality, and not of disorganized carnival 😉
https://asmobius.co.jp/ A series of visuals whose framing shows a depth of field with a dark filter particularly marked on the edges give an impression of homogeneity between the photos.
https://www.voyageursdumonde.fr/voyage-sur-mesure All the pictures have the same level of saturation with a light dark grey filter. Thus, we feel a good level of quality on the trips proposed in this site.
https://nuri.com/bank/ On this site, the visuals are mainly clipped photos mixed with illustrations with a common colorimetric range, which gives an impression of seriousness, confidence.
https://www.alexfrisondeisla.com The photographs have a common grain, as well as a slight animation with the same effect of movement.
https://editorialnew.com/ On this site, the photos contain a stretched pixel. The interest is twofold: on the one hand, it gives a visual orientation to the user, he/she knows where to look next, and on the other hand, it creates a global coherence in the navigation of the site.
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
3/ The pros: the behaviors/interactions to the roll, to the scroll…
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
The behavior of buttons, images, animations generated by scrolling, rolling, clicking… All these small interactions can support the values of the brand. Beyond the visual identity, they will bring a feeling, an atmosphere, another dimension to the interface and thus deepen the user experience. The interest, of course, is to find the visual effect that will support the purpose. If not, it would only be a “cool” effect without interest.
Some examples:
https://www.kikk.be/2017/en/home On this site, the content is located in an underwater world, where light animations of bubbles float permanently and on the roll, an aquatic movement effect appears on the visuals.
https://spielzeit.jungesschauspielhaus.de/listen-to-my-story/ On this site, when you scroll down, a frame by frame animation is triggered with actors playing to support the fact that this is a playful and theatrical workshop with children.
https://www.leroymerlin.fr/big2/guides-2021/experience-inspiration/box-rangement-chambre-ado.html Here, at the bottom of the page, an animation is triggered by the scroll after reading the title “take a tour of the owner” like a map that unfolds to locate where you are. The editorial is in correlation with the proposed animation.
https://zonanorte.27films.fr/ This site presents portraits, for a greater immersion in the character, a slight zoom is done automatically, when we change the portrait, a transition with a flash effect appears, as if the user took the role of a photo reporter.
https://solace-store.com/pages/lookbook In the lookbook section, an animation of photos that spread out on the screen takes place, like the Internet user who wants to create his own trend book. On the roll, the image zooms slightly, as if we were holding it in our hand to bring it closer to our eyes.
https://lpalo.com/ This site offers offbeat podcasts for children, all the navigation contains surprising behaviors with a playful tone: Rolls that change the perception of the page, elements that animate on scroll.
/////////////////////////////////////////////////////
So, to summarize:
//////////////////////////////////////////////////////
To transpose a visual identity on a flat design interface, a subtle alchemy between the typographic choice and the iconographic choice must first take place.
If you want to add a global atmosphere to the interface (and if the budget allows it, because after all, this is also “real life”…), behavioral animations can contribute to a better immersion. For this, the choice of behaviors is crucial because it must fully illustrate the brand’s values.
So, with all that, your interface is on the right track, at least… from a visual point of view, ergonomics is another story!