The Five Workflow Steps to building a Webpage


People will often ask me where to start or what steps would naturally follow after one another when creating a webpage. That would be => "workflow" => may I suggest….. mine.


Step 1 – The Paper Napkin

This is the initial meeting where you get together and listen to what your client’s needs are going to be for their website (or your boss’). I don’t actually use a paper napkin, but it is pretty close. I like bringing a large piece of paper that we can both draw on. I typically detail out the home page and one more basic “template” page to start. I also like drawing rectangles to represent ALL of the pages I will be creating. Plus showing with arrows how those pages will link/navigate to each other.

Step 2 – The Wireframe

I will then take that brainstorming session and go to my favorite vector-drawing program to create the Wireframes for all of the pages I have agreed to make. I would set up the scale of the page to be, in pixels, the size of the device screen I am designing for, the picture above illustrates a computer monitor wireframe. I would aim to get the “pixel” dimensions correct, but that would not be as important as showing the correct proportions and arrangement of the contents on the page. I would create one for every breakpoint (device size/orientation) I was going to be responsible for… (check out on my page for articles with the #Wireframe tag) The wireframe is purely a black and white rendition with boxes and writing. I would reconvene with the client, to see if I understood what they had expressed in the Paper Napkin phase => equaled what I illustrated in the wireframes.

Step 3 – The Mock Up

After I had made sure that all the content the client wanted was going to be displayed, then I would get any assets from the client for the website (photos, logos, video, copy, etc…). If a client would like me to create new content, the price of the website would go up ;~D. (This of course is a conversation better made at the Paper Napkin stage)
Ready to go with all the assets I would open Photoshop or Illustrator (which ever program you are faster in) and create the actual look and feel of the webpages. This is where you nail down the sizing (in pixels) of all the elements, text, etc... on the pages. I usually then PDF the file and email the mock up to the client for commenting. Once all is green lighted… That is when all the FUN (ha!) Begins!

Step 4 – Converting to HTML

This stage actually has 3 separate steps in itself:

a. Create the Containers – Create all the DIVs that will be needed to contain all of the content you will be displaying. You can go back to the wireframe for help with this, because the wireframe should have represented all the containers you will need. The exception would be any nested DIVs the layout needed to make it work properly. And you do realize that with HTML5 => Tables are passe’
b. Insert the Content – This is where you put in all the copy text, photos, SVG, videos, HTML5 canvases, etc… All of the content should be inserted into the containers.
c. Tag it Up – Now that the content is in, you need to --what I call-- sub-contain the content. Or my motto => leave no text behind ;~D This is where you add ALL of the h1, h2, p, ul, li, etc... tags needed to sub-contain your content.

Step 5 – Add Some Style (the CSS)

For me this stage also comes in 3 parts:

a. Add the container & object widths FIRST in the CSS – since I am assuming everyone now is creating Responsive Web Designs, I will advise to NOT add height – that will break your layouts when appearing on different devices! Objects are pictures, videos, etc… (BTW – check out my three blog articles on “resizing elements for Responsive Web Design”.
b. Stylize all the rest – color, fonts, everything else, but…
c. Save the padding to the end. I can’t begin to express how defeating it is to have to recalculate size and padding, when you add it through out the middle of the CSS process. I leave it to the END – the final touch and voila… Or should I say TaaDaa ;~D

No Comments Yet.

Leave a comment