Successfully reported this slideshow.
My name is Benjy, and I’m 
a freelance web designer 
based in Swansea.
I’ll be sharing my design process 
with you, along with lots of tips that 
you can apply to your own blog.
If you have a laptop, feel free 
to check out the links and ask 
any questions along the way.
I’ve been working as a 
designer for about 10 years.
About seven months ago, 
I returned to freelancing.
Planning a 
design project
1. Users 
2. Content 
3. Objectives
I try to always frame each 
project by thinking about the 
user experience (UX).
What do they want?
How can we help them 
to achieve their goals?
How can we make the 
experience better?
It’s good to have real 
data about your users.
Watching people 
use our website
Looking at 
Google Analytics
Creating 
Questionnaires
www.surveymonkey.com
www.typeform.com
Credit: webaim.org/presentations/2012/html5future/overview3b
Iterate.
Credit: https://twitter.com/smarty
How does this apply 
to blog design?
Top tip #1
Release things often, get 
feedback and improve.
What kind of 
blog do you run?
What do your users 
want achieve?
Primary Goal: 
Consume content
Secondary Goals: 
Interact with you, 
Subscribe to your articles
Content
Design is a bit like cooking, if you 
have good ingredients to start with, 
you don’t have to work as hard.
“Content precedes design. 
Design in the absence of content 
is not design, it's decoration.” 
Credit: https://twitter.com...
The Written Word
voiceandtone.com
robertmills.me/content-first-ftw
Photography
stocksy.com
stocksy.com
flickr.com/commons
openculture.com/2013/12/british-library-puts-1000000-images-into-public-domain.html
My Design Process
Case Study: 
A Simple Banner Ad
• Logo 
• Some copy 
• A Button or Call to Action 
• Imagery of a British 
holiday destination
Design inspiration
pinterest.com
niice.co
dribbble.com
Design Theory
Top tip #2
Learn as much as you 
can about typography.
“95% of the information on the web 
is written language. It is only logical 
to say that a web designer should get 
good t...
The responsive web will 
be 99.9% typography. 
http://www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typo...
What is 
typography?
Typography is the practice of choosing 
fonts and laying them out in a way that 
helps the user understand the content.
What’s the difference between 
a typeface and a font?
A typeface is a family of fonts 
that contains a set of particular 
styles and weights (e.g. Helvetica).
A font is a single member 
of that family (e.g. 
Helvetica Light Italic).
Choosing a font
myfonts.com
MyFonts.com 
& typecast.com
typekit.com
google.com/fonts
Font size
Measure is the length of single line of text, measured in characters.
Line 
Height
A comfortable 
reading experience.
Typography 
Resources
• stylemanual.org 
• practicaltypography.com 
• webtypography.net 
• fontfamily.io 
• hellohappy.org/beautiful-web-type
Colour
green = go 
red = stop
Red signifies passion or danger 
Green signifies nature
Red can be a symbol of 
good fortune and joy in 
Chinese cultures
RGB and Hex
Hex colour values 
look like this #FF0000
Colour Pickers
html-color-codes.info
0to255.com
Layout
Less is more
Less is more
Less is more
goodui.org
goodui.org
goodui.org
goodui.org
Create 
Visual 
Hierarchy
Create 
Visual 
Hierarchy
White space
Icons
fontawesome.io
Accessibility
a11yproject.com/checklist
leaverou.github.io/contrast-ratio
Performance
Downloading on mobile 
data plans can be slow 
and expensive
Don’t use too 
many fonts
Compress your 
images 
imageoptim.com
Games
bezier.method.ac
type.method.ac
shape.method.ac
color.method.ac
Design Applications
creative.adobe.com/plans
creative.adobe.com/plans
pixelmator.com
bohemiancoding.com/sketch
affinity.serif.com
sublimetext.com
sublimetext.com
dontfeartheinternet.com
Top tip #3
Get familiar with code via 
Chrome Developer Tools
google.com/chrome
My favourite blogs
thegreatdiscontent.com
alistapart.com
theguardian.com
Further reading
fivesimplesteps.com
abookapart.com
gov.uk/design-principles
Conclusion
Release things 
often, get feedback 
& improve.
Learn as much 
as you can about 
typography.
Get familiar 
with code.
Thank you 
benjystanton.co.uk 
@benjystanton
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Blog Design (at BlogConf)
Prochain SlideShare
Chargement dans…5
×

Blog Design (at BlogConf)

15 601 vues

Publié le

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.

Publié dans : Design
  • Soyez le premier à commenter

Blog Design (at BlogConf)

  1. My name is Benjy, and I’m a freelance web designer based in Swansea.
  2. I’ll be sharing my design process with you, along with lots of tips that you can apply to your own blog.
  3. If you have a laptop, feel free to check out the links and ask any questions along the way.
  4. I’ve been working as a designer for about 10 years.
  5. About seven months ago, I returned to freelancing.
  6. Planning a design project
  7. 1. Users 2. Content 3. Objectives
  8. I try to always frame each project by thinking about the user experience (UX).
  9. What do they want?
  10. How can we help them to achieve their goals?
  11. How can we make the experience better?
  12. It’s good to have real data about your users.
  13. Watching people use our website
  14. Looking at Google Analytics
  15. Creating Questionnaires
  16. www.surveymonkey.com
  17. www.typeform.com
  18. Credit: webaim.org/presentations/2012/html5future/overview3b
  19. Iterate.
  20. Credit: https://twitter.com/smarty
  21. How does this apply to blog design?
  22. Top tip #1
  23. Release things often, get feedback and improve.
  24. What kind of blog do you run?
  25. What do your users want achieve?
  26. Primary Goal: Consume content
  27. Secondary Goals: Interact with you, Subscribe to your articles
  28. Content
  29. Design is a bit like cooking, if you have good ingredients to start with, you don’t have to work as hard.
  30. “Content precedes design. Design in the absence of content is not design, it's decoration.” Credit: https://twitter.com/zeldman/statuses/804159148
  31. The Written Word
  32. voiceandtone.com
  33. robertmills.me/content-first-ftw
  34. Photography
  35. stocksy.com
  36. stocksy.com
  37. flickr.com/commons
  38. openculture.com/2013/12/british-library-puts-1000000-images-into-public-domain.html
  39. My Design Process
  40. Case Study: A Simple Banner Ad
  41. • Logo • Some copy • A Button or Call to Action • Imagery of a British holiday destination
  42. Design inspiration
  43. pinterest.com
  44. niice.co
  45. dribbble.com
  46. Design Theory
  47. Top tip #2
  48. Learn as much as you can about typography.
  49. “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/
  50. The responsive web will be 99.9% typography. http://www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/
  51. What is typography?
  52. Typography is the practice of choosing fonts and laying them out in a way that helps the user understand the content.
  53. What’s the difference between a typeface and a font?
  54. A typeface is a family of fonts that contains a set of particular styles and weights (e.g. Helvetica).
  55. A font is a single member of that family (e.g. Helvetica Light Italic).
  56. Choosing a font
  57. myfonts.com
  58. MyFonts.com & typecast.com
  59. typekit.com
  60. google.com/fonts
  61. Font size
  62. Measure is the length of single line of text, measured in characters.
  63. Line Height
  64. A comfortable reading experience.
  65. Typography Resources
  66. • stylemanual.org • practicaltypography.com • webtypography.net • fontfamily.io • hellohappy.org/beautiful-web-type
  67. Colour
  68. green = go red = stop
  69. Red signifies passion or danger Green signifies nature
  70. Red can be a symbol of good fortune and joy in Chinese cultures
  71. RGB and Hex
  72. Hex colour values look like this #FF0000
  73. Colour Pickers
  74. html-color-codes.info
  75. 0to255.com
  76. Layout
  77. Less is more
  78. Less is more
  79. Less is more
  80. goodui.org
  81. goodui.org
  82. goodui.org
  83. goodui.org
  84. Create Visual Hierarchy
  85. Create Visual Hierarchy
  86. White space
  87. Icons
  88. fontawesome.io
  89. Accessibility
  90. a11yproject.com/checklist
  91. leaverou.github.io/contrast-ratio
  92. Performance
  93. Downloading on mobile data plans can be slow and expensive
  94. Don’t use too many fonts
  95. Compress your images imageoptim.com
  96. Games
  97. bezier.method.ac
  98. type.method.ac
  99. shape.method.ac
  100. color.method.ac
  101. Design Applications
  102. creative.adobe.com/plans
  103. creative.adobe.com/plans
  104. pixelmator.com
  105. bohemiancoding.com/sketch
  106. affinity.serif.com
  107. sublimetext.com
  108. sublimetext.com
  109. dontfeartheinternet.com
  110. Top tip #3
  111. Get familiar with code via Chrome Developer Tools
  112. google.com/chrome
  113. My favourite blogs
  114. thegreatdiscontent.com
  115. alistapart.com
  116. theguardian.com
  117. Further reading
  118. fivesimplesteps.com
  119. abookapart.com
  120. gov.uk/design-principles
  121. Conclusion
  122. Release things often, get feedback & improve.
  123. Learn as much as you can about typography.
  124. Get familiar with code.
  125. Thank you benjystanton.co.uk @benjystanton

×