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).
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.
Header illustration from LayerVault