My wireframing process

  1. Separate content
  2. Sketch
  3. Wireframe
  4. Hi-Def wireframe
  5. Visuals
  6. Interactive prototype (if designing a website)

1. Separation of content

In most cases, when I receive a request to create a design for a page, I will receive the content in a word document.
I first read through the content and make sure that the “story” makes sense. I will then separate the information into content blocks. Increasing the font size of any text that can be used as headlines. Bolding areas of emphasis, etc, etc.

2. Sketching

I will then do a quick sketch with a big marker to avoid getting into too much detail. The sketch will highlight the positioning of key information and will use the separated content in the word document as a guide. Printouts of wireframe templates are helpful for ‘drawing within the lines’.

3. Computer wireframes

After I have a sketch, I am happy with; I’ll boot up Photoshop and replicate the sketch with black boxes within Photoshop. Each box will be labelled so I know what goes where.

4. Hi-Definition wireframes

The next step would be to include more detail in the wireframe and attempt to place the text on the page. This is where the wireframe might change slightly to accommodate the actual length of the text compared to my estimation.

5. Visuals

Once I’m happy with the wireframe, I will move into the page’s visual design. Creating styles for the various elements, such as fonts, colours, buttons, etc.

6. Interactive prototypes

Once the concept, copy, and design are signed off, I will move to interactive prototyping to give the client a real-world feel of how the design will behave on the web before being signed off for development.