Putting it all together: A web designers workflow

The Workflow STEP 1 : The Wireframe STEP 2 : Folder Structure STEP 3 : Export/Import any images etc STEP 4 : The HTML File STEP 5 : The CSS File

STEP1: The wireframe Some developers create this document first, as it helps with ensuring your initial designs contain all of the desired functionality while others prefer to get their hands dirty in photoshop/fireworks first and come up with a template/prototype before moving on the a wireframe stage. A website wireframe is a visual guide that represents the skeletal framework of a site.visual guide The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.page layout The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. There are many tools out there that can assist with quickly putting a wireframe together: Pencil Project, Framebox, iMockup (ipad), gliffy etc.

STEP 2: Folder Structure Now that we have planned our sites layout it is time to start building, and the first port of call is establishing a good folder structure. Make your root directory and add in any initial sub directories Example sub directory folders you may want to create include: images, video, audio, css, js etc

STEP 3: Export/Import any images etc If you developed a layout in photoshop, you can slice it up and export your images. You may also have some photos/graphics that you will need to ‘save for the web’. Save these image assets along with any other content (eg videos etc) in the relevant sub-directories.

STEP 4: THE HTML FILE At this point we are ready to put together our HTML file. Start with the content eg page title, and then move on to your elements. Use your wireframe to work out what HTML elements you require. Once you have built a HTML ‘skeleton’ you can start to add in your content. Preview your HTML file in a browser and make sure all your content is loading correctly.

P.s. don’t forget the good old fashioned pencil and paper

STEP 5: THE CSS FILE Once our HTML file is finished, we are ready to start styling it with some CSS. Create a new css file, and save it in the ‘css’ folder you created in STEP 2 (it is important to remember the name of this file as you will be referencing it in your HTML file... I would use something like ‘stylesheet.css’ You can approach the CSS file in the same way as your HTML file. Look at your wireframe and put together a ‘skeleton’ containing all of the elements/selectors you used in your HTML document. Add a link in the section of your HTML document that points to your CSS file. Start to add in your style rules, but as you work continually monitor your progress by previewing your site in the browser. Finally stop and admire all you newly found website building prowess!