September 2011

Viewing posts from September , 2011

Planning for Pixel Perfection & Mastering the Art of the Meticulous

High-quality, professional design is instantly recognizable. Every pixel is in place, every font considered, every interface element carefully selected, every color chosen intentionally. The end result glows with quality and effortless clarity.

Perfection not only thrills and pleases the client, but makes the entire design process easier on you, the designer. By getting the presentation and polish right from the beginning, clients more easily trust you, don’t second guess your choices ( or at least, not as much), and are far more likely to engage your services again.  The principle of least astonishment applies here;  try to think of the behavior that will least surprise someone who sees your work. The higher the quality of your deliverables, the more effortlessly they will be accepted.

But how do you get there? How does a junior UX designer develop an eye for detail and the skills to produce professional work? I remember struggling to climb this seemingly unobtainable pinnacle of perfect design many years ago, and today, I work with junior designers wrestling with the same challenges. This blog post came out of email discussions within our team, and we decided to share it publicly.  I realized recently that telling our designers they need to be perfect is useless guidance, and even somewhat cruel to ask of them. But offering some guidelines about how to get to perfection might actually be useful, to our internal designers and perhaps a larger audience as well.

When discussing how to teach perfection in design, we came up with three basic principles to keep in mind: Consistency, Accuracy and Coherence. Let’s look at each one a bit more deeply.

Consistency

Interaction design must be consistent on many levels. Navigation and element placement must be consistent throughout all screens. Colors and other visual touches must remain the same or within the same palette and visual family. Language, tone, labels and word choice must work together to create a unified voice. For example, if a header uses a blue background, stretchy width, a subtle grid pattern and is 120 pixels high on some pages, it should use the same styling on all screens.

The “flip book technique” (quickly moving between pages when reviewing your work) really helps with consistency. You can see where things shift out of place, etc. Consistency can also really help with accuracy, but more about that below.

Accuracy

Ever been in a review meeting where the client gets fixated on a typo? Nothing more annoying, right? It is up to the designer to always make sure files are absolutely accurate, spelling has been checked, the right logo is in place, and every bit of client feedback has been considered and properly reflected in the screens. Accuracy moves beyond just pixels and words to also encompass interaction design. It includes making sure all user behaviors have been thought through and reflect what can be done on the intended delivery platform within any technical limitations. Accuracy also means being aware of common interaction design platform conventions and respecting them.

Coherence

Coherence is making sure the story, the big picture, makes sense. In coherent design files, numbers add up, the narrative holds together and the interaction model reflects actual usage. Coherence is also what separates great interaction design from graphic design. A coherent interaction model is absolutely essential for users – if you don’t create a coherent mental model first, your users don’t stand a chance of making sense of your work.

The less time you have to spend on consistency and accuracy, the more time you have left to focus on crafting a coherent narrative that thoroughly addresses user needs. This is the heart of UX, and when you can achieve true coherence in UX design, you start to internalize what it means to be a senior designer.

Methods & Techniques

Ok, enough of the high level abstract approach. What does a junior designer actually DO to ensure flawless deliverables? Part of the answer is simply to check your work, again and again, and then have someone else check it as well. There is no magic trick here, only a lot of hard work, and most importantly, developing habits that become second nature over time. As your work matures, you will find yourself spending less time fidgeting with alignment and size issues, and more time thinking about the interaction model, your users’ needs, and how the approach to the application design as a whole could better meet those needs.

But first, it can sometimes take junior designers a long period of time to master consistency and accuracy. This is my personal approach to create perfect files for client delivery. In general, it seems to really help to export to the format you will be using to deliver to the client. Also, printing screens out and reviewing them in analog is often quite useful, though I have to counter-balance my hatred of wasting paper with the pay off of a non-glare surface. I also review any notes from the client or myself a few times too, to make sure all requested changes got made and didn’t get lost in the shuffle. Finally, I take a look at the previous rev of my files, to find any elements that might have disappeared by accident.

Then I send off my files to another member of the team for a review with a fresh set of eyes. I take and incorporate the feedback from this review, double and triple check the files a last time, and finally send them off for client review.

Sound like a lot of work? It is! But so worth it. When quality is lacking, client dialogue devolves into pixel picking and bickering over details. The big picture gets lost and the project as a whole loses its way. In our experience, doing many multiple rounds of review first is the only approach for professional quality design work.

m4s0n501