How to Make an HTML Storyboard
An HTML storyboard is essentially a sketch or a way of planning a website's design before working on the live site. This road map of sorts can be done on a piece of paper, in a lined notebook or in an art program on a computer. The purpose of creating an HTML or website storyboard is to see how the site might look and whether the design needs to be changed before implementing it. Before you can make your HTML storyboard, choose a topic you are passionate about and write down what you know about that topic.
Other People Are Reading
Instructions
-
-
1
Jot down some notes on the topic you'd like to base your website on. Decide which bits of information you want to use and what parts you'd like to ignore.
-
2
Use these pieces of information to create categories for your site. For example, if you're making an HTML storyboard for a website that focuses on self-publishing, some of the categories you implement may include cover design, interior layout, editing and marketing.
-
-
3
Draw your website's layout on a piece of paper and include areas such as the header or banner of your site, a navigation menu, the main content area or areas, sidebars, if you use them, and a footer. Have your navigational menu appear under the banner of your site or within a sidebar, and list your categories inside it.
-
4
Create a flow chat to keep track of your website's navigation. For example, if your main page links to a page about flowers, and then on your flowers page you link to specific flowers, your flow chart will have three tiers and look something like what's shown here:
Main Page
Flowers
Roses Lilacs Daffodils
-
5
Draw lines between each page that links to another one. In the end, this might end up looking like a spider's web, but will also give you an idea of what pages you've linked to and which ones you might have forgotten about.
-
6
Use the design you made for the main page of your site to create other pages. Keep each page of your site consistent with the others. Avoid changing the overall layout or moving the navigation menu around. This will make it easier for visitors to browse your site.
-
1
Tips & Warnings
Write down font types and colors you'd like to use in your headings, navigation and main content area for future reference when you begin building the code for your site.
