Posts Tagged ‘wireframe’

How To Wireframe

Monday, April 6th, 2009

Wireframes can be a great way to visualise your concept and get the client engaged with something other than a written spec, but what are the best practices? Wireframes are supposed to show where items will be placed, and the general layouts of the page. Doing this will save you a lot of time before you start the time intensive design phase. Using wireframes is a great way to begin a project, as it allows you and your client to focus on layout without the distraction of color, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs. Design is not important. Think about layout, functions and navigation. Think about who the wireframe is for:

  • Developers?
  • Client?
  • Designers?
  • Management?

We tend to build wireframes in HTML, but doing them on paper or in Photoshop is fine, the process is the same, to work out the layout and general structure of the site.

Wireframe Example

Wireframe Figure 1: Wireframe example (click to enlarge)

Written Specs vs Prototypes

Wednesday, April 1st, 2009

No client wants to read long scoping or technical spec documents, they either do not have the time, or they do not understand the content within them. Written specs take a long time to write and for small to medium sized projects they might not be the best solution.

We recently have adopted a more visual approach to scoping projects. Instead of just supplying a written technical scope we are using drawings, design mock ups, wire frames and prototypes. Our new process is as following:
Prototype - Drawing

Drawings

We start off with the good old fashioned pen and pencil, rapid drawings, ideas anything that comes into our heads gets put on paper. This is a great way to set up the structure of the design and layout quickly and easily.

Wire Frames

The next phase is to build the basic blocks of the page, this can be done either in a graphics package such as Photoshop or in HTML. We tend to use large coloured blocks to denote areas of the page.

Design Mock Ups

The next phase is the refine the wire frames and skin them with a design, so that they look superb. This design phase is very iterative and involves lots of client involvement and feedback.

Prototypes

With our prototypes, each page is designed and marked up in HTML and JavaScript, but with no business logic or database, which creates a skeleton of the site. These screens are considerably easier to update based on client feedback, and make sure that the structure of the site is agreed before the code and data model are designed. It also allows us to use a highly iterative process when working with clients.

The education for clients is that after the prototype has been signed off, that is the what we will be delivering, we have design freeze after that point.

The advantage of this is that the client can see exactly what they are getting, and can engage with the functionality before it is built and it is too late. A lot of the time clients have their own ideas about how the software should work, and pays to get their input early and often while you are deisgning the system.

So no more written documents?

This approach has worked very well for innovative projects, where the scope of the project is not clear or not set. However we still provide written documentation as well to back up the prototype as there is simply no replacement for this.

This approach is not for everyone and will not work for large scale projects where a full and detailed project management plan will still be required, but for smaller projects the results have been amazing.