How to Evaluate & Improve Your Blog Design

Slide 1

Slide 1 text

@paper_leaf Jeff Archibald

Slide 2

Slide 2 text

Hello. Jeff Archibald Graphic & Web Designer WordPress developer Blogger paper-leaf.com @paper_leaf

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

TALKIN’ BOUT THE WHAT

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

THE POINT: DESIGN MATTERS.

Slide 11

Slide 11 text

IDENTIFYING YOUR AUDIENCE

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

Identifying Your Audience Who is my audience? Age? Gender? Interests? Income range? Level of education? Design to appeal to them. images from Wikipedia

Slide 14

Slide 14 text

Identifying Your Audience

Slide 15

Slide 15 text

Identifying Your Audience

Slide 16

Slide 16 text

SETTING YOUR GOALS

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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 _______.

Slide 20

Slide 20 text

KNOWING AUDIENCE + SETTING GOALS = FRAMEWORK FOR EFFECTIVE DESIGN

Slide 21

Slide 21 text

C.R.A.P.

Slide 22

Slide 22 text

C.R.A.P. C.R.A.P is an easy design principle to follow. Contrast Repetition Alignment Proximity

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

C.R.A.P. Contrast

Slide 25

Slide 25 text

C.R.A.P. Repetition Repeat styles throughout the page for cohesion Style related elements the same Headings Photos Links Text Alignment

Slide 26

Slide 26 text

C.R.A.P. Repetition C.R.A.P.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

C.R.A.P. Alignment C.R.A.P.

Slide 29

Slide 29 text

C.R.A.P. Proximity By grouping related content together, we can create meaning Unrelated content should be separated visually

Slide 30

Slide 30 text

C.R.A.P. Proximity C.R.A.P.

Slide 31

Slide 31 text

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!

Slide 32

Slide 32 text

DESIGNING FOR READABILITY

Slide 33

Slide 33 text

Designing for Readability Let’s chat about: How users read on the web Typography essentials: evaluating & improving tips & tricks tools & resources

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

Designing for Readability

Slide 37

Slide 37 text

Designing for Readability

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

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?

Slide 40

Slide 40 text

Designing for Readability - Typography Evaluating & Improving Typography Font size Line height Line length Type hierarchy/contrast Font selection

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

Designing for Readability - Typography Type Hierarchy

Slide 44

Slide 44 text

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%;

Slide 45

Slide 45 text

Designing for Readability - Typography Poor Line Height

Slide 46

Slide 46 text

Designing for Readability - Typography Good Line Height

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Designing for Readability - Typography Poor Line Length

Slide 49

Slide 49 text

Designing for Readability - Typography Good Line Length

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Designing for Readability - Typography Comfortable reading starts with Proper font size Proper type hierarchy & contrast Proper line height Proper line length

Slide 52

Slide 52 text

Designing for Readability - Typography

Slide 53

Slide 53 text

THE FUN PART: CHOOSING FONTS.

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Designing for Readability - Typography bonfx.com/23-really-bad-font-choices

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Designing for Readability - Typography thesmokingjacket.com

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Designing for Readability - Typography Google WebFonts

Slide 60

Slide 60 text

Designing for Readability - Typography TypeKit

Slide 61

Slide 61 text

Designing for Readability - Typography FontSquirrel

Slide 62

Slide 62 text

Designing for Readability - Typography FontSpring

Slide 63

Slide 63 text

Designing for Readability - Typography MyFonts

Slide 64

Slide 64 text

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.

Slide 65

Slide 65 text

HANDY TYPE RESOURCES

Slide 66

Slide 66 text

Designing for Readability - Typography Font Combinator

Slide 67

Slide 67 text

Designing for Readability - Typography 10 Great Google Font Combinations bit.ly/google-font-combos

Slide 68

Slide 68 text

Designing for Readability - Typography WP Google Fonts WordPress Plugin bit.ly/wp-fonts

Slide 69

Slide 69 text

DESIGNING WITH COLOUR

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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?

Slide 73

Slide 73 text

Retiring & Advancing Colours “Retiring” colours appear to recede: violet, blue, green “Advancing” colours appear to “come forward”: yellow, orange, red Designing With Colour

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

COLOUR: TOOLS & RESOURCES

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

kuler.adobe.com Designing With Colour

Slide 80

Slide 80 text

Color Scheme Designer Designing With Colour

Slide 81

Slide 81 text

TALKIN’ BOUT PHOTOS

Slide 82

Slide 82 text

Photos Photos can help or hinder. Evaluating photo quality Using photos in your design (CRAP!) Where to get free stock photos

Slide 83

Slide 83 text

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.

Slide 84

Slide 84 text

Photos How to evaluate photos for quality. Proper size (too big is okay; too small is not) Focus Colour accuracy Exposure & Lighting Composition

Slide 85

Slide 85 text

Photos Focus

Slide 86

Slide 86 text

Photos Color Accuracy

Slide 87

Slide 87 text

Photos Exposure

Slide 88

Slide 88 text

Photos Lighting: Soft

Slide 89

Slide 89 text

Photos Lighting: Hard

Slide 90

Slide 90 text

Photos Composition

Slide 91

Slide 91 text

Photos Checklist In focus? Colour accurate? Proper exposure & lighting? Pleasing composition? Has the “feeling” you’re looking for?

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

QUICK TIP: PHOTO COMPOSITION & TENSION

Slide 94

Slide 94 text

Photos

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

PHOTOS: TOOLS & RESOURCES

Slide 97

Slide 97 text

Photos Tools & Resources Image Editing Photoshop GIMP (gimp.org) Pixlr (pixlr.com) resize your photos for better website performance!

Slide 98

Slide 98 text

Photos Tools & Resources Free Stock Photos Compfight (compfight.com) StockXCHNG (sxc.hu) Wikipedia Public Domain (bit.ly/wiki-images)

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

WRAP-UP & RESOURCES

Slide 101

Slide 101 text

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!

Slide 102

Slide 102 text

Wrap-Up & Resources Look at your blog. Evaluate for CRAP. Contrast Repetition Alignment Proximity

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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!