Brand. Design principles. Brand. Logo. Typography. Color. Photography. UI elements. Layout elements. Grid system

Transcription

1 Brand Dealer Fox makes car searching and shopping an easier and more personal experience. It should be clean and organized. Part of Dealer Fox s users are elder GMs at dealships. Considering their needs, everything should be practical and clear, element size should serve better readability. Design principles Green means go Customers and dealers need to quickly understand information to efficiently achieve their goals. Important information such as visiting dealerships and car comparison should be indicated by obvious CTAs and clear icons. Your ride, your way Anyone who can afford to purchase a new car should feel comfortable visiting Dealer Fox, no matter what price range they are looking for. should feature diverse vehicles at different price points to show users that they can always find what they are looking for. Know the route Users should feel confident and knowledgeable in their purchase. Dealer Fox uses practical typography and a professional color palette to instill trust in the user. This trust empowers them to come back to the Dealer Fox site and to recommend it to others.

2 Do s Without text With text Dont s dealerfox Don t stretch Don t use other fonts Don t change colors

3 Dealer Fox serves both customers and dealerships from 2-6. The typography should reflect the fun spirit and also keep readability. Dealer Fox uses only one typeface: Proxima Nova. 3 weights and different sizes are used to create hierarchy and stay consistent and clean. Display 70px Semibold Car match Header 1 Regular Which one fits you? Header 2 36px Regular/bold Adventurous Subheader 1 22px Semibold/bold 2017 Nissan Sentra Tab 1 Regular/bold Performance Body Regular Feels good to drive and has a great set of features. Footer 14px Regular/bold Car reviews Hover popup 12px Regular A car loan APR is a measure of the full amount of interest you will pay on your financing, over a one year term. Header 20px bold The car that matches you Subheader Semibold We found 30 cars for you Body 14px Regular/bold Great car! Captain 12px Regular/bold Suitable for a family of 4 Great gas mile for long trips

4 Dealer Fox uses one primary color to mostly indicate tabs and filters. The accent color is mostly used for CTAs and price. Background color shade is used for any section that needs a darker background. Primary color 389A84 6 / 14 / / 0 / 14 / 40 Shade: 2F806E Tint: 48CA9 Accent color F / 12 / 32 0 / 39 / 87 / 3 Shade: D28019 Tint: 47ECC7 Background color FFFFFF 2 / 2 / 2 0 / 0 / 0 / 0 Shade: F6F7F9 Text color 4A4A4A 0 / 0 / 29 0 / 0 / 0 / 71 Tint: 9B9B9B Tint:

5 Dealer Fox makes car shopping a personal and easy experience. The photography should make users feel connected and personal. Here are some examples: Hero image example: Combining open road with car makes a good balance between romantic feeling and practical functionality. Onboard quiz picture example: Onboard pictures should include both cars and people to create a more involving and connecting feeling for users. VDP-compare car picture example: Car pictures in VDP compare chart should be of the same size. The pictures should be side view. Background should be transparent.

6 desktop Call to action buttons Primary button! Radius: 2 px Hover/active Secondary button Reschedule Hover/active Tab px PRICE PERFORMANCE FEATURES SAFETY COMPARE 84px Text button Hyundai Sonata See more reviews Less detail More detail Filter 30 + Make 60px Make 20px 10px 20px Category/inactive Category/active Certain feature 0px Certain feature 60px Value/inactive 20px Value/active / border: 2px Sliding range selector Label Floating action buttons 70px 70px Drop shadow: x=0, y=2, blur=4 Active Input fields Text input Loan amount 10px Loan amount $10, px Empty Filled Dropdown APR 10px 220px Icons

7 Call to action buttons Primary button Tab 6px 2px Price Performance Feature Safety Compare 6px " 6px Begin Radius: 2 px 36px Begin 320px Active Filter 30 Type + 36px Make Category/inactive Category/active Make Make Value/inactive Value/active 1k / border: 2px 2 0k px 4px Sliding range selector Label Floating action buttons 6px 6px Drop shadow: x=0, y=2, blur=4 Active

8 Brand Cards 1006px 2px 2017 Nissan Sentra 36px $16, /37 Miles per gallon 0px 89 Miles used 0px Entertainment center Why this fits you 379px Suitable for a family of 4 Great gas mile for long trips High safety score Save energy 24px px 237px 10px $16, Nissan Sentra 10px Suitable for a family of 4 Great gas mile for long trips Pop-up 302px Loan amount $10,000 Monthly payment APR What s APR? 24px % Trade in / cash $4,000 Schedule a test drive 24px Calculate 20px How it works? 20px Save to proposal Comparison chart Nissan Sentra Honda Civic Toyota Camry Hyundai Sonata Price $16,990 $18,00 $23070 $ px Seats 64px MPG (City/Highway) 29/37 2/36 27/34 24/29 80px Safety 4 64px Transmission Manual Auto Auto Auto 64px

9 134px Browse cars My page FAQ Contact us We found 12 cars for you Year k-0k Honda Hyundai Nissan Toyota Nissan Sentra $16,990+ Price 29/37 Miles per gallon 89 Miles used Entertainment center 1k 0k Why this fits you + Make Suitable for a family of 4 Great gas mile for long trips High safety score Save energy + Feature + " # Our Company Car match Browse selection Car Research Car Reviews Expert Advice Follow Us Toyota Spec & Reviews Site map Car videos Pricing $ % We found 30 cars for you 20px 4px k-0k Honda Hyundai 28 $16, Nissan Sentra Suitable for a family of 4 Great gas mile for long trips $18, Honda Civic Suitable for a family of 4 Great gas mile for long trips $23, Toyota Camery Suitable for a family of 4 Great gas mile for long trips