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

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

27. Q&A