2. Design solves a specific problem for a specific user
3. User Centered DesignDesign to enhance the user experience
bymimicking natural user behaviors.Avoid forcing users to change
their behaviorto accommodate the product.
4. The Chair
5. The Chair
6. The Door Handle
7. What problem will your hacks design solve?
8. What problem will your hacksdesign 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
9. Brainstorming & Prioritization
10. Brainstorming Rules1. Defer judgment2. Encourage wild
ideas3. Build on the ideas of others4. Stay focused on the topic5.
One conversation at a time6. Be visual7. Go for quantity
11. Evaluation & PrioritizationWhen in doubt,make a
list
12. Prototyping & User Testing
13. Sketching
14. Wireframes
15. Number of Test Users
16. Lo-fi: Paper Prototype Testing
17. Iteration Design Test Prototype
18. Market Research Surveys Talk to other hackathoners Ask
people online Find stats Research competitionThis is very valuable
information for whenyou present to the judges.
19. Visual Design Tips
20. Visual Design TipsColor Use no more than 3 colors Main
Accent Text
21. Visual Design TipsLayoutPresent a clearcontent
hierarchy.How-to: Use a grid Use familiar design elements
22. Visual Design TipsTypography Give sufficient line spacing
~1.2 Use colors with a good contrast Only 1 or 2 fontsLorem ipsum
dolor sit amet,consectetur adipisicing elit,sed do eiusmod
temporincididunt ut labore et doloremagna aliqua. Ut enim ad
minimveniam, quis nostrudexercitation ullamco laborisnisi ut
aliquip ex ea commodoconsequat. Duis aute iruredolor in
reprehenderit involuptate velit esse cillum.
23. Visual Design TipsPersonality Layer Use humor Evoke a
reaction from your users
24. Visual Design TipsStreamline 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
25. Resources
26. Surveys HTML/CSS Frameworks Wufoo Twitter Bootstrap
SurveyMonkey Zurb FoundationColor Pre-made UI Elements Colourlovers
Kuler Native GUI - Teehan + Lax Noun ProjectTypography Design
Kindle Google Web Fonts Pixel Eden Font Squirrel Pixel Bin We Love
Icon FontsMockups Subtle Patterns Invision Moqups