design begins before you design - wordpress track - phxdw 2014
DESCRIPTION
If you're doing it right, web design doesn't start with UI. You need to start with some hard questions about "Why", "Who", and "How." It might be uncomfortable the first few times you do it, but if you stick to the process, you can prevent sad surprises that come when your clients/stakeholders don't get what they thought they were building.TRANSCRIPT
![Page 1: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/1.jpg)
Design begins before you “design.”
@john_gough
PHXDW WordPress Wisdom John Gough Skyhook Marketing
![Page 2: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/2.jpg)
![Page 3: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/3.jpg)
![Page 4: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/4.jpg)
Good process prevents sadness.
Design before you “design” | @john_gough
![Page 5: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/5.jpg)
So, what about WordPress?
Design before you “design” | @john_gough
![Page 6: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/6.jpg)
![Page 7: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/7.jpg)
![Page 8: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/8.jpg)
![Page 9: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/9.jpg)
Design before you “design” | @john_gough
![Page 10: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/10.jpg)
WordPress is a CMS.Emphasis on the C.
![Page 11: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/11.jpg)
Design before you “design” | @john_gough
![Page 12: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/12.jpg)
Information Architecture
unsplash.net
![Page 13: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/13.jpg)
The Process: 1. Asking Why 2. Understanding Who 3. Planning How
Design before you “design” | @john_gough
![Page 14: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/14.jpg)
The most important question: “Why do you want a website?”
The $1,000,000 Question
Features & Functionality
Visual Design
Analytics
Marketing Campaigns
![Page 15: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/15.jpg)
Bad reasons to build a website:
The $1,000,000 Question
“Everyone else has one.” “My spouse/partner/friend/voice-in-my head says I need one.” “To look cool.” “So I can get rich and retire. (Sign this NDA)”
![Page 16: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/16.jpg)
Grumpy mom test.
Explain it to your mom.
![Page 17: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/17.jpg)
Avinash Kaushik Blog: Occam’s Razor
![Page 18: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/18.jpg)
The Digital Marketing & Measurement Model
http://bit.ly/PHXDWmeasurement
![Page 19: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/19.jpg)
WEBSITE OBJECTIVES
INCREASE AWARENESS
GENERATE LEADS
![Page 20: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/20.jpg)
WEBSITE OBJECTIVES
INCREASE AWARENESS
GENERATE LEADS
Reserve a cab online
Reinforce offline/ online advertising
Generate repeat business
![Page 21: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/21.jpg)
WEBSITE OBJECTIVES
INCREASE AWARENESS
GENERATE LEADS
Reserve a cab online
KPI: CONVERSIONS (RESERVATION FORM)
TARGET: 120/MO
Reinforce offline/ online advertising
KPI: BRANDED TRAFFIC
TARGET: 1K VISITS/MO
Generate repeat business
KPI: LOYALTY/RECENCY
TARGET: 30% REPEAT VISITS
![Page 22: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/22.jpg)
WordPress Google Analytics Plugins
![Page 23: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/23.jpg)
![Page 24: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/24.jpg)
The next question: “Who is going to look at your website?”
The $999,999 Question
![Page 25: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/25.jpg)
![Page 26: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/26.jpg)
![Page 27: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/27.jpg)
Protip: The answer is not “everyone.”
#protip
![Page 28: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/28.jpg)
It’s easy as ABC.
Audience… Behavior… Conversion.
http://bit.ly/PHXDWabc
![Page 29: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/29.jpg)
BEHAVIORSPotential customers Current customers Potential employees Competitors Press
Lead gen form
Support
Careers info
Deception Releases and media
AUDIENCES CONVERSION
![Page 30: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/30.jpg)
“Things not to have.” -Amanda Blum
About Me page (use author info in WP) Testimonial page (use the sidebar) Too many pages (use dynamic content!) Advertising
http://bit.ly/PHXDWabc
![Page 31: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/31.jpg)
Planning How. The sitemap.
![Page 32: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/32.jpg)
Sitemaps should:
Show clear connections for where Audiences meet Goals. Represent one main idea/purpose per page. Be a tool for communication.
http://bit.ly/PHXDWabc
![Page 33: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/33.jpg)
Design before you “design” | @john_gough
![Page 34: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/34.jpg)
Design before you “design” | @john_gough
![Page 35: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/35.jpg)
Design before you “design” | @john_gough
![Page 36: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/36.jpg)
How do I make a sitemap?
Pen and paper Bulleted, nested lists Omnigraffle/Visio (w/ outline view and styles) Illustrator EightShapes Indesign templates (http://unify.eightshapes.com/)
http://bit.ly/PHXDWabc
![Page 37: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/37.jpg)
Why not use WordPress?
![Page 38: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/38.jpg)
WordPress to create sitemaps.
![Page 39: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/39.jpg)
Planning How. The wireframes.
![Page 40: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/40.jpg)
![Page 41: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/41.jpg)
![Page 42: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/42.jpg)
How do I make cool wireframes?
http://bit.ly/PHXDWabc
![Page 43: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/43.jpg)
Adaptive Path Sketchboards
![Page 44: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/44.jpg)
IPEVO P2P Camera
![Page 45: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/45.jpg)
Digital tools:
http://bit.ly/PHXDWabc
Omnigraffle/Visio Webflow Balsamiq Illustrator EightShapes Unify + InDesign Advanced: Bootstrap prototypes
![Page 46: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/46.jpg)
In Real Life: Client work.
![Page 47: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/47.jpg)
Sketches to clients.
![Page 48: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/48.jpg)
High fidelity wireframes.
![Page 49: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/49.jpg)
Mockups in browser.
![Page 50: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/50.jpg)
Style guide.
![Page 51: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/51.jpg)
Look at your theme.
![Page 52: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/52.jpg)
![Page 53: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/53.jpg)
![Page 54: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/54.jpg)
![Page 55: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/55.jpg)
![Page 56: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/56.jpg)
Good process prevents sadness.
Design before you “design” | @john_gough
![Page 57: Design begins before you design - WordPress track - PHXDW 2014](https://reader037.vdocuments.site/reader037/viewer/2022110310/5593b0091a28aba2078b45cc/html5/thumbnails/57.jpg)
Thank you!
Design before you “design” | @john_gough