1 The eight steps of webdesign

On the next pages we will focus on step 3 (wireframe) and step 5 (find a style)


Source: amgwebpro.com
 
 
 

The steps:

  1. Figure out what the focus of the website will be.
  2. What specific features do you want in the website.
  3. Create a list of sections for your website and give them a hierarchy of importance. (= sitemap & wireframe). If a small screen version is required, repeat this for a smartphone and tablet sized version.
  4. Write out your content and finalize it. You might want to go for storytelling
  5. Find a style / look that meets your website’s and your industry’s requirements.
  6. Build the website.
  7. Evaluate the website and make the required changes / updates.
  8. Go live – register a domain, find a host, upload the website.


1. The focus of the website


This is the first thing you want to define clearly before any other step is taken. You need to decide what the main purpose of the website is - what you want to focus on in terms of a subject. It is important that you define this step as clearly as possible because a website’s focus has a major impact on the whole project; this is the ‘foundation’ of the site.

 

For example:

  • A web store.
  • An online product catalog and reference supporting brick and mortar customers
  • Information hub for established clients.
  • Branding website.


2. Specific website features


This builds off of the first step, where now you look at actual features that you need to implement.
For example:

  • A shopping cart for an online store
  • A password protected section of the website
  • A product configurator (e.g. from kitchen layout online design to bill of material, a car configurator), 
  • Online stock check
  • Online reservations
  • A product design wizard (e.g. www.nike.com "personsalise")
  • Responsive webdesign requirement ? (see below)
  • Compatibility requirements (HTML5, CSS3,...) (see below)
 

Again, the more detail the better.

Have in this step a reflection on the target displays that need to be supported. Nowadays, it's a must your website is also usable on a tablet screen, e.g. a smaller 7 inch one and small netbooks. Whereas tablets probably can get away with a slightly rearanged version of your deskop version, smartphones will require more dramatic adaptation. If you need this, you need to specify "responsive webdesign" as a feature. 

You better specify also the website needs to be HTML5 / CSS3 based, which are technologies that can work on smaller devices, whereas Flash will definitely not work on the Apple iPad/iPhone devices.

 

3. Map out the major sections of the website (= wireframe)
 

With the first two steps completed, you’re ready to actually start mapping out the major sections of your website; drawing out quick diagrams of your website is a useful way of doing this. A diagram can easily show the hierarchy of your website and how the various sections are related to each other. Especially if you don't intend to build the website but call for the services of an agency, this will serve as great communication material understood by all.

If responsive webdesign was in the specific features requested, you will have to draft also a wireframe for the tablet and smartphone version - Have a look at below example supporting 3 screen formats:

 

 

4. Write out your final content and if possible, go for storytelling


This part is usually left to the end … then people wonder why they have to go back and rethink the structure of the site. All websites are driven by content; it’s the content that makes a site effective and successful. As such, this part of the process is arguably the most important, so you need to pay attention to it.

You could go for Storytelling. Have a look at www.leffe.com/en and the great storytelling they use for attractive content.

 

 

5. Find a style / look for the website


At this stage of the process, you are ready to start looking at the visual aspect of the site – the design. You have a few options:

  • Hire a graphic designer / web designer
  • Come up with your own design – I’m assuming you have some artistic and design experience.
  • Buy yourself a website template and save time and money.
 
Don't be tempted to focus too much on looks (except of course if the nature of what  you do is requiring glossy looks - e.g. design & fashion related) -- Often a sober utility look can result in way better conversion then a fancy one: E.g. a B2B website selling parts for appliances does not need anything fancy, but must be very user friendly and load fast to get popular (people searching for repair parts are often in a hurry and might be remote on slow 3G). 
 
Remember Google: You can't have it more sober then www.google.com and the sober publicity it shows.
 
 

6. Build the website


Yes, I know it seems impossible but you can finally start building the actual site at this point! If a web services agency will build the website, your input for steps 1,2,3,4 and 5 are crucial input to avoid results not matching your requirements. Especially the wireframe one and clear input on the style

With the above questions answered and steps completed, you’ll find the process of building the website (actually writing out the code,) is much easier and you will have reduced the chance of having to go back and redo things.


7. Evaluate the website, make the required changes / updates


Once you've built the website, you should walk away from it for a day or two. This will allow you to come back and evaluate it with fresh eyes. It might also be a good idea to get someone who has not worked on the site, to take a look as well. Even better is user testing. Let somebody look his/her shoulder and let them tell what they think while using the website. Give them a number of generic tasks to do and get their feedback.


Here are some of the things you should be looking for:

  • Clean easy to update design/structure.
  • Good usability in the design - and all that implies.
  • Fast loading 'light' pages.
  • Intelligent use of technology - using HTML5 based media when it makes sense not because you want a 'cool' intro! 
  • The website’s ability to convey the meaning/message of the website quickly if not instantly.


8. Go live - register a domain, find a host, upload the website


If you’ve passed steps 1 to 7, you know you're ready to show the world the website. All that is left to do is go live:

  • Register a domain
  • Find a hosting company
  • Upload the website
 

NOTES: 

  • Don't confuse the 8 steps of webdesign mentioned here with bringing an e-commerce solution life. There is way more to do then webdesign of course!
  • You could actually register the domain and find a hosting company after you’ve completed the first 4 steps. Sometimes it makes sense to register your domain name before you design the website; this is because you may want to integrate the domain name into the design.