web design checklist
With my limited experience this is a step by step process that I have devised in order to bring a website from an idea into a fully fledged site. It’s evolving, but this is the story so far. I’m sure there will be amendments in a few months time when I have learned a bit more.
Overview of basic design procedure
- Start with content. What is going on the site? Make a content inventory. This leads to the information architecture.
- User profile, user categories.
- Rough site map. This is a basic information heirarchy. Tree structure. Who are the users and how can they best get to the content they want?
- Wire frame. The page layout. Very basic, colours or fonts or pics, just the areas of content and priority of information.
- Wire frame picture – see below.
- Make it look nice and yet usable, keeping the end user in mind at all times.
- The future? Updates and upgrades, expandability etc.
More detailed plan from step 5 onwards:
- Create a header or banner for image replacement.
- Use the colour scheme tool to apply colours to the wire frame.
- Create full layout in fireworks using actual pixel dimensions and images.
- Create a new html file or xhtml file to look like wire frame. Put css in the <head> section.
- Test in browsers. Mac first, then PC. Use hacks and filters as needed.
- Create templates and test further, don’t separate css just yet. Back up files as you go.
- Make a list of images and content required. Meta tags. Use task tracker spreadsheet.
- Create individual pages from templates and then add content and images.
- Favicon based on the colour scheme. Read the favicon post here
- Separate the css from head section if no more syling and testing is required.
- Check all links.
- Upload: html files, css, images, favicon and others eg .pdf