Sprocket Rocket
  • Sprocket Rocket Design System
  • Initial Setup
    • Setup HubL Local Server
    • Setup SR App Locally
    • Clone LaunchPad Starter
  • Create a New Module
    • Design
    • Code
    • Implementation
    • Create a Pull Request
    • Fields JSON
  • Code Patterns
    • Design Settings
    • Headings
    • Responsive Images
    • Implementing Forms
    • Typography
    • CTA/Button
    • Spacers
  • PR Review
    • Design / Code Review
    • Implementation Review
  • Handoff Relay Checklist
    • Client Request - Handoff
    • Page/Template Design - Handoff
    • Module Design - Handoff
    • Page/Template Development - Handoff
    • Module Development - Handoff
    • Review & Delivery - Handoff
  • Guides and Tutorials
    • Code Snippets
    • Lazy Loading
    • How to setup the blog subscription notification emails
    • 404 Error Tracking Event with Google Analytics and Google Tag Manager
    • How to setup a form to be used with SR Conversational Form 01
    • Upgrading Bootstrap to Latest Version
  • HS Page Launch (QC)
  • SR Agency Website Review Checklist (QC)
Powered by GitBook
On this page
  • 1. Check Module List for Existing Modules
  • 2. Design First Look
  • 3. Handoff
  1. Create a New Module

Design

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

PreviousCreate a New ModuleNextCode

Last updated 6 years ago

1. Check Module List for Existing Modules

Before starting a design, for any 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 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

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

reference the module list
existing module designs
existing module designs
the module list