Wire frame web designing

Why wireframing works so darn well to produce a better web design on your project. 

What is it?

Wireframe web design is a method of planning the use of web page real estate and architecture to create a user friendly experience.

When is it used?

Wireframe website design is ideally used anywhere you need to carefully plan how to deliver marketing messages and particularly with sites over 10 pages or which you expect to expand further- such as with a content management system. Because content management systems require templating, wire frame design is useful because the wireframe informs a graphic design which is scalable and can expand over time.

Why is it used?

It’s chief role is to make sure that the real estate of the page is used in the right way. Often, inexperienced web designers can fill the real estate with images – but this may not lead to the best customer experience, let alone produce the results that a company commissioning the web design wants.

5 reasons why it’s a good idea

1. Placing key messages

It’s paramount that key marketing messages and calls to action appear above the fold. Though everybody has the hang of scrolling, anything above the fold with get the most attention and visibility. Therefore it is the most valuable space on your website.

2. Content management system planning

Identifying how a content management system can expand over time, how major page elements can be managed, and also how to place messaging to its best advantage – all of these tasks can be well thought out and accomplished on a practical level before the visual design is approached.

3. Locating navigation

Not all navigation is the same. In fact, where you put the navigation and even how you phrase the links have tremendous impact purely at the navigational level, let alone other considerations such as search engine optimisation.

4. Building Blocks

By approaching the layout without a design, you don’t get distracted with the visual imagery and you're forced to concentrate on on how the site will function best at a practical level.

5. Managing large & complex sites

Poor usability, and not thinking problems through in the early stages, can lead to fantastic problems later on in a project. Wireframing is a process which ensures you think of everything, by simply looking at how the navigation and architecture work without any other elements getting in the way. Precisely because there is no actual graphic design, it’s far easier to spot problems.

Conclusion

A great graphic designer works well within the constraints of wire frames. Some might say it dumbs down design and I’d have to disgaree. Because design is about more than just the visual. Great design is about both optimal form and function.

Wireframing resources

Though many will simply plan in Photoshop, this Smahing Magazine article shows you some other free wire frame web design resources which might help you.


Ask us

Got a question? Give us a call on
01392 427 358


Join our mailing list

Recent articles

Thu 18 Feb | 2016
Following the launch of a new website, myhealth-devon.nhs.uk, Reactor15 have been helping to promote the website within Devon, in particular to improve the position within the search engines for users looking for support and advice on their health and wellbeing. MyHealth Devon has been developed by Devon Referral Support Service, part of the Wider Devon Sustainability and Transformation Partnership (STP) with the support of local clinicians. 
Read more


Thu 18 Feb | 2016
We have just launched a new app to help reduce waiting times in hospitals across Devon and Cornwall. The app, NHSquicker, allows people to view up-to-date waiting times for local emergency departments and minor injuries units. It also provides information regarding distance and time to different treatment centres, based on the user's location. Reactor15 have been working with Exeter Health and Care IMPACT Network, a collaboration between the NHS across Devon and Cornwall and academics from the University of Exeter to build an app which is widely available for smartphones and tablets, on Apple and Android. The NHSquicker app took six months to build and is a fully native app developed using our own custom framework. Using a native platform which allowed us to build a fast, responsive and reliable experience to users, when accuracy and speed of information is very important. The app also provides information about less urgent NHS services, including GPs, pharmacies, sexual health services, dentists and opticians. Mike Saunders, Managing Director of Reactor15 said: "It’s great, once again, to be involved in building a really useful NHS tool. We were asked to build an app which will not only help reduce waiting times in our local hospitals but will also help patients make the right choices with regards to how and where they receive their treatment. We believe our native app platform is both robust and versatile enough to meet the needs and brief of Exeter Health and Care IMPACT Network." Reactor15 have a good working relationship with the NHS and have already built the award winning HANDi Paedatric, POPs apps and the Devon and Wakefield Formularies. NHSquicker can be downloaded on iTunes and Google Play.
Read more


Thu 18 Feb | 2016
Reactor15 have been working with Exeter based commercial finance specialists Charterbank Capital, to help develop an intergrated digital marketing strategy. Targeting the south of England, Charterbank Capital have a range of packages for commercial customers including bridging loans, auction finance, development loans and farm finance. Reactor15 have been working on their main site www.charterbank.co.uk. Looking to generate enquires to their service, we have implemented our 11 point SEO plan on the site and have also created an AdWords campaign.
Read more


Thu 18 Feb | 2016
Reactor15 have been busy helping Exeter based Busy Bees Window Cleaning Services and Busy Bees Carpet Cleaning Service with some search engine optimisation. 
Read more