Qlik Community

Ask a Question

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
Support Cases coming to Qlik Community Oct. 4! Start chats, open cases, explore resources. Prep for the big move: READ DETAILS
Not applicable

When Microsoft unveiled its Windows 8 UI, which they called the ‘Metro’ style, there were whispers of a new underlying design concoction which was happening in an effort to set a trend. The whispers quickly turned into a buzz when Google switched their visual design and UI for all its platforms to bold and contemporary. Then came Apple with its iOS 7 designed flat as paper which turned the big buzz into what was being called a design revolution which was the antithesis of faux bevels, shadows and the real world lookalikes.


“There is a profound and enduring beauty in simplicity, in clarity, in efficiency, true simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity” these are words from Sir Jony Ive, the chief designer of all the beautiful Apple products we own. It was just déjà vu for some of us who thought it was like the return of the BAUHAUS.


So what exactly are we talking about?


It is about a Design style, an approach to UI that has become a mainstream and what everyone seems to be following these days. It can be seen in websites, mobile apps, print, branding, logos, icons and even in dashboards. It is called Flat design.


So what exactly is a Flat design and what is not a Flat design?


Flat design is essential visual elements that are literally flat, they are without any shadows, bevels and gradients. Apart from its elements Flat is minimalistic in its style and places greater emphasis on colors, typography and imagery as core design principles. Basically it is striping off the ornamentation which doesn’t support the UI and doesn’t mimic real-life objects. Something like this...

a.jpg

And this..

c.jpg

What is not flat design is obviously completely the opposite, and the word for it is “Skeuomorphism”. Skeuomorphism is something that mimics a real-life object, just like the previous Apple UIs before iOS7. Something like this

d.png

…As opposed to this.

e.jpg

It is obviously a design language of the present times but there are certain pitfalls that come along with it that are hard to ignore. They tend to blur the line between navigational elements and aesthetic elements within a design. This means certain UI elements like buttons and toggles merge into the background and cannot be recognized quickly as action items. But again, it depends on how they are designed.

Design is a combination of science and aesthetics; however, visual design is also a lot of personal aesthetic choices we make to support the user interface in becoming seamless. My style choice may not be someone else’s. As a designer, I like following the trends to avoid looking like a pair of bell bottom pants in the age of skinny jeans.

Another argument for moving away from the age old Skeuomorphism is that we have come such a long way in the digital world that the need to relate to real-life objects in the digital sense seems redundant.

So, what should one follow? You can follow your own style of design as long as it justifies the purpose. And if you are the fashionable type then just remember to do a contextual based design, which means do it where necessary and strip off where unnecessary. Just like how Google gets it right, a little shadow where needed but mostly flat.

f.png

26 Comments
rwunderlich

Great post. Crisp and clear and well..Flat. Any chance the Design Team will be producing a theme (qvt) file that implements this flat style?

1,030 Views
MK_QSL
MVP
MVP

Interesting post.... can we have a practical representation of the same?

0 Likes
1,030 Views
IAMDV
Luminary Alumni
Luminary Alumni

Great post Apeksha. Timing of this post can't be any better because even the re-branding of "QlikView" to "Qlik" is not just the name change but the logo has become flat as well. Most recently I have seen this in Windows Surface, Google Maps and others adopted this style. Beauty is in simplicity and personally I'm kind of bored Emboss, Bevel, Rounded Corners and Drop Shadows. But most of the companies have a design standard and they still prefer old style (real life designs). Hope things change soon!

As mentioned by Rob. It's good to have a theme while Flat is in vogue.

Thanks,

DV

1,030 Views
marchoctober
Creator
Creator

Hi!

Thanks for the information. Do you plan to share some files furthe with design templates?

Eugene.

0 Likes
1,030 Views
stevedark
MVP
MVP

Hi Apeksha,

Great to see that the thoughts I put forward in my blog post on simplifying QlikView design ( http://www.quickintelligence.co.uk/keep-qlikview-simple/ ) echoed by Qlik staff.

One of my concerns about .Next is whether it will be possible to build these UI's that feature text boxes to convey information rather than dynamic charts.

0 Likes
1,030 Views
mvanlutterveld
Partner
Partner

Nice post! A great example of less is more.

0 Likes
1,030 Views
Not applicable

Nice Post..

0 Likes
770 Views
rajeshvaswani77
Specialist III
Specialist III

Nice Post Apeksha.

0 Likes
770 Views
ThornOfCrowns
Specialist II
Specialist II

Interesting post.

I have had several 'discussions' with Apple advocates over the Scorched Earth approach to Skeuomorphism in the lastest versions of iOS. I prefer the Google versions of softening the flatness with a little shadow, etc.

Sometimes, of course,the object you're trying to emulate is a thing of beauty in it's own right - I want my 808 emulator to look like my original 808!

0 Likes
770 Views
Not applicable

Hi everyone, Thank you for responding to the post.

We don't have plans as of yet to make templates of themes available in the flat style, but you could keep an eye out for upcoming demos which might be helpful in new providing ideas.

0 Likes
770 Views