better design dpcon 4a

BETTER DESIGN

BETTER BLOG

How to make your blog design work for

you and not against you.

@katepickle

picklebums.com

katepickle.com

Some blog designs ideals are based on opinion.

Some blog design ideals are based on information about how readers use your blog.

There is no one right way to blog, and there is no one right way to design a blog

Image: http://www.flickr.com/photos/10096171@N04/8449683955/

DEFINE YOUR

BLOG

Who are you?

What do you blog about?

Image: http://www.flickr.com/photos/trevgrant/8414061077/in/set-72157627078728479/

What’s an elevator pitch?

An elevator pitch is an overview of an idea for a product, service, or project. The name reflects the fact that an elevator pitch can be delivered in the time span of an elevator ride (for example, thirty seconds or 100-150 words).” – Wikipedia

What are your blogging goals?

What do you want your blog to achieve overall?

What do you want to achieve this year?

planningwithkids.com/blog-coaching-boost-e-book-blogging-smarter/ problogger.net/31dbbb-workbook/

You can appeal to everyone, so who is your ideal reader?

Image: http://www.flickr.com/photos/trevgrant/8070134732/sizes/l/in/set-72157627078728479/

Where do they live?

How old are they?

Do they use facebook?

Do they have kids?

What do you want your reader to do?

HOW DO

PEOPLE READ

YOUR BLOG?

Readers are creatures of habit

They are also lazy!

Image: http://www.flickr.com/photos/trevgrant/8539588156/in/set-72157627078728479/

How do people look at a web page?

What else do we know about web readers?

• They are easily distracted.• The skim read• They are attracted to headline text and images

of people• They like white space• They need something to entice them to scroll

down.

Make your blog easy to read,

easy to navigate, and make sure each element

meets your goals

The magic formula for user friendly blog design:

CHANGE

YOUR BLOG

DESIGN TO

MEET YOUR

GOALS

Image: http://www.flickr.com/photos/trevgrant/8213329169

HEADER:Make a great first impression

afarmgirlsdabbles.com

foxslane.blogspot.com

www.viewlike.us

HEADER MENU:The first place readers look when they want more.

Image: http://www.flickr.com/photos/trevgrant/8461260945

• Always have a home button.

74limelane.com.au/blog/

owlet-designs.blogspot.com

CONTENT:

If ‘content is king’, then readable content is

queen!

Image: http://www.flickr.com/photos/trevgrant/8407888555/

CHOOSING FONTS:

• Choose fonts that are easy to read

• Choose only 2 -3 fonts

• Choose a dark coloured font on a light background

• Choose a web font that can be embedded into your design

USING FONTS:

• Make your main content font bigger

• Left justify your content

• Follow the font hierarchy

WHITE SPACE:

• cramped

• hard to tell what is content and what is side bar

• busy

• hard to distinguish between elements

• empty spaces for eyes to rest

• easy to tell different elements apart

• allows different elements to stand out

IMAGES:

• Use your own or others but make sure you have permission and credit properly

• Images draw a readers eye and can encourage them to take action

• Readers are drawn to images of people

• Resize your image to fit your blog and ‘save for web’

www.picmonkey.com www.pixlr.com

FOOTER:Entice people to dig deeper into your blog

www.planningwithkids.com

COMMENTS:If you want to readers to comment, make it easy!

LINKS:Make links visible!

• Comment button at the end of the post

• Clear, easy to fill in comment form

• Differentiate links from other text.

• Don’t make things look like links if they are not.

SIDE BAR:Less is more!

• Make sure your side bar promotes you and your blog and not everyone else.

• Use your goals to help decide what should be in your side bar and where it should go

• Use your side bar for added navigation, help your readers find more content.

www.freerangeinsuburbia.com

MAKING

YOUR BLOG

PRETTY,

OR COOL,

OR FUNKY,

OR…

Image: http://www.flickr.com/photos/trevgrant/7985332051/

Define your blogging style…

• Make a list of words that describe the way you want your blog to look and feel.

• Create a colour pallet

design-seeds.com

• Choose fonts

• Choose a style/type for your elements

• Look for inspiration to guide your ideas.

printpattern.blogspot.com designspiration.net pinterest.com

CAN I DO ALL

THIS

MYSELF?

Image: www.flickr.com/photos/trevgrant/8389489468/

If you want to do it yourself…

• Image editing software

• Use forums, tutorials and google to find help

• Start with a good basic theme

• Learn basic CSS and html

• Use browser add-ons and a good WYSIWYG html editor to help you learn and change code

getfirebug.com kompozer.net w3schools.com

Many websites say, “look at me.”

Your goal ought to be to say, “here’s what you were looking for.”

Seth Godinsethgodin.typepad.com

Image: http://www.flickr.com/photos/trevgrant/6243741537

Links to all resources mentioned can be found at:

katepickle.com/dpcon13