What is a wireframe?

A wireframe is an ‘un-designed’ plan of the website design. Its function is to create a structure and base for the design that follows. Wireframing is a key phase of our web design process at Styles Webbin so we decided to write this blog so you get to know why.


Here’s some of the reasons why we wireframe:

  • Transparency

Sharing our wireframes with our clients, even though we know they don’t look that pretty, is part of our transparent ethos. We believe that the client should be able to see the website forming at every stage of the project, allowing them to suggest changes as early on as possible. We can discuss and alter the navigation, headers and key user journey’s at this stage.

  • Consistency

Doing wireframes instead of jumping straight into design allows us to ensure there is consistency between the website pages. Elements such as call to action buttons and image areas can be copied between pages and quick comparisons can be made both internally and with the client’s approval.

  • Development

The wireframe stage is a good time to get in touch with the developers to check that our vision is practical for them.  Communication with the developers at such an early stage sets us apart from many design studios because we consider the aesthetics and the functionality alongside each other.

  • UX

The wireframe stage is when the user experience is put to the test. Without being distracted by the appearance of the site, here is when we can imagine ourselves as the user and take the journey’s that they would take. The client also gets to be part of this process, making sure that all of the target audiences are reached.


Now that you know why we wireframe, here’s a little about how. Whilst wireframes can be produced using various tools and Adobe programmes, at Styles Webbin we start with sketches, followed by mock-ups in a tool called Balsamiq. Whatever the tool, putting ideas onto paper is always the first step to creating our wireframes and then these rough sketches can be transformed into more understandable digital wireframes. Balsamiq is an easy-to-use software with plenty of tricks to make the work look presentable and clear but quite obviously un-designed. (We wouldn’t want our clients thinking the final designs will look like that!)

Wireframing helps us to plan our designs and keep an open relationship with our clients. Hopefully this was a good insight into why we wireframe and be sure to keep your eyes pealed for our next blog post.

If you need help with your website wireframing come to us.