0
WordPress and Your Brand
Sara Cannon
Designer/Interactive at Scout Branding Company




                                  ...
Why Use WordPress?

• Content Management System (CMS)

• Easy to Use (almost anyone can catch on how to make a post)

• Wi...
Why Use WordPress?




            simplicity.
But I don’t want my website to look “bloggy”
But I don’t want my website to look “bloggy”
that’s ok.
Adapt WordPress to Your Brand
Adapt WordPress to Your Brand
not your brand to WordPress.
Brand Strategy
Brand Strategy: Offline or Online?

• Offline Brands: who you will meet in person
  - Companies
  - Stores
  - Locations


•...
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Online Brands
Brand Strategy: Offline Brands
Brand Strategy: Offline Brands
Brand Strategy: Offline Brands
Good Branding: Simplicity

• Message


• Design


• Function
Good Branding: Simplicity

• Message


• Design


• Function
Good Branding: Simplicity

• Message


• Design


• Function
Good Branding Pays Attention To
Good Branding Pays Attention To
SIMPLICITY

TYPOGRAPHY

COLOR

CONSISTENCY

DETAIL
Good Branding: Simplicity

• Message


• Design


• Function
Good Branding: Simplicity

• Message


• Design


• Function
“good typography
improves user experience”
Good Branding: Typography
Good Branding: Typography
Good Branding: Typography
Good Branding: Color
Good Branding: Color
Good Branding: Color

• gapmedics.com
Good Branding: Color

• gapmedics.com
Good Branding: Color

• informaticisenzafrontiere.org (computing without borders)
Good Branding: Consistency

• bestmadeco.com
Good Branding: Consistency

• bestmadeco.com
Good Branding: Consistency

• bestmadeco.com
Good Branding: Consistency

• bestmadeco.com
Good Branding: Consistency

• bestmadeco.com
Good Branding: Detail

• Forms, Pagination, Borders, Type, Buttons, Links
Good Branding: Detail

• Forms, Pagination, Borders, Type, Buttons, Links


• pay attention to everything! nothing goes un...
Good Branding: Detail
Good Branding: Detail
Good Branding: Detail
Branding with WordPress Tips
Branding with WordPress Tips
SIMPLICITY

TYPOGRAPHY

COLOR

CONSISTENCY

DETAIL
Theme Functionality
Things to Look for in Choosing a Theme
- Base Menu Structure
  - Does my Main Menu need to be based off of Pages, Categori...
Typekit
sign up at http://typekit.com/

install the “typekit fonts for wordpress” plug in

customize your fonts!
Style Your Headlines With WP-sIFR
Install the WP-Sifr Plug In

Use the sIFR Generator to convert your fonts

Upload and Ac...
Hide or Show Comments Plug-in
Install the Hide or Show Comments Plug In

Open single.php

In this file you have to replace:...
You Can Really Do Almost Anything
http://sequence.com/
What to Avoid in 2010
design elements that are overused but were a good idea last year.



.... or the year before.
What to Avoid in 2010   the large paperclip
What to Avoid in 2010   the notebook
What to Avoid in 2010   the desktop
What to Avoid in 2010   the notebook on the desktop
What to Avoid in 2010   the ripped notebook
What to Avoid in 2010   the ripped notebook with pencil
What to Avoid in 2010   the notepad with pencil
What to Avoid in 2010

                office supplies in general
What to Avoid in 2010

                         office supplies in general


                                    &

   Awfu...
What to Keep in Mind for 2010
What to Keep in Mind for 2010   simple layouts
What to Keep in Mind for 2010   hierarchy of image
What to Keep in Mind for 2010   hierarchy of type
What to Keep in Mind for 2010   type with action
What to Keep in Mind for 2010   Web Fonts
What to Keep in Mind for 2010   large background photos
What to Keep in Mind for 2010   large background photos
What to Keep in Mind for 2010   large images with type
What to Keep in Mind for 2010   simple Color and Illustration
What to Keep in Mind for 2010   limited color
What to Keep in Mind for 2010   rich interfaces that look simple
What to Keep in Mind for 2010   Infographics
What to Keep in Mind for 2010   Infographics
What to Keep in Mind for 2010


                                simplicity.
Interactive Design Inspiration Resources
Interactive Design Inspiration Resources

• smashingmagazine.com
Interactive Design Inspiration Resources

• bestwebgallery.com
Interactive Design Inspiration Resources

• patterntap.com
Interactive Design Inspiration Resources

• pentagram.com
Interactive Design Inspiration Resources

• informationisbeautiful.net
Interactive Design Inspiration Resources

• ilovetypography.com
Interactive Design Inspiration Resources

• graphic-exchange.com
Interactive Design Inspiration Resources

• swiss-miss.com
Interactive Design Inspiration Resources

• thestrangeattractor.net
Interactive Design Inspiration Resources

• designsnips.com
Interactive Design Inspiration Resources

• siteinspire.net
thanks for coming
“life is short, art is long”
                          TYPE is EVERYTHING




sara cannon

@saracannon
sara@scoutbranding....
Resources:

• smashingmagazine.com         • graphic-exchange.com


• bestwebgallery.com           • swiss-miss.com


• pa...
Upcoming SlideShare
Loading in...5
×

"Wordpress And Your Brand" 2010 - By Sara Cannon

4,105

Published on

WordPress and Your Brand

Adapt WordPress to your brand, not your brand to WordPress. We will be covering different aspects of WordPress and how it applies to company branding. We are going to look at good branding practices, examples using WordPress, and look into how we can give ourselves and our clients the best possible online presence. We are also going to talk about brand consistency online and offline, WordPress customization tips, and helpful plugins.

Presented by: Sara Cannon

Published in: Design, Technology, Business
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,105
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
104
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of ""Wordpress And Your Brand" 2010 - By Sara Cannon"

  1. 1. WordPress and Your Brand Sara Cannon Designer/Interactive at Scout Branding Company @saracannon sara@scoutbrand.com sara-cannon.com scoutbrand.com
  2. 2. Why Use WordPress? • Content Management System (CMS) • Easy to Use (almost anyone can catch on how to make a post) • With Training: The Client Can Even Figure it Out! • Search Engine Optimized (SEO)
  3. 3. Why Use WordPress? simplicity.
  4. 4. But I don’t want my website to look “bloggy”
  5. 5. But I don’t want my website to look “bloggy” that’s ok.
  6. 6. Adapt WordPress to Your Brand
  7. 7. Adapt WordPress to Your Brand not your brand to WordPress.
  8. 8. Brand Strategy
  9. 9. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Companies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services - events - products - blogs/individuals
  10. 10. Brand Strategy: Online Brands
  11. 11. Brand Strategy: Online Brands
  12. 12. Brand Strategy: Online Brands
  13. 13. Brand Strategy: Online Brands
  14. 14. Brand Strategy: Online Brands
  15. 15. Brand Strategy: Online Brands
  16. 16. Brand Strategy: Online Brands
  17. 17. Brand Strategy: Offline Brands
  18. 18. Brand Strategy: Offline Brands
  19. 19. Brand Strategy: Offline Brands
  20. 20. Good Branding: Simplicity • Message • Design • Function
  21. 21. Good Branding: Simplicity • Message • Design • Function
  22. 22. Good Branding: Simplicity • Message • Design • Function
  23. 23. Good Branding Pays Attention To
  24. 24. Good Branding Pays Attention To SIMPLICITY TYPOGRAPHY COLOR CONSISTENCY DETAIL
  25. 25. Good Branding: Simplicity • Message • Design • Function
  26. 26. Good Branding: Simplicity • Message • Design • Function
  27. 27. “good typography improves user experience”
  28. 28. Good Branding: Typography
  29. 29. Good Branding: Typography
  30. 30. Good Branding: Typography
  31. 31. Good Branding: Color
  32. 32. Good Branding: Color
  33. 33. Good Branding: Color • gapmedics.com
  34. 34. Good Branding: Color • gapmedics.com
  35. 35. Good Branding: Color • informaticisenzafrontiere.org (computing without borders)
  36. 36. Good Branding: Consistency • bestmadeco.com
  37. 37. Good Branding: Consistency • bestmadeco.com
  38. 38. Good Branding: Consistency • bestmadeco.com
  39. 39. Good Branding: Consistency • bestmadeco.com
  40. 40. Good Branding: Consistency • bestmadeco.com
  41. 41. Good Branding: Detail • Forms, Pagination, Borders, Type, Buttons, Links
  42. 42. Good Branding: Detail • Forms, Pagination, Borders, Type, Buttons, Links • pay attention to everything! nothing goes unnoticed.
  43. 43. Good Branding: Detail
  44. 44. Good Branding: Detail
  45. 45. Good Branding: Detail
  46. 46. Branding with WordPress Tips
  47. 47. Branding with WordPress Tips SIMPLICITY TYPOGRAPHY COLOR CONSISTENCY DETAIL
  48. 48. Theme Functionality
  49. 49. Things to Look for in Choosing a Theme - Base Menu Structure - Does my Main Menu need to be based off of Pages, Categories, or Both? - Sidebars - Does my brand need sidebar widget features? - Front Page (index page) functions.. useful? - Design Somewhat Similar?
  50. 50. Typekit sign up at http://typekit.com/ install the “typekit fonts for wordpress” plug in customize your fonts!
  51. 51. Style Your Headlines With WP-sIFR Install the WP-Sifr Plug In Use the sIFR Generator to convert your fonts Upload and Activate!
  52. 52. Hide or Show Comments Plug-in Install the Hide or Show Comments Plug In Open single.php In this file you have to replace: <?php comments_template(); ?> with <?php hideshowComments(); ?>
  53. 53. You Can Really Do Almost Anything http://sequence.com/
  54. 54. What to Avoid in 2010 design elements that are overused but were a good idea last year. .... or the year before.
  55. 55. What to Avoid in 2010 the large paperclip
  56. 56. What to Avoid in 2010 the notebook
  57. 57. What to Avoid in 2010 the desktop
  58. 58. What to Avoid in 2010 the notebook on the desktop
  59. 59. What to Avoid in 2010 the ripped notebook
  60. 60. What to Avoid in 2010 the ripped notebook with pencil
  61. 61. What to Avoid in 2010 the notepad with pencil
  62. 62. What to Avoid in 2010 office supplies in general
  63. 63. What to Avoid in 2010 office supplies in general & Awful Sound Effects papyrus Splash Pages Comic Sans Automatic Play Video Overused Stock Images
  64. 64. What to Keep in Mind for 2010
  65. 65. What to Keep in Mind for 2010 simple layouts
  66. 66. What to Keep in Mind for 2010 hierarchy of image
  67. 67. What to Keep in Mind for 2010 hierarchy of type
  68. 68. What to Keep in Mind for 2010 type with action
  69. 69. What to Keep in Mind for 2010 Web Fonts
  70. 70. What to Keep in Mind for 2010 large background photos
  71. 71. What to Keep in Mind for 2010 large background photos
  72. 72. What to Keep in Mind for 2010 large images with type
  73. 73. What to Keep in Mind for 2010 simple Color and Illustration
  74. 74. What to Keep in Mind for 2010 limited color
  75. 75. What to Keep in Mind for 2010 rich interfaces that look simple
  76. 76. What to Keep in Mind for 2010 Infographics
  77. 77. What to Keep in Mind for 2010 Infographics
  78. 78. What to Keep in Mind for 2010 simplicity.
  79. 79. Interactive Design Inspiration Resources
  80. 80. Interactive Design Inspiration Resources • smashingmagazine.com
  81. 81. Interactive Design Inspiration Resources • bestwebgallery.com
  82. 82. Interactive Design Inspiration Resources • patterntap.com
  83. 83. Interactive Design Inspiration Resources • pentagram.com
  84. 84. Interactive Design Inspiration Resources • informationisbeautiful.net
  85. 85. Interactive Design Inspiration Resources • ilovetypography.com
  86. 86. Interactive Design Inspiration Resources • graphic-exchange.com
  87. 87. Interactive Design Inspiration Resources • swiss-miss.com
  88. 88. Interactive Design Inspiration Resources • thestrangeattractor.net
  89. 89. Interactive Design Inspiration Resources • designsnips.com
  90. 90. Interactive Design Inspiration Resources • siteinspire.net
  91. 91. thanks for coming
  92. 92. “life is short, art is long” TYPE is EVERYTHING sara cannon @saracannon sara@scoutbranding.com
  93. 93. Resources: • smashingmagazine.com • graphic-exchange.com • bestwebgallery.com • swiss-miss.com • patterntap.com • thestrangeattractor.net • pentagram.com • designsnips.com • ilovetypography.com • siteinspire.net • informationisbeautiful.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×