You’re viewing an archive.

Inclusion. Empathy. Technology. Creativity. Collaboration.

March 31-April 1, 2016 in San Francisco, California

Clarity is a design systems conference focused on how we work together. We provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. Diverse perspectives for design, development, and product unite so more people can be a part of the conversation. At Clarity, we elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration.

People

Speakers

Schedule

Doors open at 8 am at Alamo Drafthouse New Mission.
9:00 am
9:30 am
10:30 am
11:30 am
12:30 pm
1:30 pm
2:30 pm
3:30 pm
4:30 pm
6:00 pm

Thu, Mar 31

Opening Remarks
Opening Remarks
9:00 am
Alamo Drafthouse New Mission
Jina Anne
Chris Coyier
The Thing is Design Systems. The Time is Now.
The Thing is Design Systems. The Time is Now.
9:30 am
Alamo Drafthouse New Mission
Brad Frost

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.

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.

Building Empowering Style Guides with Practical Research
Building Empowering Style Guides with Practical Research
10:30 am
Alamo Drafthouse New Mission
Isaak Hayes

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.

Note: the second speaker has been removed from the website by their request.

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.

Note: the second speaker has been removed from the website by their request.

Beyond the Toolkit: Spreading a System Across People & Products
Beyond the Toolkit: Spreading a System Across People & Products
11:30 am
Alamo Drafthouse New Mission
Nathan Curtis

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 whatextent?” “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.

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 whatextent?” “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.

Lunch
Lunch
12:30 pm

Catered.

Catered.

Code Patterns for Pattern-Making
Code Patterns for Pattern-Making
1:30 pm
Alamo Drafthouse New Mission
Miriam Suzanne

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.

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.

Crawl, Walk, Run — The Evolution of a Design System
Crawl, Walk, Run — The Evolution of a Design System
2:30 pm
Alamo Drafthouse New Mission
Stephanie Rewis
Brandon Ferrua

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.

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.

Being Human, Being Slack
Being Human, Being Slack
3:30 pm
Alamo Drafthouse New Mission
Anna Pickard

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?

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?

Closing Remarks
Closing Remarks
4:30 pm
Alamo Drafthouse New Mission
Chris Coyier
Jina Anne
Happy Hour
Happy Hour
6:00 pm
Eventbrite

Separate RSVP required (invitations will be emailed).

Separate RSVP required (invitations will be emailed).

Fri, Apr 1

Opening Remarks
Opening Remarks
9:00 am
Alamo Drafthouse New Mission
Jina Anne
Chris Coyier
Communicating Animation
Communicating Animation
9:30 am
Alamo Drafthouse New Mission
Rachel Nabors

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.

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.

Baking Accessibility In
Baking Accessibility In
10:30 am
Alamo Drafthouse New Mission
Cordelia McGee-Tubb

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!

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!

Living Systems: Brand in the Context of People’s Lives
Living Systems: Brand in the Context of People’s Lives
11:30 am
Alamo Drafthouse New Mission
Jeremy Perez-Cruz

Some insight into the successes and failures of brand design and it’s relationship to being human.

Some insight into the successes and failures of brand design and it’s relationship to being human.

Lunch
Lunch
12:30 pm

Catered.

Catered.

Deconstructing Web Systems; or, a Pattern Language for Web Development
Deconstructing Web Systems; or, a Pattern Language for Web Development
1:30 pm
Alamo Drafthouse New Mission
Claudina Sarahe

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.

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.

Turning the Ship: Living Design Systems in the Federal Government
Turning the Ship: Living Design Systems in the Federal Government
2:30 pm
Alamo Drafthouse New Mission
Maya Benari

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

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
Designing for Earthlings & Astronauts
Designing for Earthlings & Astronauts
3:30 pm
Alamo Drafthouse New Mission
Richard Danne

Evolution of the NASA redesign with interesting details and anecdotes from the 1975 Program. Also the successful crowdfunding Reissue of our Design Manual in 2016.

Evolution of the NASA redesign with interesting details and anecdotes from the 1975 Program. Also the successful crowdfunding Reissue of our Design Manual in 2016.

Closing Remarks
Closing Remarks
4:30 pm
Alamo Drafthouse New Mission
Chris Coyier
Jina Anne
After Party
After Party
6:00 pm
General Assembly San Francisco

With lightning talks. Separate RSVP required (invitations will be emailed).

With lightning talks. Separate RSVP required (invitations will be emailed).

Venues

Diamond

Salesforce

Platinum

Dropbox

Silver

Adobe
Eventbrite
Shopify
SitePoint

Chrome

Brand.AI
GitHub
Yelp

In-Kind

A Book Apart
Authentic Jobs
CodePen
Dribbble
Fair Play
General Assembly
Rosenfeld Media
Smashing Magazine
Sushi & Robots