Your SlideShare is downloading. ×
0
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
WordCamp San Diego -  Designing Success for WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WordCamp San Diego - Designing Success for WordPress

5,202

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,202
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. cL www.codyl.com | @codyL Designing Success for WordPress Cody LandefeldSaturday, 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 ConsiderationSaturday, July 16, 11
  • 4. cL www.codyl.com | @codyL 1. Identify Bad Design Borrowed from The Oatmeal Borrowed from interwebz - kudos to @vegasgeekSaturday, 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 inSaturday, 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 ReverdySaturday, 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 FRAMESaturday, 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 GridSaturday, 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 BurnsSaturday, 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 ConsiderationSaturday, July 16, 11
  • 24. cL www.codyl.com | @codyL THANKS Contact me for more information on design or design help. codyl@codyl.comSaturday, July 16, 11

×