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

1. WordPress and Your Brand
Sara Cannon
Designer/Interactive at Scout Branding Company
@saracannon
sara@scoutbrand.com
sara-cannon.com
scoutbrand.com

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. Why Use WordPress?
simplicity.

4. But I don’t want my website to look “bloggy”

5. But I don’t want my website to look “bloggy”
that’s ok.

6. Adapt WordPress to Your Brand

7. Adapt WordPress to Your Brand
not your brand to WordPress.

8. Brand Strategy

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. Brand Strategy: Online Brands

11. Brand Strategy: Online Brands

12. Brand Strategy: Online Brands

13. Brand Strategy: Online Brands

14. Brand Strategy: Online Brands

15. Brand Strategy: Online Brands

16. Brand Strategy: Online Brands

17. Brand Strategy: Offline Brands

18. Brand Strategy: Offline Brands

19. Brand Strategy: Offline Brands

20. Good Branding: Simplicity
• Message
• Design
• Function

21. Good Branding: Simplicity
• Message
• Design
• Function

22. Good Branding: Simplicity
• Message
• Design
• Function

23. Good Branding Pays Attention To

24. Good Branding Pays Attention To
SIMPLICITY
TYPOGRAPHY
COLOR
CONSISTENCY
DETAIL

25. Good Branding: Simplicity
• Message
• Design
• Function

26. Good Branding: Simplicity
• Message
• Design
• Function

27. “good typography
improves user experience”

28. Good Branding: Typography

29. Good Branding: Typography

30. Good Branding: Typography

31. Good Branding: Color

32. Good Branding: Color

33. Good Branding: Color
• gapmedics.com

34. Good Branding: Color
• gapmedics.com

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

36. Good Branding: Consistency
• bestmadeco.com

37. Good Branding: Consistency
• bestmadeco.com

38. Good Branding: Consistency
• bestmadeco.com

39. Good Branding: Consistency
• bestmadeco.com

40. Good Branding: Consistency
• bestmadeco.com

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

42. Good Branding: Detail
• Forms, Pagination, Borders, Type, Buttons, Links
• pay attention to everything! nothing goes unnoticed.

43. Good Branding: Detail

44. Good Branding: Detail

45. Good Branding: Detail

46. Branding with WordPress Tips

47. Branding with WordPress Tips
SIMPLICITY
TYPOGRAPHY
COLOR
CONSISTENCY
DETAIL

48. Theme Functionality

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. Typekit
sign up at http://typekit.com/
install the “typekit fonts for wordpress” plug in
customize your fonts!

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. 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. You Can Really Do Almost Anything
http://sequence.com/

54. What to Avoid in 2010
design elements that are overused but were a good idea last year.
.... or the year before.

55. What to Avoid in 2010 the large paperclip

56. What to Avoid in 2010 the notebook

57. What to Avoid in 2010 the desktop

58. What to Avoid in 2010 the notebook on the desktop

59. What to Avoid in 2010 the ripped notebook

60. What to Avoid in 2010 the ripped notebook with pencil

61. What to Avoid in 2010 the notepad with pencil

62. What to Avoid in 2010
office supplies in general

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. What to Keep in Mind for 2010

65. What to Keep in Mind for 2010 simple layouts

66. What to Keep in Mind for 2010 hierarchy of image

67. What to Keep in Mind for 2010 hierarchy of type

68. What to Keep in Mind for 2010 type with action

69. What to Keep in Mind for 2010 Web Fonts

70. What to Keep in Mind for 2010 large background photos

71. What to Keep in Mind for 2010 large background photos

72. What to Keep in Mind for 2010 large images with type

73. What to Keep in Mind for 2010 simple Color and Illustration

74. What to Keep in Mind for 2010 limited color

75. What to Keep in Mind for 2010 rich interfaces that look simple

76. What to Keep in Mind for 2010 Infographics

77. What to Keep in Mind for 2010 Infographics

78. What to Keep in Mind for 2010
simplicity.

79. Interactive Design Inspiration Resources

80. Interactive Design Inspiration Resources
• smashingmagazine.com

81. Interactive Design Inspiration Resources
• bestwebgallery.com

82. Interactive Design Inspiration Resources
• patterntap.com

83. Interactive Design Inspiration Resources
• pentagram.com

84. Interactive Design Inspiration Resources
• informationisbeautiful.net

85. Interactive Design Inspiration Resources
• ilovetypography.com

86. Interactive Design Inspiration Resources
• graphic-exchange.com

87. Interactive Design Inspiration Resources
• swiss-miss.com

88. Interactive Design Inspiration Resources
• thestrangeattractor.net

89. Interactive Design Inspiration Resources
• designsnips.com

90. Interactive Design Inspiration Resources
• siteinspire.net

91. thanks for coming

92. “life is short, art is long”
TYPE is EVERYTHING
sara cannon
@saracannon
sara@scoutbranding.com

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