Discovering Design: Break It Before You Build

Whether you have experience with design, development, or are ready to build your first theme, there is a lot of planning to be done before you open your favorite design program or code editor. WordPress themes are designed for two audiences: the end user (in the browser), and the site administrator (in the Dashboard), and it’s our job to account for both sets of needs. We will explore some workflows in the design and discovery process, including content mapping, wireframes and general WordPress logic. Whether you’re building a theme for yourself, for your client, or for sale, you can use these methods to build a map for your project before you begin.

Transcript

1. DISCOVERING DESIGN Break It Before You Build
2. @marktimemedia I Design THINGS.   USUALLY WORDPRESS.   HI, I’M MICHELLE.  
3. @marktimemedia WHY ARE WE DESIGNING?
4. @marktimemedia CONTENT-FIRST DESIGN?
5. @marktimemedia FUTURE UNKNOWN EXTENDABLE CONTENT-FIRST DESIGN?
6. @marktimemedia CONTENT TYPES such contents wow many doge
7. @marktimemedia BREAK BEFORE YOU BUILD
8. @marktimemedia WHO ARE WE DESIGNING FOR?
9. @marktimemedia CONTENT TYPES & OUR AUDIENCE
10. @marktimemedia END USER •  Layout •  Navigation •  Interactivity •  Aesthetics •  Images, Text •  Forms, Buttons very web wow has amaze lol
11. @marktimemedia END USER •  Useable •  Consistent •  Intuitive or Self- Explanatory •  Drives towards a call to action very click wow much action call can use
12. @marktimemedia CONTENT MANAGER •  Post Types •  Taxonomies •  Meta Fields •  Admin Pages •  Options •  Widgets •  Dashboard such wordpress so admin do options
13. @marktimemedia CONTENT MANAGER •  Useable •  Consistent •  Intuitive or Self- Explanatory •  No more complex than necessary much consistant very logic has useable
14. @marktimemedia THE EXPERIENCE SHOULD MAKE SENSE. Obviously. That’s why we liked WordPress in the first place!
15. @marktimemedia END USER •  Hard to find content or information •  Counterintuitive navigation or content organization •  Vague call to action no find why happen? L smiles is lies
16. @marktimemedia CONTENT MANAGER •  Code/Shortcode in Text Editor to control layout •  Hidden content in widgets or menus, or other unexpected places •  Unused menu items •  Too many options where is? L halp shortcodes no explain
17. @marktimemedia WHAT ARE WE DESIGNING?
18. @marktimemedia USER INTERACTION How will users be engaging with this content on the page?
19. @marktimemedia Community Information Contact Info Related Plans - Clickable Related Quick Move Ins – Clickable Directions to Community Interactive Map - Enlarge Files - Download
20. @marktimemedia WORDPRESS & INFORMATION ARCHITECTURE
21. @marktimemedia WORDPRESS CONTENT TYPES •  Post – archival/ordered •  Page – single •  Taxonomies – hierarchical/non-hierarchical •  Meta – additional fields associated with post/page •  Users – authors, members, commenters… •  Custom Post Types – the sky is the limit!
22. @marktimemedia CONTENT RELATIONSHIPS How does this content relate to other content?
23. @marktimemedia Custom Post Type 1 Meta Data Custom Post Type 2 Custom Post Type 2 – Specific Category Text Field Custom Field - Map Custom Field – Select Docs CPT Meta Data
24. @marktimemedia DISPLAYING CONTENT What is the best method to output this content?
25. @marktimemedia FRONTENT LAYOUT DETERMINES BACKEND ORGANIZATION
26. @marktimemedia HOW DO WE SPEC A DESIGN?
27. @marktimemedia DISCOVERY & FUNCTIONALITY wow so leaf how metaphor much flat design
28. @marktimemedia GOALS & CALLS TO ACTION •  Who is this for? •  What do we want people to do? very contact lol keyboard alot goals
29. @marktimemedia PAGE WALKTHROUGH •  What happens? •  What do we do? •  Where does this action lead? not sure if static page or complex functionality
30. @marktimemedia USER STORIES •  Who, specifically, is the user? •  How does this persona engage with the site? ¯\_(ツ)_/¯
31. @marktimemedia CONTENT MAP such mapping wow lol so marker
32. @marktimemedia CONTENT MAP SITE MAP CONTENT TYPES RELATIONSHIPS
33. @marktimemedia
34. @marktimemedia WIREFRAMING such business very wireframe
35. @marktimemedia WIREFRAMING CONTENT BLOCKS CONTENT SIZE FUNCTIONALITY
36. @marktimemedia <example wireframe>
37. @marktimemedia
38. @marktimemedia
39. @marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/break-the-design