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 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:
