Skip to main content
Clarity 2016

Logo of Clarity 2016 Clarity 2016

31st March to 1st April 2016

San Francisco, United States

Part of the Clarity series
Alamo Drafthouse New Mission »

Theatre 1

Sessions in this room

  1. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Welcome

    Welcome

    Hello from the organizer (Jina Anne), along with logistical announcements, and an introduction to the emcee.

    Emcee (Chris Coyier) will give some insight and thoughts for the day, before introducing the first speaker.

  2. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for The Thing is Design Systems. The Time is Now.

    The Thing is Design Systems. The Time is Now.

    Modularity has been around for a long time now; concepts like object-oriented programming predate the Web by a long shot. So why the sudden interest in pattern libraries and design systems on the Web? We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices, browsers, screen sizes, network connections, locales, and environments. That’s a tall order in and of itself, but once you factor in team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. Style guides and design systems provide solid ground for us to stand on as we tackle this increasingly-diverse Web landscape. This session will discuss considerations and best practices for creating and maintaining effective interface design systems.

  3. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Beyond the Toolkit: Spreading a System Across People & Products

    Beyond the Toolkit: Spreading a System Across People & Products

    A design system is made up of parts: visual style, UI components, code, editorial, and often more. We know how to design, build, deliver them is like any other digital product development process. And there’s the rub: your system is a product in and of itself, applied to an enterprise's ecosystem of other products built by autonomous teams of designers and developers.

    Your strategy needs answers to “What products will use it, when and to what extent?” “Who’s our audience?” “Who participates and contributes?” “What groups must we align with?” “Who wants it, and — really — who doesn’t?”

    We’ll explore ways to identify and prioritize how to engage your enterprise’s people and products as you spread and sustain a system over time.

  4. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Crawl, Walk, Run — the Evolution of a Design System

    Crawl, Walk, Run — the Evolution of a Design System

    If change isn’t built into the process, a “Living Design System” can’t evolve. In this talk we'll discuss the lessons learned, and the challenges faced, as our system went from crawling to running. Refactoring, versioning, and deprecation are but a few of the growing pains we've experienced on our journey to build a stable but incredibly flexible Design System.

  5. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Being Human, Being Slack

    Being Human, Being Slack

    When your brand is known for having a very human voice — like, say, talking to a real, consistently toned voice — how do you keep that consistent as you grow a team (and grow it fast)? How do you make sure everything said in the voice sounds convincingly like The Voice, while allowing people to bring their talents and strength to the work — and not just sounding like a hollow impersonation? How do you create a voice that people can share?

  6. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Welcome

    Welcome

    Hello from the organizer (Jina Anne), along with logistical announcements, and an introduction to the emcee.

    Emcee (Chris Coyier) will give some insight and thoughts for the day, before introducing the first speaker.

  7. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Baking Accessibility In

    Baking Accessibility In

    A quick web search can bring up thousands of code samples for any type of component one could imagine building, but 90% of that code isn’t accessible, unintentionally leaving huge audiences of users behind. You have the power to change this! As the people creating style guides and component systems, you’re uniquely positioned to get accessibility right the first time and spread best practices to everyone who uses your code. In this talk, you’ll learn the key ingredients for baking accessibility into your design system, including mindful color palettes, semantic HTML, and a dash of ARIA. Let’s make the web better for everyone, one style guide at a time!

  8. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Deconstructing Web Systems; or, a Pattern Language for Web Development

    Deconstructing Web Systems; or, a Pattern Language for Web Development

    A pattern language is a method of describing good design practices within a field of expertise. This talk is an exercise to coalesce a pattern language for web development, in particular the discipline of front-end web design and development. It goes beyond the elements that comprise a design system or style guide focusing on the larger system of practices that contribute to delightful experiences for those that craft and code the experiences and interact with our web applications.

    This talk is meant to spark a conversation. It is by no means a definite list of all the patterns, that can only be accomplished collectively.

  9. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Turning the Ship: Living Design Systems in the Federal Government

    Turning the Ship: Living Design Systems in the Federal Government

    The federal government, bound by centuries of history and numerous regulations, has historically built online experiences that reflect bureaucracy rather than human needs. Government websites that don't meet user needs produce poor outcomes and worse opinions about the government. We’re doing something about this. During the summer of 2015, a team came together to create the Draft US Web Design Standards: open source UI components and a visual style guide to create consistent, cohesive, and easy-to-use user experiences across federal government websites.

    We’ll explore:

    • How to create a style guide in a highly complex, old system with multiple stakeholders and different end users
    • How to make easy-to-use tools that solve real user needs
    • How we're creating a nexus for industry best practices and collaboration across government agencies and with the public

  10. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Closing Commentary

    Closing Commentary

    Emcee (Chris Coyier) will wrap the day with some insight and thoughts from the day.

    Goodbye from the organizer (Jina Anne), along with logistical announcements, and details on evening events.

  11. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Code Patterns for Pattern-Making

    Code Patterns for Pattern-Making

    Style Guides and Pattern Libraries are great tools for documenting the relationships between code and design, but beautiful docs and consistent UI are only half the battle. Somewhere, behind the scenes, those patterns have to live in our code, and hopefully make life easier for developers. We can go beyond “living” style guides to find tools that encourage and document pattern-making from the ground up, across projects, without adding developer overhead. From Sass maps and Jinja macros, to front-end architecture and style-guide generators — let’s talk about the code patterns that make our UI patterns possible.

    Slides: https://oddbooksapp.com/book/pattern-making

  12. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Communicating Animation

    Communicating Animation

    Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate.

    Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means:

    • creating custom easings that reinforce branding and physics
    • choreographing scalable timing values
    • creating a vocabulary of reusable components
    • combining those components into unique yet universal animation patterns.

    Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel.

    Slides: https://www.slideshare.net/CrowChick/communicating-animation-slides

  13. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Closing Commentary

    Closing Commentary

    Emcee (Chris Coyier) will wrap the day with some insight and thoughts from the day.

    Goodbye from the organizer (Jina Anne), along with logistical announcements, and details on evening events.

  14. in Theatre 1 (Alamo Drafthouse New Mission)

    Session image for Building Empowering Style Guides with Practical Research

    Building Empowering Style Guides with Practical Research

    As builders and makers in tech, we strive to create useful, empowering products for our users. A style guide is no different. Done well, it’s a product that all of its users — e.g. developers, designers, customers, partners, and more — find useful and empowering to use. Where should a team start? It begins with understanding your users and the different things they need from style guides. Whether your team is small or large, we’ll share practical research methods for gathering and translating these different needs into building useful and empowering style guides.

    Slides: https://www.slideshare.net/ddonnachan/building-empowering-style-guides-with-practical-research