Assignment #7: Storyboards and Mockups

Overview

This assignment will move you closer to your first draft of your site, as you'll use your creative brief as direction to create a comprehensive set of storyboards and designed mockups for your site. These should cover both mobile (phone) and desktop designs.

Note that you have two grades for this assignment: one (80 points) for turning it in; one (25 points) for meeting with Rob and Elizabeth to go over your storyboards (week of March 7).

Due date

UPDATED: This assignment is due by 5 p.m. on March 6.

Points possible

105 (80 for assignment, 25 for group meeting)

Directions

For this assignment, you'll plan the site by creating wireframe sketches and a storyboard executed in a layout program. Your next assignment will be to build the site using HTML and CSS.

Steps to storyboarding:

1. Think these things through: What's the story? What's the angle? What makes it unique? Who's the audience?
2. What are the elements? List them. All of them.
3. Make a working headline and intro.
4. Plan your site map. Determine your navigation. How will the menus be structured? How will users always get back home? Write down your site map.
5. Sketch wireframes for every page on your site. Number your site map, and label each sketch with the corresponding number (see my example). It's a good idea to sketch out different options, but please only turn in the layout structure that you're going with.
6. Think about design specifics: color choices, fonts, buttons, etc. Then make a mockup in InDesign, Photoshop, Illustrator, Fireworks — whatever software you're most comfortable with. You'll mock up the homepage and an interior page.

What to turn in

On letter-sized paper, print out/scan/generate:

1. A site map, which includes every page of the site. Use a numbering system to make sure I can follow which page I'll be taken to when I click on each button (number your wireframes this way, so I can connect it back to your site map). Make sure the navigation is fully explained.
2. Your wireframe sketches. These need to be annotated, so I can tell what's going on each page. Draw the furniture of the page, indicating what elements go where. You're making a road map, so they should be something an outsider can follow. You must have a sketch for every page in your site. Label these with the same numbers you used in your site map, so I can see how this fits into the overall site.
3. Your designed mockups. You should have at least two (a home page and at least one interior page) that are fully designed and show attention paid to the colors, the images, the display type. Think about the tone you're trying to convey.
4. Include a one-page statement (seriously, one page max) telling us why you chose to tell the story the way you did. What did you highlight and why? What extra information did you include? What influenced your design decisions?
5. Make sure you have included both phone-sized storyboards and mockups (don't worry about the exact size of the phone, just something that's phone-sized) and traditional desktop sized storyboards. You can find all sorts of sketch templates at sites such as this one.

In your statement, you must include the one-sentence mission of your site (this should answer “ What story are you trying to tell?”)

• Must be named in this format: "group-name-A7.pdf", where group-name is your group's name.

• Upload the PDF to Slack and @ Elizabeth and Rob. We will 👍 you to tell you we got it.

• If you're not comfortable with sketching on paper, you can use a sketching app like Draw.io.

Grading

• 10 POINTS: Can I tell from the intro page what the package is about? Do I want to read it?

• 20 POINTS: Is your organization clear from the site map and wireframes? Does the content make sense where you put it? Does it work no matter how a user decides to navigate it?

• 10 POINTS: Is the navigation intuitive and consistent?

• 20 POINTS: Do your mockups reflect the content? Does your organization/design reflect the story you're trying to tell?

• 20 POINTS: Did you follow your creative brief, or provide explanation for why you didn't? Did you explain your design decisions?

• 25 POINTS: Did you meet with Elizabeth and Rob to go over your storyboard and mockups?

Total: 105 points

You will lose one letter grade (10 percent of the final amount) for each day late.

tl;dr:

Sketch out the design for your site, storyboard the paths through it, make mockups for a home page and an interior page, write a one-page brief about it, and turn it in on Slack. Worth 105 points, 10.5 percent of your semester grade.