In week 19, we continue the task of preparing for the design of a website. Research and properly understanding the client’s need is the main task.

Upon completion of this unit, you should be able to:

  • Explain what a wireframe is
  • Understand why it is important to create a wireframe
  • Focus on the three areas of the wireframe process, namely Information Design, Navigation Design and Interface Design
  • Choose between using a hi-tech and a lo-tech wireframe
  • Create your own wireframe

I’ve used the term wireframe for the information and navigation design in my daily job, but not for the interface design. I often do the interface design wireframes as part of a tender to a potential client. I add “proper” design — fonts, colours, graphics, etc. — to the elements instead of presenting those as un-designed placeholders. These mockups then serve both as wireframes and as design suggestions. However, there are projects where we get the job before any talks about design — or wireframing — at all. For these instances, the approach taught in this lesson seems reasonable!