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.

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)
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