Thursday, February 22, 2007

Web Design - a step by step quide

This is still in the process of being written. I am using my current project as a model to write this and am re-researching anything I haven't read new material about in the past 6 months.

1} If project is a redesign, have someone test usability of old site to determine what works and what needs improvement.
2} Research the dominant companies in the industry. Print out thier sites and become familiar with what users expect as well as where there is room for improvement/innovation.
3} Sketch out the wireframe to define a the page's content and functionality without touching on design, colors, graphics, or fonts yet.
4} Determine your canvas size. Look at visitor stats for what Screen Resolution And Browser Type to optimize for. Determine the height and width of your main content area.
5} Find Your inspiration. Take screenshots of site components so you can have them for reference.
6} Sketch out designs. Document your design sources, ideas, and process. These will be your points of reference for pitching, understanding, explaining, and being professional.
7} Make A Paper Mock Up. (You can cut up the pieces of the other web sites.)
8} Make a Photoshop Mock Up with everything on seperate layers so you can move and Shift everything Around.
9} Create A Simple HTML file mock up to test color. Save your photoshop mock up as an image and insert in the document. Set the background color of the body to match against the different background colors you plan on using. Test on a PC and a MAC. You might need to use some of the 216 Web Safe Colors
10} Let a peer look at your design. Educate them first. Show them a copy marked with what is permanet and why (industry related usability, CEO mandated, ect...). Present a sample sheet of the major influences of the design. This will save a lot of your peer's time so they can focus on the design and brainstorm improvements or even trigger an innovation. Use multiple peers who are strong in different areas - usability, seo, design, psychology, industry guru, ect...
11} Present your comp(s) to the company for final changes. Explaining to them what's industry related usability, SEO realted, accessability related, as well as samples of the major design influences.
12} Create css mock up.
13} Test css mock up in different browsers and resolutions for font readability
14} Create and optimize images and add to css and html
15} Add content to HTML
16} Test your site (again) on different browsers, screen resolutions, and operating systems
17} Make sure all images have alt and long description
18} Make sure all links have title tags and don't open in new windows
19} Validate your CSS and HTML

Other Effective Guides:
CSS From the Ground Up

No comments: