HRDevFest | Web Design

My presentation on Web Design for HRDevFest in Norfolk, VA on November 14th, 2015.

https://www.youtube.com/watch?v=dEJyRuQF4Ww

Transcript

1. Web Design We explore simplicity. @fvcproductions FOR DEVELOPERS
3. cs major designer developer dog lover fullstack academy grad latina quora aficionado vegetarian I’m Frances.
4. FVCproductions fvcproductions /in/fvcproductions @fvcproductions fvcproductions fvcproductions.com
5. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
6. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
7. DON’T JUDGE A BOOK BY ITS COVER. Who knows? THE MOST CLICHE QUOTE OF ALL TIME
8. Users don’t see your code. All they see is the cover of your app.
11. R I
12. more frequent visits to your website increased return visits users staying longer decreased user errors decreased customer support costs reduced complaints
13. “If you think good design is expensive, you should look at the cost of bad design” Ralph Speth
14. A clean UI is like clean code.
19. repo WITH THE MOST ⭐s???
22. UNDERSTAND RECOGNIZE APPRECIATE GOAL
23. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
24. 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
25. NOT EXACTLY
26. Graphic/Visual Designer UI Designer UX Designer Motion/Animation Designer
27. 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!”
29. UI Designer how the product interface is laid out “Those sign up links should be in the top right corner!”
31. 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!”
32. Planning
33. User Interface UI UX User Experience
35. Motion/Animation Designer create those fancy animations you interact with “That menu should ease in from the left corner!”
37. 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!”
38. A/B Testing
39. Front End Developer converts design to code through HTML/CSS/JS “I want to use a 12-column grid!”
41. Product Designer A good Product Designer knows a bit of animation, prototyping, coding, research, visual and motion design.
42. “I am looking for a designer.”
43. 3 Key Principles
44. 3 Key Principles
45. http://www.fontreach.com/ Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
46. Hello
50. Hello
52. http://colinkeany.com/b
54. 3 Key Principles
56. HTML STRUCTURE
57. CSS STYLE
58. Layers of Web Design JS BEHAVIOR
59. 3 Key Principles
60. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
69. Let the content breath.
70. Material design
71. polymer
77. 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
78. http://v4-alpha.getbootstrap.com/
83. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
84. 3 Key Principles
88. http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
89. GOOD UX GOOD UI
91. Design Standards & Style Guides
94. Repeat Uses Complex Interactions Task Completion Designing Software vs Designing Websites
96. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
100. http://muskfoundation.org/
102. http://www.paulgraham.com/
104. Big Changes
105. BAD UX BAD UI
106. BAD UX GOOD UI
107. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
108. http://www.skilledup.com/articles/christopher-nolan-movies-teach-winning-hackathons
109. “The other overlooked aspect of winning a hackathon is design.” - M R . YA N G
110. “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
111. If all else fails… Avoid Unnecessary Work
116. FORGE YOUR OWN PATH
117. Goodies
118. Design Resources
120. References
121. References
122. W8!!! 1 3 2
123. designforhackers.com 1
124. It’s Components All The Way Down polymer NorfolkJS + @wbprice Next Monday! 2
125. <img src="https://avatars.io/twitter/fvcproductions"> <my-avatar service="twitter" username="fvcproductions">
126. small projects nice mentor learning fund 3
127. Thanks. bit.ly/web-design-hrdevfest @fvcproductions Questions?