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.
BACK TO BLOGGING SCHOOL BLOG DESIGN TIPS AND TRICKS
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
5.
6. blog branding – core
message
1. Target audience?
2. Why are they reading?
3. What are you telling them?
4. Consistency
5. Repetition
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
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.
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
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?
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
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
69.
70. Thanks again to:
Carly J. Cais - @chicsteals
Sze Wa Cheung - @szewacheung
Liana Mikah - @lianamikah
Say hello:
@pdxbloggers
#portlandbloggers