What Is A Storyboard In Web Design — And Why It’s Important?

Creating a website is a long and challenging process, and organization is vital. Even the creative types can’t just get “into the zone” and start building a site — you have to prepare first. But how to start? What comes first? And what is a storyboard in web design?

What is a storyboard in web design?

The idea of storyboarding comes from the film industry: there, a storyboard serves as a graphic representation of a planned scene or a video. It helps to prepare the narrative and visually present the future work. In other words, you can tell a whole story you want to tell without actually doing all the work: it’s a simplified way of imagining the final product.

In web design, the idea is the same: when you have an idea for a website, first you roughly sketch it, usually on a piece of paper. Before your homepage becomes lines of codes, it starts as a pencil drawing. That way you can outline the future website’s structure to show it to your colleagues or clients. No text, no graphical elements to distract you — first, you take care of the general layout, and then, if everyone’s happy, you can start the actual work. 

A storyboard, even the basic one you made in a few minutes, shows everything that matters: the outline of the site, visualized, the key elements you plan on putting on every page, and the navigational structure — the information flow of the site. 

Format of your storyboard

Imagine a website in the simplest of terms. What is it? It’s an amalgamation of elements like links, images, buttons, etc. Now take a piece of paper (or an iPad, whatever you like) and try to outline the skeleton of your webpage. Imagine of where every important part goes: what’s your navigation like, what’s the hierarchy of essential elements. Before the site starts looking good, it has to work — at least on paper!

It’s all about inspiration

The core idea of your website should be simple. How to make a user stay? How to make navigation convenient? Before your site becomes real, it lives in your mind. At this stage, it’s important to find inspiration. We all have our ways, but we usually surf the internet searching for new ideas — or things to avoid. Find a page you like and ask yourself what makes it work? Or imagine a site you don’t like: why? 

Sitemap

After you’ve dealt with the general design, it’s time to start outlining further. For that, you need a sitemap — a breakdown of all the pages you need to build. It all starts with the homepage and continues with categories, sub-categories, etc. The sitemap should be simple: boxes with the names connected by lines and not much else. Try to keep it simple.

Verdict

You can’t make a website without consulting with your client first. A storyboard is an excellent and easy way of presenting your idea. Yes, it’s limited, but after you’ve agreed on the basis of a website, everything that comes next should be much easier. Don’t start with flashy animations — those come much later.