Web design, like most other design disciplines, starts with a clear thought process. Is it best to do this on paper, or use graphic software and other tools?

The initial design stage of a web project (information architecture) is about designing content, structure, navigation and user interactions. Paper is an excellent medium to use for this part of the process, but computer-based tools have definite advantages too.

Benefits of using paper for ideas

Putting ideas down on paper forces you to think through the brief, focus on the issues and try alternative solutions without getting bogged down in technical or design details.

You can sketch out a site plan (map of website content/structure), storyboards (sequences of screens/interactions) and wireframes (outline mock-ups of screens) without even beginning to think about the website's visual design. If all of this is done on paper you are less likely to get distracted too early in the process by subjective design elements like colour, styling, exact wording and image selection.

Paper-based or sketchy mock-ups are excellent for initial concepts because clients feel more involved, so they are much more likely to buy into the final solution, which makes for a smoother running project. If the mock-ups are too polished and pixel-perfect early on, clients or team members may feel awkward about requesting changes during the design stage, which could mean substantial re-working later. Bad news!


A sketched drawing of a web page, with handwritten notes about how it works

The tactile qualities of paper are also perfect for encouraging team collaboration. For example, the physical act of shuffling post-it notes about on a board or scribbling on a piece of A4 actively engages people in the process and makes them more likely to contribute. Of course, if your team is dispersed you may find passing bits of paper around is inefficient, but it doesn't stop you scanning in paper sketches and sharing them online.


Paper sketches are great for giving a quick visual overview of user journeys

Alternatives to paper

It is relatively easy to draw up wireframes and storyboards using wireframing/mock-up software. Many of these tools have sketch-like interfaces (balsamiq.com is a good example). The advantage of mock-ups done using such tools is they still look like sketches, but they are much easier to change and you don't have to be able to draw! It's a big productivity benefit. You can always print them out if you want to take advantage of some of the benefits of paper mentioned above.


A wireframe produced using Balsamiq Mockups software

A number of wireframing tools produce slicker-looking results, which can be very good for communicating details, but beware - there is a danger of getting too caught up in visual design aspects at the content planning stage. It's best to ignore their fancier styling features and keep wireframes as simple as possible.


A wireframe created in Visio

Most wireframing tools allow you to link screen mock-ups together to simulate the effect of interactivity. This can be very handy for user testing and presenting concepts to clients. A variant on this is to set up a "skeleton site", which is basically a simple html website with no styling or content, just pages linked together so you can test typical user journeys and check navigation.

Some wireframing tools to consider include Balsamiq, Visio, Fireworks, Mockingbird, Omnigraffle and even Powerpoint. Which one you choose depends on how you like to work and which you find easiest to use.

From ideas to layouts

When you reach for the mouse to design the website's creative styling in graphics software (Photoshop, Fireworks, etc), it's a lot easier if the content and interactions have been planned first, whether on paper or in mockup software. It's simply a matter of using the right tools at the right stage of the design process, and using media that suits the project and the team.

 
Design mock-ups showing visual styling and layout details (created in Adobe Fireworks)