Developing Your Design Process

The web is changing fast, with one trend seemingly outdating the next, before you even realize it was a trend.

One of the biggest mistakes new web designers can make, is to jump straight in to Dreamweaver/Photoshop/Flash/Whatever and start “building” before really thinking it out. So if you’re getting started in web design, or maybe you have a few sites under your belt, but haven’t yet developed a process for developing your site, here are some tips to help keep you on the straight and narrow, and believe it or not, much of this can be done with a pen and paper.

1. Set Your Objectives For Your Site
What is the main aim of your site? What do you want to achieve? If you want to develop a site that sells wedding invites, should you include a section devoted to baby shower cards? They are somewhat related – often babies follow weddings! But are you diverging too much? A web site should have a definite major objective and maybe one or two related objectives.

2. Figure Out The Contents Of Your Site
To avoid confusion, you need to sort out the structure of your site and what content needs to be included. We’ve all been to messy sites, where it seems even the owners of the site aren’t too sure about what the site is about. While it’s important to have structure, keep it flexible so that you can add new content without too much bother.

3. Wireframe Pages
A wireframe is a skeleton outline of your site, which shows the relationship between the pages. It gives you an overview of usability, information architecture, layout, and site content which can help you to see what will or won’t work. There are several applications specifically designed for wire framing, such as iPlotz and OmniGraffle , or you could use drawing or layout programs such as Illustrator and Visio. I personally find it easier and quicker to draw wireframes on paper, but many people find wireframe applications invaluable. It’s important to be thorough at this stage. This is where you can really go wild with the creativity too.

Wireframe by Mike Rohde

Wireframe Sketch by Mike Rohde

4. Building
At this stage, you’re now ready to start building based on what you have done in stages 1-3. That may mean putting together a more complete design in a program such as Photoshop, or starting to code your site. You’re putting the flesh on the bones you created with your wireframes.

5. Testing
This is vital, and you can consider it an ongoing process. You’ll need to test for usability and accessibility and also simple things like checking that all your links work, or that your images appear where they are supposed to. You can do your own testing to begin with, but then it’s a good idea to get some friends or family to run through your site, or ask (if you’re brave enough!) for some feedback on an online forum. People will be pretty quick to tell you if there is a problem.

So that, in a nutshell, is the typical design process for a web site. Obviously this is the view from 10,000 feet, but if you can develop your sites through a tried and tested process, you will find yourself improving and speeding up all the time.

Are you currently using a similar process for web design? What steps would you add?

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Chris Hill

    If producing a site for someone else, between points 3 and 4 I’d add ‘Client Sign-off’.

    Get them to commit to the wireframe in terms of site structure and write in a clause for additional cost if changes to the structure are made after the build begins.

  • http://www.clearwind.nl peach

    nice wireframe, except I would never draw on lined or squared paper. Blank paper doesn’t limit your creativity as much as lined paper :)

    I also prefer to use colored soft-tip pens because pencil or ballpoint limits you in drawing attention and adding life to parts of the site, though I like how the pencil can be used to make drop shadows .

  • Visio Guy

    Visio is great for creating many variations of wireframes, or for conceptualizing several page types. It is easy to copy a design, then tweak a few elements to quickly generate several ideas.

    For your readers that are interested in using Visio to do wireframes, our site has a few articles with free downloads that might be interesting and helpful:

    - Design Web Pages With This Visio Breadcrumbs Shape
    - Pixel Unit Dimension Line Shape
    - Lorem Ipsum – Visio IA Text Placeholder Shape

    We will be adding more over time, as well as publishing a round-up of Visio wireframe resources soon, so you can also periodically check our Wireframes & IA category-link.

    Cheers,

    Chris (aka: Visio Guy)

  • http://www.laughingliondesign.net jennyrusks

    Hi Chris, excellent point. I’ve been stung there myself, so if you can tie things down at that stage it’s really helpful.

  • Original_Leslie

    I prefer to use an application to layout my pages when I am designing a website. I do not have anything against drawing/writing it out; I just can’t get my creative juices flowing that way. It all comes to the same thing though… preparation.