WordCamp San Diego - Designing Success for WordPress

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

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

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 Efﬁciently • Design Efﬁciently 3. How to Use WordPress to Execute • Theme Planning • Content ConsiderationSaturday, July 16, 11

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

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

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

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

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 efﬁciently." Pierre ReverdySaturday, July 16, 11

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 deﬁned 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

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 deﬁned 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

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

cL www.codyl.com | @codyL 2. HOW TO ACHIEVE GOOD DESIGN B. Plan Your Design Efﬁciently RESEARCH SITEMAP WIRE FRAMESaturday, July 16, 11

cL www.codyl.com | @codyL 2. HOW TO ACHIEVE GOOD DESIGN B. Plan Your Design Efﬁciently • What’s an example of efficient design? WordPress has a shared header / footer / sidebar area that can be shared throughout site - efﬁcient!Saturday, July 16, 11

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

cL www.codyl.com | @codyL 2. HOW TO ACHIEVE GOOD DESIGN C. Design Efﬁciently • Consider flexible design. With considering audience and how a device renders, this is a huge help efﬁciency. Suggested tool: Tiny Fluid GridSaturday, July 16, 11

cL www.codyl.com | @codyL 2. HOW TO ACHIEVE GOOD DESIGN C. Design Efﬁciently • Use text often. Load times can be planned for efﬁciency while designing. Consider using great typography when designing and incorporate into design. Elysium BurnsSaturday, 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 efﬁciency 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 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

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 efﬁcient. Plan on continuing to plan and changing the format from time to time.Saturday, July 16, 11

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 Efﬁciently • Design Efﬁciently 3. How to Use WordPress to Execute • Theme Planning • Content ConsiderationSaturday, July 16, 11

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

http://2011.sandiego.wordcamp.org	1174
http://codyl.com	448
http://www.codyl.com	327
http://codyl.staging.wpengine.com	30
http://www.okclassroom.com	22
http://paper.li	11
http://lanyrd.com	10
http://codyl.wpengine.com	1

WordCamp San Diego - Designing Success for WordPress

by Cody Landefeld

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 2,023

Statistics

WordCamp San Diego - Designing Success for WordPress Presentation Transcript