Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Blog Design (at BlogConf)

16 458 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
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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