Making the Web Design Process Painless : Building a Website Step by Step A-Z

  • January 22nd, 2011
  • Blog Post
  • 2 Comments
  • drogggAdmin

photo: Salvatore Vuono

Creating a website top to bottom can be a complicated process with many hurdles and pitfalls along the way – even when you have prepared for the worst, the worst can happen. Boxes aren’t lining up in IE6, video not loading properly… there is just so many variables that come into play and the results are known until the testing stage.

Building a site can be compared to building a house – there are logical steps that must be taken otherwise expect a site that gets run down quickly, needs fixer uppers, and ultimately, a good chance of being a money pit.

Having a process mapped out – one that you stick to – will help in avoiding mishaps and will help out in making the process be a pleasurable and rewarding one instead of a frustrating complicated one. Having an outline not only keeps you and your team on track while simplifying communication, it also informs and educates the client on how the website will be created from start to finish.

Here is a basic outline to follow as a guideline – each client and project will be unique and should be treated so, there will always be slight differences. Over time and with experience you will develop an outline of your own.

Overview

  1. Start with a reason
  2. Research / Education
  3. Create a checklist
  4. Create a sitemap
  5. Wireframing
  6. Storyboards
  7. Production
  8. Client Testing / Revision
  9. Publish

1. Start with a Reason

Why are you creating the site? What is the site supposed to do? Advertise a product, increase a user database, increase ticket sales….

Be clear and write it down. There may be multiple reasons, prioritize each one and try to limit one as the main goal and the rest as subsidiary goals.

Again, write it down and have the client agree and commit.

All design decisions will be based on the goal from this point out.

2. Research / Education

Go online and look for site that have similar goals and look for common elements. Are these elements common because it speaks to the target market? What colors are being used, what types of images and graphics, is there multimedia (video / sound), what types of layouts.. you get the picture.

You may want to question the client on their market as well as ask them for reference sites that they already recognize as efficient sites for their target audience.

From your research you should move toward having a clear idea on what look your site is going to have, how the information should be organized, what technology you are going to incorporate into the project, etc.

Remember, we often are working on projects that contain specialized information that is not part of our knowledge base – I once had to do a web site for an industrial heating company, I have no clue as to what industrial heaters involve, but going through many websites I starting seeing similarities in the navigation. All of the sites had sections for sensors and controls, meaning I should probably important and I should include them as well.

Technology and methods are changing all of the time – be sure to build in time to educate yourself on the best resources for the project. This sometimes means learning a new JQuery plugin vs Flash, how to use a new WordPress them, etc.

Discuss your results with the client and come to an agreement on how to proceed.

3. Create a Checklist

photo: Filomena Scalise

Simply outline all of the needs for the website. This can be simple or complex depending on the project.

Categories can include any or all f the following (and more!):

  • Browser support – what browsers will the website work in
  • Device support – what device will be able to access the site
  • Page size – basically the target width
  • What bandwidth speed are you going to target
  • Content list
  • Color scheme
  • Typography
  • Special needs
  • Accessibility
  • User support
    • Tech savy or not
    • Operating system
    • Interests
    • Location
  • Database needed?
  • Flash
  • Video
  • Audio

You get the idea – the check list helps keep the team on track to complete the site by the deadline and also helps you concentrate on the potential trouble spots.

4. Create a Sitemap

photo: Filomena Scalise

  • Create a simple branching diagram outlining the structure of the site. Include the folder and file names.
  • From the sitemap you can work out your navigation and do some basic user testing before you invest time on coding and troubleshooting.
  • Do this on paper first as there will most likely be some changes. Once you have a sitemap you are committed to, create a cleaner digital version.
  • Doing things on paper is faster, easier to brainstorm, easier to make changes, easier to edit. Also I find that by doing things quickly on paper makes it easier to throw out and start over if a complete overhaul is required.
  • This is a live document throughout the project and there will be changes – edit the working sitemap with changes immediately and share with the group
  • Use a version numbering system to make it easy to keep track of the current sitemap being used. Example: Sitemap v2.1
  • Sometimes the sitemap may be more of a flow chart as some sites are changing content within the same page.
  • Sitemaps help out in determining any changes in the layout based on how many levels are in the sitemap.
  • Helps out in determining the number of templates are going to be needed

Anytime I have been brought in to code a project and there was no sitemap, there has always been extra work involved fixing things that shouldn’t have been broken. The sitemap is crucial for the whole project.

Online Site Map tools

To see examples of all different kinds of sitemaps, Google sitemaps and click on the images link at the top or CLICK HERE >>

5. Wireframing

photo: Suat Eman

This is an important step in taking what has been discussed and making it laid out in a logical manner.

  • Start with paper and pencil. Again, it is easier to brainstorm and make changes.
  • The purpose of the wireframe is to organize the structure of the site as well as placement of the content.
  • No style is used at this stage – no color, no images, no typography… this is not designing the look of the site, it is designing the structure.
  • I can not stress how important it is to NOT, start designing the site in Photoshop or Illustrator before understand the structure and having a sign off on this step from the client. It will save you tons of time and the client money by you not creating multiple layouts before agreeing on the the structure should be.
  • User testing can start by testing how the navigation will work. This also can be done on paper, sometimes with sticky notes.
  • Create a wireframe for each template.

Online wireframe tools

To see examples of all different kinds of sitemaps, Google wireframes and then click on the images link at the top or CLICK HERE >>

In the sitemapping and wireframing stages, we often use pencil and paper and do not get too detailed yet so the client does not build a false idea on what the site will actually look like. We have learned over the years if you give them something with details too soon, they build a false sense of idea on how the final site will look and act, so it is actually better to have something rough and have them knowing it will be different (and better) in the final version.

Looking for more info on wireframes? http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

6. Storyboards

Now is the time to get digital!

The goal is to take your wireframe and turn it into a full blown storyboard incorporating all designing elements – colors, images, typography etc.

Usually the clients will want a few variations to choose form.

Photoshop, Illustrator, and Fireworks are all commonly used design applications used to create the storyboard.

Some will actually start coding at this stage and show web pages as story board with hopes on saving time upon client approval.

7. Production

Once the client has approved the storyboard, it’s time to put the plan into action.

Build the site based on the storyboard importing all images and code up your HTML / CSS pages.

I find it is best to not include the client unless necessary. If they are shown a page that is not complete they may get a different sense on how the site will actually act, and start top make changes based on an unfinished page.

Within the team, test and revise the site until it is ready to present to the client.

8. Client Testing and Revision

Send a link for the testing site to the client and let them go through the site and requests changes.

A few things to keep this step as uncomplicated as possible:

  • Define what is a revision and what constitutes a redesign.
  • Give the client a deadline as to when you need the revision list by
  • Ask for the list to be sent in one email
  • If they must edit the list, have them resend the entire list with the new changes to avoid multiple emails
  • Some sites / projects will require a few round of revisions

9. Publish

Once approved the site is finished and it is time to publish to the server.

You can use this outline as a guideline to start from and develop your own process. I’ve tried to include as much information as I can based on years of experience with the hopes of making your web site development experience a better one for you and your client.

Please feel free to comment. I will most likely be making revisions to this posting as the process does change over time.

  1. King Ka-Ching left a comment on April 25, 2011 at 8:15 am

    Great tips on building a website pain-free. Thank you so much. You saved me some big headaches, Darryl.

    • drogggAdmin left a comment on April 25, 2011 at 12:00 pm

      Thank you!

      I will blog more when I have time, unfortunately I have multiple projects on the go and I have limited time.

Comments are closed.