Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HRDevFest | Web Design

1fdb10955c973b8925d5c1430d1b3abe?s=47 FVCproductions
November 14, 2015

HRDevFest | Web Design

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

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

1fdb10955c973b8925d5c1430d1b3abe?s=128

FVCproductions

November 14, 2015
Tweet

Transcript

  1. Web Design We explore simplicity. @fvcproductions FOR DEVELOPERS

  2. None
  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.
  9. None
  10. None
  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.

  15. None
  16. None
  17. None
  18. None
  19. repo WITH THE MOST ⭐s???

  20. None
  21. None
  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!”
  28. None
  29. UI Designer how the product interface is laid out “Those

    sign up links should be in the top right corner!”
  30. None
  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

  34. None
  35. Motion/Animation Designer create those fancy animations you interact with “That

    menu should ease in from the left corner!”
  36. None
  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!”
  40. None
  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

  47. None
  48. None
  49. None
  50. Hello

  51. None
  52. http://colinkeany.com/b

  53. None
  54. 3 Key Principles

  55. None
  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?
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. Let the content breath.

  70. Material design

  71. polymer

  72. None
  73. None
  74. None
  75. None
  76. None
  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/

  79. None
  80. None
  81. None
  82. None
  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

  85. None
  86. None
  87. None
  88. http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/

  89. GOOD UX GOOD UI

  90. None
  91. Design Standards & Style Guides

  92. None
  93. None
  94. Repeat Uses Complex Interactions Task Completion Designing Software vs Designing

    Websites
  95. None
  96. Overview Why should I care? What is it anyways? Up

    and Coming Good Practices Bad Practices No, seriously — why should you care?
  97. None
  98. None
  99. None
  100. http://muskfoundation.org/

  101. None
  102. http://www.paulgraham.com/

  103. None
  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

  112. None
  113. None
  114. None
  115. None
  116. FORGE YOUR OWN PATH

  117. Goodies

  118. Design Resources

  119. None
  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?