Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Michelle Schulp

May 29, 2015
Tweet

More Decks by Michelle Schulp

Other Decks in Design

Transcript

  1. DISCOVERING
    DESIGN
    Break It Before You Build

    View Slide

  2. @marktimemedia
    I
    Design
    THINGS.  
    USUALLY
    WORDPRESS.  
    HI, I’M
    MICHELLE.  

    View Slide

  3. @marktimemedia
    WHY
    ARE WE DESIGNING?

    View Slide

  4. @marktimemedia
    CONTENT-FIRST
    DESIGN?

    View Slide

  5. @marktimemedia
    FUTURE
    UNKNOWN
    EXTENDABLE
    CONTENT-FIRST
    DESIGN?

    View Slide

  6. @marktimemedia
    CONTENT
    TYPES
    such contents
    wow
    many doge

    View Slide

  7. @marktimemedia
    BREAK BEFORE YOU BUILD

    View Slide

  8. @marktimemedia
    WHO
    ARE WE DESIGNING FOR?

    View Slide

  9. @marktimemedia
    CONTENT TYPES
    & OUR AUDIENCE

    View Slide

  10. @marktimemedia
    END USER
    •  Layout
    •  Navigation
    •  Interactivity
    •  Aesthetics
    •  Images, Text
    •  Forms, Buttons
    very web
    wow has amaze
    lol

    View Slide

  11. @marktimemedia
    END USER
    •  Useable
    •  Consistent
    •  Intuitive or Self-
    Explanatory
    •  Drives towards a
    call to action
    very click
    wow
    much action call
    can use

    View Slide

  12. @marktimemedia
    CONTENT
    MANAGER
    •  Post Types
    •  Taxonomies
    •  Meta Fields
    •  Admin Pages
    •  Options
    •  Widgets
    •  Dashboard
    such wordpress
    so admin
    do options

    View Slide

  13. @marktimemedia
    CONTENT
    MANAGER
    •  Useable
    •  Consistent
    •  Intuitive or Self-
    Explanatory
    •  No more complex
    than necessary
    much consistant
    very logic
    has useable

    View Slide

  14. @marktimemedia
    THE EXPERIENCE
    SHOULD MAKE
    SENSE.
    Obviously. That’s why we liked WordPress in the first place!

    View Slide

  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

    View Slide

  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

    View Slide

  17. @marktimemedia
    WHAT
    ARE WE DESIGNING?

    View Slide

  18. @marktimemedia
    USER
    INTERACTION
    How will users be engaging with this content on the page?

    View Slide

  19. @marktimemedia
    Community Information
    Contact Info
    Related Plans - Clickable
    Related Quick Move Ins –
    Clickable
    Directions to Community
    Interactive Map - Enlarge
    Files - Download

    View Slide

  20. @marktimemedia
    WORDPRESS &
    INFORMATION
    ARCHITECTURE

    View Slide

  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!

    View Slide

  22. @marktimemedia
    CONTENT
    RELATIONSHIPS
    How does this content relate to other content?

    View Slide

  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

    View Slide

  24. @marktimemedia
    DISPLAYING
    CONTENT
    What is the best method to output this content?

    View Slide

  25. @marktimemedia
    FRONTENT LAYOUT
    DETERMINES
    BACKEND
    ORGANIZATION

    View Slide

  26. @marktimemedia
    HOW
    DO WE SPEC A DESIGN?

    View Slide

  27. @marktimemedia
    DISCOVERY &
    FUNCTIONALITY
    wow
    so leaf
    how metaphor
    much flat
    design

    View Slide

  28. @marktimemedia
    GOALS & CALLS
    TO ACTION
    •  Who is this for?
    •  What do we want
    people to do?
    very contact
    lol keyboard
    alot goals

    View Slide

  29. @marktimemedia
    PAGE
    WALKTHROUGH
    •  What happens?
    •  What do we do?
    •  Where does this
    action lead?
    not sure if static page
    or complex
    functionality

    View Slide

  30. @marktimemedia
    USER
    STORIES
    •  Who, specifically,
    is the user?
    •  How does this
    persona engage
    with the site?
    ¯\_(ツ)_/¯

    View Slide

  31. @marktimemedia
    CONTENT MAP
    such mapping
    wow
    lol so marker

    View Slide

  32. @marktimemedia
    CONTENT MAP
    SITE MAP
    CONTENT TYPES
    RELATIONSHIPS

    View Slide

  33. @marktimemedia

    View Slide

  34. @marktimemedia
    WIREFRAMING
    such business
    very wireframe

    View Slide

  35. @marktimemedia
    WIREFRAMING
    CONTENT BLOCKS
    CONTENT SIZE
    FUNCTIONALITY

    View Slide

  36. @marktimemedia
    wireframe>

    View Slide

  37. @marktimemedia

    View Slide

  38. @marktimemedia

    View Slide

  39. @marktimemedia
    QUESTIONS?
    Michelle Schulp
    [email protected]
    @marktimemedia
    bit.ly/break-the-design

    View Slide