a future friendlyWORKFLOW    @lukebrooker
PREFACE•   Not the only answer•   Steps depend on the size of the project•   is is not everything I do (e.g. testing not ...
WORKFLOW SUMMARY•   Discovery (not included)•   Content Strategy•   Design•   Development
CONTENTSTRATEGY
We need to become temporary pessimistsand focus on all of our problems—focus  on them intently, let them incubate.     Ste...
WHAT IS THEPURPOSE OF THIS     SITE?
SITEMAP•   Start it with the client•   “e presumption of uselessness”•   Build off use cases not features•   Make it quick...
AN EXAMPLE
THISGROUP
SITE GOALS•   Promote the next event•   Get a higher rate of RSVPs•   Grow the community•   Get new speakers•   Promote sp...
USER GOALS•   What are they about? Will I fit in?•   When is the next meetup?•   Where is the meetup?•   Where are the sli...
SCREEN LIST•   Use the sitemap•   What are the different “layouts” or site sections
this isUNACCEPTABLE
design from theCONTENT OUT
SCREEN DESCRIPTION    DIAGRAM•   Clarifies the purpose of this section•   Constructs the hierarchy of each section•   Help...
SCREEN DESCRIPTION DIAGRAMEVENTPURPOSEMake the details (date, time, RSVP) of an event easy to find & understand.Emphasise ...
FIRST PRIORITYEvent Details (time, date, speakers, topics)Speak at this event (If speakers are still needed)SECOND PRIORIT...
CONTENT INVENTORY•   A global list of bits of content•   Collect content from each screen as it is defined•   List the scr...
CONTENT INVENTORYBWD1.    Logo (all screens)2.    Main Menu (all screens)3.    Intro text (home)4.    Event feature (home,...
IMPLEMENTATION    STRATEGY•   What types of content need to be stored?•   What data makes each content type different?•   I...
EXAMPLE•   Content type: Event•   Fields: Date & time, speakers, topics, resources,    featured image, location, other det...
DESIGN
Rather than tailoring disconnected  designs to each of an ever-increasingnumber of web devices, we can treat them    as fa...
CONTENT REFERENCE    WIREFRAMES•   For every screen type, show different layouts•   Sketch first ( for ideas)•   Use the nu...
PATTERN LIST &    WIREFRAMES•   Use content inventory•   Find common patterns•   Sketch out each pattern
PATTERN LISTBWD Menu main (main menu) Hero (intro text) Feature text (intro text) Hero listing (event feature) Teaser (eve...
STYLE TILES•   Stops us from create multiple “mock-ups”•   Keeps the “feel” of the site separate to structure•   It’s the ...
DEVELOPMENT
YOUR OWN PERSONAL    BOILERPLATE•   You need a solid foundation•   Learn from boilerplates...•   But don’t use them blindl...
PROTOTYPE
STRUCTURE•   SMACSS (Scalable & Modular Architecture for CSS)•   Base, Layout, Module, State, eme•   Modules... pattern l...
SMACSS.menu {    list-style: none;}.menu-horizontal li {    float: left;    padding: 10px;}
SPEED or    How I learned to stop worrying and    love the preprocessor•   Create production ready code fast•   Less or Sa...
SASS.menu {    list-style: none;}.menu-horizontal {    @extend .menu;    li {        float: left;        padding: 10px;   ...
SASS.menu-horizontal {    @extend .menu;    li {        padding: 10px;        @include at-breakpoint($medium) {           ...
STYLE GUIDES•   Start during prototyping•   Patterns that aren’t covered in the prototype, style    in the style guide•   ...
IN CONCLUSION
goals for a FUTUREFRIENDLY  WEB
•   Create multiple facets of the same experience•   Let content influence decisions, not technology•   Design systems, no...
•   Understand your code, dont blindly build off    others•   Pull things apart, modularise, our systems should    be scala...
MOST INFLUENTIAL    SOURCES•   Brad Frost - For a Future Friendly Web•   Stephen Hay - Workflow Redesigned: A Future-    F...
LEARNEXPERIMENT  SHARE
THANKS @lukebrookerquestions?
A Future Friendly Workflow
A Future Friendly Workflow
A Future Friendly Workflow
A Future Friendly Workflow
A Future Friendly Workflow
A Future Friendly Workflow
A Future Friendly Workflow
Upcoming SlideShare
Loading in...5
×

A Future Friendly Workflow

2,819

Published on

My talk from the latest Brisbane Web Design meetup (June 2012) about the techniques I have been using to build responsive, future friendly sites. How it effects designers, developers and clients.

Thanks to these people for their ideas:
Brad Frost - http://www.alistapart.com/articles/for-a-future-friendly-web/
Stephen Hay - Workflow Redesigned: A Future-Friendly Approach - The Smashing Book #3
Andy Clarke - Becoming Fabulously Flexible - The Smashing Book #3
Samantha Warren - http://styletil.es/

Published in: Design, Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,819
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

A Future Friendly Workflow

  1. 1. a future friendlyWORKFLOW @lukebrooker
  2. 2. 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
  3. 3. WORKFLOW SUMMARY• Discovery (not included)• Content Strategy• Design• Development
  4. 4. CONTENTSTRATEGY
  5. 5. We need to become temporary pessimistsand focus on all of our problems—focus on them intently, let them incubate. Stephen Hay - e Smashing Book #3
  6. 6. WHAT IS THEPURPOSE OF THIS SITE?
  7. 7. SITEMAP• Start it with the client• “e presumption of uselessness”• Build off use cases not features• Make it quick and easy to edit
  8. 8. AN EXAMPLE
  9. 9. THISGROUP
  10. 10. 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
  11. 11. USER GOALS• What are they about? Will I fit 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?
  12. 12. SCREEN LIST• Use the sitemap• What are the different “layouts” or site sections
  13. 13. this isUNACCEPTABLE
  14. 14. design from theCONTENT OUT
  15. 15. SCREEN DESCRIPTION DIAGRAM• Clarifies the purpose of this section• Constructs the hierarchy of each section• Helps define important content• Makes it easy to see the user flow
  16. 16. SCREEN DESCRIPTION DIAGRAMEVENTPURPOSEMake the details (date, time, RSVP) of an event easy to find & understand.Emphasise the topics being discussed.CALL TO ACTIONRSVP for this event, Share this event
  17. 17. FIRST PRIORITYEvent Details (time, date, speakers, topics)Speak at this event (If speakers are still needed)SECOND PRIORITYGet directionsSlides/notes/resources from this event (if past)THIRD PRIORITYOther upcoming events
  18. 18. CONTENT INVENTORY• A global list of bits of content• Collect content from each screen as it is defined• List the screen it belongs to
  19. 19. CONTENT INVENTORYBWD1. 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)
  20. 20. 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?
  21. 21. 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
  22. 22. DESIGN
  23. 23. Rather than tailoring disconnected designs to each of an ever-increasingnumber of web devices, we can treat them as facets of the same experience Ethan Marcotte
  24. 24. CONTENT REFERENCE WIREFRAMES• For every screen type, show different layouts• Sketch first ( for ideas)• Use the numbers from the content inventory• Wireframe in the browser
  25. 25. PATTERN LIST & WIREFRAMES• Use content inventory• Find common patterns• Sketch out each pattern
  26. 26. PATTERN LISTBWD Menu main (main menu) Hero (intro text) Feature text (intro text) Hero listing (event feature) Teaser (event lisiting item) Icon list (event details) Block teaser (latest from Twitter, past events, upcoming events)
  27. 27. 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...
  28. 28. DEVELOPMENT
  29. 29. 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
  30. 30. PROTOTYPE
  31. 31. STRUCTURE• SMACSS (Scalable & Modular Architecture for CSS)• Base, Layout, Module, State, eme• Modules... pattern list?
  32. 32. SMACSS.menu { list-style: none;}.menu-horizontal li { float: left; padding: 10px;}
  33. 33. 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
  34. 34. SASS.menu { list-style: none;}.menu-horizontal { @extend .menu; li { float: left; padding: 10px; }}
  35. 35. SASS.menu-horizontal { @extend .menu; li { padding: 10px; @include at-breakpoint($medium) { float: left; } }}
  36. 36. 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
  37. 37. IN CONCLUSION
  38. 38. goals for a FUTUREFRIENDLY WEB
  39. 39. • Create multiple facets of the same experience• Let content influence decisions, not technology• Design systems, not pages• Stick to some common patterns, but try and break some (we always need new ideas)
  40. 40. • Understand your code, dont blindly build off 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)
  41. 41. MOST INFLUENTIAL SOURCES• Brad Frost - For a Future Friendly Web• Stephen Hay - Workflow Redesigned: A Future- Friendly Approach - e Smashing Book #3• Andy Clarke - Becoming Fabulously Flexible - e Smashing Book #3• Samantha Warren - Style Tiles
  42. 42. LEARNEXPERIMENT SHARE
  43. 43. THANKS @lukebrookerquestions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×