My wireframing process

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

1. Seperation 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.
The first thing I do is read through the content, and make sure that the “story” makes sense. I will then seperate 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 prevent myself getting into too much detail. The sketch will highlight the positioning of key information, and will use the seperated content in the word document as a guide. Print outs of wireframe templates are helpful for helping me “draw within the lines”.

3. Computer wireframes

After I have a sketch that 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 start including more detail in the wireframe, and also attempt to place the text on the page. This is the point where the wireframe might change slightly to accommodate the real length of the text, compared to my estimation.

5. Visuals

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

6. Interactive prototypes

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



Tags: , ,