TTOY Digital

Design 101 – Wireframes and Prototyping

When designing websites, it’s often easy just to make a start straight away online. This usually leads to a wrong end result as there are always things that don’t quite work. When designing your website, most of our time actually goes into our design stage before we go anywhere near the internet using wireframes and prototypes.

What are Wireframes?

A wireframe is a posh term for a selection of black and white squares and circles on a page but what they represent is a lot more critical. All of the elements within a wireframe represent the sections, pictures and buttons on your website. Each page will have its own wireframe so that you can see (albeit basic view) what we think your site should look like.

Why are wireframes important?

In our view, wireframes are one of the most essential steps in the creation of your website.

We’ll have had our consultation meeting and done our own research based on what you’ve told us, using a wireframe allows us to set down all our ideas on what your website will look like and its structure. Essentially, you can visualise what we have in mind. If there’s something you don’t like, we can change it at a very early stage.

Think of it like building a house, you wouldn’t start laying the bricks without making sure the foundations were sound.

Everybody does their wireframes differently. Some people will just use pen and paper while others (like us) use software like Adobe XD, this helps us share our idea’s with you.

Prototyping.

Prototyping is where we get to think about the detail. We’ll take our approved wireframes and add colour schemes, fonts and replace the squares and circles with actual design elements such as buttons and pictures.

We’ll design your website structure at this point too. So, for example, we’ll work out what pages need to link to each other and how people will interact with your site both on mobile and on desktop.

Once we’re happy, we’ll be able to share our work with you again, you’ll be able to have a play with your mockup to see if you like it as it’ll work as a light version of your website.

Again, at this stage, it really easy to make changes before we commit anything to your web environment, ensuring the process runs as smoothly as possible.

If we go back to our house, this is the stage where we’re laying bricks and building our home.

As soon as any final tweaks have been made to our wireframes and prototypes, and our designs are approved we’ll jump right in and start building your live website.