Technologies used:
Technologies used:
GRID SYSTEM
TYPE SYSTEM
COLOR PALETTE
ELEMENTS
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.
TYPE SYSTEM
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.
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.
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.
ELEMENTS
Primary Navigation links = $white text over image;
Primary Navigation links: hover = $seafoam solid top border;
Secondary Navigation links = $white text; header two size;
Secondary Navigation links:hover = $seafoam text; header two size;
CTA Buttons = $charcoal background; $white text;
CTA Buttons:hover = $white background; $charcoal text;
Selection Buttons = $white background; $charcoal text; Header 2;
Selection Buttons:hover = $charcoal background; $white text; Header 2;
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.
ELOISA DOCTON - Blog 