WordCamp Los Angeles - Designing Success for WordPress

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

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

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 Efﬁciently C. Design Efﬁciently 3. USING WordPress TO EXECUTE A. Theme Planning B. Content ConsiderationSaturday, September 10, 11

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

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

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

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

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

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 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!Saturday, September 10, 11

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 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, September 10, 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

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

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 spaceSaturday, September 10, 11

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

codyL www.codyl.com | @codyL 2. HOW TO ACHIEVE GOOD UX DESIGN C. Design Efﬁciently 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 GridSaturday, September 10, 11

codyL www.codyl.com | @codyL 2. HOW TO ACHIEVE GOOD UX DESIGN C. Design Efﬁciently Typography - Load times can be planned for efﬁciency while designing. Consider using great typography when designing and incorporate into design. Elysium BurnsSaturday, September 10, 11

codyL www.codyl.com | @codyL 3.USING WordPress TO EXECUTESaturday, September 10, 11

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 efﬁcient execution of design and content.Saturday, September 10, 11

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

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

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

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

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 Efﬁciently C. Design Efﬁciently 3. USING WordPress TO EXECUTE A. Theme Planning B. Content ConsiderationSaturday, September 10, 11

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

http://www.codyl.com	482
http://codyl.wpengine.com	3
http://translate.googleusercontent.com	2

WordCamp Los Angeles - Designing Success for WordPress

by Cody Landefeld on Sep 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 487

Statistics

WordCamp Los Angeles - Designing Success for WordPress — Presentation Transcript