Before starting any kind of project a plan is required. Wireframes could be seen as the initial plans for a website. Wireframes are black and white line drawings of a website’s pages that are used to plan out the website before it is designed. Using simple rectangles and text boxes, the structure for each page of the site is determined before we begin actually designing the site.

All web projects begin with a Kickstart meeting, where we meet with the client to discuss their vision for the site. The information gathered in this meeting is then collated and used to create the wireframes.

Wireframes allow you to think logically about a website design

Creating wireframes for a site before designing it allows both us and the client to think about it purely from a functional point of view. The question we ask ourselves is “What do we want the user to do on this page?”. By removing the styling aspect we are able to focus directly on the content and features of the site to ensure the website flows as it should.

This allows us to freely decide and tweak the user’s experience through the site and iron out any potential issues before we flesh out the design.

Through collaboration with the Developers and Marketing Team, we work together to ensure the site is well laid out to give the user the most efficient experience as possible.

Determine the hierarchy of information throughout the site

While a sitemap can be very useful to determine the structure of a whole website, it can often be quite daunting to look at, especially for more complex sites. When creating the wireframes for a site, we are able to visualise the sitemap and see how pages fall into place. This can be useful as it may bring to light ways the sitemap could be adjusted to make for a more simple user experience. Making these sort of amends is best done at this stage as the wireframes are more easily adjusted than the fully designed visuals.

Identify the key call to actions and other important information

Creating wireframes allows us to identify and confirm the purpose for each page. It will then be-come apparent what the key Call To Actions should be and what other information needs to be prominent on the page.

More efficient use of time

One of the main benefits of creating wireframes is the efficiency is adds to the project. Rather than making possible lengthy amends to designed visuals, we are able to adjust wireframes quickly and allow more time for actually designing the site. We also create wireframes directly in Photoshop to kickstart the design process. This means once the wireframes are all signed off, the same docu-ment forms the foundation of the designs, rather than using another application to create wireframes and having to recreate the layouts again in Photoshop.

See how real content will look

Wireframes construct the layout and placement of content, and this is most effective when we use real content from the client. Instead of using placeholder ‘Lorem ipsum’ text to guess how much text will be displayed, using the real text and images will allow us to layout the pages around the content, rather than making the content fit the design at a later date. Although not always the quickest route to go down, we would always recommend content-lead design and layout as this will produce the most successful designs and ensure your content is most effectively presented.

To find out more about our design process or start a new project with us, get in touch.