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.

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

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

20. Rapid Prototyping

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!