Matthew Lee Design & Development

About & Contact

American Association for the Advancement of Science

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.

American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science

At the same time, our graphic designers were working on top of the wireframes, establishing a graphic language and visual identity.

American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science

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.

American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science

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.

American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science

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.

American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science American Association for the Advancement of Science

Produced at C&G Partners; art direction by Maya Kopytman

Visual design and identity by Wael Morocos.

American Association for the Advancement of Science

HTML Styleguide

Center for Curatorial Leadership

Website

Local Initiatives Support Corporation

Online Annual Report

National Fish and Wildlife Foundation

Online Annual Report

NYC Office of Emergency Management

Intranet and HTML Styleguide

Roanoke College

Website

Spectra

Website

Strada

Website