2
Logo Design Process & SVG Evolution
NIRVAN (TEJAS ) PAGOOAH \ @Nirvanknight
CTO at GRAPHICS TEMPLE
• CTO at Graphics Temple Ltd, www.graphicstemple.io
• Passion for coding & design focusing into both Front-end and Back-end Development
• I write codes in PHP, Java, JS, .NET and specialize in various web technologies such as Backbone.js, AngularJS
• I use many CSS preprocessor for front-end development such as SASS, LESS and Susy, which I love a lot
• I design a lot in Photoshop, Illustrator and After Effects
• Over the years, I managed to acquire expertise in the fields of design, web design and development, print design and branding with themajority of my time spent designing and helping start-ups setup themselves in terms of e-commerce, corporate or SMEs
Hello! I’m Nirvan
3
Logo Design Process & SVG Evolution
AgendaWhat’s up for today?
LOGO DESIGN PROCESS
What is a logo and the right
way to design a logo with
DEMO
SVG EVOLUTION
Interacting with SVG using
SnapSVG API and animate
them
4
Logo Design Process & SVG
Evolution
Some tiny questionsYour knowledge
1. How many of you guys use Photoshop, Illustrator or into
logo design or anything related to design?
2. How many of you guys do design for a living?
3. Do you know about “Design” ?
4. How many of you people use Illustrator, vector ?
5
Logo Design Process & SVG
Evolution
5 Rules of LogosSimple rules
1. A logo must be simple.
2. A logo must be memorable.
3. A logo must be enduring.
4. A logo must be versatile.
5. A logo must be appropriate.
7
Logo Design Process & SVG
Evolution
3 Most ExpensiveLogos of All Time
Symantec
VeriSign
$ 1,280,000,000
British Petrol
$ 211,000,000
Accenture
$ 100,000,000
8
Logo Design Process & SVG
Evolution
THE DESIGN PROCESS
Logo Design ProcessWhat is a logo and what is the design process?
Logo design is all around us. To the general public, logos serve as an instant reminder of a company or a product; to the client they're the point of recognition on which their brands; and to us designers/developers they represent the challenge of incorporating our clients' ideologies into one single graphic.
More logos are being developed, and with that comes the challenge of being different.
How do you create something original that stands out in a sea of identities?
And how do we create something quickly while retaining quality?
The Design process highlights the right way to design the perfect logo!
9
Logo Design Process & SVG Evolution
Your thinking & drawing skillsHow good they are? What you want
to use, a Graphic Tablet or paper and
pencil? You to decide !
CreativityOn a range of 1 to 10, on which do
you give yourself? Inspire yourself
from others
You need to have a drawing
bookMoleskine, drawing books, papers or
anything to draw on
Software AbilityPhotoshop? Illustrator? Which one
you are more familiar with ? (As a
designer)
Things to consider before you startThe prerequisites !
1 2
3 4
10
Logo Design Process & SVG Evolution
Client DiscoveryYou must understand
what the logo is
supposed to do based
on the company cultureIndustry discovery
The audience of the
company, whom are we
targeting here?
Logo Design ProcessThe guide
11
Logo applicationThis phase is about answering
one simple question: how and
where will the logo be used most
of the time? Different usage of
the logo is typically referred to as
“logo application.”
Sketching !Get your crayons! We are going to
draw!
Drafts DesignAfter the sketching phase, create the
designs on illustrator or Photoshop or
any other software your prefer. This is
where you give life to your concepts,
colours, rounded corners and so on! Refinement phaseImprovements and
changes for the presented
logo drafts.
Did you know that some design schools ask the students to come up with exactly 100 ideas before they decide on the right one? The reason is simple — the only way to separate the good from the bad is to have a lot of things to pick from.
We’re going to design !
13
Logo Design Process & SVG Evolution
Typography SelectionKnow your typefaces!
Serif
or
Sans-
Serif?
Select
Best
font
Develop drafts
&
Present logo to
Client
Integrate with
logo
Normally, logos are composed of the Emblem part
and the Text part, and the Typo of the Text part
obviously needs to match the logo. Typefaces need to
be chosen with care and then selected from a pool of
fonts.
23
Logo Design Process & SVG
Evolution
SCENARIORequirements for logo development
Company Name Kali Security
Category Security Company
Country Australia
Mascot Rhino
Color Preference Red
24
Logo Design Process & SVG
Evolution
SCENARIOLet’s get to work!
Industry Discovery - Who are we targeting?
Government, e-commerce companies, anyone
Logo Application: Where will that be used?
Web applications, Business cards, mobile apps etc
Sketching
Done (Presentation purpose)
Drafts Design
We’re going to do that now – Photoshop etc
Improvement & Mockup
Shall be done
31
Logo Design Process & SVG
Evolution
SVG EvolutionWhat is SVG?
• SVG – Scalable Vector Graphics
• XML-based vector image format for two-dimensional
graphics
• Support for interactivity and animation.
• SVG has been one of the most underused technologies
when it comes to web development.
32
Logo Design Process & SVG
Evolution
SVG EvolutionWhat is SVG?
• Despite it’s usefulness and powerful possibilities it’s still a
mystery to many and when it comes to integrating it and
using animations, many developers don’t know where to
start.
• With libraries like SNAP.SVG the use of SVG assets
becomes more easy and today we’d like to explore how to
animate SVG icons.
33
Logo Design Process & SVG
Evolution
SVG EvolutionThe codes
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" /></svg>
Cx = center xCy = center yR = radius/pxWidth = width of assetHeight = height of asset
Top Related