1. cL www.codyl.com | @codyL
Designing Success for WordPress
Cody Landefeld
Saturday, July 16, 11

2. cL www.codyl.com | @codyL
ABOUT codyL
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.
Saturday, July 16, 11

3. cL www.codyl.com | @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
Saturday, July 16, 11

4. cL www.codyl.com | @codyL
1. Identify Bad Design
Borrowed from The Oatmeal Borrowed from interwebz - kudos to @vegasgeek
Saturday, July 16, 11

5. cL www.codyl.com | @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?
Saturday, July 16, 11

6. cL www.codyl.com | @codyL
1. IDENTIFY BAD DESIGN
An extreme example.
Case Study
Raft Web (non-WordPress site)
No real logo
No general header
Still using frames (older style)
No main body area (bad photo behind bad
text)
No footer
Conclusion
Bad Design!
Saturday, July 16, 11

7. cL www.codyl.com | @codyL
2. How to Achieve Good Design
Fruit company Forrest Gump invested in
Saturday, July 16, 11

8. cL www.codyl.com | @codyL
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

9. cL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD DESIGN
A. Examples of Good Design
Case Study
Fixel (Built on WordPress!)
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
Conclusion
Great Design, props to Josh Helmsey!
Saturday, July 16, 11

10. cL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD DESIGN
A. Examples of Good Design
Case Study
GRAYSTONE (Built on WordPress!)
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.
Conclusion
Great design!
Saturday, July 16, 11

11. cL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD DESIGN
A. Examples of Good Design
Case Study
Karup Airport (Built on WordPress!)
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
Conclusion
Great design!
Saturday, July 16, 11

12. cL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD DESIGN
B. Plan Your Design Efficiently
RESEARCH SITEMAP WIRE FRAME
Saturday, July 16, 11

13. cL www.codyl.com | @codyL
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!
Saturday, July 16, 11

14. cL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD DESIGN
B. Plan Your Design Efficiently
• Consider your audience.
Plan for screen resolution / cross-browser capability / mobile & tablet
devices.
Saturday, July 16, 11

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

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

17. cL www.codyl.com | @codyL
3. How to Use WordPress to Execute
Oh yeah the blog site right?
Saturday, July 16, 11

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

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

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

21. cL www.codyl.com | @codyL
2. HOW TO USE WordPress TO EXECUTE
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!
Saturday, July 16, 11

22. cL www.codyl.com | @codyL
2. HOW TO USE WordPress TO EXECUTE
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.
Saturday, July 16, 11

23. cL www.codyl.com | @codyL
in Conclusion...
Topics covered
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

24. cL www.codyl.com | @codyL
THANKS
Contact me for more information on design or design help.
codyl@codyl.com
Saturday, July 16, 11