JoomlaWorks

Member Dashboard
  • Home
  • Extensions
    • Commercial
      • Frontpage Slideshow
      • K2 Plugin for sh404SEF
      • Simple Image Gallery Pro
      • SocialConnect
    • Free
      • K2
      • AllVideos
      • DISQUS Comments for Joomla!
      • IAKI (Import As K2 Image)
      • Quick Menu (for Joomla 4)
      • Simple Image Gallery
      • Simple RSS Feed Reader
    • Free On Github
      • Akismet for Kunena
      • Fill It Up
      • K2 Example Plugin
      • K2 Links for JCE
      • Rebuild K2 Image Cache (CLI utility for K2)
      • TinyLetter Subscribe
      • URL Normalizer
      • User Extended Fields for K2
  • Templates
    • Commercial Templates
      • Anagram
      • Archetype
      • BusinessOne
      • Ibento
      • Janaro
      • Kiji
      • Matchbox
      • nuMuzik
      • RadioWave
      • Toreda
    • Free Templates
      • nuModusVersus
      • Takai
  • Demos
    • Joomla Extension Demos
    • Joomla Template Demos
    • WordPress Plugin Demos
  • Labs
    • Web Apps
      • JSON 2 JSONP
      • Feed Reader (bookmarklet)
      • Device Info
  • Support
    • Documentation for Joomla Extensions
      • AllVideos
      • Frontpage Slideshow
      • Simple Image Gallery
      • Simple Image Gallery Pro
      • SocialConnect
    • Documentation for Joomla Templates
      • General Resources
        • Installation
        • Content
        • Customization
      • Commercial Templates
      • Free Templates
    • Get Help
      • Community Forum
        • Recent Topics
        • Categories
        • Create free account
      • Help Desk
      • Contact us by e-mail
      • Contact us on Facebook Messenger
      • Contact us on Twitter
  • About
    • Blog
    • Company
    • License & Terms of Service
    • Privacy Policy
  • My Account
17 10 2013
Written by  Panos
Published in Blog
Be the first to comment!

Flat design as part of an on-going evolution

Flat design as part of an on-going evolution

So much has been said and done about this popular so-called trend that we call 'Flat Design' and which we see everywhere in websites and mobile applications. In fact it's so ubiquitous that it almost feels like there's some new rule stuck above every designer's monitor, fearfully stipulating something like: "Thou shall design everything to be as flat as possible". Let's look into some of the misunderstandings about flat design and how we can benefit from it.

 

Graphical User Evolution

Everything started as a problem in XEROX Parc labs in the 70s. A bunch of scientists were experimenting with new ways to make interaction with computers a lot easier than it was back then. It was a time when those rare-to-come-by, bulky, difficult to understand and use machines operated by typing cryptic commands on a clicky keyboard while staring on a black monitor with a blinking dot. 

So they came up with the concept of the Graphical User Interface or GUI. In simple terms, a GUI consists of a pointer, a pointing device, icons, a desktop, some windows and menus. Sounds familiar? I bet it does. It was a brilliant design concept that changed forever the way we interact with computers. But why is that?

Without getting into much detail, it's basically because GUIs use metaphors from the physical 3D world we live in. Every command became a series of clicks and drags with the mouse, on little images called icons that represented objects we are already familiar with. If you wanted to erase a file from your hard disk, instead of typing the command 'delete', all you had to do is click on an icon that represents that file and then drag it on another icon that resembles a trash can. It suddenly got so much simpler.

Here's a video of Bill Atkinson at Apple, demoing one of the first GUIs that were later adopted and refined by Apple.

 

 

Because we can ...not because we have to.

Good Design Makes A Product Understandable: It clarifies the product's structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.
Dieter Rams, "Ten Principles of Good Design"

So for the past four decades, designers had to use all sorts of realism as metaphors for the physical world, such as artificial light to create shadows and 3D buttons that looked 'clickable', textures, animation and sound effects in order to familiarise the user with the GUI. In many cases the entire interface would look and behave like a real life object or device like a bookcase for an application that stores and displays e-books, a tape cassette recorder for an app that plays podcasts or a calculator that has the same layout as the ones we use in the physical world. These are types of devices that we have come to know as "skeumorphic". 

It's also worth noting that although most skeumorphic interfaces tend to look realistic, skeumorphism and realism don't always go hand in hand. There are plenty examples of "flat" interfaces that make use of skeumorphic design. One of the most characteristic ones are the calculator apps we use on our smartphones. As you can see in the image below, the latest version of the calulator on iOS 7 doesn't use any realistic elements but retains the layout of the buttons found on stand-alone calculators.

55

Fast forward to the present, when computing devices and interfaces have become so ubiquitus that for the first time in interactive design history we don't have to use realism and skeumorphism to "educate" the user about the basics. We can safely assume that in most cases he or she can easily determine the functionality of the basic elements of an interface such as a button, or a menu without the connections to the physical world. 

Although we talk about it for the past couple of years, flat design interfaces have existed long before that, but the difference is that now we can safely assume that it is understandable for the average user. And this is truly liberating because it gives us the opportunity to create even more engaging and intuitive interfaces without making the compromises we did a few decades ago, for the sake of familiarity. After all, good design is all about making the right compromises to solve a set of well defined problems.

 

Flat design as a set of choices, not as panacea.

So does this mean that "flat design" is the only way to go & using any kind of realistic/skeumorphic elements is wrong? Of course not. Each decision to remove a realistic or skeumorphic element should be based on how well the end result serves the purpose of the speficic design. For instance, for the reasons that we discussed above, skeumorphism and realism tend to result in designs that are easier to understand and operate by novice users. So before going "flat", it should be clear whether the end result might have an impact on usability. In addition, good use of certain realistic and skeumorphic elements has the power to recall the memories of interacting with actual physical objects or devices themeselves. This is a great way to evoke the right emotions to achieve the desired user experience. It has been proved that pleasant experiences improve brain functionality for problem solving, which in turn means that by creating a beautiful and pleasant to use product your users will have better chances of figuring out how it works:

In a clever set of experiments, Alice Isen has shown that if people are given small, unexpected gifts, afterwards they are able to solve problems that require creative thought better than people who were not given gifts. The positive affective system seems to change the cognitive parameters of problem solving to emphasize breadth-first thinking, and the examination of multiple alternatives.
Norman, D. A. (2002). Emotion and design: Attractive things work better. Interactions Magazine, ix (4), 36-42.

Let's take a look at an example. Below is a screenshot from the website of Athenos:

athenos

Athenos.com is an awarding winning website, and a pretty good example of how flat design aesthetics and choices can be combined with realistic and skeumorphic elements. All the buttons and navigation elements on the site appear as simple and flat white or green rectangular areas which, by today's standards, are very easy to interpret as clickable. 

However the rest of the website is filled with all sorts for textures and shadows in order to evoke certain emotions and memories related to the kitchen and the traditional greek cuisine such as wood, marble, linen and paper all combined with images of objects that appear to be overlaid on top of these surfaces using shadows. The end result is a website that uses flat design and realistic elements on the right places to create a fun and memorable experience.

 

Flat design as a way to future proof your design

Another, more practical, aspect of "flat design" is the way that this approach has the potential to produce websites and applications that can be experienced in multiple devices without looking terrible or oversimplified. In fact, more and more devices are capable of accessing the web so it's practically impossible to predict what combination of hardware and software might be used to access any given website or application. It is evident that a future-proof design has to be as device agnostic as possible. 

Flat design has certain characteristics that happen to be excellent candidates for device agnostic design, such as the tendency to use simplified forms, ample white space, grids, typography and icons (instead of bitmaps). If you add on top of this the use of SVG vector elements (which are widely supported and best of all infinitely scalable), you can rest assured your design will appear clear and crisp on every device that supports all these features for many years to come.

 

Onwards

Flat design is first and foremost an indication that we have made an important evolutionary step in the way we interact with interfaces, especially in websites and mobile applications. Therefore, flat design should be regarded as a set of choices we have the freedom to make, as part of any design process, while being careful before discarding any of the realistic (skeumorphic) elements that might initially seem outdated and unneccessary. Last but not least, flat design lays the foundations to "future-proof" your next website or application for any type of device.

Read 20866 times Last modified on Wednesday, 28 January 2015 18:24

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

back to top
BY MAIL BY RSS

Archives

  • May 2024 (1)
  • March 2023 (1)
  • January 2022 (1)
  • July 2021 (2)
  • May 2021 (1)
  • February 2021 (1)
  • December 2020 (1)
  • September 2020 (1)
  • June 2020 (1)
  • May 2020 (1)
  • February 2020 (1)
  • January 2020 (5)

Tag Cloud

allvideos announcement apache community development frontpage slideshow future joomla k2 Performance plugin release sh404sef simple image gallery simple image gallery pro simple rss feed reader socialconnect tips update video

Latest Entries

  • K2 will not be made available for Joomla 4/5 - change of course
    Written by  JoomlaWorks
    30 May 2024
  • New free extension release: Quick Menu (for Joomla 4)
    Written by  JoomlaWorks
    06 Mar 2023
  • Simple Image Gallery (free) v4.2 released
    Written by  JoomlaWorks
    07 Jan 2022
  • Simple Image Gallery Pro v3.9.1 released (bug-fix release)
    Written by  JoomlaWorks
    26 Jul 2021
  • Simple Image Gallery Pro v3.9.0 released
    Written by  JoomlaWorks
    05 Jul 2021

Join Our Newsletter

Enter your e-mail address to subscribe to our new or updated product notifications. We send combined newsletters, so we won't spam you every week :)

Get Social

  • Twitter
  • GitHub
  • Facebook
  • GitHub (K2)
  • YouTube
  • Speaker Deck

Grab Our Feeds

  • Extension Updates
  • Blog
  • Videos
  • Presentations
Copyright © 2006 - 2025 JoomlaWorks Ltd.
JoomlaWorks Ltd. and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.
designed by Nuevvo