Planning Your Site: Wireframes and Storyboards

Wireframes

Before starting to code a website, it is extremely important to go through the planning process. Planning is the second stage of the web design life cycle. You need to sketch out what your site will look like. At this stage, it isn’t important to know what pictures you are going to use, what videos, which color palette, or which typography you plan to use. All of that comes in the next stage, designing. Here is where you are putting thought into how to layout your site. You need to know where you are going to put your copy and articles, you need to have an idea of how many pictures you want and the basic layout of them in relation to the other content. You need to know where your header is going to be, where the logo will be, etc. If you take the time to do this, it will help you later as you get to the designing phase and the web development phase. Below are two examples of wireframes. Wireframes can be detailed like these, or they can be a basic outline of what is included in the site. The more details you have though, the easier it will be to create the site later. It helps to have a visual representation of what it will look like.

You can create the wireframe in the format that feels best to you. Some people sketch it out on paper, some people lay it out in a program such as Microsoft Publisher or PowerPoint. Some people use one of the many online programs that are available to create wireframes.

The image below shows a wireframe for the CNN website and then the final site. You can see that the final site is slightly different than the wireframe, but the final site mostly follows the original wireframe.

Image showing a wireframe for the CNN website and the final site so you can see how the wireframe direct the design.

Storyboards

Another tool website developers use is storyboarding. Storyboarding is like wireframing; however, it has more detail. Where the wireframe is a sketch of the layout, it doesn’t have any details. For storyboarding (which can be done both visually and with text), you give more information on the copy you want to include, the kinds of images and videos you want to use, the buttons you want, etc.

Image showing 9 pages of a website showing what happens when the user interacts with the site.

Layout Considerations

When designing your layout for your website, you need to consider how the user will experience the site. There are several layouts that are commonly used, two of the most common are: column layouts and responsive website layouts. You need to always make sure your site is responsive to the size of the device your viewer is using. Your site needs to adjust to the size of the screen the viewer is using; you can do this with CSS and flexible grids. Most sites use one of 3 layouts: 1 column, 2 column, and 3 columns. You can adjust the size of the columns; they don’t have to be equal in size. In the wireframe images above, the CNN site uses 3 columns, and the other home page has 2 columns.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION