TEJAS JAG AN N ATHAN
DESIGN AND BRAND GUIDELINES G R A P H I C D E SIGN : BRAN D MAN UAL
Follow me on:
tejay.gd@gmail.com Created on: 3/09/2017 Expires on: 2/09/2019
www.behance.net/tejay_gd www.curiousmind.design
TABLE OF CONTENTS 04 1. INTRODUCTION Who are you. What is your brand 06 2 . BR AN D C ON C E P T Personality, brand value, Influence, Brand tone, Brand elements, Element Meaning 10 3. LO G O SYST E M IZ AT I O N Logo proportion, guidelines and alignment, Logo colours, Logo on black and white, logo on colour, Correct and incorrect usage of the logo, Minimum clear space for the logo. 18 4. VI SUAL L AN G UAGE Colour palette, Colour usage and combination, Text on colour, Brand background, Typography & point size 24 5. VI SUAL APPLI C AT I O N Print collaterals, Social media guide & template, Website screens, Web experience elements.
01. INTRODUCTION
4
WHO ARE YOU? I am Tejas and I am a Mumbai based Visual Communicator with a Bachelor’s in Visual communication from Raffles Design International. I practise various approaches of graphic design with a specialization in Publishing & Typography. I have a keen interest in listening and understanding people and look at Design as a way to give them a voice.
WHAT IS YOUR BRAND? I have created a brand for myself as my visual identity. The function of this brand is to showcase my work to future possible clients, to give them a better understanding of who I am and what services, I can provide. My brand reflects the person I am and my values. I have been a freelance designer and worked full time for more than 2 years. I have been lucky with the clients I have worked with and have gotten all my jobs from contacts I made earlier. One big hurdle I have always faced is when I have had to show new clients my work. I have no new work put online and hence people don’t know much about my work. Working full-time was a valuable experience, but eventually, I would like to have more control over the projects I do. To make that possible, I need to put my work out there so people in the industry can see the work that I have done and the value that I can provide. I have created an identity, which acts as my face and a brand with the values that people can connect with.
5
02. BRAND CONCEPT
6
PERSONALITY & CHARACTERSTICS I have lived in 3 countries and lived alone since I was 17, which has made me independent, adaptable and reliable in different situations. I am comfortable in my own skin and work well alone, but I truly enjoy collaborating and working in a team. Being around people and exchanging ideas is what works best for me. I am also very calm and composed, which helps me get along with most people. I want to create a brand which shows aspects of myself. I love to understand and help people, I want my brand to reflect trust and reliability. I want to be approachable by anyone and trustworthy when they give me a job. I want to work with different people, engage in conversations and tell the story they want to say.
BRAND VALUE I want people to connect with the person I am through my brand, as it represents all those qualities that mean the world to me. I want to understand and engage in conversation and I plan to do that not just through my work, but also through my blog which will be connected to my website. The blog will showcase my love of writing and display my philosophies and beliefs in design.
INFLUENCE 1. SHAPES
2. PATTERNS
7
3. ARABIC LETTERING
While developing the logo, I wrote down all the values that I would like my brand to represent. They were the following:
Reliable, Understanding, Confident, Passionate, Trustworthy, Adaptable, Easy going, Logical and Practical
8
BRAND TONE Middle east influence Symbolic Aggressive and bold Smooth edges Rounded Legible Subtle Abstract More Detail: I grew up in the Middle-East for most of my life and it has played a huge of my life. Middle countries have a very strong look at them, which I had never got to use before. They are very geometric and minimal and I decided to go with that. Instead of using a font, I decided to create my own form using simple rectangles. I was happy with what I had, but It felt too aggressive and bold which I didn’t want. I wanted to show a sense of adaptability. I decided then to curve the edges, which worked very well. I decided to end the edges with a circle which fit the look I was going for. The logo ended up being Bold showing my confidence, yet seeming slightly soft and not too aggressive with the curve edges, showing my sense of adaptability. The logo would work in a very small size and would be easily legible, making this very practical as well. The brand represents myself with the logo appearing on all collaterals that have my name on it, hence there was no reason for me to attach my name to the logo as it would be present anyways.
BRAND ELEMENTS Once the logo was fixed, I then had to develop a system which would unite all my different collaterals into one family. I needed to develop elements which could be spread accross different collaterals in different ways, and still appear to look the same. I needed to create a consistency. I needed those elements to still represent the same morals.
ELEMENTS MEANING
Trustworthy/ Adaptability A circle represents wholeness. It represents commitment. It shows fluidity.
Movement/ Connection This form can be adapted to mean different things by just rotating it. It shows a connection by acting like a piece of a puzzle. It shows movement and direction by acting as an arrow. 9
Focus/ Detail This form highlights certain information and brings attention to different things.
03. LO G O S Y S T E M I Z AT I O N
10
LOGO ALIGNMENT
This logo was made by rectangles with rounded edges and circles were used for the edges. The width of all the lines are equal, and I have tried to keep it as consistent as possible. All the rounded bits are of the same angles and so are the rounded circles. In the above example you can see the alignment, proportion and mathamatical structure.
11
LOGO (IN COLOUR)
C: 97 M: 93 Y: 0 K: 0
R: 45 G: 55 B: 149 #2d3795
C: 100 M: 95 Y: 40 K: 37
R: 29 G: 33 B: 78 #1d214e
C: 0 M: 8 Y: 72 K: 0
R: 241 G: 86 B: 66 #f15642 12
LOGO (IN GRAYSCALE)
Logo in black (White background)
Logo in white (Black background)
13
LOGO (IN COLOUR BACKGROUND)
Logo in blue (Coral background)
Logo in coral (Navy blue background)
Logo in coral (Blue background)
14
LOGO EXCLUSION ZONE
10mm 10mm
Minimium 10mm Logo spacing from the edges.
15
CORRECT LOGO USAGE
Combination of correct logo spacing, colours and density of the logo. 16
INCORRECT LOGO USAGE Do not rotate the logo
Do not distort the logo
Do not change the colour of the logo
Do not use drop shadow or any effects on the logo
Do not place the logo randomly without alignment.
Do not bleed the logo to the edge of the artwork.
17
04. VISUAL LANGUAGE
18
COLOURS PRIMARY COLOURS
Blue C: 97 M: 93 Y: 0 K: 0
R: 45 G: 55 B: 149 #2d3795
Navy blue C: 100 M: 95 Y: 40 K: 37
R: 29 G: 33 B: 78 #1d214e
Reasoning: Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith and truth, which is what my brand stands for. Blue is also produces a calming effect.
SECONDRY COLOUR
Coral C: 0 M: 8 Y: 72 K: 0
R: 241 G: 86 B: 66 #f15642
Reasoning: Coral represents abundance and is a warm and energetic colour. It represents high class and symbolizes energy, passion and strength. It fit well with the brand and it worked well with blue as a point of focus to my brand. I used coral to highlight points.
19
TYPOGRAPHY The brand uses two fonts throughout all its collaterals, which are the following: PRIMARY FONT:
RALEWAY ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 123456789 .’•@#$%^&*()! SECONDRY FONT:
QUICKSAND ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 123456789 .’•@#$%^&*()! 20
FONT HIERARCHY The sizes of these fonts change relating to the collaterals they are in but they follow a strict hierarchy of importance that must be followed throughout all the different mediums.
Font: Raleway Light, 72 points (UPPERCLASS)
HEADING 1 Font: Raleway Bold, 30 points/ 12 points (UPPERCLASS)
HEADING 2 (RALEWAY) Font: Raleway Bold, 30 points/ 12 points (UPPERCLASS)
SUB-HEADING (QUICKSAND) Font: Raleway Bold, 12 points/ 08 points (UPPERCLASS) Body font (quicksand)
TEXT ON COLOURS Coral used as highlight White used as casual body copy (Blue background) Coral used as highlight White used as casual body copy (Navy Blue background) Coral used as highlight White used as casual body copy (Coral background) 21
BRAND BACKGROUND LAYOUT: Throughout all the collaterals, the elements shown earlier were used throughout the layout to mean different things. Below are a few variations of how the elements were used. From the website toolbar to normal plain layouts.
22
IMAGERY Any imaged used are to tell the story of the brand. The images used are from pictures of projects to certain pictures of the behind the scenes, which would help narrate the story of the constant growth and evolution of my design process. The images are realistic and natural. To give a depth to the picture and for it to fit with the brand, filters are added if they are needed.
Hover screen
Normal screen
Filter used when there is a pop-up screen on the website.
23
05. VISUAL A P P L I C AT I O N
24
PRINT: BUSINESS CARD SI Z E: 90 x 49 mm
25
PRINT: LETTERHEAD SI Z E : 210 x 297 mm (A4)
+919920816994 • tejay.gd@gmail.com • www.behance.net/tejay_gd
www.curiousmind.design
26
PRINT: CURRICULUM VITAE SI Z E: 210 x 297 mm (A4)
27
PRINT: STATIONARY & ENVELOP
28
WEB: SOCIAL MEDIA The social media that works the best for my brand would be a Facebook and Instagram pages, which would serve as my best place to show my work. It would also serve as the right place to engage with my audience and show my progression with my work.
FACEBOOK: Facebook would work as a place where I get to engage more with my future clients by sharing with them my blogs, philosophies and work that I finish. While posting things on Facebook, the template I follow would require me to put the logo in the bottom right of the brand and sharing my social media and website link. INSTAGRAM: Instagram would work as a place where I post more of the behind the scenes of my progression in work. My Instagram content would be more regular and would serve as a place to constantly update my possible clients, and for them to see my process in design. It would serve as a place to make my audience feel like a part of my process and see the development and change.
29
30
WEBSITE: HOMEPAGE (1&2)
I will be writing about my design philosphies and ideas that I am interested in here. The blog will help connect with my audience more deeply.
Chatbox for clients to ask me immediate queries and questions
31
WEBSITE: HOMEPAGE (3) & GAME PAGE
Pop up Game, will appear when the user hasn’t used the computer for 5 mins. You will also find an option to play the game on the chat.
This arrow button will be optional, but players can use it, if they are on their mobile phones. 32
WEBSITE: PORTFOLIO
Hover Screen.
33
WEBSITE: ABOUT ME (1&2)
Clickable link that will take you the page of the school.
34
WEBSITE: ABOUT ME (2&3)
Downloadable PDF of CV 35
WEB EXPERIENCE: READING BAR (SCROLL) Reading Bar: a Coral bar will increase as you scroll down through the page
1 2 3 4 36
WEB EXPERIENCE: MENU ACHOR & MENU INTERACTION Mouse achor
Menu interaction from one section to the other
37
38