Design Tip: Mockup every single screen, even the ones that don't matter

For the past month or so, We've been working on a project that we're calling "LAS 2.0". It's basically a complete re-thinking of our entire CRM product. I'm making changes to the user interface of almost every page, and the results so far have been very promising. Even though many of the changes are minor, they make the pages easier to use, and more attractive to look at.

There are a number of reasons why LAS 2.0 looks better than LAS 1.0, but one of the most important things that I'm doing differently this time around is that I'm making detailed mockups of every single page. In case you're not familiar with the term, a "mockup" of a web page is basically just an image file that looks just like what the final web page will look like. Mockups are generally drawn in  programs like Photoshop or Fireworks so that even though they look exactly like a web page, they're much easier to create and modify because you don't have to write any code.

I don't want to give you the wrong idea when I say that this time I'm making mockups of every page. Bracken and I spent weeks creating and tweaking the mockups for LAS 1.0, so I'm no stranger to the mockup process. But until recently, I wouldn't bother mocking up pages that didn't seem important. For example, I may have spent a few days mocking up the "view contact" page, but I didn't spend very much time (if any) mocking up various settings pages because the design of those pages just didn't seem important. Instead, I would start coding and the design would work itself out.

Well, that was the old way of doing things. If there's anything I've learned while working on LAS 2.0, it's that every single screen the user sees needs to be mocked up with an image editor before writing a single line of code. Just to give you an example of the difference this has made, I'll show you a before and after shot. The first image is our old "Contact us" page:

Here's what the new "Contact us" page looks like:

Now, I'm not saying that the new version of the page is anything special, but I think we can all agree that it's better than the old version. But why is it better? I don't think I've become that much better of a designer in the past year. The function of the page itself is so simple that I don't think I have much more perspective now. The reason it looks better is because I mocked it up first, and coded it second.

There's one basic reason why mocking up every single aspect of every single page before writing any code helps so much: Mockups prevent you from being a lazy coder. With mockups, it's easy to make the screen look however you want. Things like changing layouts, making corners rounded instead of straight and using background gradients only add seconds to your design time when they might take minutes or even hours of coding time. By mocking things up first, you reduce the barrier between your creativity and the end result.

I think I've rambled on for long enough, but just as a little teaser for LAS 2.0, here are some more before and after shots:

Before:

After

Before

After

‍