EMS App Style Guide


EMS App Colors

pink color pallet green color pallet blue color pallet

The major colors in this color scheme are triadic colors, meaning that the colors complement each other because there is equal distance between all colors on the color wheel. These 3 specific colors were chosen because they look uplifting and vibrant. They create contrast but still look pleasing to the eye. A triadic color scheme looks harmonious and balanced.

For cohesion, the complementry colors all have the same three first colors, with accents/complements of each color making up the last two.

Fonts

Raleway

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Cabin

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Test Styles

H1: Main page heading

  • Font-weight: 700 (bold)
  • Font-size: 26px
  • Font-family: Raleway

H2: Subheading

  1. Font-weight: 500
  2. Font-size: 18px
  3. Font-family: Raleway

P: Paragraph text

  1. Font-weight: 400
  2. Font-size: 15px
  3. Font-family: Cabin

Wireframes & Prototypes


Wireframe and Prototype 1

This first wireframe bluprint for the webpage is a basic/simple type utilizing an image for the slogan of the product.

wireframe 1

This prototype login screen utilizes an image for the slogan of the product.

prototype 1

I don't know anything about this product, so I guessed on the inspiriation of the picture.

prototype 1

The image for this prototype was taken from the EMS website.

prototype 1

These images are together shown to show the color scheme of all three products.
If we come up with a 4th product, we could use a yellow theme matching this color scheme (a tetradic color scheme - again equally positioned around the color wheel as to complement each other.)

prototype 2-2 wireframe 2-3 prototype 2-4

Wireframes and Prototypes 2

This second wireframe bluprint for the webpage is more elaborate and eye catching.
The top banner (including the product name and slogan) would carry over into the webpages as you log in, although maybe a bit smaller.

wireframe 2-1

This login screen image was inspired by the ripples in EMS's logo.

prototype 2-2

Again, I don't know anything about this product, so I didn't have an inspiriation to go with.
This login screen image was inspired by the ripples in EMS's log and has cohesion with Performance Plus.

prototype 2-4

This login screen image was inspired EMS's website for this product.
If continuity is wanted, could use a redish image like the one above with the ripples.

wireframe 2-3

These images are together shown to show the color scheme of all three products.
If we come up with a 4th product, we could use a yellow theme matching this color scheme (a tetradic color scheme - again equally positioned around the color wheel as to complement each other.)

prototype 2-2 wireframe 2-3 prototype 2-4

Imagine the Future

wireframe 1