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.
• The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.
• 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 <head> content eg page title, and then move on to your <body> 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 <head> 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!
