The debate continues on whether it is Wireframes or Functional Requirements Definition document. Since I personally like “wireframing” my article would be slightly biased towards the same. Adding to the same, both the processes tend to complement each other. To start with let’s see where exactly (i.e. which stage of the software cycle) the wireframing process fits in.
Being a part of the initial phase of the development cycle, wireframing is a process which helps in organizing the elements of a website. The wireframe acts as a prototype that shows the placement of page features, such as header, footer, content, sidebars, and navigation. It also specifies the placement of the elements within these content areas. If you want to develop a site that accurately matches the client’s requirements and minimize project revisions, wireframing will keep you on track. Thus it provides to everybody a visual representation of the website and displays a clearer picture of the design of the website layout. The key is to keep it simple enough to be clear to the client and to be flexible for the designer, but detailed enough to guide the programmer.
A wireframe should not only provide a final look of the desired website but also allow revisions to be made easily and early on in the process.
Wireframing brings the following key benefits:
- It gives the client an early, close-up view of the site design (or re-design).
- It can inspire the designer, resulting in a more fluid creative process.
- It gives the developer a clear picture of the elements that they will need to code.
- It makes the call to action on each page clear.
- It is easy to adapt and can show the layout of many sections of the website.
Like all other stages, it’s nice to follow the nice practices in developing a wireframe too.
- It’s recommended to work in greyscales. Different shades of gray help in categorizing various elements, shapes and outlines. working in grayscale helps maintain focus on the primary function of the process, which is to finalize the layout, not the design
- Requirement Understanding: A clear understanding of the client requirements goes a long way. User responses thus page outputs, calls to actions need to be very clear thus making the wireframes very clear.
- Requirement Gathering: Navigation sections, header, footer, logos, ads etc if collected in advance help in the accuracy of the wireframe designs.
List of different tools that i use are:
- Hand sketching on paper
- Visio: Flowchart software.
- Web prototyping software, such as Gliffy or Balsamiq.
- Graphics software, such as Photoshop or Illustrator
- (X)HTML wireframes are almost like actual sites themselves.