1. Blog Design
Getaway Travel Blog Conference
2013
Joseph C Lawrence
@josephclawrence

2. WHAT? WHO? HOW? EH?!

3. Good design is
obvious.
Great design is
transparent.

4. WHAT IS DESIGN?
• Not just how pretty something is
• It’s not just how something looks,
but how it works too
• It does its job well
• It does it for an intended audience
• It makes their job easier

5. USABILITY VS. AESTHETICS
“It’s not meant to
squeeze lemons,
It’s meant to start
conversations.”

6. USABILITY VS. AESTHETICS

7. THE ULTIMATE GOAL: GREAT UX

8. The only
important thing
about design is
how it relates to
people.

9. SO WHO ARE YOU DESIGNING FOR?

10. SO WHO ARE YOU DESIGNING FOR?

11. SO WHO ARE YOU DESIGNING FOR?

15. SOME BASIC CODING

16. IT’S ALL JUST SERVERS & FILES

17. HTML
CSS
JAVASCRIPT

18. HTML IS THE STRUCTURE

19. CSS IS THE STYLING

20. JAVASCRIPT IS THE INTERACTION

21. 19 STEPS TO DESIGN #WINNING

22. 1. FONT SIZE & LINE HEIGHT
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

23. 2. FONT TYPE
http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/

24. 3. FONT COLOUR FOR EASY READING

25. 4. STRUCTURING PAGES WELL

26. 4. STRUCTURING PAGES WELL

27. 5. NAVIGATION (& INFORMATION ARCHITECTURE)
• Try and keep the number of menu items to a
minimum
• Use terms that are obvious and clear
• Work with a hierarchical structure that makes
sense to your readers
• Never go more than two levels deep
• Keep it real with top navigation

28. 6. DON’T BE AFRAID OF SPACE

29. 7. USE LIMITED COLOUR

30. 7. USE LIMITED COLOUR

31. 8. LOGOS – MAKE THEM SMALLER
• Large logos push down what your readers
really want – your content.
• Wide logos therefore work better then tall ones
• Smaller, horizontal logos are easier to use in
other environments, like mobile.
• Small logos can be fixed to the top of the
window, so create more brand familiarity than
big ones that people scroll past.
• Remember to always link your logo back to the
homepage.

32. 9. TAGLINES ARE UNDERRATED
• People decide to stay on a page or leave in a couple of
seconds
• On your homepage, explain what the focus of your blog
is in a few words
• Use a tagline under or near your logo to let all the people
who arrive at a single article on your site, know what
you’re all about

33. 10. ALWAYS HAVE SIGNPOSTS
• Clear, large titles (for category and tag pages
as well as articles/posts)
• Breadcrumbs:

34. 11. EASY, EXCITING COMMENT SYSTEMS

35. 12. SIMPLE SHARING
• Restrict options to about 4 or 5 at most
• Restrict them to options most relevant for your
audience (LinkedIn or Pinterest?)
• Ideally show sharing buttons at the top and
bottom of a piece of content
• Floating sharing buttons work less well on
responsive websites
• Email is still one of the biggest ‘social networks’

36. 13. SHOW A SNEAK PEAK OF YOUR COMMUNITY
• Show only one, unless you have the
followings to back it up
• Show the one that works best for you

37. 14. GO BIGGER, GO SMALLER, GO RESPONSIVE

38. 15. BIGGER IMAGES

39. 16. BIGGER VIDEOS

40. 16. GET A MAGAZINE STYLE HOMEPAGE

41. 17. KEEP IT MINIMAL
• People can only properly keep their attention
on one thing at once – the more you appreciate
this in the design of your site, the more
pleasant people will find it.
• More choice is (usually) not better
• Focus is key to flow, and flow is key to
enjoyment

42. 17. KEEP IT MINIMAL

43. Design is as
much an act of
spacing as an
act of marking.

44. 17. KEEP IT MINIMAL

45. 18. THINK ABOUT VISUAL HIERARCHY

46. 18. THINK ABOUT VISUAL HIERARCHY

47. 19. SHOW CLICKABLE THINGS CLEARLY
• Buttons should look like buttons
• Text links should be a VERY different colour to
your normal text, and no other text should be
the colour of your links
• Everything clickable should have a ‘hover state’
– this means when you hover over them, they
change in appearance:
• Text links should become underlined, lose
an underline, or change colour, or
background colour
• Buttons should change colour or shade
• Images should show a border, a shadow, or
lighten

48. 20. USE TEXT FORMATTING TO CHUNK THINGS UP

49. 20. USE TEXT FORMATTING TO CHUNK THINGS UP

50. SOME DELIGHTFUL TRICKS

57. http://wordpress.org/plugins/fullscreen-galleria/

58. Design is where
science and art
break even.

59. THE END