$30 off During Our Annual Pro Sale. View Details »

Beyond Static: The New Design System

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.

Lea Alcantara

April 16, 2015
Tweet

More Decks by Lea Alcantara

Other Decks in Design

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