Discovering Design: Break It Before You Build

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.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

May 29, 2015
Tweet

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