Downloaded 54 times
More Related Content
Similar to Logo Design Process by Nirvan
Logo Design Process by Nirvan
- 2. 2 Logo Design Process& SVG Evolution NIRVAN (TEJAS ) PAGOOAH @Nirvanknight CTO at GRAPHICS TEMPLE • CTO at GraphicsTemple 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 the majority of my time spent designing and helping start-ups setup themselves in terms of e-commerce, corporate or SMEs Hello! I’m Nirvan
- 3. 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. 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. 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.
- 6. 6 Logo Design Process& SVG Evolution Simple TestSimple Test
- 7. 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. 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. 9 Logo Design Process& SVG Evolution Your thinking & drawing skills How good they are? What you want to use, a Graphic Tablet or paper and pencil? You to decide ! Creativity On 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 Ability Photoshop? Illustrator? Which one you are more familiar with ? (As a designer) Things to consider before you start The prerequisites ! 1 2 3 4
- 10. 10 Logo Design Process& SVG Evolution Client Discovery You must understand what the logo is supposed to do based on the company culture Industry discovery The audience of the company, whom are we targeting here? Logo Design ProcessThe guide
- 11. 11 Logo application This phaseis 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 Design After 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 phase Improvements 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. 12 Mockup Mock up thelogos design Show it your client! Time to unveil the amazing work!
- 13. 13 Logo Design Process& SVG Evolution Typography Selection Know 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 theText part, and theTypo of theText part obviously needs to match the logo.Typefaces need to be chosen with care and then selected from a pool of fonts.
- 14. 14 Logo Design Process& SVG Evolution
- 15. 15 Logo Design Process& SVG Evolution What’s coming next?What’s are we going to do right now?
- 16. 16 Logo Design Process& SVG Evolution MSCC LogoWhat’s are we going to do right now?
- 17. 17 Logo Design Process& SVG Evolution MSCC Logo 2What’s are we going to do right now?
- 18. 18 Logo Design Process& SVG Evolution Case StudyTop Plant
- 19. 19 Logo Design Process& SVG Evolution Case StudyTop Plant
- 20. 20 Logo Design Process& SVG Evolution What is coming?What’s are we going to do right now?
- 21. 21 Logo Design Process& SVG Evolution Case StudyTop Plant
- 22. 22 Logo Design Process& SVG Evolution What is coming?What’s are we going to do right now?
- 23. 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. 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
- 25. 25 Logo Design Process& SVG Evolution SketchSketches done prior to presentation
- 26. 26 Logo Design Process& SVG Evolution SketchSketches done prior to presentation
- 27. 27 Logo Design Process& SVG Evolution SketchSketches done prior to presentation
- 28. 28 Logo Design Process& SVG Evolution Expected Outcome of Logo Colored version of logo
- 29.
- 30.
- 31. 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. 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. 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 x Cy = center y R = radius/px Width = width of asset Height = height of asset
- 34.
- 35. 35 Logo Design Process& SVG Evolution
- 36. Thank you ! (Somuch)
- 37.
Editor's Notes
- #6 A simple logo allows for easy recognition allows both the logo to be versatile and memorable. NOT overdrawn. Following closely behind the principle of simplicity is that of memorability. An effective logo should be memorable and this is achieved by having a simple yet appropriate logo. EXAMPLE: NIKE An effective logo should endure the test of time. The logo should be 'future proof', meaning that it should still be effective in 10, 20, 50+ years time. It should be able to work across a variety of mediums and applications. How you position the logo should be appropriate for its intended purpose.
- #8 British Petrol & Accenture: Landor Associates
- #9 General Public: serve as instant reminders Company: point of recognition for their brand or products Designers: represent a challenge of incorporating our client’s ideologies into a single graphics 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!
- #24 Client Discovery: What the logo is supposed to do? – Information security company Industry Discovery: Who are we targeting? – Government, e-commerce companies, anyone Logo Application: Where will that me used? Web applications, Business cards, mobile apps etc Sketching: Done (Presentation purpose) Drafts Design: We’re going to do that now – Photoshop etc Improvement: Shall be done Mockup: Shall be done
- #25 Client Discovery: What the logo is supposed to do? – Information security company Industry Discovery: Who are we targeting? – Government, e-commerce companies, anyone Logo Application: Where will that me used? Web applications, Business cards, mobile apps etc Sketching: Done (Presentation purpose) Drafts Design: We’re going to do that now – Photoshop etc Improvement: Shall be done Mockup: Shall be done
- #32 SVG elements can be coded XML Based vector images just like PNG, JPEG, GIF
- #33 SVG elements can be coded XML Based vector images just like PNG, JPEG, GIF
- #34 SVG elements can be coded XML Based vector images just like PNG, JPEG, GIF