Design Method

Using Wireframes for Website Design & Development

Wireframes play a huge part in our design process and I want to run through how we make them work within our design process – both for our customers and ourselves.

It’s a very simple process and can make a huge difference when planning your own website. Wireframes give a firm idea of website flow, its usability and plants the seeds for the look and feel.

A bit of context: I was at my dear old parents over the weekend and whilst I was making myself a cup of tea I found myself automatically and swiftly moving from one cupboard to another… I still remembered exactly where everything was, despite not living there for 10 years or so. What has this got to do with website usability I hear you ask?!

Well, the answer to that is familiarity, or more precisely, putting and having things where people expect. Some websites are far too clever for their own good, the best websites stick to some very simple unwritten rules and regulations that makes them work seamlessly…as I was in my tea making. Design and functionality and a good Content Management System (CMS) obviously play a huge part in this.

There is no point in the user getting lost and not finding the information they came to find on your site in the first place… it needs to be as easily accessible and easy to find as possible, the fewer clicks the better. So wireframing the site before doing anything else is hugely beneficial.

Here are a few little tips on how to get started.

Top level navigation

Try sorting information into categories to create easily digestible sectors on the site – it does not matter how big or small the site you are planning is, it’s a hugely beneficial process to go though.

The Homepage

It’s best to start mapping the homepage, you can then take this as a solid base to move forward. Remember, wireframes are about providing structure to your content in a visual way, not about creating a visually rich template. So consider the content you’d like to appear on your homepage, and what is going to be most important to your users.

BM Homepage WF

Keep in mind the User Expeience you are providing your visitors. This is where wireframes really come into their own as you aren’t distracted by the visuals, and can really focus on the experience of the website, and its content.

Building the Wireframe

One of the key aspects of making wireframes is flexibility, you need to be able to change your ideas as they develop, so make sure you use a method that allows this in a way you are confident in using.

Experienced users of Adobe’s Photoshop will be comfortable using this software to develop their wireframes, and its powerful tools allow for flexible editing to those who understand it. Photoshop also allows you to put your own stamp on your wireframes, creating symbols that represent certain elements across multiple pages, such as icons, blocks of text, and menus.

If you’re not graphically minded there are plenty of resources online that provide placeholders and graphics to represent elements of your site, which are easy to implement and create a website structure with.

Remember you don’t have to create your wireframes digitally, if you’re more comfortable with a piece of paper, a pencil, and a ruler those work just as well.

BM Case Study WF

Test and Amend

Show your ideas to someone who has had no contact with the process, that way you can see how intuitive the UX is to them and where they struggle in terms of navigational flow. Make any changes necessary to get a good balance between great User Interface and strong graphical potential.

BM Case Studies WF


Now you have the shell, you can build the graphical design elements over the top, either yourself, or outsourcing by to a web design agency who can take your wireframes and add the visual website elements.

BM Homepage Skin