wordcamp los angeles - designing success for wordpress
Post on 27-Jan-2015
110 Views
Preview:
DESCRIPTION
TRANSCRIPT
Designing Success for WordPress
Cody Landefeld
codyL www.codyl.com | @codyL
Saturday, September 10, 11
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.
www.codyl.com | @codyLcodyL
About codyL
Saturday, September 10, 11
www.codyl.com | @codyL
Designing Success for WordPress
1. IDENTIFY BAD UX DESIGNA. Case Study of Bad Design
2. HOW TO ACHIEVE GOOD UX DESIGNA. Examples of Good Design
B. Plan EfficientlyC. Design Efficiently
3. USING WordPress TO EXECUTEA. Theme Planning
B. Content Consideration
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
Borrowed from The Oatmeal Borrowed from interwebz - kudos to @vegasgeek
1. IDENTIFY BAD DESIGN
codyL
Saturday, September 10, 11
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?
www.codyl.com | @codyL
Saturday, September 10, 11
An extreme example.
www.codyl.com | @codyL
• No real logo
• No general header
• Still using frames (older style)
• No main body area (bad photo behind bad text)
• No footer
Case StudyRaft Web (non-WordPress site)
ConclusionBad Design!
1. IDENTIFY BAD DESIGN
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
Fruit company Forrest Gump invested in
codyL
2. HOW TO ACHIEVE GOOD UX DESIGN
Saturday, September 10, 11
www.codyl.com | @codyL
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
2. HOW TO ACHIEVE GOOD UX DESIGN
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
A. Examples of Good Design
• 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
Case StudyFixel (WordPress site)
ConclusionGreat Design!
codyL
2. HOW TO ACHIEVE GOOD UX DESIGN
Saturday, September 10, 11
www.codyl.com | @codyL
• 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.
Case StudyGraystone (WordPress site)
ConclusionGreat Design!
2. HOW TO ACHIEVE GOOD UX DESIGN
A. Examples of Good Design
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
• 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
2. HOW TO ACHIEVE GOOD UX DESIGN
A. Examples of Good DesignCase StudyGraystone (WordPress site)
ConclusionGreat Design!
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
B. Plan Your Design Efficiently
RESEARCH SITEMAP WIRE FRAME
2. HOW TO ACHIEVE GOOD UX DESIGN
codyL
Saturday, September 10, 11
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
www.codyl.com | @codyLcodyL
2. HOW TO ACHIEVE GOOD UX DESIGN
B. Plan Your Design Efficiently
Saturday, September 10, 11
• Plan for screen resolution• Cross-browser capability (use boilerplate or framework)
• Mobile & tablet devices (responsive design)
www.codyl.com | @codyLcodyL
2. HOW TO ACHIEVE GOOD UX DESIGN
B. Plan Efficiently
Saturday, September 10, 11
www.codyl.com | @codyL
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
2. HOW TO ACHIEVE GOOD UX DESIGN
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
Typography - Load times can be planned for efficiency while designing. Consider using great typography when
designing and incorporate into design.
Elysium Burns
C. Design Efficiently
2. HOW TO ACHIEVE GOOD UX DESIGN
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
3.USING WordPress TO EXECUTE
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
Out of the box efficiency
• Header & Footer are included to utilize in multiple pages.
• Plugins allow efficient execution of design and content.
codyL
3.USING WordPress TO EXECUTE
Saturday, September 10, 11
www.codyl.com | @codyL
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.
codyL
3.USING WordPress TO EXECUTE
Saturday, September 10, 11
www.codyl.com | @codyL
Use Plugins to enhance user experience.
Carefully consider which Plugins to use and how they interact with your design.
A. Theme Planning3.USING WordPress TO EXECUTE
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
B. Content ConsiderationContent 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!
codyL
3.USING WordPress TO EXECUTE
Saturday, September 10, 11
www.codyl.com | @codyL
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.
B. Content Consideration3.USING WordPress TO EXECUTE
codyL
Saturday, September 10, 11
www.codyl.com | @codyL
in Conclusion...Topics covered
codyL
1. IDENTIFY BAD UX DESIGNA. Case Study of Bad Design
2. HOW TO ACHIEVE GOOD UX DESIGNA. Examples of Good Design
B. Plan EfficientlyC. Design Efficiently
3. USING WordPress TO EXECUTEA. Theme Planning
B. Content Consideration
Saturday, September 10, 11
www.codyl.com | @codyL
THANKSContact me for more information on design or design help.
codyl@codyl.com
codyL
Saturday, September 10, 11
top related