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

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
fvcproductionsfvcproductions.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 UXGOOD 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 UXBAD UI

106. BAD UXGOOD 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 32

123. designforhackers.com
1

124. It’s Components All The Way Down
polymerNorfolkJS
+
@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?