Hints and tips for successful blog design.

1. Blog Camp London#BlogCamp Blog design Dafydd Prichard @lliwedd

2. A quick word about cite Established 2000 We specialise in online marketing communications Our team of 10 includes creative, technical and marketing What we do Web design - corporate, catalogues, microsites, etc Social media communications - particularly Facebook apps, blogs E-commerce Search engine optimisation (SEO) Email marketing Online marketing - planning and implementation Support Hosting and reporting

24. Colour Typography Usability Visual content Social

25. Useability “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.” Wikipedia

26. Usability Structure you information logically – give proper thought to category titles; position of your navigation; linking conventions, etc Design should work on a 1024px resolution screen There’s nothing wrong with following convention – header, key information on the left main content taking 60% or do of screen real-estate Keep it simple – accessible information is readable information Break your information into digestible chunks (a bit like tabloid copy) Test, test, test. PC, Mac, mobile, iPad, TV

27. Jacob Nielsen http://www.useit.com

28. Implications of the F Pattern Users won't read your text thoroughly in a word-by-word manner. The first two paragraphs must state the most important information Start subheads, paragraphs, and bullet points with information-carrying words

29. colour Use a restricted palette that matches your audience, your message and tone Get a strong contrast between text and background, but this doesn’t have to mean black and white Understand the principles harmonious colours, but be very careful of complimentary colours like red and green, blue and orange or purple and yellow!

31. Colour - resources http://kuler.adobe.com/#themes/ http://www.colourlovers.com/palettes/add http://www.colorcombos.com/

32. Typography All editable content should use Web-safe fonts – these are the fonts which all PCs and Macs have like Times, Arial, Georgia, Verdana, etc 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 If you do use more than one font, there should be significant contrast. Avoid mixing different serif and sans-serif fonts together Georgia and Arial - YES! Arial and verdana – NO! Use sub-headings (maybe in a different weight or colour) and bullet points to style your content Break information down into digestible chunks

36. Typography resources http://www.w3schools.com/css/css_websafe_fonts.asp http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

37. Visual content Images. As well as photos and illustrations, you can consider graphs and infographics Resources like iStockPhoto, Flickr and DeviantArt are free or low-cost Moving image – consider using video and audio YouTube Vimeo Audioboo Pull out quotes Create images like cloud tags Beware of using photos from `photo Libraries without paying – AP and Getty regularly track down perpetrators!

39. Visual content - resources http://www.istockphoto.com/ http://www.gettyimages.co.uk/ http://www.sxc.hu/home http://www.deviantart.com http://www.flickr.com

40. Social All the leading social sites have APIs with which to integrate Facebook Twitter YouTube/Vimeo Flickr Google maps, etc Adds topical content Real-time engagement Communities

42. 6 simple rules Don’t over design - the less experience you have, the simpler you should keep your design. 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). Work backwards – think of everything you might need to accommodate and avoid bolting on extra widgets afterwards. 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. Start with a low-tech approach – get your design right on paper, before you commit to the screen. Test your blog is as many browsers as possible – PC, Mac and mobile

43. 6 blog crimes Content is king – your blogs must be the focus of the site Overcrowded sidebars that leave the site un-navigable - useless widgets, javascript that breaks the browser, broken media players, etc Overloading with adverts – especially multi-media/takeover ad Broken links and unmanaged blog-rolls

44. The critique http://northernmum.wordpress.com http://diaryofadurprisedmum.blogspot.com http://www.frugalfamily.co.uk

50. And finally, a question How can blogging provide half an hour peace and quiet away from the kids…?

53. Thank You! Dafydd Prichard #BlogCamp Blog design Dafydd Prichard @lliwedd