Layout and Structure

‘A Web wireframe is a simple visual guide to show you what a Web page would look like. It suggests the structure of a page, without using any graphics or text. A website wireframe would show the entire site structure – including what pages link to where.

Web wireframes are a great way to start your design work. And while it’s possible to create complex wireframes with huge amounts of detail, your planning can start with a napkin and a pen.

The key to making good wireframes is to leave out all visual elements. Use boxes and lines to represent pictures and text.

Things to include in a Web page wireframe:

  • boxes for primary graphical elements
  • placement of headlines and sub-heads
  • simple layout structure
  • calls to action
  • text blocks’

Jennifer Kyrnin (2015) What is a Website Wireframe?. [Online] Available from: [Accessed 19 October 2015].

I have designed a wireframe for my business website, so I know how to structure it when I come to the adding pages and categories section. To do this I looked at other existing businesses websites like Barbour, Mulberry, Jack Wills then combined the 3  to create the design that i wanted. I have used sub-categories so customers know exactly where the item they are looking for is, which has created a simple and easy navigation around my website.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s