Website layout and wireframing
Understand what makes a good website layout and hierarchy – and how to achieve this with wireframing and good design practices.
A good website layout and a clear hierarchy are vital for the success of your project. They will help your users navigate your site and easily find the content or pages that they are looking for. Poor layout will provide a bad user experience and prevent your customers from accessing your information, services or goods.
As with content planning, certain techniques can help you with designing your website layout. The most common one is using wireframes.
What are wireframes?
Wireframes are a popular way of mapping out a website. They allow you to create a mockup - ie a skeleton of the site that shows the basic elements you intend to include.
These elements should include only the core layout, structure and organisation rather than the detailed visuals. A wireframe may comprise simply:
- labelled boxes that illustrate the overall navigation
- blocks of content that each webpage will contain
When developing your website structure, it's important to take account of web accessibility requirements, as well as your user's needs. Read about best practice in web design.
Benefits of wireframing
Wireframes are generally low-fidelity, basic and easy to understand. They are also quick and cheap to produce. You can draw a wireframe using Word, PowerPoint or Illustrator, or simply with a pencil and paper.
They are also typically very easy to change, and handy to share for feedback or fine-tune with your project team or web designers. Designers tend to use wireframes to show the navigation flow between the different screens. Developers may use them to get a better understanding of the core functionalities of the site.
What is a wireframe prototype?
Wireframes don't contain real content, so establishing the final layout of the screen may be difficult. However, wireframes often provide the basis for more functional prototypes.
Prototypes offer greater fidelity with regard to the design of your website. They provide more visual detail and can include user interaction functionality. A prototype should represent the final product as closely as possible.
You can use a prototype to test, demonstrate and validate the functionality of your website design. See how to test and launch your website.