Beyond Static: The New Design System

6be35ee081372b47b640cee7f6d8c761?s=47 Lea Alcantara
April 16, 2015

Beyond Static: The New Design System

In today’s mobile world, providing design deliverables within the browser creates a more productive experience for your clients and your team. And while this means a shift from Photoshop to Sublime, it isn’t just a code shift. The design process remains integral and informs every web-based deliverable. Using a real client case study, Lea will explore Bright Umbrella’s design deliverables in and out of the browser and explain how their in-house “framework” has ultimately saved them time and money.

6be35ee081372b47b640cee7f6d8c761?s=128

Lea Alcantara

April 16, 2015
Tweet

Transcript

  1. Some rights reserved Beyond Static: The New Design System Lea

    Alcantara for Web Afternoon AUG 28, 2015
  2. Sounds like that Princess Lead Designer 
 abrightumbrella.com Co-host, CTRL+CLICK

    CAST ctrlclickcast.com Canadian edmonton, alberta 2 source: dailymail.co.uk http://abrightumbrella.com/about/lea-alcantara
  3. Seattle, WA abrightumbrella.com/visas

  4. None
  5. Reviewing Processes • We needed to standardize how we work

    • Time to experiment is at a premium • Need to agree quickly and get on the right path sooner • Still want to do high quality work 5
  6. 6 Beyond Static: The New Design System Lea Alcantara for

    Web Afternoon AUG 28, 2015
  7. 7 Time Is Money Lea Alcantara for Web Afternoon AUG

    28, 2015
  8. 8 Real Talk What works for us http://abrightumbrella.com/blog/create-your-own-starter-files

  9. 9

  10. “Old-School” Way 10

  11. 11 Evolution of Man & Device source: http://www.stephendale.com/2012/11/30/the-evolution-of-social-media/

  12. 12 http://bradfrost.com/blog/post/techcrunch/ source:

  13. Evolution of Design Deliverables 13

  14. Page-Based vs Systems • 20+ (or more?!) pixel-perfect Photoshop comps

    later > hand to front-end developer 14 • if conscientious, would create a document outlining fonts and colors and hex/rgb codes • labelling all folders and names • extracting all the images for the dev
  15. 15

  16. Confusion! @_@ 16 • What about hovers? Or animation? Or

    any interaction? • Viewport changes? • Lots of communication issues abound
  17. 17 Our First Collaborative Responsive Project CASE STUDY ONE

  18. Enter Dynamic Deliverables! 18 http://styletil.es/ http://www.agnostic.io/livewires/ http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype

  19. 19

  20. Dynamic Style Tile • Fast-and-dirty coding and didn’t browser check.

    Inconsistencies = client confusion • Ended up sending them a static screenshot of what I saw for them to see the direction 20 Attempt 1
  21. 21

  22. Dynamic Live Wires • Just black-and-white • Quick initial sketches

    > straight to browser • Not much “real” text, just content areas • Helped a lot! 22 ὑ Attempt 1
  23. 23

  24. 24

  25. 25

  26. 26

  27. 27

  28. THE BIG BUT… 28

  29. 29

  30. 30

  31. 31 I’ve made a huge mistake. Gob Bluth, Arrested Development

  32. 32 And that didn’t even address the “squishy middle.” http://seesparkbox.com/foundry/there_is_no_breakpoint

  33. 33 Still, the design is approved. What’s next?

  34. Front-End Starts 34 Remember Live Wires?

  35. Beyond Static 35

  36. A Hybrid Approach aka Starter Files! 36 http://abrightumbrella.com/blog/create-your-own-starter-files

  37. Time = Investment 37

  38. 38 Static AND Dynamic The Best of Both Worlds •

    But how to decide what stays in the browser or on screen vs what should/can stay static?
  39. 39 Family Friend Poems CASE STUDY TWO …and other stuff.

  40. Before jumping in… 40

  41. Identify internal & external/client deliverables 41

  42. Set expectations with your client 42

  43. Then decide what should be static and what should be

    dynamic 43
  44. Our Static Deliverables 44 • http://www.wired.com/2014/05/reading-on-screen-versus-paper/ • http://www.theguardian.com/books/2014/aug/19/readers-absorb-less- kindles-paper-study-plot-ereader-digitisation

  45. Internally • Rough initial wireframes sketches • Paper & Photoshop

    • Maybe a few tablet comps of key pages 45
  46. Clients • Content Prioritization doc (after content audit) • Site

    Map • Content Diagram • If project includes a branding exercise, a 1-page visual branding summary as a PDF/ PNG • Key pages to be made into static design comps 46
  47. Brand Identity Summary • Our version is super simplified •

    Simply just the starting color scheme and typefaces • Sample imagery • This will eventually inform the Element Collage and Style Guide 47
  48. I Still Use Photoshop! 48 ὑ …and Illustrator!

  49. What Comps? How many? • Include smallest mobile view •

    Tablet view to show clients at this stage too variable—don’t want to set expectations yet • Usually the homepage and 2-3 main internal pages, if necessary—also dependent on budget and timeline 49
  50. 50

  51. Do as I say, Not as a I do. 51

    AKA sometimes we still need more static comps
  52. Our Dynamic Deliverables 52

  53. Clients • Element Collage • Live Wires 53 • Front-end

    Templates • Style Guides
  54. 54 Old Element Collage

  55. New Element Collage • Our version of this is starting

    to apply the design concepts into parts of the content • No layouts at this stage • Navigation and specific module styling begins here 55
  56. Live Wires • The wireframes • Already responsive • Customized

    for our own framework • The base of the final development 56
  57. Integrated System Live Wires + Element Collage

  58. In-Context Feedback! • Allows clients to: • see proportions and

    priorities • test in their mobile devices without confusion • focus on content areas than design specifics 58 Easier to Make Changes!
  59. Design in the Browser • The designer (i.e. me) needs

    to have active communication with the developer • The developer needs to make smart design decisions “in between” — then verify with designer • You have to accept imperfections: there is no such thing as pixel perfection 59
  60. Integrated System = Front-end templates

  61. Testing & Q/A • Possibly unpopular opinion: test only approved

    amount of views. 61
  62. 62 Time Is Money Lea Alcantara for Web Afternoon AUG

    28, 2015
  63. Style Guides • When final development is done • Provided

    post-site launch 63
  64. Integrated System = Style Guide

  65. 65 Design systems, not pages! • Initial investment is worth

    it:
 speed and quality of work improves • There is still room for static deliverables • Process should always be flexible and evolve • Do what works for you!
  66. 66 Be Flexible! • Every project and client is different

    • Not all projects need ALL these deliverables • Improve each deliverable on a new project
  67. Questions? • @lealea • @abrightumbrella | abrightumbrella.com • @ctrlclickcast |

    ctrlclickcast.com • dribbble.com/lealea • speakerdeck.com/lealea 67