Whew, that was some work.

BikeBook Website - Moonrise Kingdom Inspired - image 1 - student project

Taking the work I produced in Geri's first class, I added color to the BikeBook website design using my Wes Anderson Moonrise Kingdom inspired palette. Or at least, that was the plan.

The Colors and Logos

Interestingly, the palette and logo designed in the first class didn’t exactly work for me in blue and yellow. I made a quick decision to migrate to green as the primary logo color as it gave a more gender neutral feel and has an element of nature to it. In addition to the primary color change, I also needed to create additional tints and shades to use in the design.

BikeBook Website - Moonrise Kingdom Inspired - image 2 - student project

The bikebook Original Palette Concept

BikeBook Website - Moonrise Kingdom Inspired - image 3 - student project

The bikebook Final Palette

BikeBook Website - Moonrise Kingdom Inspired - image 4 - student project

The bikebook Original Logo

BikeBook Website - Moonrise Kingdom Inspired - image 5 - student project

The bikebook Final Logo

The bikebook Website

The 60/30/10 rule was used and this concept turned out to be very helpful. This rule eliminates the need to say that a site “feels right”. Even then, the colors selected for 60, 30 and 10 percent need to work. What I thought would work, didn't work for me when I viewed it on screen.

BikeBook Website - Moonrise Kingdom Inspired - image 6 - student project

A bikebook Website Early Iteration

And the final result...

BikeBook Website - Moonrise Kingdom Inspired - image 7 - student project

The bikebook Final Website

Takeaways

Here are a few things I learned from this class:

Primary Color: I changed the primary color during implementation.
Color Palette: I had to add more tints and shades of my colors to use effectively on the website.
Color Hunch: I wanted to add more of the red/mauve color from my palette but found it didn't give me the right feeling. It might have given it a love/danger element I didn't want.
Call To Action: I am a fan of green call to action (CTA) buttons but in this case I couldn't use this idea with all the green being used.
Subtlety: There are lots of elements that you can add a touch of color to. And if you use a dark shade of your primary color, you can use the dark color throughout your site for a nice subtle touch.
Color Use Ratio: The 60/30/10 rule is rad and I will forever think of Geri when I use this. So thankful to have learned this.
Contrast: Design your websites in grayscale to establish high-contrast as it will help you with applying color.
Tools: There are handy color accessibility tools available for free. ColorOracle is fantastic.
Presentation: Project presentation can take time, but it is a good exercise and can be fun if you make it so.
Testing: My design lacked contrast in some areas and Lea Verou’s Contrast Ratio tool pointed this out. Checking your design for color accessibility not only improves the experience for color impaired, it improves the user experience for all.

Feedback

I'm definitely interested in hearing any feedback. How does the site make you feel? Would you trust this site enough to make a reservation? Thanks for your time!

UPDATE: Here is the Bikebook Basic Color Guide that the final lesson requested.

BikeBook Website - Moonrise Kingdom Inspired - image 8 - student project

Jason Founts

2

8