Design Manual, Design System

Admin Developer Implementation Guide

Project Goals

Develop a document that promotes collaboration between designers and developers that also memorializes common styling guidelines for existing software.

Challenges

  • My first attempt at creating a document for distribution throughout the department.
  • Many different external plugins in use that generate a different look and feel
  • Including all pertinent information needed to scale software and maintain consistency
  • No existing documentation to garner ideas from

Hypothesis

By providing clear and concise direction along with visual aides, this developer implementation guide will increase productivity while preemptively mitigating the risks of aesthetic inconsistencies in the software.

Lo-Fi Wireframes

Color Palette

Primary#fcfcfc
Secondary#e0e2e0
Neutral#f0f2f0
Accent#eb4646
Text#545554
Heading#4b4b4b
Light#ffffff
Color Distribution

Typography

Font Family Roboto

Aa Bb Cc DD Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz 1234567890
Aa Bb Cc DD Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz 1234567890

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus officiis enim dolorem saepe molestias voluptates voluptatem ullam nihil deleniti in.

Hi-Fi Wireframes

Click on thumbnail to view larger image.

Prototype