3. There is no one right way to
blog, and there is no one
right way to design a blog
Some blog designs ideals are
based on opinion.
Some blog design ideals are
based on information about
how readers use your blog.
Image: http://www.flickr.com/photos/10096171@N04/8449683955/
4. DEFINE YOUR
BLOG
Who are you?
What do you blog
about?
Image: http://www.flickr.com/photos/trevgrant/8414061077/in/set-72157627078728479/
5. 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
6. 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/
7. You can appeal to everyone, so who is your ideal reader?
Where do they live? Do they use facebook?
How old are they? Do they have kids?
What do you want your reader to do?
Image: http://www.flickr.com/photos/trevgrant/8070134732/sizes/l/in/set-72157627078728479/
8. 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/
10. 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.
11. The magic formula for user friendly
blog design:
Make your blog
easy to read,
easy to navigate,
and make sure
each element
meets your goals
12. CHANGE
YOUR BLOG
DESIGN TO
MEET YOUR
GOALS
Image: http://www.flickr.com/photos/trevgrant/8213329169
13. HEADER:
Make a great first impression
afarmgirlsdabbles.com
foxslane.blogspot.com
15. HEADER MENU:
The first place readers look when they want more.
• Always have a home
button.
owlet-designs.blogspot.com
74limelane.com.au/blog/
Image: http://www.flickr.com/photos/trevgrant/8461260945
16. CONTENT:
If ‘content is king’,
then readable content is
queen!
Image: http://www.flickr.com/photos/trevgrant/8407888555/
17. 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
18. USING FONTS:
• Make your main content font bigger
• Left justify your content
• Follow the font hierarchy
19. WHITE SPACE:
• cramped
• busy
• hard to tell
what is content
and what is
side bar
• hard to
distinguish
between
elements
20. • empty spaces
for eyes to rest
• easy to tell
different
elements
apart
• allows
different
elements to
stand out
21. IMAGES:
• Images draw a readers eye and can encourage
them to take action
• Readers are drawn to images of people
• Use your own or others but make sure you have
permission and credit properly
• Resize your image to fit your blog and ‘save for
web’
www.picmonkey.com www.pixlr.com
23. COMMENTS:
If you want to readers to comment, make it easy!
• Comment button at the end of the post
• Clear, easy to fill in comment form
LINKS:
Make links visible!
• Differentiate links from other text.
• Don’t make things look like links if they are not.
24. 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
25. MAKING
YOUR BLOG
PRETTY,
OR COOL,
OR FUNKY,
OR…
Image: http://www.flickr.com/photos/trevgrant/7985332051/
26. 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
• Choose fonts
• Choose a style/type for your
design-seeds.com elements
• Look for inspiration to guide your ideas.
printpattern.blogspot.com designspiration.net pinterest.com
27. CAN I DO ALL
THIS
MYSELF?
Image: www.flickr.com/photos/trevgrant/8389489468/
28. If you want to do it yourself…
• Start with a good basic theme
• Image editing software
• Learn basic CSS and html
• Use forums, tutorials and google to find help
• Use browser add-ons and a good WYSIWYG
html editor to help you learn and change code
getfirebug.com kompozer.net w3schools.com
29. Many websites say,
“look at me.”
Your goal ought to be to say,
“here’s what you were looking for.”
Seth Godin
sethgodin.typepad.com
Image: http://www.flickr.com/photos/trevgrant/6243741537
30. Links to all resources mentioned can
be found at:
katepickle.com/dpcon13
