An introduction to web design aimed at bloggers. I run through my design process, take a quick look at design theory, review potential design apps and share plenty of links for further reading. This was presented at BlogConf on Saturday 4th October.

2. My name is Benjy, and I’m
a freelance web designer
based in Swansea.

3. I’ll be sharing my design process
with you, along with lots of tips that
you can apply to your own blog.

4. If you have a laptop, feel free
to check out the links and ask
any questions along the way.

5. I’ve been working as a
designer for about 10 years.

6. About seven months ago,
I returned to freelancing.

8. Planning a
design project

9. 1. Users
2. Content
3. Objectives

10. I try to always frame each
project by thinking about the
user experience (UX).

11. What do they want?

12. How can we help them
to achieve their goals?

13. How can we make the
experience better?

14. It’s good to have real
data about your users.

15. Watching people
use our website

16. Looking at
Google Analytics

17. Creating
Questionnaires

18. www.surveymonkey.com

19. www.typeform.com

20. Credit: webaim.org/presentations/2012/html5future/overview3b

21. Iterate.

22. Credit: https://twitter.com/smarty

23. How does this apply
to blog design?

24. Top tip #1

25. Release things often, get
feedback and improve.

26. What kind of
blog do you run?

27. What do your users
want achieve?

28. Primary Goal:
Consume content

29. Secondary Goals:
Interact with you,
Subscribe to your articles

30. Content

31. Design is a bit like cooking, if you
have good ingredients to start with,
you don’t have to work as hard.

32. “Content precedes design.
Design in the absence of content
is not design, it's decoration.”
Credit: https://twitter.com/zeldman/statuses/804159148

33. The Written Word

34. voiceandtone.com

35. robertmills.me/content-first-ftw

36. Photography

37. stocksy.com

38. stocksy.com

39. flickr.com/commons

40. openculture.com/2013/12/british-library-puts-1000000-images-into-public-domain.html

41. My Design Process

42. Case Study:
A Simple Banner Ad

43. • Logo
• Some copy
• A Button or Call to Action
• Imagery of a British
holiday destination

47. Design inspiration

48. pinterest.com

49. niice.co

50. dribbble.com

51. Design Theory

52. Top tip #2

53. Learn as much as you
can about typography.

54. “95% of the information on the web
is written language. It is only logical
to say that a web designer should get
good training in the main discipline
of shaping written information, in
other words: Typography.”
http://ia.net/blog/the-web-is-all-about-typography-period/

55. The responsive web will
be 99.9% typography.
http://www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/

56. What is
typography?

57. Typography is the practice of choosing
fonts and laying them out in a way that
helps the user understand the content.

58. What’s the difference between
a typeface and a font?

59. A typeface is a family of fonts
that contains a set of particular
styles and weights (e.g. Helvetica).

60. A font is a single member
of that family (e.g.
Helvetica Light Italic).

61. Choosing a font

62. myfonts.com

63. MyFonts.com
& typecast.com

66. typekit.com

67. google.com/fonts

68. Font size

69. Measure is the length of single line of text, measured in characters.

70. Line
Height

71. A comfortable
reading experience.

72. Typography
Resources

73. • stylemanual.org
• practicaltypography.com
• webtypography.net
• fontfamily.io
• hellohappy.org/beautiful-web-type

74. Colour

75. green = go
red = stop

76. Red signifies passion or danger
Green signifies nature

77. Red can be a symbol of
good fortune and joy in
Chinese cultures

79. RGB and Hex

80. Hex colour values
look like this #FF0000

81. Colour Pickers

82. html-color-codes.info

83. 0to255.com

84. Layout

85. Less is more

86. Less is more

87. Less is more

88. goodui.org

89. goodui.org

90. goodui.org

91. goodui.org

92. Create
Visual
Hierarchy

93. Create
Visual
Hierarchy

94. White space

95. Icons

99. fontawesome.io

100. Accessibility

101. a11yproject.com/checklist

102. leaverou.github.io/contrast-ratio

103. Performance

104. Downloading on mobile
data plans can be slow
and expensive

105. Don’t use too
many fonts

106. Compress your
images
imageoptim.com

107. Games

108. bezier.method.ac

109. type.method.ac

110. shape.method.ac

111. color.method.ac

112. Design Applications

113. creative.adobe.com/plans

114. creative.adobe.com/plans

115. pixelmator.com

116. bohemiancoding.com/sketch

117. affinity.serif.com

118. sublimetext.com

119. sublimetext.com

120. dontfeartheinternet.com

121. Top tip #3

122. Get familiar with code via
Chrome Developer Tools

123. google.com/chrome

129. My favourite blogs

130. thegreatdiscontent.com

131. alistapart.com

132. theguardian.com

133. Further reading

134. fivesimplesteps.com

135. abookapart.com

136. gov.uk/design-principles

137. Conclusion

138. Release things
often, get feedback
& improve.

139. Learn as much
as you can about
typography.

140. Get familiar
with code.

141. Thank you
benjystanton.co.uk
@benjystanton