How a wireframe will help you and your developer

How a wireframe will help you and your developer

Time is a valuable resource when running a business. Once you've decided you need a new website, anything that can be done to speed things up without spending money or sacrificing quality has to be good.

One of the easiest steps you can take to streamline the development process – and to make your web developer happy in the process – is to supply them with a wireframe of your ideal site.

A web developer will normally sketch a wireframe of your new site as part of the development process anyway. However, most will be very appreciative if they can see their client’s ideas first. If you kick off the process, you will also save time communicating your vision.

What is a wireframe?

A wireframe is simply a graphical representation of a website's layout. It contains all of the elements that will need to be included in the final design but without any coding. In some ways, a wireframe is similar to the storyboard a film director works from when filming movie scenes.

Wireframes range in complexity from the simplest of pencil sketches on graph paper to all-singing, all-dancing online layouts complete with images and placeholder text. The main difference between a wireframe and a website prototype is that the wireframe is purely visual – it does absolutely nothing.

You don't have to produce a wireframe for every single page of your website. Even a basic sketch of your home page will be appreciated by your developer.

Why client-provided wireframes are a good idea

There are several great reasons why providing your web developer with a wireframe is an excellent idea:

  • It gives them an insight into how you envision your website looking after completion. This helps to keep everyone on the same page.
  • It provides an idea of scale. This is particularly useful in complex websites with many elements requiring placement.
  • It ensures all elements of your website are included in the design. It is much harder to integrate extra elements at a later stage, particularly once coding is underway.
  • It generally reduces the number of revisions needed during the prototyping stage.
  • It reduces the risk of last minute changes.

It is best to treat your wireframe as a tool of negotiation rather than an order form. While no one knows your business like you, your web developer will understand modern design standards and will have experience of what works and what doesn't.

Using apps to wireframe

As already explained, wireframes need be no more than pencil sketches on paper. However, there are plenty of free and paid for desktop and mobile wireframe apps worth looking into.

Wireframe.cc, for example, is a simple, clutter-free desktop wireframe tool with a context-sensitive user interface for efficient design. Balsamiq offers a large array of functions including drag and drop placeholders, an auto-align to grid function and hundreds of custom icons.

On the mobile app side, Omnigraffle offers an app for iPhone and iPad users while Wireflow combines wireframe and workflow functions for Android devices. FluidUI is another tool, enabling real-time in-app collaboration. You may find that your developer is open to working with you in this way.

Another popular wireframe tool is the Grid 960 template which can be downloaded for use with various software programs including Photoshop, InDesign and QuarkExpress. As the name suggests, this creates a 960px wide frame which can be set up to contain 12, 16 or 24 columns.

Whether you plan to scratch your layout onto a scrap of paper or collaborate with your developers over a cloud-based wireframe app, bridging the gap between initial sketches and detailed design will be a smart move to make.

A few examples to finish with

Topic: Project management


© Copyright 2018 Eyes-Down Limited