Logo Design Process by Nirvan

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


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


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.

6


Evolution

Simple TestSimple Test

7


Evolution

3 Most ExpensiveLogos of All Time

Symantec

VeriSign

$ 1,280,000,000

British Petrol

$ 211,000,000

Accenture

$ 100,000,000

8


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


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


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 !

12

Mockup

Mock up the logos

design

Show it your client!

Time to unveil the

amazing work!

13


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.

14


15


Evolution

What’s coming next?What’s are we going to do right now?

16


Evolution

MSCC LogoWhat’s are we going to do right now?

17


Evolution

MSCC Logo 2What’s are we going to do right now?

18


Evolution

Case StudyTop Plant

19


Evolution

Case StudyTop Plant

20


Evolution

What is coming?What’s are we going to do right now?

21


Evolution

Case StudyTop Plant

22


Evolution

What is coming?What’s are we going to do right now?

23


Evolution

SCENARIORequirements for logo development

Company Name Kali Security

Category Security Company

Country Australia

Mascot Rhino

Color Preference Red

24


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

25


Evolution

SketchSketches done prior to presentation

26


Evolution


27


Evolution


28


Evolution

Expected Outcome of LogoColored version of logo

illustratorDemo

EVOLUTION OF

SVG

31


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


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.

http://snapsvg.io/

33


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

SVG Animation

DEMO using

SnagSVG.io

35


Evolution

Thank you !

(So much)

Nirvan Pagooah

Contact

www.nirvan.pagooah.com

www.graphicstemple.io

Nirvanknight

nirvanpagooah

Nirvan Pagooah

Tejas Pagooah