Launch site: AAAS Styleguide
The American Association for the Advancement of Science is building a platform for scientists all over the world. Like other social networks, the end product will be a web-based application with dozens of screens, states, and interactions that all have to be part of the same design system. AAAS needed design deliverables that would be more effective and extensible than just mockups of a few example screens.
I decided to approach the project as a front-end styleguide that would give their programmers all the components needed to build the final application. The guide uses Pattern Lab, a system that allows you to build complex sites by starting with small patterns and gradually building them into progressively larger pieces.
Our team’s UX designers began with wireframes, which demonstrated content in different sections of the site and mapped out the user’s flow through specific interactions.
At the same time, our graphic designers were working on top of the wireframes, establishing a graphic language and visual identity.
At this point, I began to break apart our designs, looking for modular components. For example, a sidebar block is made up of a heading followed by profile units. The profiles are made up of an avatar and profile text, which is made up of a user name followed by group and occupation info.
This kind of granularity is at the heart of using Pattern Lab for styleguide-based development. The approach is very well suited for complex design systems, where traditional deliverables like static page comps are difficult to make and less helpful to developers.
Each element is responsive on its own as well as in the context of larger units, all the way up to the final page design. The end product is a modular guide that allows you to create full page templates in a matter of minutes, simply by piecing together smaller pre-defined components.
Produced at C&G Partners; art direction by Maya Kopytman
Visual design and identity by Wael Morocos.