better design dpcon 4a
TRANSCRIPT
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