"Wordpress And Your Brand" 2010 - By Sara Cannon

WordPress and Your Brand

Sara CannonDesigner/Interactive at Scout Branding Company

@[email protected]

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(); ?>

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

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

sara cannon

@[email protected]

“life is short, art is long”TYPE is EVERYTHING

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