Alex Pineda

Creative Director

The Death of Skeumorphism and the Flat Design Movement

With the announcement of the new IOS 7 from Apple, Windows 8, and the “flat” design aesthetic movement, the prevailing opinion in the design world is that the death of skeumorphism is upon us.

photo of i07 screen at WWDC conference 2013

photo credit: Alex Washburn / Wired

Wikipedia defines skeumorphism as “an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material.”  In plainer terms, especially in regards to computer interfaces, it’s those elements that incorporate real world surfaces and textures, like fake wood grains, drop shadows, etc., to make virtual objects appear as if they were made from real life materials, have dimension, etc.

Apple, under Steve Jobs, was frequently cited for its use of skeumorphic elements in their interfaces, such as “leather”, “cloth”, because Jobs wanted his software to feel comfortable to users, familiar and soothing.  Jony Ive, Senior Vice President of Industrial Design at Apple, was well known to loath such unnecessary “visual ornamentation.” The new IOS 7 makes it clear who is in charge of design for Apple now.

I’m of two minds about this. On the one hand, I’m all for removing clutter and superfluous elements in my designs and interfaces.  Lately, I’ve been championing flat design aesthetics for Matrix Group clients, in particular for responsive and mobile projects, because simplicity and clarity are preferable on mobile platforms, with their limited screen sizes.  I look at fake wood textures, drop shadows, and gradients with disdain, and think of those types of designs as old-fashioned.

On the other hand, having those kinds of visual ornaments adds a more lifelike quality to what could otherwise be very inhuman, impersonal digital experiences. When I play games, in particular World of Warcraft, the removal of those real world textures and artifacts, even within a purely virtual world, would render my characters and their environments lifeless, dull and boring.

In reflecting on this, and given how long I’ve been in this business, I’m fully aware that advances in technology, human evolution, and design all play a part in our perception of what are “correct” approaches to crafting experiences. I remember when gradients and drop shadows were considered acceptable because of the affordances they granted users in manipulating these interfaces. Now it seems that users no longer need such things to recognize a button or interactive element when they see one. And yet these same users crave a sense of familiarity and comfort when they’re online, in what is increasingly a bewildering landscape of newness and novelty.

What’s the answer?  I don’t really know.  Most of the time, when confronted with a new project, client or brand, the first thing I think about is what is appropriate – to the solutions they are looking for, the customers they are trying to reach, and the experiences they are seeking to create. Each situation is unique, each client is unique, each instance is unique.  The amazing thing about what I do is that the technological landscape is always changing, the solutions are always changing, the platforms are always changing, my clients and their projects are always changing.

I guess that means that the appropriate solution will always keep changing, and I’m totally happy with that.

What’s your take on the move to more flat design (as a consumer or as a designer)?

Sarah Mills

Senior Designer

GOV.UK Design Principles

Recently Gov.uk won design of the year, which is discussed on Design Observer. I love that Government Digital Services decided to publish their design principles that clearly lay out how they tackled such an enormous project. Gov.UK home page

Start with needs*

Do less

Design with data

Do the hard work to make it simple

Iterate. Then iterate again.

Build for inclusion

Understand context

Build digital services, not websites

Be consistent, not uniform

Make things open: it makes things better

As a huge fan of open source in general, I feel designers (and PM’s, devs, etc.) do their part when they publish lessons learned and case studies. This list of principles applies to everyone working on the web now, and it is something our clients should read to understand the process. Honestly, I am pretty sure these principles (and handy examples) apply to more than just web nerds. For instance:

Government should only do what only government can do. If someone else is doing it — link to it. If we can provide resources (like APIs) that will help other people build things — do that. We should concentrate on the irreducible core.

We’ll make better services and save more money by focusing resources where they’ll do the most good.

In the future I am going to do more to document my process—not only to share, but to improve and grow. My biggest takeaway from this list was the last:

Make things open: it makes things better

We should share what we’re doing whenever we can. With colleagues, with users, with the world. Share code, share designs, share ideas, share intentions, share failures. The more eyes there are on a service the better it gets — howlers get spotted, better alternatives get pointed out, the bar gets raised.

What principles and best practices in your line of work apply not only to your industry?

Sarah Mills

Senior Designer

Using Icon Fonts in Web Design

Recently I was reading Paul Boag’s “Breaking free of the print design mentality” blog post where he asks the question, “How can you create a compelling design that works just as well across all of these canvas sizes? To many this sounds impossible.”

One way I try to create designs that will work anywhere is to use icon fonts. You are probably already familiar with regular icon fonts on every machine, like Wingdings or Webdings, but icon fonts can do so much more on the web.

Some of the icons in Wingdings, an icon font on most machines

Some of the icons in Wingdings, an icon font on most machines

Because they are fonts and essentially vector information, these icons scale perfectly at any resolution—making them worry free when it comes to designs seen on retina displays. Designers don’t have to worry about 2x pixel sizes or spend extra time making separate images for different displays.

Another advantage of using icon fonts is that you don’t have to make new images if you want to quickly change the color—it is all done in CSS. For a client site that allows the user to change the color of text, they are also able to change an icon’s color with no hassle.

A List Apart discusses even more advantages to symbol fonts, from ligatures to increased accessibility. Roger mentions Stately in a previous Snack O’Clock post—an icon font of states you can use for an interactive map.

The best part about icon fonts is that it is simple to make your own! I use Icomoon, which lets me upload an SVG and make a font of the glyphs I want to use.

Some icons from Icomoon

Some icons from Icomoon

Here at Matrix, we have launched several sites using icon fonts: NECA‘s responsive site uses icons in the page headers, so they are perfect at every size. The American Counseling Association’s main site and conference site both use icon fonts for social media images and small icons. FMI2014‘s colorful site uses icon fonts not just for social media, but as an overall part of the branding in the headers.

While icon fonts are becoming more popular because of design trends like “flat design“, this is just the beginning of uses for scalable images on the web.

What are your favorite responsive design techniques and tools?

Sarah Mills

Senior Designer

HTML5 vs. Flash: The home game

The opening screen of Waste Creative's Flash vs. HTML5 site.

The opening screen of Waste Creative’s Flash vs. HTML5 site.

Last year, two of our front-end designers gave a great talk about HTML5 and CSS3 to DC Web Women.  Let’s just say we’re fans.  That’s not to say that we hate Flash, but with mobile use getting bigger and bigger all the time, and with some platforms not supporting Flash, HTML5 is just going to get more important.

These guys at Waste Creative built a game in Flash called Waste Invaders; then they ported it to HTML5.  They compared the two and released their findings on this beautiful parallax scrolling site (made with HTML5 and laid out in Flash, actually!).

The site’s beautiful, and the game’s pretty fun! Go look!

How do you feel about these two tools?

Roger Vandawalker

Front End Developer

The Stately Font

StatelySo this is pretty cool.  Intridea’s Ben Markowitz (@bpmarkowitz) came up with this glyph font, Stately, that displays US states instead of letters when you type.  You may have seen it, but it’s worth seeing again.

UX designers and fans are pretty excited about it, especially if they have to make infographics based around or using maps.  This pretty basic idea – a glyph font – can become a powerful tool when you’re visually trying to get an idea across to a viewer.

How would you put Stately to use on your site?