Are Your Designs Pixel Perfect? – My Design Process

One question designers face is how much time should be spent on wireframes, mockups, and design comps. Should you strive for pixel perfection or should you spend as little time as possible on them in favor of developing the site as soon as possible? What level of detail is appropriate for images you hand off to clients for their approval?

Late last week I came across two articles that discussed the design process with slightly different ideas in regards to pixel perfection. Both articles reminded me of a third article I read a few months ago. The articles differ in how they treat deliverables and yet in some respects all offer similar advice.

• Great Design Hurts: Striving for Pixel Perfection by Brandon Jones
• Essential Web Design Advice From a Wireframing Master interview with Travis Isaacs
• Fast and Real by Luke Wroblewski

Below is a link to a page with a video where Dan Benjamin interviews both Travis and Luke. While the show is geared specifically toward Keynote it ends up covering a lot more. You can get a good feel by the approaches both Travis and Luke use taking a design from idea to prototype or finished product. The video is 48 minutes long (there’s also an audio only option) and it’s definitely worth watching (or listening to)

• Designing with Keynote?

I want to consider the ideas in each of the three approaches and then walk you through my own design process as I move from idea to developed site.

Pixel Perfect or Pixel Imperfect?

If you think about the endpoints in the design and development process, the process begins with some ideas about how the site will look and ends with a finished site. You could rightfully argue that the design begins earlier with getting requirements from the client followed by research. You could also rightfully argue that development leads into maintenance and no site is ever finished.

For the sake of this post though, let’s consider the design/development process to begin with ideas about how the site will look and end with a developed website. In between there may be several stages such as sketching and wireframing and you’re likely at some point to hand off a mockup or design comp to the client for approval.

The question is how much time should you spend perfecting these deliverables. Not enough details and it may be harder for the client to envision the final product. Too much detail and the client will expect the finished product to look exactly like the comp, not to mention all the extra time involved adding in those details.

The articles above take 3 different approaches.

• Pixel perfection—every element in the design comp is exactly as you intend it to be in the finished site
• High fidelity wireframes—enough fidelity for clients to envision the finished site, but quicker and easier to create
• Real and fast—take things live as fast as possible always using as much real data (not lorem ipsum) at each step in the process

In some respects each of the 3 approaches above argues for the same thing. Each would suggest to make things real as soon as possible. None is really suggesting to make things absolutely perfect prior to development. The main difference is in how much time you spend up front designing and what level or perfection are you trying to achieve prior to the finished product.

I’ll walk you through my own process momentarily and say here that I think any of the above approaches can work. Much will depend on how you work best and who your client is. It may also depend on the specific project. With some it likely makes more sense to push to the web sooner rather than later and with others it likely makes more sense to have more details down prior to coding.

It should also be pointed out these approaches aren’t meant solely in the creation of a website, but rather the more general web application, which would include websites.

My Design Process

As I mentioned above the process really starts with gathering information and research. I talked about it a little about a month ago when sharing how I structure site content. I don’t want to rehash what’s in that post and again for the purpose of this post we’ll consider the process after research and with ideas in mind to begin the visual design.

For me that usually means several phases in the following order

• Sketch
• Wireframe
• Design Comp
• Development
• WordPress

Sketch

My sketches are not beautiful and generally have very little detail in them. I’m mostly concerned with the overall layout when sketching and little else. I might add a few rough design elements, but that’s about it.

What I’m mainly trying to decide are where will the necessary design elements go and things like how many columns will be needed and what’s the general relationship in size between header and sidebar or header and footer.

I kind of do something similar to what you see in the From the Couch video above.

When sketching I’ve already thought about what elements need to be on the page so I am trying to see how a few will fit in, but I don’t want to spend too much time sketching details as I expect they’ll evolve as the sketch moves toward a finished design.

Wireframe

A few years ago I took rough sketch directly to Photoshop and began working on a detailed a comp. More recently I look to create a wireframe first where I’ll flesh out the rough sketch more and add in some of the details. Even more recently I started using Keynote, which I got from Both Travis and Luke among others.

My wireframes aren’t trying to achieve pixel perfection though I am trying to make them high fidelity. I want someone to be able to look at them and be able to envision the finished product.

I’m adding major details, though not necessarily every minor detail.

The wireframes are still mostly for me, but sometimes reach a level of detail where they can be passed to clients, and again I expect the design to continue to evolve beyond them.

Design Comp

I use Photoshop to create more detailed comps. In the past it’s these comps that get sent to clients, however I’m moving toward sending clients my high fidelity wireframes (when they include enough detail) instead.

More details are added to my comps mainly because some of those details are going to need to be created as graphics that end up on the site. I’m going to need to create them at some point anyway and I like having them ready before development. As with the sketching and wireframing I’m still exploring ideas, though the exploration tends to be in the smaller details.

I don’t expect to change the layout at this point, though I might explore colors a little more. It’s unlikely the navigation is changing from horizontal to vertical, but I’ll explore whether or not to add a border around it or perhaps even try a different typeface.

Again I expect and allow for the design to continue to evolve after this point. I’m also using as much real data as I have available. In some places (such as the graphics being created for the live site) I am aiming for pixel perfection. In other places where I know I’ll code something to create its presentation I won’t spend extra time seeking perfection.

Development

Development for me begins with a single html file that includes css and javascript directly in the file. Eventually these will be moved to external files, but I find it quicker at this point to have everything in the single file.

I’ll typically begin with the html for the overall layout and then add the html structure that will go into each section. Ideally I’ll write all the html first, but sometimes I’ll organize the css for the overall layout and then go back and forth between html and css (structure and presentation) for each section, usually working my way down from the header.

Again I’ll continue to refine the design. Sometimes what looked great in Keynote or Photoshop doesn’t quite work like I thought in html/css. Other times a new idea came to me that I want to explore further. I am still designing even while developing.

If every page on the site will look the same then I’ll stop after creating the one html page and move the css and javascript to external files. I may also convert the html to php and set up includes for boilerplate code. If the site design calls for different looks on different pages I’ll move on to creating the other pages using the included files for the repeating html, the css, and any javascript.

WordPress

Most sites I build end up on WordPress so once the single page (or the several pages) are done I take the code and place it where it belongs in the WordPress theme files. I have what’s essentially a blank theme that serves as a framework and is easily populated with the specific code for the design.

Believe it or not I may still refine some design details due to more ideas or because something that worked well as html/css might require tweaking in WordPress.

Design for me is never done until I hand off the finished site to the client and even then I’ll often have ideas I wish I had tried during the whole process. Sooner or later though I do need to call the project done.

Additional Resources

Below are a few links I discovered awhile ago that led me to use Keynote as a wireframing and prototyping tool

• Designing with Keynote
• The 5-minute guide to prototyping with Keynote
• How to prototype interactive iPad applications in 30 minutes or less using Apple Keynote
• How to Create iPad Prototypes Using Keynote for iPad

A few months ago there was some debate about creating a single tool to help web designers through most of the design process. The articles below (and the comments on each) looked at the current crop of tools and speculated about what could be created in the future.

• A Real Web Design Application
• In Defense Of Photoshop
• CSS is the new Photoshop (?)
• An InDesign for HTML and CSS?

Summary

I don’t think there’s any one process that works for all designers. We’re all different and as such will want to work differently at times. Our clients too are different. Your clients may need a more detailed comp than mine do and so it would make sense to spend a little more time on the comp.

Because I’m also a developer, I can often see well enough how design elements will be coded and don’t feel the need to spend time creating it in an image editor. Other times I know the element will be a graphic and is going to require work in Photoshop (or other editor) and I will work it closer to pixel perfection earlier in the process.

Overall my process moves from higher level solutions to lower level details as it proceeds from rough sketch to finished site. The design only stops when the project is done and handed off to the client.

Ideally I want to move toward the live site as fast as possible. The level of fidelity I add to any phase of the design is usually all I need or want to see to get to the next phase or what needs to be there for the client to envision the finished site.

When thinking about the 3 design approaches described at the start of this post I probably fall in the middle with the high fidelity wireframe approach.

How far you aim for pixel perfection at various points toward the finished site is up to you and what you find works best. With certain elements of the design and in certain phases of the design I find it helpful to be a little more “pixel perfect” than at other points, but overall I want to get to the live site as quickly as possible.

I hope seeing my process has helped your process in some way. Do you do something similar as I do or do you have an entirely different workflow?

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.