Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Lea Alcantara

Other Decks in Design


  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. 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
  4. 9

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

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

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

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

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

  13. 24

  14. 25

  15. 26

  16. 27

  17. 29

  18. 30

  19. 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?
  20. Internally • Rough initial wireframes sketches • Paper & Photoshop

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

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

    AKA sometimes we still need more static comps
  26. 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
  27. Live Wires • The wireframes • Already responsive • Customized

    for our own framework • The base of the final development 56
  28. 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!
  29. 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
  30. 65 Design systems, not pages! • Initial investment is worth

 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!
  31. 66 Be Flexible! • Every project and client is different

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

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