BACK TO BLOGGING SCHOOL

Blog Design #portlandbloggers

@pdxbloggers speakers:

@szewacheung @chicsteals

WIFI Network: PortlandBloggers

Password: PortlandBloggers

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

Blog design

• Why does design matter? • “Content is king” • Once you understand your

content/goals, importance of visuals and overall message you share

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

blog branding – core message

1. Target audience? 2. Why are they reading? 3. What are you telling them? 4. Consistency 5. Repetition

Branding discussion

How do you communicate your core message?

RECESS!

QUESTIONS? TWEET!

Tweet one personal goal you have for your blog

branding

#portlandbloggers

@PDXbloggers

Portland BloggersBasic Blog Elements & Intro to Design Terminology

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

Basic Design Process

1. Do Your Research

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

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

Unlimited Scrolling

Unlimited ScrollingOften Divides Into Two Sections:Info SidebarBlog Post

Unlimited ScrollingFood

Sprouted KitchenFashion/Beauty

The Chriselle FactorLifestyle

Cocorrina

Categories Showcasing

Categories ShowcasingOften Feels Like a Home Page:Large Photo Feature BannerSmaller Photos to Sub-Pages

Categories ShowcasingFood

I am a Food BlogFashion/Beauty

Nouvelle DailyLifestyle

Camille Styles

Categories ShowcasingPros

InformativeWell-OrganizedSearchable

UnlimitedScrollingPros

LocalTraditionalPersonal

Compare & Contrast

Categories ShowcasingCons

Lack of Personal TouchInformation DrivenLarge Database Support

UnlimitedScrollingCons

Hard to SearchNo Featuring FunctionHeavily Photo Driven

Compare & Contrast

2. Identify & Define Your Blog

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

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

List 5 Adjectives That Best Describe Your Blog.

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

Basic Design Terminology & Elements

Designing a Blog is Much More Than A Pretty Logo

Elements

1. Color Palette

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.

Elements

1. Color PaletteAdobe KulerFree Color Combination Picker & Color Library

Elements

2.Typography

Elements

2.TypographyThere are limitless detailed adjustments and selections you can do with typography.

Elements

2.TypographyTypefacePoint SizeLine LengthTracking (Lettering Spacing)Leading (Line Spacing)Kerning (Spacing Between Two Letters)

Elements

3.Style/Tone of Photography

Elements

3.Style/Tone of PhotographyDefine and refine your photography style.Find out what works the best for your blog.

Elements

4.Positive & Negative Space

Elements

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

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.

Elements

5.Social Media Icons

Elements

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

Twitter

Facebook

Google+

Pinterest

Tumblr

LinkedIn

Elements

6.Post Dividers

Elements

6.Post Dividers

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

Services:Custom Blog LogoLinks & Post TitleFaviconSocial Media ButtonsDesigned SidebarWelcome graphicNavigation bar

Brand IdentityLogo DesignBusiness Card DesignFacebook PageTwitter PageMedia Kit DesignDesign Files

The End & Thank You

RECESS!

QUESTIONS? TWEET!

Tweet something you've learned and are excited to

implement on your blog

#portlandbloggers

@PDXbloggers

READYAIMBLOG.COM READYAIMBLOG.COM

READYAIMBLOG.COM

MY WEBSITES

CHICSTEALS.COM

THEUNCOMMONERA.COM CARLYJCAIS.COM

READYAIMBLOG.COM

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!

READYAIMBLOG.COM

IT SETS THE TONE OF YOUR ENTIRE BLOG BY DEFINING: *Brand Colors

*Fonts

*Font sizing

*Textural elements/patterns

*Blog element sizing

*Inspiration photos

…All fitting with your blog logo and image you want to convey!

READYAIMBLOG.COM

HOW TO MAKE A STYLE GUIDE? Decide on elements after you conduct research on your readers. Create your Ideal

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?

READYAIMBLOG.COM

STYLE GUIDE EXAMPLES

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

READYAIMBLOG.COM

CHOOSE IMAGES THAT APPEAL TO YOUR IDEAL CUSTOMER IN YOUR NICHE • Google Image search

• Pinterest

• WeHeartIt.com

• Instagram

READYAIMBLOG.COM

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 Color Palettes • Adobe Kuler • ColourLovers • Colorschemer • Paletton

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

READYAIMBLOG.COM

DOWNLOAD YOUR FREE STYLE GUIDE TEMPLATE

ReadyAimBlog.com/free-resources

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

• 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

resources

Thanks again to:

Carly J. Cais - @chicsteals Sze Wa Cheung - @szewacheung

Liana Mikah - @lianamikah

Say hello: @pdxbloggers

#portlandbloggers

School’s out