Bike MD Web App Style Guide

GRID SYSTEM

Simplicity everywhere! Since Bike MD starts off as a questionnaire to narrow down the bike and the problem type, the grid system is very simple as the screen changes as the user makes selections.

BikeMDGrid

TYPE SYSTEM

BikeMDFont

COLOR PALETTE

Because we selected some grunge – vintage looking images for backgrounds, I decided that the color palette should stay simple, with 3-4 colors at most. I knew we would need font colors, and highlighting colors.

BikeMDColors-01

LOGO

I tried a few things {as sampled here}, but eventually we narrowed down to this design because it not only feet the theme and brand, but the vertical design also served itself as a perfect mobile-ready image. Where you see charcoal is transparent, so the image goes over the background photos for a truly unique and cool look.

BikeMDLogo-01

IMAGES

Early on during the brainstorming aspect of this project, I started searching for images that would inspire me, {as I always do}, and an image collection appeared on my search that was the beginning of this entire style guide. The images captured exactly what the team discussed, so we purchased them and they became the background images of our pages.

BikeMDBackgroundImages-01.png

ELEMENTS

Primary Navigation links = $white text over image;

Screen Shot 2017-09-02 at 9.58.08 PM

Primary Navigation links: hover = $seafoam solid top border;

Screen Shot 2017-09-02 at 9.58.01 PM

Secondary Navigation links = $white text; header two size;

Screen Shot 2017-09-02 at 10.26.05 PM

Secondary Navigation links:hover = $seafoam text; header two size;

Screen Shot 2017-09-02 at 9.59.17 PM

CTA Buttons = $charcoal background; $white text;

Screen Shot 2017-09-02 at 10.27.37 PM

CTA Buttons:hover = $white background; $charcoal text;

Screen Shot 2017-09-02 at 10.27.47 PM

Selection Buttons = $white background; $charcoal text; Header 2;

Screen Shot 2017-09-02 at 10.27.57 PM.png

Selection Buttons:hover = $charcoal background; $white text; Header 2;

Screen Shot 2017-09-02 at 10.28.08 PM.png

Fun element: I know, I know, this may not be super kosher, but, my team and I thought it would be fun to add an unexpected element to this process, once the client makes the different bike style selections, they are prompted to select the type of problem they are having, we decided to change things up a bit, the circles are white, once you make a selection they turn seafoam, they also spin, also, as you see on the top of the bar, the user can now see what brand, year, and model bike they are researching.

Screen Shot 2017-09-02 at 10.28.25 PM.png

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s