First off, I do know that flat design is a dated language (all hail material design!), but this is not an article which will tell you about what it is (maybe a little for my non-designer friends!)
I’m a big fan of the flat design language, but only when its done right. It pains me when I stumble upon flat design that is poorly executed in webpages and apps. This article is about one such application of flat design.
As the name implies, the elements are flat, meaning they do not have any depth. (Shallow beings, huh?). Every element be it a button, an image or a video is essentially on the same plane.
This simplicity is what makes this design language attractive. It is simple, clean and easy to implement. When used in the right way, it can make any webpage look and feel elegant and modern. It is a paradigm shift in design where people transitioned from wanting to fill up the entire screen with content, relevant or not, to wanting to leave generous amounts of negative space.
It is, in most cases, stripped down to display only the most important content, content that deserves our attention. Another huge advantage of flat design is the absence of effects like shadows, depth, highlights, textures etc. This makes tweaking and iterating the design easier than before. Here are a few examples of flat design interfaces.
With that said about flat design, lets meet the star of today’s roast, www.gnosh.co.uk. Please visit it if you can/want/feel like it. If you can find out what the website is about in the first few seconds, I salute you. I had to scroll down and hunt for what the website is about.
It has the flat design language? yes. It looks modern and trendy? yes. It looks awesome? yes. It is easy to use? NO!! Absolutely not.
The entire page is filled with text in a variety of sizes, styles and orientations. So, which of these text are buttons and actionable items? OOH! I like guessing games! -_-
Have a look at a few examples below:
So, which is a button and which is just plain text? There’s nothing to distinguish actionable from non-actionable items on the page. Buttons w/o borders like in pictures above are not immediately evident that they are buttons. I ended up clicking all over the page trying to find which text was clickable. Their page analytics must’ve definitely gotten excited by all those clicks hahaha!
Some text which actually look like they are clickable are not.
Well, it says “share” and it is underlined. So, it must either be a share button or a link right? right? Wrong. It was just the background. All these small misuses of flat design principles have turned using this website into a cumbersome experience.
Another aspect which bothered me a bit was the near whimsical arrangement of the elements. Theres a semblance of a grid system, but mostly looks random. Why am I not bothered much by this? You’ll see!
I’m done with the negatives and I have to give credit where it is due.
I’d like to begin with the overall design and layout: Very bold, very different and an awesome attempt, I have to say. I’ve personally not seen a layout as different as this one. The designers have used negative space very well IMO.
This is the one single design aspect which reduced the impact of the random arrangement of the elements on the screen. The negative spaces helps the eye move freely thought-out the page and gives some much needed breathing space. Though I must admit I experienced a little discomfort after spending sometime scrolling up and down the page. Could be due to the scattered elements? Maybe…
So, what did I learn from this? To be very careful using flat design language. I learned the importance of using borders as visual indicators of actionable areas and more importantly, this served as an excellent example on how the right use of negative space in your layout can have a positive impact on the perceived ease of use.
The most important of all, I learnt to not sacrifice user-experience for the sake of design.
Design is not just what it looks like and feels like. Design is how it works.
– Steve Jobs.