Your SlideShare is downloading. ×
0
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Start At The Start: Using Storyboards, Wireframes, and Mood Boards
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,054

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 …

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,054
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Start at the Start Using Storyboards, Wireframes, and Mood Boards #14NTCStartAtTheStart Anthony Blair-Borders Allyson Kaplan Rob Manix Jared Seltzer
  • 2. In the beginning…
  • 3. Don’t just dive into your designs
  • 4. We Need to Sketch
  • 5. 5 Things That Should Go Into a Creative Brief 1. Current Situation What are the pain points of the current site?
  • 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. 5 Things That Should Go Into a Creative Brief 3. Target Audiences Who are the target audiences?
  • 8. 5 Things That Should Go Into a Creative Brief 4. Competitive Landscape Assess and learn from other websites.
  • 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. Mood Boards and Color Palettes Rad Campaign
  • 11. Mood Boards and Color Palettes Rad Campaign
  • 12. Mood Boards and Color Palettes Rad Campaign
  • 13. Storyboards
  • 14. Wireframes
  • 15. Wireframes
  • 16. Rapid Prototyping
  • 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. DESIGN TRENDS 1. Simpler Navigation 2. Bye-Bye Sliders 3. Scrolling is Normal 4. Flat Design 5. Minimally Designed Mobile-Ready Sites
  • 19. Q & A Q: What have we learned today? A: Dinosaurs are awesome!
  • 20. 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!

×