Pinto k Shine / Graduation project Guide: Jay Menon Project: Build an online service
/ Project Document / 1
2 / Project Document /
SIXOFUS DESIGN
Build an online service for
Pinto k shine / Graduation project Guide: Jay Menon Studio: Sixofus Mumbai Project: Build an online service Client: Janki shah
/ Project Document / 3
4 / Project Document / Content /
Content
08
Introduction(08) Acknowledgment(11) DJAD(12-13) Sixofus studio(14-15) Boloco(18) Project timeline(17)
28
Project brief(28) Challenges(19) Research(20-21) Competitors(22-23) Redefined brief(24) Deliverable(25) Mood board(26-27) Process(28-43) Brand manual(44-55) Stationery(56-61)
64
Website(64) Wire frame(65) Icon exploration(66-75) Work flow(76-77) Slider(78-79) Questionnaire(80-82) Website layout(83) User interface(84) User experience(85) Promotion(88) Merchandise(89)
91
Reference(91)
/ Content / Project Document / 5
Introduction This is the Official Document of my Diploma Project for the Post graduate project of Graphic Design. Design course in DJ. Academy of Design. The project is a self initiative by SIXOFUS Design studio Mumbai, to develop an Online Service for the people who want their brand identity done through online. - Pinto k Shine
6 / Project Document / Introduction /
/ Content / Project Document / 7
Don’t stuck in your own little world because the purpose of life is to explore and experience. - The Secret Life of Walter Mitty
8 / Project Document /
Acknowledgment I would like to thank Jay Menon for guiding me in the diploma and four years of college life. My faculties, Professor Balaram, SM Shah, Mohan Chinnaswamy, Kanaka Ananth, Prakash Moorthy, Joginder Panghaal and Other djad faculties. I Would Like to Thank Janki Shah (SIXOFUS Design Studio) for the opportunity to work under him for my diploma project. My collegues, Janice paul, Dolly shah, Aayushi Agarwal, Akanksha Mhatre and Vidhi Shah for support and guidance. My friends Sudheesh, Jovan, Rishi, Rama, Taha, Prathik, Samasi, Mani, Borah and rest of my djad friends. And to my Family for their tremendous support.
/ Acknowledgment / Project Document / 9
DJAD DJAD
The DJ Academy of Design belongs to the illustrious GKD Charity Trust, set up in 1983 by the industrialist par excellence, (Late) Cavalier Dr. G.K.Devarajulu. His pioneering efforts saw the emergence of Coimbatore on the global industrial map and the LMW Group as a major force to reckon with. The Group now comprises a staggering 20 companies with LMW being the flagship brand. The D J Academy is carrying forward the legacy of Dr. G.K. Devarajulu in the noble sphere of education. The Academy has two wings – The D J Academy for Managerial Excellence (DJAME) and D J Academy of
10 / Project Document / About Institution /
Design (DJAD). It is a remarkable initiative towards harnessing the potential of future Managers and Designers. Senior Faculty members who are experienced in teaching at National Institute of Design (NID), Ahmedabad, handle most of the courses at D J Academy of Design.
D / About institution / Project Document / 11
Sixofus design is a firm founded by Janki shah and Rahil Mehta. Janki, an alumnus of leading design institution from New York, Chicago, Atlanta and Mumbai has founded SIXOFUS Design in 2004. while janki is a philosophical, travel and typography loving designer, Rahil is management graduate with a background in business consulting and web strategy, who indulges himself in campus by the moonlight. SIXOFUS work across media, and actively take up projects on Branding, Web-design, Signage, Environmental Graphics, Packaging and Print (advertisement posters, magazines, catalogue, coffee-table book etc). They are also always ready to accept exiting the different jobs like company an-
12 / Project Document / About the Sponsor /
nual reports, wedding and event invites. SIXOFUS Design has a wild client pool. Clients of international stature like Cox, Taj, Sahara, Government of Spain etc make the list. While the studio also receive lot of interesting clients, Friends and Family. A studio with cupboard-full of books, displayed works of various artists and lot of games and toys that help in spending your creatively, make SIXOFUS Design an ideal place to work and learn..
/ About the sponsor / Project Document / 13
Bombay logo Company (Boloco)
An online design solutions company based in Mumbai, India. They develop brand identities, create stunning websites and manage social media for clients all over India. Managed by people who live and breathe design, They know what works and what doesn’t. They are not into chasing the competition or trying to be the cheapest or the biggest, We just want to create great stuff that works and have fun while doing it.
14 / Project Document / About the Client /
Why online design studio? In India there are thousands of startups and companies who doesn’t have budget for their brand identity. BOLOCO gives professional designed brand identity across the country. Short time frame, Hassel free, Pocket friendly are the USP’s of the company.
Project Time-line
/ Project Time Line / Project Document / 15
Project brief The aim is to develop an online service for the startup which is basically an virtual graphic design studio. Nowadays maintaining a studio is not easy. paying rent, electricity bills, transport and space. so this lead to the idea in starting an online studio which makes it pretty easy to maintain while comparing to the real space design studio. Design a brand identity & website for the Bombay Logo Company. Clint: Janki Shah - sixofus design studio head
16 / Project Document / Project Brief /
challenges
The main challenge for us was to create a logo from scratch for a brand new logo company. The logo had to reflect the company ideology and it’s nature, so choosing the colour palette and font were few of the tricky challenges to go by. Another matter was that since the company website was its quintessential feature, the design for it had to be crisp, clear and transparent to allure the clients. We came up with innovative ideas to make the interaction of the design much more effective and tenable. The trials with new grid system, creating versatile components or even minor flair like adding flat icons and specific flat colours.
/ Challenges / Project Document / 17
Why Business through Internet ? The increasing use of internet for doing work and searching works, buying and selling products. Internet has recently become the hub of the jobs whether it is offline or online. Many jobs are constantly liked online. Nowadays people have tendency to seek job online. So, what is the main reason behind it for people looking jobs on the Internet? Is it the laziness or the relaxing nature of people? Or is the reason of unemployment or less salary. it has many more reason then listed above. Lazy behavior: People are increasingly becoming dependent on machineries. Actually who would not depend if it is thing that does hours of time taking work in few
18 / Project Document / Research /
minutes. People are turning towards lift or elevators rather than stairs, similarly people are seeking jobs that can be done online. People have lazy to this far that they want to work from home. I’m not talking about all but a few. Relaxing nature: Relaxing. What a pleasant word, isn’t it? Who would not want to relax in this whole world? To choose between Working and Relaxing is like to choose between Present and Punishment or Insult and Praise or Sadness and Happiness. Due to huge work load these days, people will be on the seventh heaven if they get a full day off. Then what will be the case when they get whole week off? So, people want to work from home these days. High Expence: Due to rapid increase in population, it’s no new to have unemploy-
ment. Many people lose their jobs these days. In this hard economic times who would not want to earn extra cash. Every single penny counts a lot. Thus, increasing bills makes real space business
Nowadays maintaining a studio is not easy, paying rent, electricity, transport and space. so starting a online studio is pretty easy comparing to real space design studio.
Less salary: Everybody wants a six figure salary, don’t you? I also want a six even seven figure salary. Unsatisfactory salary is also one the leading reason for increasing search for online jobs. The income is less and expenditure is more, no pocket money. So, everyone wants some extra money in their pocket.
/ Research / Project Document / 19
competitors
We are Logoworks, and are an online graphic design agency that specializes in logo and website design. We have a community of designers from all around the world who we work with to consistently produce high quality designs for our clients. In the 13 years since we’ve opened our doors, we’ve produced over 200,000 logos for 50,000 happy customers, but we’re only just getting started. - www.logoworks.com
You Can Create Your Own Logo in Just 10 Minutes. As soon as you click the “Get Started” button, you’ll start choosing icons, changing colors, and adding your text. It’s no exaggeration when we say you can have a beautiful, finished logo in just a few minutes. - www.logomaker.com
20 / Project Document / Competitors /
We list your design contest in our marketplace for our community of more than 1,043,000 designers to see. From Berlin to Bombay, professional creatives will read your brief and begin to brainstorm ideas just for you. - www.99design.com
Our web design expertise has expanded to cover all major styles and all work is guaranteed 100% that you love the initial design before going live or we do it again. - www.xeedesign.com
/ Competitors / Project Document / 21
REDEFINED BRIEF Designing a digital product of the startup which is basically an online graphic design studio. The design includes the brand identity of the product which should be bold andfresh, so that people of different age groups can understand & the website which is transparent and communicative to the clients.
22 / Project Document / Redefined Brief /
Perception / Tone / Guidelines: 1.Dynamic, fresh, playful, experienced, exciting, fun, communicative. 2.Elegant, bold, high production value, high visibility. 3.Information should have a fresh and conversational tone. 4.Easy to navigate and find information.
DELIVERABLES
Brand Identity - logo design, Typography, Colour Palette. Stationery - Business card, letter head, Envelop. Website - Work flow, Layout, icons, Illustrations. Promotion - Facebook page, Merchandise.
/ Deliverables / Project Document / 23
24 / Project Document /
MOODBOARD • • • • • • • • • • •
Bold Fresh Bombay Young Flat Shadow Geometric Playful Vibrant Vector Modern / Project Document / 25
Before we embark on logo design, we understood what a logo is and what it is suppose to do. A logo identifies a company or product via the use of a mark, flag, symbol or signature. Logos derive their meaning from the quality of the thing they symbolize, not the other way around. logos are there to identity, not to explain. In a nutshell, what a logo means is more important than what it looks like. The process of getting concept down on paper and then iterating on those ideas unlocked new directions to explore. After selecting best sketched concepts final solutions arrived at when started on the computer.
26 / Project Document / Process /
Started doodling with the word Boloco / Process / Project Document / 27
Took the first letter B to create symbol for the logo 28 / Project Document / Process /
Exploration of the letter B / Process / Project Document / 29
B
BOMBAY LOGO COMPANY
O O O O
BOMBAY LOGO COMPA NY
B
BOMBAY LOGO COMPANY BOMBAY LOGO COMPANY
B
BOMBAY LOGO COMPANY
BOMBAY LOGO COMPANY
BOMBAY LOGO COMPA NY
L B
BOMBAY LOGO COMPANY
BOMBAY LOGO COMPANY
B
BOMBAY LOGO COMPANY
L B
Digitalized selected doodles
30 / Project Document / Process /
BOMBAY LOGO COMPANY
Tried Infinity B to show limitlessness
/ Process / Project Document / 31
Played with O’s derived from the company name 32 / Project Document / Process /
Exploring bold style / Process / Project Document / 33
Started giving Depth using shadow
34 / Project Document / Process /
Combined the letter B and L
/ Process / Project Document / 35
Added dimension to the logo 36 / Project Document / Process /
Introduced and started playing around with ‘C’ / Process / Project Document / 37
Tried contrast colours to stand out the letter ‘L’ .
38 / Project Document / Process /
Colour exploration
/ Process / Project Document / 39
Single colour gradient variation 40 / Project Document / Process /
Final Logo
RALEWAY TYPEFACE Raleway is an elegant sans-serif typeface family. Initially designed by Matt McInerney as a single thin weight, it was expanded into a 9 weight family by Pablo Impallari and Rodrigo Fuenzalida in 2012 and iKerned by Igino Marini. Even without a bold attitude, Raleway plays well with others in its class and has the style to carry projects fashionably forward.
/ Logo Construction / Project Document / 41
BRAND BRAND MANUAL Brand manual contain prescribe logo usage rules, typeface system, color palette, layout guidelines, and more. They exist so that others can create design collateral and marketing materials that will have a cohesive look and voice. Style guidelines have traditionally been produced as print and web-ready PDFs. They’re the core of the identity design, and usually accompany the logo, templates, fonts and other resources packaged together to make designing for the brand easier. Style guidelines are in-depth rules about logo usage, styling, and layout, and are always interesting to browse through.
42 / Project Document / Brand Manual /
D Logo in colour and Grey Scale
/ Brand Manual / Project Document / 43
Logo in Black and White
44 / Project Document / Brand Manual /
Logo Variation
/ Brand Manual / Project Document / 45
The logo must be surrounded by a minimum amount of space. This space is equal to the M in the logo typeface.
46 / Project Document / Brand Manual /
The logo must be surrounded by a minimum amount of space. This space is equal to the M in the logo typeface.
/ Brand Manual / Project Document / 47
C: 02 M: 36 Y: 100 K: 00 R: 245 G: 171 B: 27 Hex: #F5AB1B Pantone: 116 u
C: 79 M: 13 Y: 45 K: 00 R: 08 G: 164 B: 155 Hex: #08A49B Pantone: 3272 u
C: 86 M: 29 Y: 57 K: 10 R: 02 G: 128 B: 118 Hex: #028076 Pantone: 3282 u
C: 66 M: 61 Y: 67 K: 60 R: 53 G: 51 B: 46 Hex: #35332E Pantone: Nutral Black u
Colour Palette
48 / Project Document / Brand Manual /
GRUMPY WIZARDS MAKE TOXIC BREW FOR THE EVIL QUEEN AND JACK.
grumpy wizards make toxic brew for the evil queen and jack. Font Family: Raleway Fonts: Raleway Thin Raleway Extra Thin Raleway Light Raleway Regular Raleway Medium Raleway Semi Bold Raleway Bold Raleway Extra bold Raleway Heavy
Supporting Font Family
/ Brand Manual / Project Document / 49
Secondary Logo: The mark can be used without the type.
50 / Project Document / Brand Manual /
Tertiary Logo: The type can be used without the mark.
/ Brand Manual / Project Document / 51
The Logo can be enlarged to any size as per requirement. Please make sure it is scaled proportionately and that it does not pixelate.
The logo should not be scaled down beyond 1.12� X 0.35�
52 / Project Document / Brand Manual /
“Keep it simple. Let’s do the obvious thing The common thing - but let’s do it uncommonly well.”
/ Brand Manual / Project Document / 53
Stationery Stationery started after the logo is completed and created a systematic visual language around the logo which complements the design thinking of the logo and offers a family of useful, flexible Elements that will help to design marketing and business collaterals.
Business Card, Front and back
54 / Project Document / Stationery /
Envolope
/ Stationery / Project Document / 55
Letter Head
56 / Project Document / Content / Stationery /
Letter Head Second page
/ Stationery / Project Document / 57
Envelope Cover
58 / Project Document / Stationery /
Business card mock-up
/ Stationery / Project Document / 59
Stationery Mockup presentation
60 / Project Document / Stationery /
Final
Stationery Mockup presentation Final
/ Stationery / Project Document / 61
WEBSITE We started with wireframe, the UI that surrounds the content and helped to perform actions and navigate through it. It includes the navigation and components like sidebar and bottom bars and approached the design from the perspective to have a clear understanding of the layout beyond the designing section of homepage. 1200 grid 15 column grid helped to structure the layout of different sections and guided through the specific screen size
62 / Project Document / Website /
requirements and helped to create responsive templates to consistent in terms of spacing as well as many other design issues. For the typeface we used raleway font from the brand identity to keep the same style. In terms of colours we choose set of colours from logo and tones of the general user interface.
1200 PIX GRID SYSTEM
All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In January 2010 76% of the computers where using a resolution higher than 1024 x 768 px. 1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with. / Project Document / 63
Icon Exploration
64 / Project Document / Icons /
Trying out various style / Icons / Project Document / 65
Exploring brand identity style
66 / Project Document / Icons /
Dimensional exploration
/ Icons / Project Document / 67
Digitalized icons with brand colours
68 / Project Document / Icons /
icon explorations with background
/ Icons / Project Document / 69
Line drawing icons
70 / Project Document / Icons /
Included one more colour(orangish red) to support the icon
/ Icons / Project Document / 71
Final Icons It’s a flat style round icons with long shadow with brand colours. The shadow gives a sense of depth, yet still maintains the flat look of the object and The design looks simpler, spacious and has less distraction. It lets you focus on the content, which is the thing that matters most to users.
Choose your project
Questionnaire
Presentation
Feedback
Delivery 72 / Project Document / Final Icon /
Icon Style
Sticked to the light source coming from one direction. Simple Flate colour background
Brand Colours
Long Shadow Supporting colour
Consistent Icon Set Styles
/ Icon Style / Project Document / 73
BOLOCO Packages
1.Logo only 2.Stationery only 3.Logo + Stationery 4.Logo repair + Stationery 5.Website design + Coding (coming soon)
Front end steps
1.Choose a package & pay. 2.Fill out questionnaire. 3.Receive the options. 4.Give feedback. 5.Receive finals & ok. 6.Receive all the files according to your package.
BOLOCO full Work flow
1.We touch potential patrons through marketing (facebook, reference, google ads, regional advertising, strategic printer partnerships etc). 2.Patron visits website. 3.Checks out our packages, previous work, testimonials, process & costs. 4.He chooses a package. 74 / Project Document / Work Flow /
5.He pays. 6.Provision for a discount code linked to reference code. 7.We get an intimation. 8.Automated but personalized (according to chosen plan) email confirmation goes to him with login password and a reminder to fill up the questionnaire within a stipulated number of days with a link to the questionnaire. 9.He fills out the questionnaire. 10.He receives another email with confirmation of successfully submitted questionnaire and a time line within which the logos will be delivered. 11.We get an intimation. 12.The project is assigned to one or more designer. 13.Assigned designer(s) and i get an email warning 24 hours before the logos are due. 14.The designer(s) work on logos and come up with options. 15.Upload it to the specified place. 16.I get a review request. 17.Once its gets done, the logos get rendered onto chosen and relevant applications.
18.The patron gets an email intimation to say his logos are ready with a link. 19.He visits the link, looks at the options. Website has a possibility to safely share these with friends and family for an opinion. 20.He gives feedback on the chosen ones. 21.The assigned designer & gets an email with his feedback. 22.He gets another email telling him next time line. 23.We rework the logos and upload. 24.The patron gets an email intimation to say his logos revisions are ready with a link. 25.He chooses a logo and finalizes it
26.We get an email intimation. 27.And within a stipulated time, his logo package with all the relevant files is ready for download. 28.His Business cards / other stationery is shipped out to him. 29.We send him a thank you email with a feedback form to close the project.
/ Work Flow / Project Document / 75
Sliders Sliders seem to be the most effective when they provide a powerful, prominent message of who you are and what you are all about and not when they are used to highlight special deals newsletter sign-ups, etc.
We deliver quality, vibrant and cost eective design solutions for your business.
76 / Project Document / Slider /
/ Slider / Project Document / 77
Questionnaire
78 / Project Document / Questionnaire /
/ Questionnaire / Project Document / 79
Pricing
80 / Project Document / Pricing /
Website Layouts
/ Website Layout / Project Document / 81
Final UI
Main menu with hover animation
Breathing space Real estate with pictures
Design Elements and Small Details
Consistent Icon Set Styles
Organized information Subtle colours
Parallax scrolling for visual flow.
Illustrations to look young
1200 px grid based layout
Bold look
12 pt raleway for easy readability
Responsive layout (website will adjust to different screen widths)
Flyout invitation
82 / Project Document / UI /
User Experience (UX) In web design, great user interface, or UI design is all about helping the user to accomplish a given task as simply and efficiently as possible. While the look and feel is undeniably important, at the core of a great UI is function: in terms of navigation, it should be intuitive to the point of being invisible. As soon as a user gets lost, or can’t work out where to go, the UI has failed.
Mobile version
Laptop version
/ UX / Project Document / 83
84 / Project Document /
/ Project Document / 85
Promotions As social media is connecting a lot of people, its good to promot an online service through it.
The facbook promotion page of boloco.
86 / Project Document / Promotions /
Merchandise Thanks giving products to clients
Product graphics for CD cover
Mug with boloco brand
/ Merchandise / Project Document / 87
88 / Project Document /
Reference http://shortiedesigns.com/2014/03/10-top-principles-effective-web-design/ http://99designs.com/designer-blog/2014/11/07/web-design-basics-guide/ http://imjustcreative.com/using-guides-grids-pretty-circles-in-logo-design/2011/06/01 http://1200px.com/ http://graphicburger.com/mock-ups/ http://www.pixeden.com/web-wireframing/ http://www.entrepreneur.com/article/217499 http://china-lcd.com/3d_luoyan.asp
/ Reference / Project Document / 89
90 / Project Document /