Fifteen Logo

Wireframes: The Blueprints To Your Website

October 10, 2016

Whenever you see a quote from Fifteen, you may notice that we include time for site mapping and wireframes, these two elements are vital to building a website that is user-friendly, and takes into consideration a tailored user experience and journey.

These two elements of the project are completed at an early stage, and normally during a project start meeting or very soon after.

So what are they?


Sitemapping is a bit like a road map, outlining the pages on your website, and what hierarchy they follow, this is useful because it helps our developers determine the URL structure, which means that our digital marketing team can onsite the website accordingly. So just like the example below, you can see that we try and split out the pages into the different areas, and this is what we use to understand the structure of your website.

By outlining the pages within the website at an early stage (normally within the project start meeting), it allows for the project to stick to a structure, and we understand that any additional pages may be additional work. It also allows our design team to understand what wireframes need to be created, as each page/section may require a different design and therefore a different wireframe.

The sitemaps are also really useful for our development team, who after the website designs are signed off are then presented with a clear site structure, and numbers for the designs that need to be developed.


Wireframes are essentially your website blueprints. They are squares on a white background, that allows our designers and development team to understand where things need to go on the page in order to give the user an optimum journey and experience through the website.

Generally, wireframes are completed internally, with a pure understanding of the project and it’s objectives and end goals. There are bits of software that if you are in the position where you have ideas you can try and put them on paper.  Balsamiq is a tool that I use on a regular basis to wireframe with and it’s a great way of getting your initial ideas on a page to demonstrate to clients or members of the team.

By drawing out wireframes, you can start to piece together your website, starting with the header and footer, and building on the bits that are in-between, understanding where key elements need to go in order to:

Reassure the user they are in the right place
Add credibility so users can see you are trusted suppliers
Give them somewhere to go within
 the website

By concentrating on these 3 elements on each page, you can start to build on a website that will cater to the user’s specific needs and allow them to get all the information they need to choose your company.

Each element you see within a website is there for a reason, whether it be to reassure the users, add credibility to the company or direct a user to another area within the website, it all adds up to creating something that is really user-friendly.

Next Steps

Once wireframes and sitemapping are complete, then we progress onto the design phase which will be quicker and more productive because we already have the blueprint to work from.

Having these two elements at the start of the process makes for a smoother ride, and allows the teams within the office to have a full understanding right from the start of a project.

If you need help on your user experience and journey get in touch with our team of experts today! 





Stay on top of your digital game with our blog updates.

More posts