Designing Success for WordPress

Cody Landefeld

codyL www.codyl.com | @codyL

Saturday, September 10, 11

My name is Cody Landefeld and I am a web strategist / user experience designer. Our company plans, builds, and

manages great things for the web.

I began using designing for the web in 2000 and began using WordPress in 2006.

www.codyl.com | @codyLcodyL

About codyL

Saturday, September 10, 11

www.codyl.com | @codyL

Designing Success for WordPress

1. IDENTIFY BAD UX DESIGNA. Case Study of Bad Design

2. HOW TO ACHIEVE GOOD UX DESIGNA. Examples of Good Design

B. Plan EfficientlyC. Design Efficiently

3. USING WordPress TO EXECUTEA. Theme Planning

B. Content Consideration

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

Borrowed from The Oatmeal Borrowed from interwebz - kudos to @vegasgeek

1. IDENTIFY BAD DESIGN

codyL

Saturday, September 10, 11

codyL

1. IDENTIFY BAD DESIGN

What makes a design bad?

• Inability to connect and engage with your audience.

• No brand/logo in sight.

• No way to convert potential customers.

• Not enough kittens?

www.codyl.com | @codyL

Saturday, September 10, 11

An extreme example.

www.codyl.com | @codyL

• No real logo

• No general header

• Still using frames (older style)

• No main body area (bad photo behind bad text)

• No footer

Case StudyRaft Web (non-WordPress site)

ConclusionBad Design!

1. IDENTIFY BAD DESIGN

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

Fruit company Forrest Gump invested in

codyL

2. HOW TO ACHIEVE GOOD UX DESIGN

Saturday, September 10, 11

www.codyl.com | @codyL

Design efficiently. Because good design is efficient design.

Plan with code and content in mind. Utilize WordPress’ ability to help make it come together.

Efficiency is key to Creativity

"Creativity is to think more efficiently."Pierre Reverdy

2. HOW TO ACHIEVE GOOD UX DESIGN

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

A. Examples of Good Design

• Logo in top left & clearly defined

• Great plotting for navigation

• Effective Use of Contact Button (top right)

• Great use of White Space

• Neat Slideshow for Showcasing Content

Case StudyFixel (WordPress site)

ConclusionGreat Design!

codyL

2. HOW TO ACHIEVE GOOD UX DESIGN

Saturday, September 10, 11

www.codyl.com | @codyL

• Logo in top left & clearly defined

• Great plotting for navigation

• Flexible Design (as page stretches bg image stays anchored.

• Great use of White Space

• Excellent planning for company tagline & mission.

Case StudyGraystone (WordPress site)

ConclusionGreat Design!

2. HOW TO ACHIEVE GOOD UX DESIGN

A. Examples of Good Design

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

• Clear Presentation of what their customers need in top right.

• Search Bar at top right

• Filter & Search for Flight Tickets

• Useful Icon-Driven Legend in Sidebar

2. HOW TO ACHIEVE GOOD UX DESIGN

A. Examples of Good DesignCase StudyGraystone (WordPress site)

ConclusionGreat Design!

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

B. Plan Your Design Efficiently

RESEARCH SITEMAP WIRE FRAME

2. HOW TO ACHIEVE GOOD UX DESIGN

codyL

Saturday, September 10, 11

Consideration for efficient design

• Define the header area• Create an efficient content area

• Feature Widgets• Equal spacing on grid

• Good use of white space & eliminate negative space

www.codyl.com | @codyLcodyL

2. HOW TO ACHIEVE GOOD UX DESIGN

B. Plan Your Design Efficiently

Saturday, September 10, 11

• Plan for screen resolution• Cross-browser capability (use boilerplate or framework)

• Mobile & tablet devices (responsive design)

www.codyl.com | @codyLcodyL

2. HOW TO ACHIEVE GOOD UX DESIGN

B. Plan Efficiently

Saturday, September 10, 11

www.codyl.com | @codyL

C. Design Efficiently

Responsive Design - this is a great tool to utilize in cases where you have to consider a mobile device (which is most

cases).

Suggested tool: Tiny Fluid Grid

2. HOW TO ACHIEVE GOOD UX DESIGN

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

Typography - Load times can be planned for efficiency while designing. Consider using great typography when

designing and incorporate into design.

Elysium Burns

C. Design Efficiently

2. HOW TO ACHIEVE GOOD UX DESIGN

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

3.USING WordPress TO EXECUTE

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

Out of the box efficiency

• Header & Footer are included to utilize in multiple pages.

• Plugins allow efficient execution of design and content.

codyL

3.USING WordPress TO EXECUTE

Saturday, September 10, 11

www.codyl.com | @codyL

A. Theme Planning

Consider your homepage.

Inside the back-end WordPress is built to allow the home page to be a blog listing or use a designed home page.

codyL

3.USING WordPress TO EXECUTE

Saturday, September 10, 11

www.codyl.com | @codyL

Use Plugins to enhance user experience.

Carefully consider which Plugins to use and how they interact with your design.

A. Theme Planning3.USING WordPress TO EXECUTE

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

B. Content ConsiderationContent is key.

Depending on what the content focus of the site is you will need to consider that carefully. Not all WordPress themes are created equal!

codyL

3.USING WordPress TO EXECUTE

Saturday, September 10, 11

www.codyl.com | @codyL

Allow for adjustments.

Staying agile when it comes to design can be most efficient. Plan on continuing to plan and changing the format from time to time.

B. Content Consideration3.USING WordPress TO EXECUTE

codyL

Saturday, September 10, 11

www.codyl.com | @codyL

in Conclusion...Topics covered

codyL

1. IDENTIFY BAD UX DESIGNA. Case Study of Bad Design

2. HOW TO ACHIEVE GOOD UX DESIGNA. Examples of Good Design

B. Plan EfficientlyC. Design Efficiently

3. USING WordPress TO EXECUTEA. Theme Planning

B. Content Consideration

Saturday, September 10, 11

www.codyl.com | @codyL

THANKSContact me for more information on design or design help.

codyl@codyl.com

codyL

Saturday, September 10, 11