Discovering Design: Break It Before You Build

by Michelle Schulp Hunt

Slide 1

Slide 1 text

DISCOVERING DESIGN Break It Before You Build

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@marktimemedia WHY ARE WE DESIGNING?

Slide 4

Slide 4 text

@marktimemedia CONTENT-FIRST DESIGN?

Slide 5

Slide 5 text

@marktimemedia FUTURE UNKNOWN EXTENDABLE CONTENT-FIRST DESIGN?

Slide 6

Slide 6 text

@marktimemedia CONTENT TYPES such contents wow many doge

Slide 7

Slide 7 text

@marktimemedia BREAK BEFORE YOU BUILD

Slide 8

Slide 8 text

@marktimemedia WHO ARE WE DESIGNING FOR?

Slide 9

Slide 9 text

@marktimemedia CONTENT TYPES & OUR AUDIENCE

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@marktimemedia END USER •  Hard to ﬁnd content or information •  Counterintuitive navigation or content organization •  Vague call to action no find why happen? L smiles is lies

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

@marktimemedia WHAT ARE WE DESIGNING?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@marktimemedia WORDPRESS & INFORMATION ARCHITECTURE

Slide 21

Slide 21 text

@marktimemedia WORDPRESS CONTENT TYPES •  Post – archival/ordered •  Page – single •  Taxonomies – hierarchical/non-hierarchical •  Meta – additional ﬁelds associated with post/page •  Users – authors, members, commenters… •  Custom Post Types – the sky is the limit!

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@marktimemedia Custom Post Type 1 Meta Data Custom Post Type 2 Custom Post Type 2 – Speciﬁc Category Text Field Custom Field - Map Custom Field – Select Docs CPT Meta Data

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@marktimemedia FRONTENT LAYOUT DETERMINES BACKEND ORGANIZATION

Slide 26

Slide 26 text

@marktimemedia HOW DO WE SPEC A DESIGN?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

@marktimemedia CONTENT MAP such mapping wow lol so marker

Slide 32

Slide 32 text

@marktimemedia CONTENT MAP SITE MAP CONTENT TYPES RELATIONSHIPS

Slide 33

Slide 33 text

@marktimemedia

Slide 34

Slide 34 text

@marktimemedia WIREFRAMING such business very wireframe

Slide 35

Slide 35 text

@marktimemedia WIREFRAMING CONTENT BLOCKS CONTENT SIZE FUNCTIONALITY

Slide 36

Slide 36 text

@marktimemedia

Slide 37

Slide 37 text

@marktimemedia

Slide 38

Slide 38 text

@marktimemedia

Slide 39

Slide 39 text

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