What's the Difference Between a Storyboard, Sitemap and a Wireframe?
In this post, we'll give an overview of the difference between a storyboard, sitemap and a wireframe. We won't make you a UX designer by reading it, but you could probably win Who Wants to be a Millionaire or Jeopardy! with this info.
As marketers, half our job seems to be translating. We translate bullet pointed sales documents into elegant advertising pieces. We translate complex notes from our bosses into digestible quotes for media advisories. We translate media purchase reporting into simple to understand data. We even translate complicated RFP responses into dollars and cents budget line-items.
So when the team you hired to build your new website is ready to go and has told you that they are creating a sitemap, storyboard and wireframes for your company to review, it’s natural you would be expected to translate that as well.
The Hidden Truth and the Not-So-Hidden Truth
A hidden truth to our marketing world is that sometimes, we nod our heads and say ok assuming we’ll figure out what in the heck those terms mean when we see them. Often, all you know is that you need to get this project started so that you can launch the new site in time for the big event.
A not-so-hidden truth is that a lot of these industry terms have been bastardized and have come to mean something different depending on who you’re talking to.
We thought it might be useful to break down the meaning of “sitemap” and “wireframes” in what is their truest form. Again interpretations may vary, but if you’re working with a team who isn’t setting up shop in their parent’s basement and writing code on a ping-pong table, our definitions should help you navigate the process effectively to look like the hero...again.
I’ve enlisted the aid of Suzie Zack, our resident User Experience Designer, to work it all out for us.
To The Refinery team, a sitemap and wireframes are critical pieces to get right before digging into the visual designs and development.
What is a Sitemap?
Here at The Refinery, we create sitemaps first based on the current website (if there is one). We like to review the current organization of pages with the client to determine if anything is missing, needs to be revised or isn’t valuable anymore. Based on this review we organize the new site so that the end users will easily find what they are looking for and then finalize what the navigation will be for the website. The new sitemap will also inform the team if content needs to be written and it opens discussions about who will write and maintain the content, when it will be finished and who will upload it into the new site.
The term sitemap may also be used by some web development teams to explain a file they create where you can list the web pages of your site to tell Google and other search engines about the organization of your site content. Search engine web crawlers like Googlebot read this file to more intelligently crawl your site.
Google Support answer
Once the sitemap has been reviewed by the team and navigation of the website has been determined, we start on wireframes.
What are Wireframes?
At The Refinery, we like to create a few versions of wireframes to help compare concepts. Our wireframes are the building blocks to the visual designs. We keep our wireframes simple and focus on where specific content should go on the web page.
For example, we like to place the important messages and actions on the homepage closer to the top of the page. We’ll take into consideration the amount of space certain things have on the page and how it will be viewed on mobile devices. If end users need to progress through several pages to complete an action (register, buy online, etc.) we’ll wireframe those pages to be sure we design a simple process.
As we review the wireframes with the team, we’ll refine the wireframes to include buttons and other interface widgets but still avoiding color and images. Once the team is happy with how the pages are laid out and where things are positioned we may show them to end users to ensure that what we have put together makes sense to them or we may move into visual design.
What is a Storyboard?
A storyboard is a visual representation of how scenes and actions might play out as a user enters and navigates a website. Storyboards lay out different designs and concepts of the website, showcasing sequences of wireframes in a specific order. These wireframes are developed earlier in the overall design process.
The storyboard process assists UX developers in planning and mocking up features and functions on a website. They are lightweight and presented in sequential order so clients can offer early feedback prior to any development being done. Storyboards show how users can interact with a website and are a great way to open lines of communication about how a website will work for its users. It's an important step in getting things right and confirming any requirements up front, which keeps development costs down.
Storyboards can be created in numerous ways, using a variety of different tools. Even Powerpoint presentations can be used as a cost effective method of presentation.
One thing is certain when it comes to these initial processes: The team you hired should be including you in each step of their process. They should be explaining why the steps are important and the value they bring to the project.
If a sitemap isn’t discussed early on, development won't know how to build the organization of the pages, old, outdated content may remain on the site and the scope of the project may increase late in the game.
Wireframes are important stepping stones to the visual design. Without wireframes money will be wasted sorting out what goes where and what a workflow may be during the visual design stage. It’s a lot easier to move around simple grayscale visuals than it is to revise fully flushed out visual designs.
The Feel Good Conclusion (complete with warm fuzzies)
Your work as marketers is tough enough. Navigating the terms your website build team is using should require it’s own dictionary. So that’s really the point here. Don’t ever be afraid to ask the question. If the team you hire isn’t willing to dig in with you and ensure you fully understand their process, then they aren’t adding the highest value to the project. They should be your support, your advocates, your teachers. And that statement should translate into any language. If that’s not the case, you may need to set them straight ASAP.