Blog camp2011

citeweb design | online marketing | social media communications

Cite | 42 Duke street, Leicester, LE1 6WA | 0116 254 9888 | www.cite.co.uk | Concept designs and ideas © Cite DMS Ltd 2010

Blog Camp London#BlogCamp

Blog designDafydd Prichard

@lliwedd

http://www.cite.co.uk/



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



































































Typography

Visual content Social

Colour

Usability




Useability

“Usability is 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




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




Jacob Nielsenhttp://www.useit.com


http://www.useit.com/





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




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!







Colour - resources

• http://kuler.adobe.com/#themes/• http://www.colourlovers.com/palettes/add• http://www.colorcombos.com/


http://kuler.adobe.com/%23themes/

http://kuler.adobe.com/%23themes/

http://www.colourlovers.com/palettes/add



http://www.colorcombos.com/

http://www.colorcombos.com/



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













Typography resources

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


http://www.w3schools.com/css/css_websafe_fonts.asp

http://www.w3schools.com/css/css_websafe_fonts.asp

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html





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!







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


http://www.istockphoto.com/

http://www.istockphoto.com/

http://www.gettyimages.co.uk/



http://www.sxc.hu/home



http://www.deviantart.com/

http://www.flickr.com/



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







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




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




The critique

• http://northernmum.wordpress.com• http://diaryofadurprisedmum.blogspot.com• http://www.frugalfamily.co.uk


http://northernmum.wordpress.com/

http://diaryofadurprisedmum.blogspot.com/

http://www.frugalfamily.co.uk/




http://northernmum.wordpress.com/







http://diaryofasurprisemum.blogspot.com/











And finally, a question

• How can blogging provide half an hour peace and quiet away from the kids…?










#BlogCamp

Blog designDafydd Prichard

@lliwedd

Thank You!Dafydd Prichard


Technology

Blog camp2011