Softme - Software


Prototyping and Wireframes

Who isn’t impressed by a sneak peek at a beautiful website? When you know that it’s been made for your organisation – that your brief has been the catalyst – it’s a great feeling when the designer slips you a PDF preview and it looks bloody marvellous.

But if it’s done too soon, the gorgeous designs can be just as likely to confuse the project as make it successful.

A nice glossy preview has its place, but getting to grips with a (far less polished) prototype web experience early on in the process will be at least as instructive. This advanced point of the initial Helastel project scoping exercise is based on the principle that design finesses come last, and fundamental building blocks come first. What you get is a wireframe.

What is a wireframe?

Rendered in HTML, wireframes are a lightweight method of demonstrating the potential layout and functionality of a website before committing to any design.

Stripped down, before all the gloss has been added, even the greatest web development properties look a bit ugly while they’re still on the drawing board. And that’s the way it should be. A wireframe is typically far more beneficial than creating the equivalent ‘flat’ PDFs or image files. It means:

  • You get an actual experience rather than a series of static views
  • The whole team can focus on functionality and user journey, and provide input interactively
  • You experience the project inside the web browser (the medium it’s being created for)
  • There’s no waste. It’s fast to create, and changes can be made straight onto the platform that the final product will become
  • No one gets distracted by icons, colours, transitions or other cosmetic design aspects

The Prototyping Process

Wireframes are an essential part of a very involved and interactive prototyping process:

  1. Getting to the prototype stage requires research into user personas and each of their requirements.
  2. These requirements map against functional specifications, which feed in to production of the first wireframe.
  3. The wireframe becomes the testbed for a series of defined scenarios, starring each of the various user personas.
  4. We examine user cognition, and refine the best way of constructing user journeys throughout the web experience.
  5. Changes can be made quickly and accurately, based on input from the various stakeholders.
  6. It’s a fast and cost-efficient way of finalising requirements before development begins.
  7. It ensures that real users will be inspired and satisfied by the finished website.