WordPress and Your Brand
Sara CannonDesigner/Interactive at Scout Branding Company
sara-cannon.com scoutbrand.com
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)
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
• Online Brands: Brands who’s presence is primarily web-based- internet services- events- products- blogs/individuals
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 unnoticed.
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, Categories, or Both?
- Sidebars - Does my brand need sidebar widget features?
- Front Page (index page) functions.. useful?
- Design Somewhat Similar?
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 Activate!
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(); ?>
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
papyrus
&
Comic SansSplash PagesAwful Sound Effects
Automatic Play Video
Overused Stock Images
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
Resources:
• graphic-exchange.com
• swiss-miss.com
• thestrangeattractor.net
• designsnips.com
• siteinspire.net
• smashingmagazine.com
• bestwebgallery.com
• patterntap.com
• pentagram.com
• ilovetypography.com
• informationisbeautiful.net
