Design Strategy and UI UX for Ride Share App

Page 1

BRAND GUIDE


OUR LOGO

Precious and delightful!


ABOUT Our logo is aimed at conveying a feeling of delight and friendliness as a reflection of some of our core values. The visual integration of a car with P summarizes our product. So, if you saw the car and smiled, we did too! The PeepsRide logo consists of a logotype and a symbol. These may be used in isolation, depending on the context of use. These may never be unsupported by the ÂŽ mark.


LOGO PRIMARY & PREFERRED LOGO Units The PeepsRide logo comes in multiple lock up units and colours that help in showcasing the logo based on context as needed. The primary purpose of secondary logos is extension of the brand into other apps, like driver app and organization app. These are shown in the coming pages of this document. However, the primary and preferred logo lock up and colour is shown on this page.

Primary Logo

Primary Symbol


LOGO SECONDARY APPLICATIONS Primary Logo

PEEPSPURPLE For PeepsRide app

PEEPSRED For Driver app

PEEPSTEAL For Org app


LOGOTYPE Clear Space The PeepsRide logo must always have a minimum clear space on all sides, equal to the x-height of the logotype. No other elements may appear inside this clear space.

Minimum Acceptable Usage The minimum width of the logo for print is 25 mm. For digital use, the logo may not be smaller than 120px.

x-height

25 mm

120 px


SYMBOL Clear Space The PeepsRide symbol must always have at least a third of the symbol’s height of clear space around it. It may be accompanied by a bounding box, based on context.

x x x x.5

x.5


DOs & DON’Ts The PeepsRide logo, among other values, stands for trust and safety. To ensure that the brand is perceived the same way, it must be ensured that it is used only in certain ways. Here are a few do’s and don’ts for ensuring consistency across the brand.

DOs

The logo may only be used with the recommended gradients and lockup units. The logo must always have sufficient contrast when being used on a background.

The logo and illustrations must always prioritize PeepsPurple and keep it as the dominant colour.

When being used in black and white, the logo and symbol’s dropshadow may not be used.


DOs & DON’Ts DON’Ts

Never use gradients over gradients

Never interchange the lockups of the logotype and symbol

Never use the logo and symbol in two different colours

Never use the logo in a non-palette colour

Never disproportionately scale the logo

Never change the orientation of the symbol


TYPOGRAPHY Joyful and clean!


FILSON PRO Filson Pro - Book

Filson Pro -Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

0123456789

Filson Pro - Regular

Filson Pro -Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

0123456789

For all digital purposes, all/any font weights of Roboto may be used.


COLOUR PALETTE Bright, happy and inviting!


ABOUT Our colours are intended to invoke among our users, the feeling of trust and safety. They convey our essence. We are as youthful as we are trustworthy - hat’s what our gradient stands for, and is hence a critical part of our logo and identity.

Trustworthy

Youthful 135Ëš

Vibrant

Safe

Calm


#212C58

#5941A9

#C53D39

#C53D39

#C53D39

R G B

R G B

R G B

R G B

R G B

33 44 88

C 98 M 90 Y 36 K 30

89 65 169

C 78 M 86 Y 0 K 0

197 61 57

C 16 M 90 Y 83 K 5

Shades, tints and opacity of these colours may be used in illustrations and icons to create vibrancy and reflect the essence of PeepsRide. The gradient may be used over images to create a interesting appeal.

197 61 57

C 16 M 90 Y 83 K 5

197 61 57

C 16 M 90 Y 83 K 5


ILLUSTRATION STYLE Quirky and modern!


ILLUSTRATIONS Peepsride illustrations must always have a human element to them, to connect better with out users and have a touch of fun and playfulness! To create intrigue and depth and retain our primary colours, the PeepsPurple may dominate the illustrations.





ICONS Peepsride icons are used intermittently across the app, to bring in delight and add a pop of colour! The icons must never use gradients; however two-tone colours may be used to create depth. The icons must also be inclusive and diverse. As such, the human figures are minimal. Line icons must be used in single colour only.



PHOTOGRAPHY STYLE Inclusive, diverse and pleasant


ABOUT Our photos must be welcoming and inclusive and must reflect our essence as a brand. There must always be a human element in our photos. The people shown in photos must have a natural look and not be looking directly into the camera. Following are a few examples of how we want to represent ourselves through photographs.





THANK YOU And happy journey!


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.