Flat Design Rising: Bold Changes to the Modern Website

The rise of flat web design. The fall of skeuomorphic web design. The year of responsive web design. It is just over a quarter of the way through 2013, and already this year is burdened with web design expectations, declarations, and some say possibly a revolution. The biggest rock star of the tech industry is firing senior executives and revamping software over this stuff. If you use the internet, the debate raging around these issues now is kind of a big deal

Why so much drama in the digital design world? There are many theories, but the one with the most math is this: mobile devices. According to a recent article in Forbes, by the end of this year there will be more mobile-connected devices on this planet than people. There is no denying the mobile device — there is a good chance you are reading this on one now — and the time has come for every organization to make sure their website maintains form and function on the small screen. The challenge for designers, then, becomes this: what is the best way to make a website look great on a desktop computer as well as a mobile device?

Responding to the Smaller Screen

Last December, when Mashable trumpeted that 2013 is the year of responsive web design, the battle lines began to form. Responsive Web Design (RWD) is a design strategy that allows a single website to automatically adjust and resize all the elements to fit any size screen. In the past, designers built separate mobile websites, or even mobile apps, to deliver content to the mobile device. There are pros and cons to each approach, and Diksha Arora of Vandelay Design breaks all three down nicely. I believe if you look at it objectively — that is, if you do not have a lot of time and resources invested in developing mobile site or apps — it is fairly clear that Mashable is correct, and Responsive Web Design is the way to go.

However, embracing Responsive Web Design has opened up a whole other can of worms, and one that is causing a civil design war: flat design vs. skeuomorphic design. Responsive design works best with websites featuring flat design elements instead of skeuomorphic design elements; blocks and rectangles are easier to move around and resize than glossy, 3D graphics. So what is the difference between the two?

Stitches vs. Rectangles

Flat design is, as Sabina Idler at Usabilla puts it, is “a two dimensional design for a two dimensional screen.” It was Allan Grinshtein at LayerVault who coined the term (or at least popularized it) in a viral blog post that declared that the “lickability” of websites heavy with bevels, drop shadows, and inset shadows “feels wrong.” A great example of flat design is your friend and mine, Facebook, which has always used flat design elements, while some well-known companies that have recently jumped on the flat train are Microsoft, 37 Signal (Basecamp), The Next Web, and Mashable.

Compare that to skeuomorphic design, which uses gradients and shadows and other design elements to make the digital interface resemble real-life products — like leather grain around a smart phone calendar, or stitching around the border of a crafting website, or even buttons on a website that have a basic 3D appearance so they look like, well, buttons. Some designers, like Mike Redaelli at Webdesigner Depot feel that while flat designs are slick and clean, they might actually fail at their core purpose, that “if our job as designers is to make technologies user-friendly, then why not make them familiar” through skeuomorphic elements?

Six Degrees of Apple

Ironically, the place that pushed skeuomorphic design to the masses is the very place that appears to be pushing it to the pasture. When Apple released the iPhone in 2007, it was revolutionary on so many fronts, not the least of which was the included software. Many of the apps on that game changing device, like the calendar, notepad, address book, were designed to look just like their real-world counterparts. Apple’s website, full of glossy buttons and 3-D images also pushed the trend, and soon enough everyone from Pinterest to your cousin’s blog site was waxing skeuomorphic (here is a post from Jessica Moon at Betterment from last summer that delivers some brilliant examples of beautiful skeuomorphic design).

Jony-Ive

I’m Jony Ive, and I’m about to change your Internet. (Illustration from Wired)

The winds of change are afoot at Cupertino, however; the man who led the skeuomorphic charge at Apple, Scott Forstall, was fired last fall, and replaced by Apple design rock-star and flat design lover Jony Ive. Rumor has it that the yet infallible Ive is going to replace all of the software on your iPhone and Mac with clean edges and flat surfaces.

Go Long on Flat, Responsive

People tell me that the digital world is not *only* about Apple, and I allow for some truth to that. But if the mobile device is king, and at this point that is really indisputable, than clearly Apple is the kingmaker. When Jony Ive unleashes the new software this year featuring flat design elements, it will be the tipping point.

Is it a design revolution? Well, actually, I believe it is. I believe Responsive Web Design is relatively new now, but it will stay because it makes sense. Why build two or three platforms when you can put some extra time into one website that fits every screen? Responsive Web Design will be the first driving force that forces flat design to wipe out skeuomorphic design…and Apple’s new software will be the second and even more powerful change agent. By the end of this year look for more and more sites to fit whatever device you are using, and to deliver content with clean, simple elements that look like exactly what they are: cool digital graphics designed specifically for a digital screen.

Listen, I’m pretty sure I’m right about this, but I would love to hear your thoughts below, regardless of if you agree with me or think I’ve got it all wrong.

- A

Header illustration from LayerVault

Comments

  1. For over a decade we have had technologies that allow responsive UIs. For example, the concept of passing the data as XML and using XSLT to render it – with a different XLS style sheet depending on the device – has been around for ages.

    Yes, it fell out of favour (possibly because the XSLT language could have been a bit easier to use) but the principle still remains.

    Yet why is it not being embraced? Did we become spoiled by the versatility of CSS, screens that would resize for different monitos and aspect ratios? Are we in danger of getting stuck down the CSS route when even poor old XLST might be quicker – just render the data into some HTML individually designed around the device?

    Take smart watches, for example – can anyone seriously suggest that a design that works on a smartphone will work on a screen that small, let alone having it also look good on a PC?

    And take the multi screen desktop user, for example – who is catering for them? This is particularly relevant given that studies show that multiple monitors can boost productivity by over 50%. Even without mutiple screens, the desktop with all its extra peripherals enables a far richer and more precise form of interaction that the smartphone ever can.

    To use an analogy – in our rush to make roads and freeways bicycle friendly, we are letting bicycle users dictate how we drive a sports car, with the result that they all trundle along at the same infefficient speed. What we really needed was a separate bicycle lane.

    In many websites, most of the real programming goes on at the back end, and with good standardisation of dynamic content you should really only have to spend a comparitively small time making a few display templates for a few devices.

    YouTube has done this, there are versions of its site for each device that feel noticeably better (especially given that Flah for PC tends not to work on Android!). Compared to the vast amount of work the back end requires, multiple front ends arfe a small overhead.

    So let’s not be stingy – let’s admit the work needs to be done and pay the money to give everyone the best possible experience.

    • Really great points, Andy. Thanks for commenting. I can’t say that I wholly disagree with anything you wrote. I don’t think Responsive design is the final solution, as much as it is the bridge that will get people realizing how important it is to have something that works on multiple devices. For many small businesses, this will be good enough for a long time. However, I think once the box is opened, once people realize that their website MUST consider screen sizes and devices beyond the desktop computer, I think the market for the type of services you are talking about will explode. Responsive is great, it gets the ball rolling, but for all of the reasons you listed above it is likely not the last way this issues is going to be solved. Thanks again!
      - A

  2. Being an SEO professional I will always advice to have a flat web design. Recent design trends not only looks great but also they are very much ahead when the question comes to conversion. It is a new way of saying “Keep it Simple Silly” to the world in the web design industry.

  3. Great article.

    I see all this as web design growing-up at long last and getting-on with the business of doing it’s job: conveying information.

    Architecture (that doppelgänger of web design) suggests that ‘honesty and integrity of materials’ is a way out – see this article on Alistapart: http://alistapart.com/article/material-honesty-on-the-web

    In 1910 the Austrian architect Adolf Loos said “The evolution of culture marches with the elimination of ornament from useful objects”. Think he’s spot-on. Even back then he described how “ornamentation can have the effect of causing objects to go out of style and thus become obsolete”.

    Adrian: your “gift economy” approach intrigues me: I’m dead impressed and am researching it further!

  4. This is a great rundown of these latest trends. The Internet and the designs that have become possible have come so far since the 256 gif. The advent of templates and standard CSS have made it possible to alter and update a site w ease. The functional capabilities have really been pushed within the limiting languages of HTML, JavaScript and PHP, etc.

    With that said, I fear creativity and a unique web experience is dying through these mass adoptions of function over form. For a while, the only aesthetic limitations where bit depth and bandwidth. There were no standards and each new site could create a world that challenged the 2D space and the viewer’s perception of what the web could be. It was a new navigation experience, a discovery of information that had a very unique skin to the environment. Done right, it was the best piece of marketing money could buy. But the sheer lack of standards created some horrible online experiences, if only for the nuisance factor in wayfinding and information gathering.

    Through a sort of organic consensus of usability, now there seems to be only about 4-5 basic layouts with an expected range of interactive functions. We mostly play by the same rules, so the experiences are becoming very flat in themselves (even with a decorative skeuomorphic UI). In short, standards have put us all on the same page, but the page looks pretty much the same as everyone else’s.

    While I appreciate the simplicity of a flat design and can see how it would allow for the greatest range of pre formatted template changes, limiting the UI elements to this aesthetic will further genericize the internet. Mobile displays are certainly driving this dumbed down approach due to limited real estate. Most clients are even ok with abandoning a fair amount of their web content to make their mobile versions more effective and uncluttered.

    For those designers who are concerned with an appropriate visual pairing of their client’s website to their overall brand impression, two site designs are usually required. There is little room for decoration in a mobile setting, but this new found design standard should not wag the dog of desktop web design. If it does, then say goodbye to the creative UI.

    • Thanks for the great, thought out response, Chris!

      I pretty much agree with everything you’ve written, but I wonder about this: you wrote “There is little room for decoration in a mobile setting, but this new found design standard should not wag the dog of desktop web design.”

      In my opinion, the mobile setting is and will continue to wag the dog of desktop design, just based on consumer use, and there is probably no going back. If the struggle becomes one between a custom designed and unique desktop site and a mobile site that delivers content quickly and easily, I think the mobile site probably wins.

      Ideally, if an organization has the resources to build (and maintain) both, that would be best. Anything short of that, and I suspect more and more organizations will be investing in something that works cleanly on both platforms, even at the expense of design.

      That being said, I do believe there exists a lot of opportunity to customize branding in a flat design; look at the difference between the LayerVault site and the Microsoft site. I think the mobile device screen is small and rectangle, and the designers that can make something look great on that platform will win, because that platform is not going away, and will perhaps soon be *the* primary platform.

      • “and there is probably no going back”
        Unfortunately, from a design standpoint, it has already gone back. Back to the days of 1997 and table web designs with awful repeating background textures. A look at 95% of websites designed for both mobile and desktop viewing will tell you that designers don’t know how to design for mobile. Therefore, they make everything flat looking out of a non-understanding for what they can do. In this way, both the mobile and the desktop versions designs suffer. People have been in too much of a hurry to just get a mobile site up there because they think they have to, rather than actually researching IF they need one based on analytics and how visitors use their site, and HOW they should do it.

      • “and there is probably no going back”
        Unfortunately, from a design standpoint, it has already gone back. Back to the days of 1997 and table web designs with awful repeating background textures. A look at 95% of websites designed for both mobile and desktop viewing will tell you that designers don’t know how to design for mobile. Therefore, they make everything flat looking out of a non-understanding for what they can do. In this way, both the mobile and the desktop versions designs suffer. People have been in too much of a hurry to just get a mobile site up there because they think they have to, rather than actually researching IF they need one based on analytics and how visitors use their site, and HOW they should do it.

        Also, your Jetpack plugin is causing errors when submitting a comment and checking the notify checkbox.

Leave a Reply