Blog camp2011

677 views

Published on

Hints and tips for successful blog design.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
677
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Blog camp2011

  1. 1. Blog Camp London#BlogCamp<br />Blog design<br />Dafydd Prichard<br />@lliwedd<br />
  2. 2. A quick word about cite<br />Established 2000<br />We specialise in online marketing communications<br />Our team of 10 includes creative, technical and marketing<br />What we do<br />Web design - corporate, catalogues, microsites, etc<br />Social media communications - particularly Facebook apps, blogs<br />E-commerce<br />Search engine optimisation (SEO)<br />Email marketing<br />Online marketing - planning and implementation<br />Support<br />Hosting and reporting<br />
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24. Colour<br />Typography<br />Usability<br />Visual content<br />Social<br />
  25. 25. Useability<br />“Usabilityis the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with.”<br />Wikipedia<br />
  26. 26. Usability<br />Structure you information logically – give proper thought to category titles; position of your navigation; linking conventions, etc<br />Design should work on a 1024px resolution screen<br />There’s nothing wrong with following convention – header, key information on the left main content taking 60% or do of screen real-estate<br />Keep it simple – accessible information is readable information<br />Break your information into digestible chunks (a bit like tabloid copy)<br />Test, test, test. PC, Mac, mobile, iPad, TV<br />
  27. 27. Jacob Nielsen<br />http://www.useit.com<br />
  28. 28. Implications of the F Pattern<br />Users won't read your text thoroughly in a word-by-word manner.<br />The first two paragraphs must state the most important information<br />Start subheads, paragraphs, and bullet points with information-carrying words<br />
  29. 29. colour<br />Use a restricted palette that matches your audience, your message and tone<br />Get a strong contrast between text and background, but this doesn’t have to mean black and white<br />Understand the principles harmonious colours, but be very careful of complimentary colours like red and green, blue and orange or purple and yellow!<br />
  30. 30.
  31. 31. Colour - resources<br />http://kuler.adobe.com/#themes/<br />http://www.colourlovers.com/palettes/add<br />http://www.colorcombos.com/<br />
  32. 32. Typography<br />All editable content should use Web-safe fonts – these are the fonts which all PCs and Macs have like Times, Arial, Georgia, Verdana, etc<br />By and large, restrict choice to a single family of fonts – use differences in weight, colour and scale rather than mixing too many different fonts together<br />If you do use more than one font, there should be significant contrast. <br />Avoid mixing different serif and sans-serif fonts together<br />Georgia and Arial - YES!<br />Arial and verdana – NO!<br />Use sub-headings (maybe in a different weight or colour) and bullet points to style your content<br />Break information down into digestible chunks<br />
  33. 33.
  34. 34.
  35. 35.
  36. 36. Typography resources<br />http://www.w3schools.com/css/css_websafe_fonts.asp<br />http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html<br />
  37. 37. Visual content <br />Images. As well as photos and illustrations, you can consider graphs and infographics<br />Resources like iStockPhoto, Flickr and DeviantArt are free or low-cost<br />Moving image – consider using video and audio<br />YouTube<br />Vimeo<br />Audioboo<br />Pull out quotes<br />Create images like cloud tags<br />Beware of using photos from `photo Libraries without paying – AP and Getty regularly track down perpetrators! <br />
  38. 38.
  39. 39. Visual content - resources<br />http://www.istockphoto.com/<br />http://www.gettyimages.co.uk/<br />http://www.sxc.hu/home<br />http://www.deviantart.com<br />http://www.flickr.com<br />
  40. 40. Social<br />All the leading social sites have APIs with which to integrate<br />Facebook<br />Twitter<br />YouTube/Vimeo<br />Flickr<br />Google maps, etc<br />Adds topical content<br />Real-time engagement<br />Communities<br />
  41. 41.
  42. 42. 6 simple rules<br />Don’t over design - the less experience you have, the simpler you should keep your design. <br />Design with the voice and words of the author; and the ears and eyes of the reader in mind (use the right visual language to create rapport).<br />Work backwards – think of everything you might need to accommodate and avoid bolting on extra widgets afterwards.<br />Decide on your preferred technology/platform early on – no point having great ideas if your preferred platform (Wordpress, blogger, tumblr, etc) won’t support it.<br />Start with a low-tech approach – get your design right on paper, before you commit to the screen.<br />Test your blog is as many browsers as possible – PC, Mac and mobile<br />
  43. 43. 6 blog crimes<br />Content is king – your blogs must be the focus of the site<br />Overcrowded sidebars that leave the site un-navigable - useless widgets, javascript that breaks the browser, broken media players, etc<br />Overloading with adverts – especially multi-media/takeover ad<br />Broken links and unmanaged blog-rolls<br />
  44. 44. The critique<br />http://northernmum.wordpress.com<br />http://diaryofadurprisedmum.blogspot.com<br />http://www.frugalfamily.co.uk<br />
  45. 45.
  46. 46.
  47. 47.
  48. 48.
  49. 49.
  50. 50. And finally, a question<br />How can blogging provide half an hour peace and quiet away from the kids…?<br />
  51. 51.
  52. 52.
  53. 53. Thank You!<br />Dafydd Prichard<br />#BlogCamp<br />Blog design<br />Dafydd Prichard<br />@lliwedd<br />

×