back to blogging school blog design 9 27-14 full
Post on 21-Jun-2015
351 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
Google+
Tumblr
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
• WeHeartIt.com
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
top related