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?

Graph showing ease and difficulty of wireframes and comps for designers and clients

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.

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)

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.

closeup of pixels on a computer monitor

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.

Is there a British design process? Drinking a lot of tea.

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.

high-impact-digital-comp.png

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.

HTML in Coda code editor by Panic

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 logo

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

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.

Closeup of a wireframe sketch

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?

Download a free sample from my book, Design Fundamentals.

9 comments

  1. My typical design process:
    1. A quick paper sketch: top level information architecture
    2. A mid-level fidelity wireframe: low level information architecture, shapes and proportions. No colors or effects. Mostly black & white.
    3. A multi-scenario storyboard (using the previous wireframe): the steps / screens / views required to achieve every single functionality of the application / website . This steps is really time consuming, but highly rewarding afterwards.
    4. The final comp

    I leave pixel perfection to the final step since I believe it is hughly distracting when dealt with in earlier stages…

    • I don’t do the storyboard, but otherwise it sounds like our processes are similar. I will create different sketches and wireframes for different sections of the site when I know they’ll be different. Usually that’s more making a second version of the original and changing those parts that will be different from one page to the next.

      Completely agree about leaving pixel perfection to the end.

  2. I often work this way as well, though I don’t usually sketch: wireframe, comp, development, wordprsess. The problem I sometimes encounter when doing this is that sometimes I design something in a comp that doesn’t easily work in development or wordpress integration. Then I have to go back and re-design that part, or fudge it a bit, or spend way too long in development to stick with the design.

    In this process I find I have to know EXACTLY what will and will not work in development, to make sure I’m not making decisions in comping that aren’t acheivable in code. Do you ever experience this?

    I’m starting to think this process might not be the best in every situation. How can we consider re-thinking this process so that there’s less of a disconnect between design & implementation?

    Thanks for the post!

    • Usually it’s not a problem for me not knowing whether something will work exactly in development, though experience developing means I can often catch these problems earlier. When designing a comp I can usually see the code I’ll need to develop it.

      If I can’t get it exact I can usually get it close enough and then tweak the design in the code instead of having to go back to the comp.

      To me the disconnect between design and implementation often comes from designers not being developers and developers not being designers. The more each side knows about the other side the less of a disconnect there is.

  3. I sometimes improvise a lot. It also depends on what kind of project I work. For web site design I sometimes sketch with code, sometimes I start with Photoshop, skipping sketching on paper. It depends how clear is idea. But mostly I go through similar process.

    • Yeah, it definitely depends on the project. I can’t say I go through the above for every new design. it’s more the process I want to go through if I have the time and budget. I’ve designed some sites directly in code when necessary.

  4. Wow, our techniques are almost similar :)

    But at times when I feel lazy I skip some dynamic parts off the static HTML/CSS for example widgets section or animations or tabs etc and then do it directly inside the wordpress template.

    • Great minds think alike :)

      I’ve done similar. There are definitely times I start with some functionality in the html or in WordPress and make sure it works. Then I’ll play around with the css and design it.

Leave a Reply

Your email address will not be published.

css.php