Skip to content
This repository was archived by the owner on Oct 3, 2024. It is now read-only.

Assignment #8: Final Storyboards (Mockups)

Emily Stewart edited this page Oct 20, 2015 · 3 revisions

Overview

For this assignment, you'll be digesting the feedback you receive on your sketches and applying it to your sketches. Then, you'll be implementing design elements such as color, type, logos and placeholder content.


Expectations

We are not expecting pixel perfect designs. With the myriad of devices available now that ship has sailed.

What we do expect:

  • Clear design direction
  • Placeholder content
  • Every view/template thought through
  • Mobile-first layout

Step 1: Read thru and discuss feedback on A7 with group

  • What does your group agree with?
  • What do you need clarification on?
  • Can you push the design a little further?

Note: Rob and I are here to guide you with feedback. We want you to do well on your projects. Mention us on Slack and we will do our best to respond as soon as we can.


Step #2: Refine sketches based on feedback

Using paper and pencil, continue to sketch out ideas until you've reached your final design.


Step #3: Turn sketches into mockups

Open Keynote, Illustrator, InDesign (…whatever program that gets your design across…) and start fleshing out the design. You'll add things like:

  • Logos
  • Navigation
  • Placeholder content
  • Colors
  • Typography

Step #4: Export your views (screens) as PNGs


Step #5: Upload views into a new project on InVision

  • Make a free account at Invision.
  • Then, make a new project. Choose iPhone (or Android) and Portrait. See example.
  • Add hotspots to link together screens
  • Send to your phone and view it

Step 6: Evaluate the design

View the design on the actual device. (Don't have access to an iPhone/Android? DM me on Slack and we'll figure it out).

Evaluate the design. Get feedback. Ask peers to look it over. Ask yourself things like:

  • Does this design work?
  • Is the type too small?
  • Is it overwhelming?

Most likely, now that you're viewing it at real size, you'll find that something isn't working and need to tweak it. Repeat steps 3-6 until you're confident in your decisions.


Step #7: Create a (short) screencast presenting the final mockup

Using QuickTime (or something similar) create a screencast of your final prototype. Walk through the different views and describe how you arrived at certain decisions. Upload this video to Vimeo/YouTube (anywhere with a public link). This will serve as the "annotation" portion.


Step #8: Demonstrate process and defend work

This should all be in a SINGLE PDF. On page 1 you should have:

  • Project name
  • List of group members
  • A link to your InVision Project
  • A link to your screencast video
  • 2-3 paragraphs giving an overview of your process
  • Any views/sketches you created during this assignment (evidence of work)

Step 9: Submit via Slack

Upload your final PDF to Slack. Name it A8-Your-Team-Name.pdf. Points will be deducted for sloppy naming.

Mention @emily and @rob to make sure we give you the 👍


Due: 11:59 p.m. Friday, Oct. 23

Points possible: 100


Resources

Mockup Templates

Clone this wiki locally