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. 1.

    Some rights reserved Beyond Static: The New Design System Lea

    Alcantara for Web Afternoon AUG 28, 2015
  2. 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. 4.
  4. 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
  5. 9.

    9

  6. 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
  7. 15.

    15

  8. 16.

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

    any interaction? • Viewport changes? • Lots of communication issues abound
  9. 19.

    19

  10. 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
  11. 21.

    21

  12. 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
  13. 23.

    23

  14. 24.

    24

  15. 25.

    25

  16. 26.

    26

  17. 27.

    27

  18. 29.

    29

  19. 30.

    30

  20. 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?
  21. 45.

    Internally • Rough initial wireframes sketches • Paper & Photoshop

    • Maybe a few tablet comps of key pages 45
  22. 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
  23. 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
  24. 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
  25. 50.

    50

  26. 51.

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

    AKA sometimes we still need more static comps
  27. 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
  28. 56.

    Live Wires • The wireframes • Already responsive • Customized

    for our own framework • The base of the final development 56
  29. 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!
  30. 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
  31. 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!
  32. 66.

    66 Be Flexible! • Every project and client is different

    • Not all projects need ALL these deliverables • Improve each deliverable on a new project
  33. 67.

    Questions? • @lealea • @abrightumbrella | abrightumbrella.com • @ctrlclickcast |

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