Design

5 points small. 8 points medium. Break down big.

1. Check Module List for Existing Modules

Before starting a design, reference the module list for any existing module designs that may cause your new design to be deemed redundant or derivative. If your new modules adds more value to the modules list, move to next step.

2. Design First Look

• Wireframe the module using the existing module designs as a reference point for styling. Document what the module can do

• Create a new branch from master branch in Abstract. Rules:

  • DO NOT combine design batches into one branch. One design batch should have its own branch.

  • DO NOT create a sub-branch from an active branch (unless if there is new update(s) needed from the parent branch).

• Create the first look. This is an example design of the modules as it would be used in real life. No LOREM IPSUM, No repeated content. Content should explain the use case of the module. e.g. ("This is a header for the main point", "This is a CTA", etc.)

• Create planned variations (all on one InVision Page) that show planned use cases (how/where its flexible). Use judgement on what you need to display here. e.g. (Hover states, Activate states, Dynamic Section)

• Present this module/batch during our weekly LaunchPad Huddle or on a Design Review call with a developer. Record the group review on loom. Link to the loom video at the top of the InVision page for the module. The idea here is that the team will discuss, iterate, add comments live and finally vote on if we want to pull the new modules back into the pattern library. If the module is approved for development add the name to the module list

3. Handoff

• Document with dev notes the expected functionality

  • For Meeting: Be SUCCINCT in comments. Focus on the task at hand. Should this module be built? Does it need any improvements prior to being built?

• Mobile specific styles... they need to be included in this step as well

• Include a spec that includes the default module options and the classes for color so its can easily be picked up by the dev and driven by base.css