Wireframe and Storyboard

I have heard about wireframe and storyboard before but never got to understand what those are. It was nice doing wireframe and storyboard group work last night. However, How actually often use these wireframe & storyboard in product management? The answer is all the time from my instructor but if you are product manager, you are not neccessarily doing this job all by yourself. If you have ux designer in your company, they would do it for you. Still, it’s good to understand what these are and how to do it.

What is wireframe?

According to experiencesolutions, wireframe is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

Wireframes include content layout, Information hierarchy,  relationship, interface functionality, user interaction but not includes branding, color scheme, detail. There are 3 ways to do wireframes ; sketch, low fi, high fi. Depends on company or people, the use of wireframe will be different but if you create your own website from scratch, sketch is a good & quick way to start and convey your concept & fundamentals.

What is Sitemap?

A site map is a visual or textually organized model of a Web site’s content that allows the users to navigate through the site to find the information they are looking for, just as a traditional geographical map helps people find places they are looking for in the real world. A site map is a kind of interactive table of contents, in which each listed item links directly to its counterpart sections of the Web site. Site maps perform the same service that the layout maps in large shopping malls perform: without them, it is possible to explore a complex site by trial and error, but if you want to be sure to find what you’re looking for, the most efficient way to do that is to consult a model of the resources available. If a Web site is small and uncomplicated, a site map may be unnecessary, just as a layout map may not be required for shoppers to find their way through small shopping malls. ( source : SearchSOA )

What is storyboard?

According to electricteacher, a website storyboard is a visual representation of your website’s structure. It maps out all the components of your site and how they inter-relate. Creating a website storyboard can help you plan and organise your website and even plan the internal linking structure between pages. Using a storyboard you can plot a visitors path through your website to find your most important pieces of content.

From the GA class, what my understanding about storyboard is to communicate layout, flow, behavior from the wireframe we built last time. Also, having a site map will help you to navigate where you are while you are making a storyboard.

The main key is to make wireframe & storyboard organize & clear. From practices, the good wireframe & storyboard are easy to understand without explanation when you see it.  Annotation, title, page#, site map, etc will help you to understand what the heck is going on.


By Holly

eating more veggies and thinking about art of living

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.