Sketching your page structure

There are two things you need to know before building any project – what pages you are going to have, which is done via a sitemap, and what exactly you will display inside these pages, which is done via a wireframe or layout structure. Let’s take a closer look:

1. Start by listing all the pages you think you are going to need. They can be for your website but also your software application, such as a dashboard or a page to edit user information (my profile), log in, sign up, and more.
2. Once you have a list of all the pages, you can start defining what each page will look like. There are various methods you can use to achieve that. One is to draw on a piece of paper and another would be using design tools and drawing a wireframe of that page.

   Here’s an example of a wireframe:

Figure 4.1: Wireframe example

You can also choose to not draw anything and just make a few notes about the page structure...