UX/UI

Technologies Used

• reactstrap
• React Stars
• React Burger Menu

Why the App looks like it does:

Blue and white is a standard scheme you see across the web nowadays, from Facebook to Twitter, blue and white is a color that works. It works because blue evokes calm, credibility, neatness, while white compliments it perfectly. While researching different color schemes, we came to our decision based on the choice to go with a Flat design, meaning very subtle, minimal 3D effects, no borders, clean layout. Flat design is also very popular these days. Our app also utilizes Minimalist design. Minimalism can be most easily defined as stripped to it's essentials. We originally choose a more robust flat design with use of graphics and icons, but the UI quickly became cluttered, and since minimalism is inherent with Flat design, it seemed like a natural pivot.

http://blog.visme.co/website-color-schemes/ (#42)

• Color Scheme:

  • 

  • #2F77F3 / rgb(47,119,243) - darker blue

  • https://www.color-hex.com/color/2f77f3

    • This color is used when a darker shade of blue is neccessary to make something stand out against a white background, like fonts.

  • 

  • #77A6F7 / rgb(119,166,247) - light blue

  • https://www.color-hex.com/color/77a6f7

    • This, in combination with white, will be our 'dominant color', used for backgrounds of the search bar, nav bar, and other backgrounds. Blue evokes trust, security, and calmness, which are feelings we want our Users to feel when reading reviews.

  • 

  • #FFFFFF / rgb(255, 255, 255) - white

  • https://www.color-hex.com/color/ffffff

    • White will be our other 'dominant color', being the default background for the majority of the app.

  • 

  • #D3E3FC / rgb(211,227,252) - light blue/gray

  • https://www.color-hex.com/color/d3e3fc

    • This color should be used for Modal Buttons, and perhaps borders as well. This complements both Blue and White.

  • 

  • #B4B6BA / rgb(180,182,186) - Gray

  • https://www.color-hex.com/color/b4b6ba

    • This is a darker shade of gray to be used for contrasting the lighter elements.

  • 

  • #00887A / rgb(0,136,122)- turquoise

  • https://www.color-hex.com/color/00887a

    • This color will be our main go-to for Buttons and Components that need to "pop" or have attention drawn to it without standing out in 'loud' way.

Fonts:

- Julius Sans One - headers
- Montserrat - body

Image Credits:

- default car image by Rubén Oro