Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Back to blogging school blog design 9 27-14 full

Portland Bloggers' Back to Blogging School event on Blog Design featuring graphic designers Sze Wa Cheung and Carly J. Cais. www.pdxbloggers.com for more information.

  • Be the first to comment

Back to blogging school blog design 9 27-14 full

  1. 1. BACK TO BLOGGING SCHOOL Blog Design #portlandbloggers @pdxbloggers speakers: @szewacheung @chicsteals WIFI Network: PortlandBloggers Password: PortlandBloggers
  2. 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. 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. 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. 5. blog branding – core message 1. Target audience? 2. Why are they reading? 3. What are you telling them? 4. Consistency 5. Repetition
  6. 6. Branding discussion How do you communicate your core message?
  7. 7. RECESS!
  8. 8. QUESTIONS? TWEET! Tweet one personal goal you have for your blog branding #portlandbloggers @PDXbloggers
  9. 9. Portland Bloggers Basic Blog Elements & Intro to Design Terminology
  10. 10. Hello, I am Sze Wa Cheung. A visual designer, thinker, maker and most importantly an enjoyer.
  11. 11. Basic Design Process
  12. 12. 1. Do Your Research
  13. 13. 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.
  14. 14. I did some research on blogging and here are my results.
  15. 15. Unlimited Scrolling
  16. 16. Unlimited Scrolling Often Divides Into Two Sections: Info Sidebar Blog Post
  17. 17. Unlimited Scrolling Food Sprouted Kitchen Fashion/Beauty The Chriselle Factor Lifestyle Cocorrina
  18. 18. Categories Showcasing
  19. 19. Categories Showcasing Often Feels Like a Home Page: Large Photo Feature Banner Smaller Photos to Sub-Pages
  20. 20. Categories Showcasing Food I am a Food Blog Fashion/Beauty Nouvelle Daily Lifestyle Camille Styles
  21. 21. Categories Showcasing Pros Informative Well-Organized Searchable Compare & Contrast Unlimited Scrolling Pros Local Traditional Personal
  22. 22. 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
  23. 23. 2. Identify & Define Your Blog
  24. 24. 2. Identify & Define Your Blog Find out the best way for your readers to navigate through your website.
  25. 25. Here is a quick tip to help you kickstart this process.
  26. 26. List 5 Adjectives That Best Describe Your Blog.
  27. 27. Ask Yourself. Why Those 5 Adjectives? What are You Trying to Convey?
  28. 28. Basic Design Terminology & Elements
  29. 29. Designing a Blog is Much More Than A Pretty Logo
  30. 30. Elements 1. Color Palette
  31. 31. 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.
  32. 32. Elements 1. Color Palette Adobe Kuler Free Color Combination Picker & Color Library
  33. 33. Elements 2.Typography
  34. 34. Elements 2.Typography There are limitless detailed adjustments and selections you can do with typography.
  35. 35. Elements 2.Typography Typeface Point Size Line Length Tracking (Lettering Spacing) Leading (Line Spacing) Kerning (Spacing Between Two Letters)
  36. 36. Elements 3.Style/Tone of Photography
  37. 37. Elements 3.Style/Tone of Photography Define and refine your photography style. Find out what works the best for your blog.
  38. 38. Elements 4.Positive & Negative Space
  39. 39. 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.
  40. 40. 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.
  41. 41. Elements 5.Social Media Icons
  42. 42. 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.
  43. 43. Twitter Facebook Google+ Pinterest Tumblr LinkedIn
  44. 44. Elements 6.Post Dividers
  45. 45. Elements 6.Post Dividers These are great secondary elements that sit behind (between) content as background. But never let them compete with important content.
  46. 46. 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
  47. 47. The End & Thank You
  48. 48. RECESS!
  49. 49. QUESTIONS? TWEET! Tweet something you've learned and are excited to implement on your blog #portlandbloggers @PDXbloggers
  50. 50. READYAIMBLOG.COM
  51. 51. READYAIMBLOG.COM MY WEBSITES CHICSTEALS.COM READYAIMBLOG.COM THEUNCOMMONERA.COM CARLYJCAIS.COM
  52. 52. 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!
  53. 53. 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!
  54. 54. 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?
  55. 55. READYAIMBLOG.COM STYLE GUIDE EXAMPLES
  56. 56. 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
  57. 57. CHOOSE IMAGES THAT APPEAL TO YOUR IDEAL CUSTOMER IN YOUR NICHE • Google Image search • Pinterest • WeHeartIt.com • Instagram READYAIMBLOG.COM
  58. 58. 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
  59. 59. 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
  60. 60. DOWNLOAD YOUR FREE STYLE GUIDE TEMPLATE ReadyAimBlog.com/free-resources READYAIMBLOG.COM
  61. 61. 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
  62. 62. 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
  63. 63. Thanks again to: Carly J. Cais - @chicsteals Sze Wa Cheung - @szewacheung Liana Mikah - @lianamikah Say hello: @pdxbloggers #portlandbloggers
  64. 64. School’s out

×