Start At The Start: Using Storyboards, Wireframes, and Mood Boards
4 likes3,193 views
The document outlines the importance of starting a design project with storyboards, wireframes, and mood boards, emphasizing five essential components of a creative brief: current situation, goals and objectives, target audiences, competitive landscape, and vision statement. It discusses design principles such as simplifying navigation, reducing visual competition between logos, and streamlining elements for quicker comprehension by the audience. Additionally, it highlights modern design trends and encourages attendee feedback through a session evaluation.
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
- 1. Start at the Start Using Storyboards, Wireframes, and Mood Boards #14NTCStartAtTheStart Anthony Blair-Borders Allyson Kaplan Rob Manix Jared Seltzer
- 3. Don’t just dive into your designs
- 8. We Need to Sketch
- 9. 5 Things That Should Go Into a Creative Brief 1. Current Situation What are the pain points of the current site?
- 10. 5 Things That Should Go Into a Creative Brief 2. Goals and Objectives What are design goals and objectives of the new site?
- 11. 5 Things That Should Go Into a Creative Brief 3. Target Audiences Who are the target audiences?
- 12. 5 Things That Should Go Into a Creative Brief 4. Competitive Landscape Assess and learn from other websites.
- 13. 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.
- 14. Mood Boards and Color Palettes Rad Campaign
- 15. Mood Boards and Color Palettes Rad Campaign
- 16. Mood Boards and Color Palettes Rad Campaign
- 17. Storyboards
- 18. Wireframes
- 19. Wireframes
- 21. 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.
- 23. DESIGN TRENDS 1. Simpler Navigation 2. Bye-Bye Sliders 3. Scrolling is Normal 4. Flat Design 5. Minimally Designed Mobile-Ready Sites
- 24. Q & A Q: What have we learned today? A: Dinosaurs are awesome!
- 25. What did you think? Evaluate this session! Or, search by session title at www.nten.org/ntc/eval INSERT QR CODE HERE When you evaluate a session, you will be entered to win a prize!