Designing Success for WordPress
Cody Landefeld
www.codyl.com | @codyLcL
Saturday, July 16, 11
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.
www.codyl.com | @codyLcL
ABOUT codyL
Saturday, July 16, 11
www.codyl.com | @codyLcL
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
Saturday, July 16, 11
www.codyl.com | @codyLcL
1. Identify Bad Design
Borrowed from The Oatmeal Borrowed from interwebz - kudos to @vegasgeek
Saturday, July 16, 11
www.codyl.com | @codyLcL
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?
Saturday, July 16, 11
An extreme example.
www.codyl.com | @codyLcL
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
Saturday, July 16, 11
www.codyl.com | @codyLcL
2. How to Achieve Good Design
Fruit company Forrest Gump invested in
Saturday, July 16, 11
www.codyl.com | @codyLcL
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
Saturday, July 16, 11
www.codyl.com | @codyLcL
2. HOW TO ACHIEVE GOOD DESIGN
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!
Saturday, July 16, 11
www.codyl.com | @codyLcL
2. HOW TO ACHIEVE GOOD DESIGN
A. Examples of Good Design
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!
Saturday, July 16, 11
www.codyl.com | @codyLcL
2. HOW TO ACHIEVE GOOD DESIGN
A. Examples of Good 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!
Saturday, July 16, 11
www.codyl.com | @codyLcL
2. HOW TO ACHIEVE GOOD DESIGN
B. Plan Your Design Efficiently
RESEARCH SITEMAP WIRE FRAME
Saturday, July 16, 11
cL
2. HOW TO ACHIEVE GOOD DESIGN
B. Plan Your Design Efficiently
• 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
Saturday, July 16, 11
cL
2. HOW TO ACHIEVE GOOD DESIGN
B. Plan Your Design Efficiently
• Consider your audience.
Plan for screen resolution / cross-browser capability / mobile & tablet devices.
www.codyl.com | @codyL
Saturday, July 16, 11
cL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD DESIGN
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
Saturday, July 16, 11
cL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD DESIGN
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
Saturday, July 16, 11
cL www.codyl.com | @codyL
3. How to Use WordPress to Execute
Oh yeah the blog site right?
Saturday, July 16, 11
cL www.codyl.com | @codyL
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.
Saturday, July 16, 11
cL www.codyl.com | @codyL
2. HOW TO USE WordPress TO EXECUTE
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.
Saturday, July 16, 11
cL www.codyl.com | @codyL
2. HOW TO USE WordPress TO EXECUTE
A. Theme Planning
• Plugins to enhance user experience.
Carefully consider which Plugins to use and how they interact with your design.
Saturday, July 16, 11
cL www.codyl.com | @codyL
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!
2. HOW TO USE WordPress TO EXECUTE
Saturday, July 16, 11
cL www.codyl.com | @codyL
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.
2. HOW TO USE WordPress TO EXECUTE
Saturday, July 16, 11
cL www.codyl.com | @codyL
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
Saturday, July 16, 11
cL www.codyl.com | @codyL
THANKSContact me for more information on design or design help.
Saturday, July 16, 11
Recommended