This document summarizes a Portland bloggers event on blog design and branding. It provides an agenda for speakers and topics which include blog design, branding, creating a style guide, and basic design elements. Breakout sessions are included to discuss goals for blog branding and common questions. Design concepts covered are color palettes, typography, photography style, use of space, and social media icons. Resources for creating style guides and finding images/fonts are also listed.

1. BACK TO BLOGGING SCHOOL
Blog Design
#portlandbloggers
@pdxbloggers
speakers:
@szewacheung
@chicsteals
WIFI
Network: PortlandBloggers
Password: PortlandBloggers

2. BACK TO BLOGGING SCHOOL
1. Branding through Blog Design
2. Branding Discussion
3. Basic Blog Elements & Intro to Design
Terminology: Sze Wa Cheung
4. How to Create a Style Guide for your Blog:
Carly J. Cais

3. Blog design
• Why does design matter?
• “Content is king”
• Once you understand your
content/goals, importance of visuals
and overall message you share

4. Branding
• “Branding”: the promoting of a product or
service by identifying it with a particular brand
• Pull, not push. Precedes and underlies
marketing
• Characteristics, values, emotional corporate
image
• Blog: brand as self
• ONE way: consistency in visual messages
• Gap, Amazon, Nike, Barack Obama
• How our minds work

6. blog branding – core
message
1. Target audience?
2. Why are they reading?
3. What are you telling them?
4. Consistency
5. Repetition

7. Branding discussion
How do you communicate your core message?

8. RECESS!

9. QUESTIONS?
TWEET!
Tweet one personal goal you have for your blog
branding
#portlandbloggers
@PDXbloggers

10. Portland Bloggers
Basic Blog Elements
& Intro to Design Terminology

11. Hello, I am Sze Wa Cheung.
A visual designer, thinker,
maker and most importantly
an enjoyer.

12. Basic Design
Process

13. 1. Do Your Research

14. 1. Do Your Research
Study and learn from your fellow bloggers
to understand what is hot and trending.
What’s working and what’s not.

15. I did some research
on blogging and here
are my results.

16. Unlimited Scrolling

17. Unlimited Scrolling
Often Divides Into Two Sections:
Info Sidebar
Blog Post

18. Unlimited Scrolling
Food
Sprouted Kitchen
Fashion/Beauty
The Chriselle Factor
Lifestyle
Cocorrina

19. Categories Showcasing

20. Categories Showcasing
Often Feels Like a Home Page:
Large Photo Feature Banner
Smaller Photos to Sub-Pages

21. Categories Showcasing
Food
I am a Food Blog
Fashion/Beauty
Nouvelle Daily
Lifestyle
Camille Styles

22. Categories
Showcasing
Pros
Informative
Well-Organized
Searchable
Compare & Contrast
Unlimited
Scrolling
Pros
Local
Traditional
Personal

23. Categories
Showcasing
Cons
Lack of Personal Touch
Information Driven
Large Database Support
Compare & Contrast
Unlimited
Scrolling
Cons
Hard to Search
No Featuring Function
Heavily Photo Driven

24. 2. Identify & Define Your Blog

25. 2. Identify & Define Your Blog
Find out the best way for your readers
to navigate through your website.

26. Here is a quick tip
to help you kickstart
this process.

27. List 5 Adjectives That
Best Describe Your Blog.

28. Ask Yourself.
Why Those 5 Adjectives?
What are You Trying to Convey?

29. Basic Design
Terminology & Elements

30. Designing a Blog
is Much More Than
A Pretty Logo

31. Elements
1. Color Palette

32. Elements
1. Color Palette
It’s very important to establish a color palette
to set the tone for the overall look and feel of
your blog.

33. Elements
1. Color Palette
Adobe Kuler
Free Color Combination Picker
& Color Library

35. Elements
2.Typography

36. Elements
2.Typography
There are limitless detailed adjustments
and selections you can do with typography.

37. Elements
2.Typography
Typeface
Point Size
Line Length
Tracking (Lettering Spacing)
Leading (Line Spacing)
Kerning (Spacing Between Two Letters)

39. Elements
3.Style/Tone of Photography

40. Elements
3.Style/Tone of Photography
Define and refine your photography style.
Find out what works the best for your blog.

44. Elements
4.Positive & Negative Space

45. Elements
4.Positive & Negative Space
Online reading is hard on the eyes.
Make sure to leave enough negative space
around your text to create better comfort.

46. Atqui debite nost, quodipis quiatur? As renemqui des at
exped que offictae. Ut alibus.
Rae repersp eritiaturia volorernam, sequost ent quodi-atem
exces aut rest etus nonsequi blam vendit eum incilli
ciunditia dolo blaceribus, isquatem iumqui blanim ven-del
ipis eaquod qui sitionet aut volestem voluptat quam,
conseque voluptateces ratectur? Apit quid quam nis es
doluptat venditam et, si simpore icipsunt erspiciisto que
nimod magnihi llaccabore molorror aborero quatem il
in net hilis doluptam rem. Parum sam et, aut mo modit
oditatem labore labora que sinvero ipsam qui omnimus
eaquiae reptatquame nus aut aut vel magnim intor adi
ullenimus as esediasini berionseria siti tempero duntiant.
Atqui debite nost, quodipis quiatur? As renemqui des at
exped que offictae. Ut alibus.
Rae repersp eritiaturia volorernam, sequost ent quodi-atem
exces aut rest etus nonsequi blam vendit eum incilli
ciunditia dolo blaceribus, isquatem iumqui blanim ven-del
ipis eaquod qui sitionet aut volestem voluptat quam,
conseque voluptateces ratectur? Apit quid quam nis es
doluptat venditam et, si simpore icipsunt erspiciisto que
nimod magnihi llaccabore molorror aborero quatem il in
net hilis doluptam rem. Parum sam et.

47. Elements
5.Social Media Icons

48. Elements
5.Social Media Icons
Don’t forget about these little icons.
Tie them in with the rest of your blog with col-ors,
textures and shapes.

49. Twitter
Facebook
Google+
Pinterest
Tumblr
LinkedIn

50. Elements
6.Post Dividers

51. Elements
6.Post Dividers
These are great secondary elements
that sit behind (between) content
as background. But never let them
compete with important content.

52. Services:
Custom Blog Logo
Links & Post Title
Favicon
Social Media Buttons
Designed Sidebar
Welcome graphic
Navigation bar
Brand Identity
Logo Design
Business Card Design
Facebook Page
Twitter Page
Media Kit Design
Design Files

53. The End & Thank You

54. RECESS!

55. QUESTIONS?
TWEET!
Tweet something you've learned and are excited to
implement on your blog
#portlandbloggers
@PDXbloggers

56. READYAIMBLOG.COM

57. READYAIMBLOG.COM
MY WEBSITES
CHICSTEALS.COM
READYAIMBLOG.COM
THEUNCOMMONERA.COM CARLYJCAIS.COM

58. READYAIMBLOG.COM
THE STYLE GUIDE CREATES A BRAND
• It acts as a cheat sheet for your blog specs
• It unifies the feel of your site
• It provides a professional face to your brand
Review once a year to make sure it is still relevant, and whenever you update your
blog logo, theme, or want to make a change
*You can always improve!

59. IT SETS THE TONE OF YOUR ENTIRE BLOG BY
DEFINING:
*Brand Colors
*Fonts
*Font sizing
*Textural elements/patterns
*Blog element sizing
*Inspiration photos
READYAIMBLOG.COM
…All fitting with your blog logo and image you want to convey!

60. HOW TO MAKE A STYLE GUIDE?
Decide on elements after you conduct research on your readers. Create your Ideal
READYAIMBLOG.COM
Customer Profile.
***Who is your Ideal Customer?***
-age
-gender
-location
-family structure
-life events
-political affiliation
-hobbies and interests
-ideology/religion
What does this person like and respond to?

61. READYAIMBLOG.COM
STYLE GUIDE EXAMPLES

62. READYAIMBLOG.COM
FILL OUT YOUR STYLE GUIDE WITH THIS
INFORMATION IF APPLICABLE
• Mission statement
• Tone of voice
• Writing copy example
• Text color
• Brand colors
• Typeface
• Imagery
• Logo positioning, colorization, and usage guidelines
• Blog element sizing
• Stationery and collateral (other branded items)
• Video

63. CHOOSE IMAGES THAT APPEAL TO YOUR IDEAL
CUSTOMER IN YOUR NICHE
• Google Image search
• Pinterest
• WeHeartIt.com
• Instagram
READYAIMBLOG.COM

64. CHOOSE FONTS AND COLORS THAT APPEAL TO
YOUR IDEAL CUSTOMER
Fonts
• Justmytype.co
• Typography.com/techniques
• Blog.canva.com font pairing articles
• Search “Pairing Fonts” and “Tutsplus”
• Pinterest font pairings
• Fontscape.com for font mood
READYAIMBLOG.COM
Color Palettes
• Adobe Kuler
• ColourLovers
• Colorschemer
• Paletton

65. READYAIMBLOG.COM
SPECIFY YOUR BLOG ELEMENT SIZING
Photo width for photos in posts (full width, tiled, side-by-side)
Text boxes, accordions, <hr> dividers, quotes
Sidebar widget width
Sidebar photo max width
Ad dimensions
Photo sizing for Facebook or other social media

66. DOWNLOAD YOUR FREE STYLE GUIDE TEMPLATE
ReadyAimBlog.com/free-resources
READYAIMBLOG.COM

67. READYAIMBLOG.COM
PHOTO SOURCES
Dex Knows
Aubrie Pick Photography
Motormouth Studios
VOGUE via Apartment f15.blogspot.com
LouieMonteith.blogspot.com
Paletton
Yellowblissroad
Jak and Jil
Colourlovers
CreativeBlog
Commons.wikimedia.org
ReadyAimBlog
Thanks for watching!
© 2014, ReadyAimBlog.com

68. resources
• W3schools.com for HTML/CSS/XML how-to
• Csstricks.com for cool CSS how-to’s
• Google very specific keywords for an issue
• Fontawesome.com for fonts
• Picmonkey.com and Picasa (free download) for free image software and
adding type on top of things
• Roll out new branding design strategically
Stock Images:
• Unsplash.com
• Search for Creative Commons photos
• Google Images search
• Sign up for Death to Stock Photo monthly emails of hi-res photos
• Flickr .com: search for creative commons, free usage, unlicensed photos
• Dollarphotoclub.com
• Stocksy.com

70. Thanks again to:
Carly J. Cais - @chicsteals
Sze Wa Cheung - @szewacheung
Liana Mikah - @lianamikah
Say hello:
@pdxbloggers
#portlandbloggers

71. School’s out