How to Evaluate & Improve Your Blog Design

How to Evaluate & Improve Your Blog Design

An effective blog design meets your goals & keeps your happy readers engaged and returning for more. Learn how to evaluate and improve your blog’s design based on tried-and-true best practices in web design, including: layout/alignment; colour; typography; spacing and more. You’ll leave this session with a variety of tangible skills and resources to start immediately improving your blog design.

Be47c213d584412f2dc86e47887a88a6?s=128

Jeff Archibald

March 10, 2012
Tweet

Transcript

  1. @paper_leaf Jeff Archibald

  2. Hello. Jeff Archibald Graphic & Web Designer WordPress developer Blogger

    paper-leaf.com @paper_leaf
  3. Hello. Topics What is “blog design”? Identifying Audience Setting Goals

    The C.R.A.P. Principle Designing for Readability Designing with Colour Evaluating & Using Photos Resources for you
  4. Hello. My Goals for You To care & think about

    typography, layout, & designing with goals/audience in mind. To be able to evaluate & communicate on design elements & principles To leave with one metric ton of new resources and applicable tips & tricks for your blog/site.
  5. TALKIN’ BOUT THE WHAT

  6. The What What is “blog design”? Yes. It’s the design

    of your blog. Thanks, Captain Obvious. The combined result of layout, words, images & colour. Everything works together. The mood, brand, and actions you create.
  7. The What Why should I care? Stop asking mean questions.

    Design can make or break your blog. It can change the perception of you/your business The littlest design decisions can have huge impact. For example...
  8. The Power of Design The $300M Button UX study: Major

    online retailer. Changed their button from “Register” to “Continue” Why? “Registering” made some people uncomfortable and drove them away. Result? 45% uptick in sales, AKA $300M bit.ly/300M-button
  9. The Power of Design Increasing blog subscribers by 254% Original

    buttons: “Subscribe by Email” & “Subscribe by RSS” New buttons: “Get Jobs by Email” & “Get Jobs by RSS” Result? 254% jump in subscribers. bit.ly/more-blog-subscribers
  10. THE POINT: DESIGN MATTERS.

  11. IDENTIFYING YOUR AUDIENCE

  12. Identifying Your Audience Why should I identify my audience? If

    you know who your audience is, or whom you’d like it to be, you can make logical design decisions. If you make your audience happy, your blog will grow. Growth can mean: more readers, more comments, more interaction, more income & more job prospects.
  13. Identifying Your Audience Who is my audience? Age? Gender? Interests?

    Income range? Level of education? Design to appeal to them. images from Wikipedia
  14. Identifying Your Audience

  15. Identifying Your Audience

  16. SETTING YOUR GOALS

  17. Setting Your Goals Why should I set goals? If you

    set goals, you can design to meet those goals. Goals are how you tell if your blog is effective or not.
  18. Setting Your Goals Goals should be: Realistic Measurable, where possible.

    Goals can be: Both general & specific eg. brand yourself as an SME vs. sell XX% more products.
  19. Setting Your Goals Examples of goals: Increase RSS subscribers by

    X%. Land more speaking gigs. Get X more monthly email newsletter signups. Brand yourself as a SME. Drive X% more monthly traffic to a specific page. Sell $X of affiliate products monthly. Sell $X of your own products monthly. Increase monthly pageviews to _______.
  20. KNOWING AUDIENCE + SETTING GOALS = FRAMEWORK FOR EFFECTIVE DESIGN

  21. C.R.A.P.

  22. C.R.A.P. C.R.A.P is an easy design principle to follow. Contrast

    Repetition Alignment Proximity
  23. C.R.A.P. Contrast When items are visually different from one another

    Separating unique content visually Allows users’ eyes to flow through the site Contrast via size Contrast via color
  24. C.R.A.P. Contrast

  25. C.R.A.P. Repetition Repeat styles throughout the page for cohesion Style

    related elements the same Headings Photos Links Text Alignment
  26. C.R.A.P. Repetition C.R.A.P.

  27. C.R.A.P. Alignment Everything on a page should be connected visually

    to something else. Keeping things in line keeps them coherent and aesthetically pleasing If you know the rules, you can break them.
  28. C.R.A.P. Alignment C.R.A.P.

  29. C.R.A.P. Proximity By grouping related content together, we can create

    meaning Unrelated content should be separated visually
  30. C.R.A.P. Proximity C.R.A.P.

  31. C.R.A.P. Make your design C.R.A.P. Contrast Repetition Alignment Proximity Look

    at every element of your site - photos, colours, layout, typography - and make it CRAP. Concept thanks to ThinkVitamin!
  32. DESIGNING FOR READABILITY

  33. Designing for Readability Let’s chat about: How users read on

    the web Typography essentials: evaluating & improving tips & tricks tools & resources
  34. Designing for Readability Why should I care about readability? Most

    blogs are primarily writing-focused. Better typography = more professional Better typography = better experience for readers
  35. Designing for Readability How Users Read on the Web. Studies

    show users scan - they don’t read everything. Your blog needs to be conducive to scanning content. The “F Pattern” is widely considered the pattern to follow when designing for large bodies of text.
  36. Designing for Readability

  37. Designing for Readability

  38. Designing for Readability - Typography Typography the art & technique

    of arranging type in order to make language visible. it communicates: a message an emotion a mood.
  39. Designing for Readability - Typography Ask yourself: Is my blog’s

    typography conducive to scanning and long-form reading? Does my blog meet the basic best practices of typographic design? Does the style of my blog’s typography reflect my desired brand, my audience and my goals?
  40. Designing for Readability - Typography Evaluating & Improving Typography Font

    size Line height Line length Type hierarchy/contrast Font selection
  41. Designing for Readability - Typography Font Size Body copy should

    allow for easy reading Headings should allow for easy scanning Headings & body copy should be easily distinguishable
  42. Designing for Readability - Typography Font Size: Type Hierarchy A

    proper type hierarchy is conducive to scanning How to establish? h1 = 32px, h2 = 26px, h3 = 20px etc Use weights (bold vs. normal) & spacing effectively. This creates nice Contrast.
  43. Designing for Readability - Typography Type Hierarchy

  44. Designing for Readability - Typography Line Height AKA leading or

    line spacing Blocks of text should be a “uniform grey” Too short: text is tight & tough to read Too tall: text is disconnected Good starting point: line-height:150%;
  45. Designing for Readability - Typography Poor Line Height

  46. Designing for Readability - Typography Good Line Height

  47. Designing for Readability - Typography Line Length The amount of

    characters in a line Want to provide comfort, efficiency and comprehension to your readers Good rule of thumb is between 60 and 80 characters Decided by width of your text container and size of your font
  48. Designing for Readability - Typography Poor Line Length

  49. Designing for Readability - Typography Good Line Length

  50. Designing for Readability - Typography Line height, line length &

    font size Your font size drives your line height bigger font size requires a bigger line height Your font size drives your line length smaller font size requires a shorter line length
  51. Designing for Readability - Typography Comfortable reading starts with Proper

    font size Proper type hierarchy & contrast Proper line height Proper line length
  52. Designing for Readability - Typography

  53. THE FUN PART: CHOOSING FONTS.

  54. Designing for Readability - Typography Think about your brand, audience

    & goals. Type can be used to create a mood or emotion Choosing the wrong fonts can: give your readers the wrong impression conflict with your desired message/goal for example...
  55. Designing for Readability - Typography bonfx.com/23-really-bad-font-choices

  56. Designing for Readability - Typography System fonts. Georgia, Times, Arial,

    Tahoma etc. Used to be all we could use in our web designs. We are no longer handcuffed by system fonts
  57. Designing for Readability - Typography thesmokingjacket.com

  58. Designing for Readability - Typography @font-face Fonts can be embedded

    for the web using @font-face If you want to know the code side: bit.ly/how-to-font-face
  59. Designing for Readability - Typography Google WebFonts

  60. Designing for Readability - Typography TypeKit

  61. Designing for Readability - Typography FontSquirrel

  62. Designing for Readability - Typography FontSpring

  63. Designing for Readability - Typography MyFonts

  64. Designing for Readability - Typography Some guidelines. Apply CRAP to

    your typography Max 3 fonts per design. One for body; one for headings; one for date/author etc. Using only one font with different sizes/styles for hierarchy is totally fine too! Use fonts as they were intended to be used. Eg. Don’t use heading/“display” fonts for body copy.
  65. HANDY TYPE RESOURCES

  66. Designing for Readability - Typography Font Combinator

  67. Designing for Readability - Typography 10 Great Google Font Combinations

    bit.ly/google-font-combos
  68. Designing for Readability - Typography WP Google Fonts WordPress Plugin

    bit.ly/wp-fonts
  69. DESIGNING WITH COLOUR

  70. Colour & Your Blog. Colours & their meanings Using colour

    to tailor the design to your audience & goals Effective use of colour Dos and Don’ts Designing With Colour
  71. Colour Meanings Red: intense, aggressive, energy, danger, love. Orange: warm,

    stimulating, success, creative, autumn. Yellow: sunshine, joy, intellect, cheerfulness. Purple: royalty, power, nobility, wealth, dignified. Blue: sky, sea, depth, confidence, trust, masculine. Green: nature, growth, money, fresh, safety. Designing With Colour
  72. Designing With Colour Colour and the Brand Should the Art

    of Manliness website’s colour palette be pink & purple? Should the Frugal Bride website’s colour palette be red, black and silver? Who is their audience? What are their goals?
  73. Retiring & Advancing Colours “Retiring” colours appear to recede: violet,

    blue, green “Advancing” colours appear to “come forward”: yellow, orange, red Designing With Colour
  74. Retiring & Advancing Colours Misuse of these colours can be

    irritating to your readers, and can negatively impact your goals. Eg.: retiring colours creating tough-to-read text Advancing colour for background that makes long- form reading tiring Designing With Colour
  75. Using Colour in Your Blog Design Evaluate/figure out your colour

    palette based on your brand, goals, and audience. Define where & how colours in your palette will be used eg. background, headings, buttons, text CRAP! Look to established blogs you enjoy and see how they do it. Designing With Colour
  76. Colour, Blogs, & Best Practices Colour can be used to

    draw attention Headings, Subscribe buttons, etc. Text has to be readable This is good. This is bad. Subtlety is a good thing! Designing With Colour
  77. COLOUR: TOOLS & RESOURCES

  78. bit.ly/color-theory-poster Designing With Colour

  79. kuler.adobe.com Designing With Colour

  80. Color Scheme Designer Designing With Colour

  81. TALKIN’ BOUT PHOTOS

  82. Photos Photos can help or hinder. Evaluating photo quality Using

    photos in your design (CRAP!) Where to get free stock photos
  83. Photos Why use photos? Grab reader’s attention Walls of text

    are scary, like the cast of Jersey Shore Increase comprehension of subject material Improve overall layout & aesthetics terrible photos are worse than no photos.
  84. Photos How to evaluate photos for quality. Proper size (too

    big is okay; too small is not) Focus Colour accuracy Exposure & Lighting Composition
  85. Photos Focus

  86. Photos Color Accuracy

  87. Photos Exposure

  88. Photos Lighting: Soft

  89. Photos Lighting: Hard

  90. Photos Composition

  91. Photos Checklist In focus? Colour accurate? Proper exposure & lighting?

    Pleasing composition? Has the “feeling” you’re looking for?
  92. Photos Using Photos in Your Design CRAP Contrasts with the

    text (size & colour) Repeat styles and sizes for consistency Align the photo with the rest of the grid equal margins around photo Proximity: placed related photos near that content
  93. QUICK TIP: PHOTO COMPOSITION & TENSION

  94. Photos

  95. Photos Empty space Our eyes go from subject -> “empty”

    space Look to your blog layout, choose photos to complement it Poor use of space & content layout
  96. PHOTOS: TOOLS & RESOURCES

  97. Photos Tools & Resources Image Editing Photoshop GIMP (gimp.org) Pixlr

    (pixlr.com) resize your photos for better website performance!
  98. Photos Tools & Resources Free Stock Photos Compfight (compfight.com) StockXCHNG

    (sxc.hu) Wikipedia Public Domain (bit.ly/wiki-images)
  99. None
  100. WRAP-UP & RESOURCES

  101. Wrap-Up & Resources Look at your blog. Now back at

    me. Now back at your blog. Who is your audience? What are your goals? Be specific & measurable!
  102. Wrap-Up & Resources Look at your blog. Evaluate for CRAP.

    Contrast Repetition Alignment Proximity
  103. Wrap-Up & Resources Look at your blog. How is my

    typography? Evaluate the: font size line height line length type hierarchy mood
  104. Wrap-Up & Resources Look at your blog. How is my

    use of colour? Evaluate: the meanings & theory behind your colour choices how your colours reflect your brand how effective your colour use is: drawing attention creating mood creating an enjoyable reading environment
  105. Wrap-Up & Resources Look at your blog. How am I

    using photos? Evaluate: the quality of the photos in your blog focus, colour accuracy, exposure & composition placement of photos in your blog’s design Use tools like GIMP & Pixlr to improve photos Use free stock photo resources to complement your content attribute properly!
  106. RESOURCE LIST: bit.ly/blog-design-pdf

  107. THANKS jeff archibald // @paper_leaf www.paper-leaf.com