Web Site Workflow – Part 1

I have busy designing a new site lately.  While doing this I thought it would be interesting to document my  work flow. As always this is in note form giving you a general overview of what to do. If you require more detail on any stage then please comment and I will answer.

Part 1 – Preparation
(1) Discuss the requirement with client
(2) Submit a design document to the client for them to fill out.
(3) On your PC create the file structure for the new site. (see Photo)
(3) Based on discussions and the returned Web design document, create the fluid “Site Design Document”. This is a design document detailing all information concerning the site. It acts as the top document and is issues and updated as required through out the development of the site.

(4) Using Adobe Fireworks design a mockup of the home page and submit it to the client for approval.
(5) Once approved Edit the Fireworks design to reflect the accurate final mockup. Attention to slicing, positioning, colours and text must be given such that its components (slices) can be utilised in the final site. Slicing must be appropite for final site assets (make sure images are named and optimised. (see Photo)

(6) Export individual slices to the sites image folder ready for use in Dreamweaver.
(7) Sketch a layout diagram of layout slices and text areas.  Note the areas sizes.  This will help when you start creating the layout Div’s in Dreamweaver.

You now have the web design layout designed and approved. The graphic elements have been sliced up and imported in to the sites image file ready for uploading.