My talk at WordCamp Los Angeles 2011 on User Experience design.

1. codyL www.codyl.com | @codyL
Designing Success for WordPress
Cody Landefeld
Saturday, September 10, 11

2. codyL 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
manages great things for the web.
I began using designing for the web in 2000 and began
using WordPress in 2006.
Saturday, September 10, 11

3. codyL www.codyl.com | @codyL
Designing Success for
WordPress
1. IDENTIFY BAD UX DESIGN
A. Case Study of Bad Design
2. HOW TO ACHIEVE GOOD UX DESIGN
A. Examples of Good Design
B. Plan Efficiently
C. Design Efficiently
3. USING WordPress TO EXECUTE
A. Theme Planning
B. Content Consideration
Saturday, September 10, 11

4. codyL www.codyl.com | @codyL
1. IDENTIFY BAD DESIGN
Borrowed from The Oatmeal Borrowed from interwebz - kudos to @vegasgeek
Saturday, September 10, 11

5. codyL 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, September 10, 11

6. codyL 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, September 10, 11

7. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
Fruit company Forrest Gump invested in
Saturday, September 10, 11

8. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
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
Saturday, September 10, 11

9. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
A. Examples of Good Design
Case Study
Fixel (WordPress site)
• 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!
Saturday, September 10, 11

10. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
A. Examples of Good Design
Case Study
Graystone (WordPress site)
• 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, September 10, 11

11. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
A. Examples of Good Design
Case Study
Graystone (WordPress site)
• 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, September 10, 11

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

13. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
B. Plan Your Design Efficiently
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
Saturday, September 10, 11

14. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
B. Plan Efficiently
• Plan for screen resolution
• Cross-browser capability (use boilerplate or framework)
• Mobile & tablet devices (responsive design)
Saturday, September 10, 11

15. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
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
Saturday, September 10, 11

16. codyL www.codyl.com | @codyL
2. HOW TO ACHIEVE GOOD UX
DESIGN
C. Design Efficiently
Typography - Load times can be planned for efficiency
while designing. Consider using great typography when
designing and incorporate into design.
Elysium Burns
Saturday, September 10, 11

17. codyL www.codyl.com | @codyL
3.USING WordPress TO EXECUTE
Saturday, September 10, 11

18. codyL www.codyl.com | @codyL
3.USING WordPress TO EXECUTE
Out of the box efficiency
• Header & Footer are included to utilize in multiple pages.
• Plugins allow efficient execution of design and content.
Saturday, September 10, 11

19. codyL www.codyl.com | @codyL
3.USING 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, September 10, 11

20. codyL www.codyl.com | @codyL
3.USING WordPress TO EXECUTE
A. Theme Planning
Use Plugins to enhance user experience.
Carefully consider which Plugins to use and how they interact
with your design.
Saturday, September 10, 11

21. codyL www.codyl.com | @codyL
3.USING WordPress TO EXECUTE
B. Content Consideration
Content 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!
Saturday, September 10, 11

22. codyL www.codyl.com | @codyL
3.USING 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, September 10, 11

23. codyL www.codyl.com | @codyL
in Conclusion...
Topics covered
1. IDENTIFY BAD UX DESIGN
A. Case Study of Bad Design
2. HOW TO ACHIEVE GOOD UX DESIGN
A. Examples of Good Design
B. Plan Efficiently
C. Design Efficiently
3. USING WordPress TO EXECUTE
A. Theme Planning
B. Content Consideration
Saturday, September 10, 11

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