Why do it:

It brings consistency to both the visual design and will aid in making a style guide or pattern library.

When to do it:

After visual design has been started and the designer feels comfortable with moving towards implementation. This can also be done once something is implemented, if you are looking to refactor and clean up design elements as well as the CSS and markup.

Who’s involved:

Designers, Stakeholders and front-end engineers.

Time estimate

Medium (3- 6 hours)

One way to do it:

1. Start with a page/screen/view of the site or application or with a print out of the visual design. Begin pulling out visual elements to deconstruct the layout. If using paper printouts, cut them up into elements and then scan and save them in a shared online space. If digitally, screenshot them and put them in a collaborative space like Google Drive, pasting images into a document.

2. Arrange like elements together, so that you have all the buttons together, all the headings, all the sidebar boxes, etc.

3. Work together as a team on a chat, video chat and/or screensharing application (Slack, Google Hangouts, Whereby etc) This could take a good chunk of time, so plan to take breaks. Are the right things grouped together? Should you break some things apart into their own categories? Do people feel like it’s making sense?

4. See if there are items that could use the same design for consistency and usability. Examples of this could be if you have 12 headings but some of them are very similar in design, such as only a few pixels difference in font size or margins or padding, could they be consolidated into one style? What would you name the various modules?

Learn more:

• Brad Frost’s Interface Inventory
• From Pages to Patterns
• Language of Modular Design
• Creating a Type Style Guide