Web design - Structure

Before you begin creating a website it is a good idea to layout a structure diagram showing all the pages you plan to create. Your home page is key (index.html), as this is the first page a server loads when a user searches for your site. Some diagrams also show a link to an asset folder but this is optional.

Website structure diagram

If you are creating a multi-layered website like this one then each page will have sub-pages linked to it.

The next job is to decide on the layout for your pages. As we have seen ealier in this section consistency is key to good design. So advanced planning can help with this.

Image showing basic webpage design layout

in the next section you can view an example of a design log where a student has recorded some of his ideas and shown how he planned to layout his website.

A good source of guidance is W3Schools, where you can find tutorials and explanations of how to control HTML elements on your web pages.

Useful documents

A structure planning document

A storyboarding document with prompts to help you in the design phase.


Use a presentation package to place text boxes where you think the navigation and content areas might be placed. Once you have decided then duplicate the slide and add a new title and describe the content and any images with annotation.

Your annotation should be detailed enough for a third party to follow and create your designs. This should include hex values for the colours and the style of font you plan to use, as well as the size. You should also be clear about any images you plan to include and how they will be presented to the user.