wordcamp san diego - designing success for wordpress

Designing Success for WordPress

Cody Landefeld

www.codyl.com | @codyLcL

Saturday, July 16, 11

http://www.codyl.com


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

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


ABOUT codyL





Designing Success for WordPress

1. Identify Bad Design• Case Study of Bad Design

2. How to Achieve Good Design• Examples of Good Design

• Plan Efficiently• Design Efficiently

3. How to Use WordPress to Execute• Theme Planning

• Content Consideration





1. Identify Bad Design

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





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?




An extreme example.


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





2. How to Achieve Good Design

Fruit company Forrest Gump invested in





2. HOW TO ACHIEVE GOOD DESIGN

• Good design is efficient design.

This especially is simple enough to achieve with WordPress.

• Efficiency is key to Creativity

"Creativity is to think more efficiently."Pierre Reverdy






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 (Built on WordPress!)

ConclusionGreat Design, props to Josh Helmsey!







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 (Built on WordPress!)

ConclusionGreat design!







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

Case StudyKarup Airport (Built on WordPress!)

ConclusionGreat design!






B. Plan Your Design Efficiently

RESEARCH SITEMAP WIRE FRAME




cL



• What’s an example of efficient design?

WordPress has a shared header / footer / sidebar area that can be shared throughout site - efficient!

www.codyl.com | @codyL




cL



• Consider your audience.

Plan for screen resolution / cross-browser capability / mobile & tablet devices.

www.codyl.com | @codyL




cL www.codyl.com | @codyL


C. Design Efficiently

• Consider flexible design.

With considering audience and how a device renders, this is a huge help efficiency.

Suggested tool: Tiny Fluid Grid






C. Design Efficiently

• Use text often.Load times can be planned for efficiency while designing. Consider using

great typography when designing and incorporate into design.

Elysium Burns





3. How to Use WordPress to Execute

Oh yeah the blog site right?





2. HOW TO USE WordPress TO EXECUTE

• Out of the box efficiency

Planning faster load times to re-use the same header & footer in designs.

When designing a site for WordPress you have the built-in efficiency and framework to use for strength in design.






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.






A. Theme Planning

• Plugins to enhance user experience.

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





B. Content Consideration

• Content is king.

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






B. Content Consideration

• 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.






1. Identify Bad Design• Case Study of Bad Design

2. How to Achieve Good Design•Examples of Good Design

• Plan Efficiently• Design Efficiently

3. How to Use WordPress to Execute• Theme Planning

• Content Consideration

in Conclusion...Topics covered





THANKSContact me for more information on design or design help.

[email protected]




wordcamp san diego - designing success for wordpress

Technology