Start At The Start: Using Storyboards, Wireframes, and Mood Boards


Published on

If you’re new to web design, you may find yourself intimidated how complex it can be creating assets for the online paradigm. We will explore how to use storyboards to plan animated functionality, how to use wireframes to create mobile-friendly designs and help guide and inform your final design, and how to use mood boards to help determine color, texture, and the overall look and feel of online communications. We’ll discuss how to properly start an online design project to help give you a launching point and to help save valuable time and resources by nailing down the basic elements of your assets before you even begin initial design comps.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Start At The Start: Using Storyboards, Wireframes, and Mood Boards

  1. 1. Start at the Start Using Storyboards, Wireframes, and Mood Boards #14NTCStartAtTheStart Anthony Blair-Borders Allyson Kaplan Rob Manix Jared Seltzer
  2. 2. In the beginning…
  3. 3. Don’t just dive into your designs
  4. 4. We Need to Sketch
  5. 5. 5 Things That Should Go Into a Creative Brief 1. Current Situation What are the pain points of the current site?
  6. 6. 5 Things That Should Go Into a Creative Brief 2. Goals and Objectives What are design goals and objectives of the new site?
  7. 7. 5 Things That Should Go Into a Creative Brief 3. Target Audiences Who are the target audiences?
  8. 8. 5 Things That Should Go Into a Creative Brief 4. Competitive Landscape Assess and learn from other websites.
  9. 9. 5 Things That Should Go Into a Creative Brief 5. Vision Statement 3-4 sentence statement for internal stakeholders that describes your organizations inspiration and vision for the new website.
  10. 10. Mood Boards and Color Palettes Rad Campaign
  11. 11. Mood Boards and Color Palettes Rad Campaign
  12. 12. Mood Boards and Color Palettes Rad Campaign
  13. 13. Storyboards
  14. 14. Wireframes
  15. 15. Wireframes
  16. 16. Rapid Prototyping
  17. 17. Design Rationales or Why My Designs Totally Rock The headline has been simplified by removing extraneous font treatments. This makes the copy easier to scan. We did opt to make our header orange with a slightly heavier weight so that, even if a recipient didn't bother to read the entire headline, they would instantly (almost subconsciously) understand the root meaning behind our message. By locking up the NKH logo with the HC logo, we create a singular visual element—this keeps the two logos from competing with each other for attention, but also gives them slightly larger visual weight than the headline, creating a natural flow for the eye to follow. Note: This process didn't work in reverse— because the fonts in both logos are so very bold, the eye is drawn to them first unless the logos are reduced to such a small size. As the image is telling the story even before the reader gets to the copy (for instance, this is obviously a mom and daughter cooking at home, as opposed to at school or out enjoying summer), there's no need to point the At Home text at the image—the connection between the two is immediately obvious. Still, a slightly bolder weight to the font helps contextualize it slightly and without adding more things for the reader to look at or think about. Overall, this design reduces the number of elements that a reader has to mentally process, so that the gist of the message shines through with instantaneousness and without effort on behalf of the reader— allowing for quicker understanding and for taking action.
  18. 18. DESIGN TRENDS 1. Simpler Navigation 2. Bye-Bye Sliders 3. Scrolling is Normal 4. Flat Design 5. Minimally Designed Mobile-Ready Sites
  19. 19. Q & A Q: What have we learned today? A: Dinosaurs are awesome!
  20. 20. What did you think? Evaluate this session! Or, search by session title at INSERT QR CODE HERE When you evaluate a session, you will be entered to win a prize!