A Future Friendly Workflow

Slide 1

Slide 1 text

a future friendly WORKFLOW @lukebrooker

Slide 2

Slide 2 text

PREFACE • Not the only answer • Steps depend on the size of the project • is is not everything I do (e.g. testing not included) • is is not only my ideas

Slide 3

Slide 3 text

WORKFLOW SUMMARY • Discovery (not included) • Content Strategy • Design • Development

Slide 4

Slide 4 text

CONTENT STRATEGY

Slide 5

Slide 5 text

We need to become temporary pessimists and focus on all of our problems—focus on them intently, let them incubate. Stephen Hay - e Smashing Book #3

Slide 6

Slide 6 text

WHAT IS THE PURPOSE OF THIS SITE?

Slide 7

Slide 7 text

SITEMAP • Start it with the client • “e presumption of uselessness” • Build oﬀ use cases not features • Make it quick and easy to edit

Slide 8

Slide 8 text

AN EXAMPLE

Slide 9

Slide 9 text

THIS GROUP

Slide 10

Slide 10 text

SITE GOALS • Promote the next event • Get a higher rate of RSVPs • Grow the community • Get new speakers • Promote sponsors • Keep in contact with members

Slide 11

Slide 11 text

USER GOALS • What are they about? Will I t in? • When is the next meetup? • Where is the meetup? • Where are the slides/notes from the last meetup? • Can I speak? What is involved in speaking?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

SCREEN LIST • Use the sitemap • What are the diﬀerent “layouts” or site sections

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

this is UNACCEPTABLE

Slide 16

Slide 16 text

design from the CONTENT OUT

Slide 17

Slide 17 text

SCREEN DESCRIPTION DIAGRAM • Clari es the purpose of this section • Constructs the hierarchy of each section • Helps de ne important content • Makes it easy to see the user ow

Slide 18

Slide 18 text

EVENT SCREEN DESCRIPTION DIAGRAM PURPOSE CALL TO ACTION Make the details (date, time, RSVP) of an event easy to nd & understand. Emphasise the topics being discussed. RSVP for this event, Share this event

Slide 19

Slide 19 text

FIRST PRIORITY SECOND PRIORITY THIRD PRIORITY Event Details (time, date, speakers, topics) Speak at this event (If speakers are still needed) Get directions Slides/notes/resources from this event (if past) Other upcoming events

Slide 20

Slide 20 text

CONTENT INVENTORY • A global list of bits of content • Collect content from each screen as it is de ned • List the screen it belongs to

Slide 21

Slide 21 text

BWD CONTENT INVENTORY 1. Logo (all screens) 2. Main Menu (all screens) 3. Intro text (home) 4. Event feature (home, event listing) 5. Event lisiting section (event listing) 6. Main content section (about) 7. Event details (event) 8. Speaking details (speaking) 9. Address (location) 10. Map (location) 11. Contact details (contact) 12. Contact form (contact) 13. Latest from Twitter (home, about) 14. Past events (event listing)

Slide 22

Slide 22 text

IMPLEMENTATION STRATEGY • What types of content need to be stored? • What data makes each content type different? • In what different ways will each bit of content need to be displayed? • How will this content relate to other content in the site? • How could this data be used in different contexts?

Slide 23

Slide 23 text

EXAMPLE • Content type: Event • Fields: Date & time, speakers, topics, resources, featured image, location, other details • Displays: Full, general teaser, aside teaser, feature • Categories: Topic, event type • Contexts: Format location for easy selection on smart phones, use hcard for formatting

Slide 24

Slide 24 text

DESIGN

Slide 25

Slide 25 text

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience Ethan Marcotte

Slide 26

Slide 26 text

CONTENT REFERENCE WIREFRAMES • For every screen type, show diﬀerent layouts • Sketch rst (for ideas) • Use the numbers from the content inventory • Wireframe in the browser

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

PATTERN LIST & WIREFRAMES • Use content inventory • Find common patterns • Sketch out each pattern

Slide 29

Slide 29 text

BWD PATTERN LIST t Menu main (main menu) t Hero (intro text) t Feature text (intro text) t Hero listing (event feature) t Teaser (event lisiting item) t Icon list (event details) t Block teaser (latest from Twitter, past events, upcoming events)

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

STYLE TILES • Stops us from create multiple “mock-ups” • Keeps the “feel” of the site separate to structure • It’s the deliverable not how where I design • Create patterns and elements all together...

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

DEVELOPMENT

Slide 34

Slide 34 text

YOUR OWN PERSONAL BOILERPLATE • You need a solid foundation • Learn from boilerplates... • But don’t use them blindly • When you learn better techniques, add them • Know your way around

Slide 35

Slide 35 text

PROTOTYPE

Slide 36

Slide 36 text

STRUCTURE • SMACSS (Scalable & Modular Architecture for CSS) • Base, Layout, Module, State, eme • Modules... pattern list?

Slide 37

Slide 37 text

SMACSS .menu { list-style: none; } .menu-horizontal li { float: left; padding: 10px; }

Slide 38

Slide 38 text

SPEED or How I learned to stop worrying and love the preprocessor • Create production ready code fast • Less or Sass? • Sass has: @extend, compass, respond-to

Slide 39

Slide 39 text

SASS .menu { list-style: none; } .menu-horizontal { @extend .menu; li { float: left; padding: 10px; } }

Slide 40

Slide 40 text

SASS .menu-horizontal { @extend .menu; li { padding: 10px; @include at-breakpoint($medium) { float: left; } } }

Slide 41

Slide 41 text

STYLE GUIDES • Start during prototyping • Patterns that aren’t covered in the prototype, style in the style guide • Add documentation for developer • ink about width, hierarchy, density & interaction

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

IN CONCLUSION

Slide 45

Slide 45 text

goals for a FUTURE FRIENDLY WEB

Slide 46

Slide 46 text

• Create multiple facets of the same experience • Let content in uence decisions, not technology • Design systems, not pages • Stick to some common patterns, but try and break some (we always need new ideas)

Slide 47

Slide 47 text

• Understand your code, don't blindly build oﬀ others • Pull things apart, modularise, our systems should be scalable and understandable • Work together with users, designers, developers and clients (everyone has a valuable perspective)

Slide 48

Slide 48 text

MOST INFLUENTIAL SOURCES • Brad Frost - For a Future Friendly Web • Stephen Hay - Work ow Redesigned: A Future- Friendly Approach - e Smashing Book #3 • Andy Clarke - Becoming Fabulously Flexible - e Smashing Book #3 • Samantha Warren - Style Tiles