Specs Howard School of Media Arts Blog

Where you find insights into the Media Arts industries!

    Web Design from 2012 to 2013: Skeuomorphic Vs Flat Design

    Posted by Gasper Rubino on Fri, May 10, 2013

    By Dylan Mierzwinski  The term “skeuomorphic” is enough to make anyone conjure up images of mad scientists and experiments gone wrong, but really it’s just a term for the main trend that was going on in web and user interface design in 2012. Although web design doesn’t wait for December 31st of each year to evolve, we do notice major trends and changes from year to year. This post will be all about the major shift designers have seen: From skeuomorphic to flat design.

     

    What is skeumorphic design?

    Wikipedia defines “skeuomorphic” as: “a derivative object which retains ornamental design cues”. This is translated into the design world as user interfaces that look how they do in real life. Design elements that have shadows, gradients, reliefs, usability, and details that resemble how that object would look and act in the real world. The one that should stick out the most to us is Apple’s use of skeuomorphic design. From their calendars to their tool bars, materials and details are very much derived from real world materials associated with each digital element.

     

    Apple Office,skeumorphic design, Graphic Design Tips, Specs Howard,

     The same is true with Apple’s iBooks. It doesn’t take much to realize that you’re looking at a literal bookshelf. Shadows, wood grain, sanding and all.

     skeumorphic design, Specs Howard, Graphic Design Tips,

    Apple isn’t the only user of skeuomorphic design, though. Tons of websites utilize skeuomorphic elements. Things like stitching, sticky notes, badges, and buttons are all included under the umbrella of skeuomorphism.

     Bluebell, skeumorphic design, Specs Howard, Graphic Design Tips

    bluebell.com

    You may be so used to seeing this type of design used that it seems obvious to point it out, but the fact is that it IS a trend that dominated in 2012 (a few years before, as well). Skeuomorphism is seen substantially in apps and software, too.

     Screen shot 2013 05 08 at 9.17.59 AM

    describe the image

    PROS             &             CONS

    • Skeuomorphic design orients people immediately. It allows for a more intuitive use which in a way opens up the floodgates for a larger demographic.
    • This design style has more depth, visually. I saw a site refer to skeuomorphic design as lending more “treats” for a user’s eye. Which can play into the next pro...
    • Skeuomorphic design may lend to a richer user experience. With more “do-dads”  in play, there’s a chance that your visitors with more time and less attention span will stick around.
    • It’s a designer’s dream. We love textures and attention to detail and that’s exactly what skeuomorphic design is all about.
    •  Skeuomorphic design is in the “more is more” state of mind which can hurt the audience that has a specific reason for visiting your site. When someone is looking for your contact information they could care less about your perfectly constructed gradient over stitched-leather texture (believe me, typing that brought a tear to my eye, too...but the truth hurts).
    • It can show a bit of lack in creativity and ingenuity. It takes a heightened sense of observation to not only pick up on the nuances of everyday objects but to be able to recreate them in a digital world, but to the user that isn’t a graphic designer, they’ll just think you’re lazy. Plus, think about how knobs work; they work because you can grab it with your hand and have control over speed and tension. A knob on a website that can only be used with the mouse is pretty useless. A good idea on the table isn’t always a good idea on the screen.
    • These designs take more time and look dated faster. Plain and simple.
    • Not really “responsive web” friendly.

     

     Which brings us to....drumroll please....flat design! (Wait haven’t we seen this before?)

     Yes, yes we have. Flat design is nothing new. Just like denim vests and metal studs, if you put it in the closet for enough time, someone will bring it back out and think it’s the best thing there ever was. Flat design, to keep it simple, is minimalistic design whose biggest detail is color. SOMETIMES you’ll see the subtlest of gradients. This sounds boring and like it doesn’t take much work, but flat design is a breath of fresh air among all the component heavy skeuomorphic websites with interactive piggy banks and pilot-tier control panels. What may look simple makes room for lean and mean interactivity and usability. The reason it’s easy to take flat design for granted is because it’s so easy to use. Think about a pitcher, the shape is simple and intuitive, but without the very simple spout, your liquid would go everywhere. That was an awful metaphor, but hopefully you get the picture. Flat design looks simple, but that’s because it is simple for the user. Flat design can be the result of a well-oiled-machine behind the scenes. Enough talk, here are some examples.

     Screen shot 2013 05 08 at 9.19.31 AM

    oak.is

     

    Screen shot 2013 05 08 at 9.19.37 AM

    bobgalmarini.com

     Just like skeuomorphic design, flat design doesn’t just lend itself to websites. Applications and user interfaces benefit greatly from a haircut and some flat design. Think about the latest operating system from Windows, Windows 8. The entire interface is modular and simple. The following are examples of various flat designs. Screen shot 2013 05 08 at 9.18.12 AM 

    flaticons.co

    Screen shot 2013 05 08 at 9.19.45 AM

     Screen shot 2013 05 08 at 9.19.50 AM

                 PROS                        &                    CONS

       
    • Usability, usability, usability. The user experience is swift and smart. More thought is put into how the site works instead of all the details of how it looks, so you can bet your bottom dollar that you’ll be able to get done what you need to, every time.
    • This type of design is conducive to responsive web design. For more information on what responsive web design is, go here: http://blog.specshoward.edu/blog/bid/269310/What-is-Responsive-Web-Design

     

    • It’s straight forward and honest. Flat design has been referred to as “two-dimension design for a two-dimensional screen”. It allows the user to feel like they can really see everything that’s going on.
    • At the end of the day, lots of sites will start to look similar. Even from the pictures above you can see that lots of geometric shapes and bold colors are used.
    • Although it is an art to be able to hold back as a designer, there isn’t too much deep design going on. Design planning, yes (planning different layouts for different devices, etc), but not as many creative button designs and such.
    • Sometimes things are so simple that it confuses people. Flat design calls for the designer to be able to strike the right balance between smart and convoluted.
    • Believe it or not, it’s more difficult. Lots of shaky interactivity and usability is overlooked thanks to beautiful and well designed skeuomorphic designs. Flat design calls for so much more engineer-like creativity. You can make buttons look pretty all day, but if they don’t work then what’s the point?

     

     

     

    So there you have it. The big change in web design style trends isn’t really anything new at all, but such is life. 

     

     

     

    Dylan Mierzwinski is a Specs grad who has had the opportunity to dabble in all that theDylan Mierzwinski, Specs Howard School Of Media Arts, Responsive Web Designdigital media world has to offer. Starting out as an editor, Dylan found her love for the web through admiring different videographer's websites. Wanting to have a hand in everything creative, she decided to take on web design. They've been together ever since. You can see more of her work at Dmierz.com

    Topics: Dylan Meirwinski, Digital Media Arts, Tutorials, web design, Graphic Design

    Click here for Consumer Information