Web Design | Innovation Hackathon

Innovation Hackathon
Woodbridge, VA
April 8th-10th, 2016

Transcript

1. Web Design We explore simplicity. @fvcproductions FOR DEVELOPERS
2. fvcproductions.com @fvcproductions
3. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
4. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
5. DON’T JUDGE A BOOK BY ITS COVER. by IDK THE MOST CLICHE QUOTE OF ALL TIME
6. But users don’t see your code. All they see is the cover of your app.
9. R I
10. more frequent visits to your website increased return visits users staying longer decreased user errors decreased customer support costs reduced complaints
11. “If you think good design is expensive, you should look at the cost of bad design” Ralph Speth
12. A clean UI is like clean code.
17. repo WITH THE MOST ⭐s???
20. UNDERSTAND RECOGNIZE APPRECIATE GOAL
21. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
22. Someone asked me what I do all day and I said I move things around until they look right, and I suspect that’s as good of a definition of graphic design as I could come up with. MILTON GLASSER
23. /05
    &9"$5-:
24. Graphic/Visual Designer UI Designer UX Designer Motion/Animation Designer
25. Graphic/Visual Designer produce high quality, high resolution, pixel perfect graphics “"The kerning is off and the button should be 1 pixel to the left!”
27. UI Designer how the product interface is laid out “Those sign up links should be in the top right corner!”
29. UX Designer constructs how the product feels through wireframes, storyboards, sitemaps “After they sign up, a thank you message should show up in the middle!”
30. Planning
31. User Interface UI UX User Experience
33. Motion/Animation Designer create those fancy animations you interact with “That menu should ease in from the left corner!”
35. UX Researcher researches user behavior and attitudes through user personas, a/b testing “From our research, a typical user is more likely to ignore the hidden hamburger menu!”
36. A/B Testing
37. Front End Developer converts design to code through HTML/CSS/JS “I want to use a 12-column grid!”
39. Product Designer A good Product Designer knows a bit of animation, prototyping, coding, research, and visual/motion design.
40. “I am looking for a designer.”
41. 3 Key Principles
42. 3 Key Principles
43. http://www.fontreach.com/ Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
44. Hello
48. Hello
50. http://colinkeany.com/blend/
52. 3 Key Principles
54. HTML STRUCTURE
55. CSS STYLE
56. Layers of Web Design JS BEHAVIOR
57. 3 Key Principles
58. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
67. Let the content breath.
68. Material design
74. Pinterest, Twitter, Facebook, and the Google. They all love their cards. Cards Pinterest, Twitter, Facebook and the Google. They all love their cards. Cards terest, Twitter, Facebook, d the Google. all love their cards. Cards terest, Twitter, Facebook, d the Google. all love their cards. Cards Cards Pinterest, Twitter, Facebook and the Google. They all love their cards. Cards
75. http://v4-alpha.getbootstrap.com/
81. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
82. 3 Key Principles
85. http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
86. GOOD UX GOOD UI
88. Design Standards & Style Guides
91. Repeat Uses Complex Interactions Task Completion Designing Software vs Designing Websites
93. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
97. http://muskfoundation.org/
99. http://www.paulgraham.com/
101. Big Changes
102. BAD UX BAD UI
104. BAD UX GOOD UI
105. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
106. http://www.skilledup.com/articles/christopher-nolan-movies-teach-winning-hackathons
107. “The other overlooked aspect of winning a hackathon is design.” - M R . YA N G
108. “Most contestants don’t go past the default designs—how many times have we all seen that default black navbar from the Twitter’s Bootstrap CSS Framework in hackathon presentations?” M R . YA N G
109. If all else fails… Avoid Unnecessary Work
112. FORGE YOUR OWN PATH
113. Goodies
114. Design Resources
116. References
117. References
118. fvcproductions.com @fvcproductions
119. W8!!! 1 3 2
120. designforhackers.com 1
121. 2 Sign up for GitHub.
122. small projects nice mentor learning fund 3
123. Thanks. speakerdeck.com/fvcproductions @fvcproductions Questions?