Thoughts on Engineering, Photography, and Design.

Earlier today I watched Mike Matas: A next-generation digital book. If you follow him at all, you’ll know he’s an expert in design and UI, proven through his work on Mac OS and the iPhone. So naturally, before I started the video I expected his vision for digital content to be a good one. I was not disappointed: it was a really good one.

However, as good as the interactions and ideas were in their approach, I still see the value in regular books. I would hate the day the world goes all digital. Maybe it’s because I’m a designer and hence a visual person, but I find enjoyment in owning a physical book. Most of the books I buy are design-related, and things like textures, quality of the paper, the cover art, the spine, and content imagery are often just as inspiring (see Hardboiled Web Design). Those features – real, physical features – should not be taken for granted.

Plus, what would this shelving unit look like if physical books were obsolete?

Something tells me they would lose their appeal if it were just an iPad sitting on its dock.

I’m all for digital books. I personally own a Kindle and I read content via iBooks on my iPad all the time. Digital books absolutely have their place in todays world, I just hope it’s not at the expense of the real thing.

I always seem to come across developers or young designers who believe the only thing preventing them from producing good design is learning CSS. Comments like “That’s simple, CSS is easy” or “I’d clean up the interface, but I don’t know CSS” completely ignore the core of what design is. Yes, CSS is incredibly easy. There are numerous tricks and, dare I say it, best practices that can be realized over time, but in general, CSS is a very easy language.

But CSS is only a means toward bringing a vision to life. It doesn’t do problem solving, it has no creativity, and it cannot satisfy client needs by itself. It’s a tool, just like any other language.

Design is hard because it demands mixing several concepts, ideas, and perspectives to produce a single, cohesive outcome. These aspects of design might include:

• Clearly defining the problem–the most important step!
• Determining the right solution, which often requires deep knowledge of the problem domain
• The proper typography for the intended audience and/or goal
• Understanding visual hierarchy
• Meshing with existing branding (aesthetically)
• Degrading gracefully
• Determining the breaking points on mobile platforms (responsive design)
• Figuring out what a client really wants

And then there are the technical aspects of executing a design, where CSS is one of the many components.

Design is far from easy, but it definitely isn’t hard because of CSS.

Progressive Enhancement is a well-known idea that web design should be a layered process, meaning a design should satisfy the least common denominator first and foremost (Internet Explorer), and then layer on enhancements for the browsers that support them. This was how I worked for a long time. But over the last couple of years I’ve been questioning it and actively doing the polar opposite. In fact, I now feel that Progressive Enhancement is backwards.

In no way am I saying that ignoring Internet Explorer is the proper approach. It’s not, as much as I’d love that. I’m saying that Internet Explorer doesn’t deserve “first dibs” on a design. It bakes in limitations and locks up the mind from the very beginning. And aside from that, Chrome, Safari, Firefox, Opera (and probably a few others I’m not aware of) are doing amazing work trying to push the web into the future via great performance and great support for HTML5 and CSS3. So why, when they are the browsers leading the way, should a design first go back in time to Internet Explorer, who is lacking in all of the areas in which the others are exceeding? It doesn’t seem fair, nor does it make much sense.

I’m of the opinion that a better design will come out of working in a cutting edge environment first and dealing with lesser environment(s) second, than working in lesser environments first and “enhancing” a restricted design second. Now, that may sound like graceful degradation, but it’s much more than that–it’s a shift in the way a designer thinks while designing, which I believe results in a much better outcome.

A freed mind can creatively take advantage of what’s possible, and only then can the full design potential come to life. I personally find it far more rewarding to be thrilled with the enhanced version than to be just happy with all versions.

I’ve had a new design for formedfunction.com about a day from completion for quite a while now. Over the weekend I wrapped it up and shipped it out. Here’s a shot of the landing page:

It’s best viewed in a webkit-based browser (Safari and/or Chrome), but any modern browser will do just fine.

If you feel compelled to leave feedback, Twitter just may be the fastest way: @rpheath

We’ve all heard it before, “don’t judge a book by its cover.” But why not? Because the creator didn’t care enough to make the cover representative of the content? I’ll need a better reason than that. In fact, that’s the exact reason why you should judge the cover.

Note: book, in this context, means a lot more than just books. It extends to anything that has a front-facing representation, ranging from a website to the packaging of your next coffee maker.

Good first impressions are where it’s at. When on a job interview a good first impression seems pretty important, right? And when you think about it, unlike products, there are a lot of ways to make that impression: clothing, attitude, previous work, eye contact, and what you have to say. Plus, there’s dedicated time set aside to focus on just you. With a product there’s only what shows on the outside. Potential buyers don’t interview products to see which one they want. So why then, would it ever be okay to neglect the first impression a product makes on a customer? Is it because websites and coffee makers can’t talk? Technically, that’s true. But products speak quite loudly–most folks just aren’t consciously aware that they’re hearing anything.

And yes… some products are very rude.

Rude products are those that don’t care about the message they’re sending. They believe that by being the product their job is done and the rest is secondary. They assume you’ll use them even though they didn’t take the time to impress you up front. They’re narcissistic.

Polite products, on the other hand, are those that really want to make you smile from the minute you’re introduced (Wufoo might be the best example of this), and they go above and beyond to make sure that’s the case. Thoughtfulness baked in from the beginning, setting the tone that you can expect good things.

While some rude products do sneak into the mix, the polite products will inevitably win out in the end.

It’s instinctual that we judge based on visual appeal, even if subconsciously, and when it comes to things that are designed there’s no better time to put our instincts to use. Start paying attention to the covers. Don’t forcefully ignore them because “the saying” said to. Often enough, those who care deeply about the outside care even more about the inside.

The journey to an end result would be a lot easier (and faster) if it was precisely known what the end result was going to be. Unfortunately, that’s rarely the case.

Design isn’t about making something pretty, although that’s part of it. Design is largely about function. It’s about making an interface work so well that the user never stumbles. Much of a good UI depends on a notion called visual hierarchy.

Visual hierarchy, while it may sound technical, is really a pretty simple concept. By using color, contrast, texture, shape, position, orientation, and size, one can organize elements on a page so that users gets a sense of visual importance. For example, look at this graphic:

Where did your eyes go? Maybe to the first circle, since we naturally read from left to write. Or maybe somewhere in the middle. The point is, nothing guided your eyes because all of the circles are the same.

If you make everything bold, nothing is bold.

Let’s make a slight change to that graphic:

Now where did your eyes go? My guess is the first circle. With only shading, I was able to direct your eye to the circle that, for whatever reason, I believed to be the most important. This is visual hierarchy.

But we as designers don’t draw pictures of circles. Let’s talk about visual hierarchy in web design and show some real-world examples.

Note: when examining visual hierarchy, I prefer to use the squint technique (literally, I squint my eyes until the page becomes out of focus and blurred). Since I can’t blur your eyes for you, I’ll blur the screenshots instead. There’s no reason we need to see every pixel when organizing a page; in fact, the details get in the way at this stage.

A Poor Example

Ahh the Drudge Report. Much to my surprise, there are legitimate, successful designers who would argue that the Drudge Report is a well-designed site since it has “stood the test of time” (lame reasoning if you ask me). Needless to say, I’m not in that camp.

Using the Drudge Report as the guinea pig, let’s look at a poor example of visual hierarchy:

The screenshot above has 2 supporting graphics, 3 advertisements, 2 search/date filter forms, several sections, and a number of links that have different meanings. Breaking this down, the identifiable problems:

• At a glance, you can’t tell the difference between the advertisements and the supporting article graphics.
• There’s no easy way to detect where the search/date filter forms are located (hint: lower left corner).
• All of the links (and sections) have the exact same treatment, but they don’t all have the exact same purpose (news articles, columnists, and content feeds).

Overall this site does a poor job of guiding the user through visual importance. Now let’s look at something I recently worked on.

A Better Example

The situation: in an app I’m working on there is a bit of setup required before the user can dive into the core of what the app does. Since setup instructions are generally a barrier-to-entry, the goal was to make it as easy as possible for the user to get in and out, knowing the exact steps they needed to take.

First, I’ll show where I started: the screen with very little attempt to organize the page. Then I’ll show how I used visual hierarchy and the difference that it made. Here’s the undressed version:

So what’s most important? I bet you don’t really know. Everything seems to be the same. You can see that there is a list, but it doesn’t really indicate that these are steps the user needs to take. It could be a grocery list for all we know (albeit, a wordy one).

Without introducing any color (yet), here’s the same page and content, only this time with an attempt to guide the user using different levels of visual importance:

Let’s go through the changes. The numbers on the graphic correspond to the numbers in the list below.

1. Increased header size to be clear about the item being setup. It should be crystal clear as to what exactly is being setup.
2. This line needs to speak to the user before anything else, because for experienced users, it could potentially remove the need for the setup instructions altogether. So I increased the font a bit and separated it from the content below using a border-bottom (look closely).
3. Using nothing but space, I was able to disconnect the upper and lower content sections even more, essentially saying “Read This First”.
4. This title sets up the purpose of the content below it, so I bumped up the font size and made it bold. Subtext next to it isn’t quite as important, so it’s dimmed a bit (but by drawing attention to the main text, the right text is inherently read, but without the additional noise).
5. This is a menu of options where each option contains its own set of instructions–it’s incredibly important that the user knows which option they’re on, but above that it’s to illustrate that their are options. Also, this menu was to act as a header to ground the instruction set below it.
6. Each “step” has a title and a instruction. By bumping up the section title I’ve essentially scoped what the content below it is explaining. It’s important that the user could scan the list just to get an idea of what was involved, then dive into the details. The instruction paragraph was also given more space above/below and increased line-height to help with readability.
7. These numbers should feel more like “steps” than a list. By squaring them up, increasing the size, and giving some visual depth (contrast), I was able to achieve that. This no longer feels like a wordy grocery list.
8. The support help/text is important, but it should not get equal attention as the instructions themselves. So by moving it down the page, decreasing the size/line-height, and softening the color, I am basically saying “this is here if you want it, but it’s not quite as important as the rest”. In the rare case that a user needs more help, he/she will be explicitly scanning the page for help information, so it’s less of a concern to make it stand out–it will undoubtedly be found if need be.

When positioning elements on a page I like to work in gray tones first, like the screenshot above. You can do a lot with just contrast and sometimes colors get in the way early on. However, once you achieve a solid foundation on position and weight, color can take the visual importance even further. Take a look at the same screenshot, but in color:

The end result is much better than where I started. It’s now (hopefully) clear to the user that they have a step-by-step process to go through, and (hopefully) each step is clearly defined and explained.

Conclusion

Visual hierarchy is just another tool in the tool-belt, but I believe it’s among the most important. If nothing else, hopefully this helps other designers by at least reminding them to start with the function and flow before the fancy graphics. Nail down the purpose of each page element, and then dress it up.

Happy designing!

Whenever something relatively large launches (like a Facebook update or New Twitter) there are always a slew of “haters” disrespectfully attacking the design from all angles. The problem is blatant disrespect is rarely constructive.

Take the whole Gap logo redesign ordeal. That was a prime example of how not to be. Other designers were mocking the logo with “Crap” (instead of Gap) and being incredibly demeaning toward those who worked on the redesign. It was an awful display of character by so many people.

Currently it seems that the hot, fresh out-of-the-box target is the Mac App Store. For example, take a quote from this response (titled, Mac App Store UI is so hideous that it makes me want to kick a swan):

As expected, it pretty much confirms my thoughts that someone decided to shoot most of Apple’s designers some time around when brushed metal appeared, along with giving everyone at Cupertino a taste-ectomy. The app UI is just hideous, kicking conventions in the bollocks, laughing in the face of clarity, and mercilessly setting fire to UX and pushing it off a cliff.

Seriously? That bad, huh? Even if so, I don’t think it deserves such a degrading response. Nothing does, really. What that quote could have been:

I’m not a fan of the Mac App Store UI. A few common conventions have been broken and the overall experience isn’t as good as it could be, especially coming from the UX experts at Apple. For example, …

That post does go on to make several valid points, but it’s the link-baiting negativity in the title and intro that bothers me. There’s simply no benefit in barefaced negativity toward someone else’s design.

The same thing happens in sports. There will always be fans who get pissed off at a coach for a bad play call, when more often than not, the person complaining couldn’t do a fraction of the job the coach is doing. In sports I expect it, but I really hate to see this behavior make its way into design communities. Every single designer to date has produced crappy work. It’s part of getting better.

It’s challenging to produce good design, there’s no doubt about it. There are many problems to solve within a single solution. But what’s not challenging is to come along at the end and pick out the 5-10% that may be off kilter and run it into the ground because “you could do better”. It’s a different view when starting with a blank slate, I can assure you.

Next time try to remember that there are caring people behind both good and bad design who, in most cases, put a lot of time, thought, and effort into what they do. Maybe they’re not professionals (yet), but they’re trying.

So let’s declare 2011 the year for constructive criticism and we can raise our glasses to better design as a result.

How would you like your design?