Style guide
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
WISEASY<br />
Brand Guidelines<br />
May 2019
WISEASY
Our brand purpose<br />
‘Wiseasy’ aims to provide third world<br />
countries with Online education. There are<br />
no age restrictions and a large variety of<br />
subjects. Wiseasy will take the money it earns<br />
and use it to fund free Internet access where<br />
needed. This provides those who want to<br />
learn Online the opportunity to do so.
CONTENTS<br />
Logo concept....................................................................................1<br />
Minimum size....................................................................................2<br />
Clearance space...............................................................................3<br />
Unacceptable usage.........................................................................4<br />
Landing page....................................................................................5<br />
Mock-up........................................................................................... 6-7<br />
Typography.......................................................................................8<br />
Colour Palette...................................................................................9<br />
Icons.................................................................................................10<br />
Interaction........................................................................................11
LOGO CONCEPT<br />
WISEASY<br />
Version 1<br />
Process<br />
The logo represents a flying jet that is made up of three<br />
icons of people. It symbolises how the people that pay<br />
for our courses fund world wide Internet access and<br />
education. The font Chakra Petch SemiBold has a<br />
boxy and robotic appeal to it, which goes well together<br />
with my brand mark. The colour blue is a calming and<br />
trustworthy colour representing friendliness and trust.<br />
WISEASY<br />
Version 2<br />
1
MINIMUM SIZE<br />
Aa<br />
Chakra Petch<br />
SemiBold<br />
For legibility, the size of the logo should<br />
not be smaller than 55 mm wide for logo<br />
version 1 and 30 mm wide for version 2.<br />
WISEASY<br />
55 mm<br />
Y<br />
WISEASY<br />
30 mm<br />
2
CLEARANCE SPACE<br />
WISEASY<br />
W<br />
CYMK 54 31 0 22<br />
RGB 91 137 198<br />
#5B89C6<br />
CYMK 36 21 0 17<br />
RGB 136 167 212<br />
#88A7D4<br />
Always leave space within the clearance<br />
zone as illustrated to avoid crowdedness.<br />
The size of the clearance space is measured<br />
by the ‘W’ from the logo and should be the<br />
same proportion as the logo gets resized.<br />
WISEASY<br />
W<br />
3
UNACCEPTABLE USAGE<br />
PLEASE DO NOT:<br />
a.<br />
WISEASY<br />
e.<br />
WISEASY<br />
a. Rotate logo<br />
b. Change typeface<br />
c. Change colour<br />
b.<br />
WISEASY<br />
f.<br />
WISEASY<br />
d. Resize elements<br />
e. Squash logo<br />
f. Change element’s position<br />
g. Add shadow<br />
c.<br />
d.<br />
WISEASY<br />
g.<br />
h.<br />
WISEASY<br />
h. Place logo with a white box on<br />
an image<br />
WISEASY<br />
WISEASY<br />
4
WISEASY<br />
Lorem ipsum<br />
dolor sit amet,<br />
consectetur<br />
adipiscing elit.<br />
Aliquam consectetur<br />
elit tortor.<br />
Scroll down<br />
Lorem ipsum dolor<br />
learn more<br />
Create your<br />
account<br />
Courses Teachers Work Donate Help Sign in<br />
Eget lacinia quam<br />
learn more<br />
Lorem ipsum dolor sit amet, consectetur<br />
adipiscing elit, Aliquam consectetur elit tortor.<br />
Lorem ipsum dolor sit amet<br />
consectetur adipiscing elit. Aliquam<br />
consectetur elit tortor, eget lacinia<br />
quam condimentum non. Phasellus<br />
pellentesque porta euismod.<br />
Curabitur a interdum tellus.<br />
Pellentesque et ligula nibh<br />
Aenean scelerisque velit leo, quis<br />
pretium nunc condimentum at.<br />
Mauris eleifend vitae ligula vel.<br />
lacinia Quisque mattis dolor<br />
tortor, eget luctus sem bibendum sit<br />
amet. Curabitur porttitor rhoncus<br />
viverra. Orci varius natoque<br />
penatibus et magnis dis parturient.<br />
learn more<br />
Enter your email address<br />
example@wiseasy.com<br />
Courses<br />
Teachers<br />
Testimonials<br />
Internships<br />
Donation<br />
Select your<br />
courses<br />
Let’s go<br />
Blog<br />
Work for us<br />
Events<br />
Help<br />
Privacy Policy<br />
Terms of service<br />
Start Learning!<br />
Subscribe<br />
Scroll down<br />
learn more<br />
Wiseasy brings<br />
everyone<br />
together<br />
learn more<br />
LANDING PAGE<br />
How it works<br />
Lorem ipsum dolor sit amet, consectetur<br />
adipiscing elit, Aliquam consectetur elit tortor.<br />
WISEASY<br />
Courses Teachers Work Donate Help Sign in<br />
Wiseasy brings<br />
everyone<br />
together<br />
Create your<br />
account<br />
Select your<br />
courses<br />
Start Learning!<br />
Lorem ipsum<br />
dolor sit amet,<br />
consectetur<br />
adipiscing elit.<br />
Aliquam consectetur<br />
elit tortor.<br />
Let’s go<br />
Why Wiseasy?<br />
How it works<br />
Lorem ipsum dolor<br />
learn more<br />
Eget lacinia quam<br />
learn more<br />
Why Wiseasy?<br />
Lorem ipsum dolor sit amet<br />
consectetur adipiscing elit. Aliquam<br />
consectetur elit tortor, eget lacinia<br />
quam condimentum non. Phasellus<br />
pellentesque porta euismod.<br />
Curabitur a interdum tellus.<br />
Pellentesque et ligula nibh<br />
Aenean scelerisque velit leo, quis<br />
pretium nunc condimentum at.<br />
Mauris eleifend vitae ligula vel.<br />
lacinia Quisque mattis dolor<br />
tortor, eget luctus sem bibendum sit<br />
amet. Curabitur porttitor rhoncus<br />
viverra. Orci varius natoque<br />
The rest of the style <strong>guide</strong><br />
provides important visual<br />
elements for the landing<br />
page design. It includes<br />
mock-up displays of design,<br />
Typography, Colour Palette,<br />
Icons and interaction.<br />
penatibus et magnis dis parturient.<br />
learn more<br />
How it works<br />
Lorem ipsum dolor sit amet, consectetur<br />
adipiscing elit, Aliquam consectetur elit tortor.<br />
Subscribe to our newsletter<br />
Enter your email address<br />
example@wiseasy.com<br />
Subscribe<br />
Subscribe to our newsletter<br />
Courses<br />
Blog<br />
Teachers<br />
Work for us<br />
Create your<br />
account<br />
Select your<br />
courses<br />
Start Learning!<br />
Testimonials<br />
Events<br />
Internships<br />
Help<br />
Donation<br />
Privacy Policy<br />
Let’s go<br />
Terms of service<br />
Why Wiseasy?<br />
5<br />
Lorem ipsum dolor sit amet
6<br />
MOCK-UP
MOCK-UP<br />
7
TYPOGRAPHY<br />
Helvetica<br />
Chakra Petch<br />
Aa<br />
Regular<br />
ABCDEFGHIJKLM<br />
NOPQRSTUVWXYZ<br />
abcdefghijklmnopqrstuvwxyz<br />
Aa<br />
Regular<br />
ABCDEFGHIJKLM<br />
NOPQRSTUVWXYZ<br />
abcdefghijklmnopqrstuvwxyz<br />
Aa<br />
Oblique<br />
ABCDEFGHIJKLM<br />
NOPQRSTUVWXYZ<br />
abcdefghijklmnopqrstuvwxyz<br />
Aa<br />
Medium<br />
ABCDEFGHIJKLM<br />
NOPQRSTUVWXYZ<br />
abcdefghijklmnopqrstuvwxyz<br />
Aa<br />
Bold<br />
ABCDEFGHIJKLM<br />
NOPQRSTUVWXYZ<br />
abcdefghijklmnopqrstuvwxyz<br />
8
COLOUR PALETTE<br />
CYMK 54 31 0 22<br />
RGB 91 137 198<br />
#5B89C6<br />
CYMK 36 21 0 17<br />
RGB 136 167 212<br />
#88A7D4<br />
CYMK 61 10 0 21<br />
RGB 79 180 201<br />
#4FB4C9<br />
CYMK 87 0 21 14<br />
RGB 28 219 173<br />
#1CDBAD<br />
CYMK 55 33 0 73<br />
RGB 31 46 69<br />
#1F2E45<br />
CYMK 55 33 0 63<br />
RGB 42 63 94<br />
#2A3F5E<br />
CYMK 0 0 0 70<br />
RGB 76 76 76<br />
#4C4C4C<br />
CYMK 0 0 0 35<br />
RGB 165 165 165<br />
#A5A5A5<br />
9
10<br />
ICONS
INTERACTION<br />
Default:<br />
Courses<br />
Hover/Click:<br />
Courses<br />
Default: Hover: Click:<br />
Sign in Sign in Sign in<br />
Default:<br />
Terms of service<br />
Hover/Click:<br />
Terms of service<br />
Default:<br />
Hover/Click:<br />
Default:<br />
Hover/Click:<br />
learn more<br />
learn more<br />
Let’s go<br />
Let’s go<br />
11
Final Comment<br />
Thank you for reading through the style<br />
<strong>guide</strong>lines. To ensure brand’s consistency and<br />
professionalism, please follow and do not<br />
break the rules stated above; as it would<br />
defeat the whole purpose of this style <strong>guide</strong>.
WISEASY
Name: Zihao Huang<br />
Student Number: s5124326<br />
Tutor: Charles Willmore<br />
Course: Design & Branding
Change language