1. Everyone Hacks:
Design Workshop
Sheba Najmi & Gwen Brinsmead
Twitter: @snajmi | @gwenbrin

3. Design solves a specific problem
for a specific user

4. User Centered Design
Design to enhance the user experience by
mimicking natural user behaviors.
Avoid forcing users to change their behavior
to accommodate the product.

5. The Chair

6. The Chair

7. The Door Handle

8. What problem will your hack's
design solve?

9. What problem will your hack's
design solve?
For [target audience],
[who want to do x / are dissatisfied with y],
our service is a [product category]
that provides [benefits].
Courtesy of Hot Studios

10. Brainstorming & Prioritization

11. Brainstorming Rules
1. Defer judgment
2. Encourage wild ideas
3. Build on the ideas of others
4. Stay focused on the topic
5. One conversation at a time
6. Be visual
7. Go for quantity

12. Evaluation & Prioritization
When in doubt,
make a list

13. Prototyping &
User Testing

14. Sketching

15. Wireframes

16. Number of Test Users

17. Lo-fi: Paper Prototype Testing

18. Iteration
Design
Test Prototype

19. Market Research
● Surveys
● Talk to other hackathoners
● Ask people online
● Find stats
● Research competition
This is very valuable information for when
you present to the judges.

20. Visual Design Tips

21. Visual Design Tips
Color
● Use no more than
3 colors
○ Main
○ Accent
○ Text

22. Visual Design Tips
Layout
Present a clear
content hierarchy.
How-to:
● Use a grid
● Use familiar design
elements

23. Visual Design Tips
Typography
● Give sufficient line spacing ~1.2
● Use colors with a good contrast
● Only 1 or 2 fonts
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure
dolor in reprehenderit in
voluptate velit esse cillum.

24. Visual Design Tips
Personality Layer
● Use humor
● Evoke a reaction
from your users

25. Visual Design Tips
Streamline Your Process
● If No Developer
○ Mockup screens, click-through demo
● If No Designer
○ Sometimes designers join multiple teams. Ask!
● For Web Apps
○ Use Twitter Bootstrap + a theme
● For iOS/Android Apps
○ Use pre-made UI elements + icons

26. Resources

27. Surveys HTML/CSS Frameworks
● Wufoo ● Twitter Bootstrap
● SurveyMonkey ● Zurb Foundation
Color
Pre-made UI Elements
● Colourlovers
● Kuler ● Native GUI - Teehan + Lax
● Noun Project
Typography ● Design Kindle
● Google Web Fonts ● Pixel Eden
● Font Squirrel ● Pixel Bin
● We Love Icon Fonts
Mockups ● Subtle Patterns
● Invision
● Moqups

28. Q&A