• How To Design A Logo

    PUBLICATION DATE: 9 Apr 2019 | AUTHOR: Johan van Seijen | CATEGORY: WordPress,

  • Quick Summary: An important part when building a theme is designing the accompanying logo. It will serve as a strong visual anchor for potential clients. we've actually seen theme logos being reused, e.g. stripping out the theme name and putting in your own business name. During a number of reviews I've heard myself reiterate the same design best practices regarding logos. So why not confine them to paper for all to benefit from.

  • I don't regard myself as the best logo designer ever to grace this planet. Not in the least. I'm all about creating solid looking logo's the most cost-effective way. So, in my mind, it makes sense to take advantage of what better designers already came up with and remodel them as you see fit. Just as you don't start from scratch when building a new website, you shouldn't start from scratch when designing a logo.

    The best practices outlined in this article are just that: best practices. E.g. deviating from them doesn't mean your logo design will suffer. As long as the deviation was deliberate and serves a purpose. That being said, I don't call them best practices for nothing.

    If your logo design efforts exceed the 60 minute mark, and you haven't come up with a design you like, changes are, there's room for improvement. And these are the steps.

    Illustrator vs. Photoshop

    In the realm of design tools there are two and only two software tools that stand out in the crowd: Adobe Illustrator and Adobe Photoshop. If you ask me, by far the best tool for creating logo's is Illustrator. Here's why.

    - An important part of logos is some kind of visual representation of the business (the window icon for Microsoft's "Windows"). They are almost without exception vector images (illustrator is a vector editing program whereas Photoshop is a photo editing tool).
    - There are a huge amount of free resources out there for you to take advantage of. Icons, used for the visual representation, will come in the format of .eps, .svg, .ai or some other popular vector format. Again, Illustrator is the way to go here because of its dedicated vector editing nature.
    - Vector are infinitely scalable. This gives more flexibility to experiment with logo size, especially when you're using different sizes in the same theme (car repair, plumbing)

    Many designers start out learning Photoshop, or some other tool, and just stick with it. It takes a lot of effort learning something new, especially with something like the gigantic Illustrator tool. However, if you're serious about becoming a true professional in the design world, Illustrator is a must. The best and most exhaustive Illustrator tutorial around has got to be Deke McClelland's "One-on-One" series from Lynda.com. I've used his for Illustrator and Photoshop and they are awesome. While taking a look at the "essential training" series, I found that the CS6 version has been covered by Justin Seely not Deke.

    A (business) logo is comprised of a fixed number of logo elements. These are:

    - Icon (a visual metaphor of the business)
    - Title (the main text, business type or theme name)
    - Subtitle (slogan, filler text to give the logo more body (e.g. "business template" or "portfolio template")

    Requirement: at least the "title" should be present in the logo, "icon" and "subtitle" are optional.

    Icon, title and subtitle

    Taken from the: Brewery WordPress Theme

    Title and subtitle

    Taken from the: Photoartist WordPress Theme

    Icon and title

    Taken from the: Lawn Care WordPress Theme

    Single title

    Taken from the: Life Coach WordPress Theme

    Just as I'm not the best logo designer in the world, you probably aren't either. A designer greatest weapon is the Internet and the wealth of (free) resources it provides if you know where to look. When designing a logo there are a number of invaluable resources I use.

    - Google Images: The first one, and probably overlooked by many, is Google images. If you're designing a "pool cleaning" theme, type in "pool cleaning logo" and click "images" in the top left corner of your search results. Not only will you instantly have a great number of logos you can model, they are mostly real life business logos. This support our theme building concept of basing your theme on what's out there in the real world instead of making it up yourself.
    - The Noun Project: this is a website dedicated to making visual representations of just about anything. It's the best place to get an icon for your logo (in .svg format). For resell purposes you'll need to buy a two dollar license but we'll take care of that if you decide to use one.
    - Dafont: a website where you can download fancy fonts. Since the title is a logo requirement, and you don't always want to use Arial. This is a great place to shop for fonts. Not only does it have great fonts, you have the ability to type in the actual logo title (and subtitle) and see what it'll look like. I recently got reminded of the fact that there are licensing issues involved with fonts. So be sure to check the "Public domain / GPL / OFL" NOT "100% free" !!! box underneath the (very tiny) "more options" link.

    When I look at a logo the first thing I look for is symmetricity. Are the various logo elements (icon, title, subtitle) aligned in a way that makes sense and adds to the overall structure of the logo? If not, there's nothing wrong per se when the asymmetric character was added on purpose and thought through. If that isn't the case, e.g. the designer is unaware of lack of symmetry, it's very likely the logo will look less professional.

    The alignment of the logo resides in its individual elements icon, title and subtitle in the following way

    - alignment of icon with text block (title and optional subtitle)
    - alignment of text block elements (title and subtitle)
    - a combination of both

    The horizontal alignment is by far the most common one.

    Horizontal alignment

    Text block vertically aligned with icon and horizontally aligned title and subtitle

    Taken from the: Plumber WordPress Theme

    Vertical alignment

    Text elements horizontally aligned with icon.

    Taken from the: Dental WordPress Theme

    Horizontal and vertical alignment

    Horizontal aligned text and kanji character symmetry (4 left, 4 right). Dragon head is also horizontally and vertically aligned within the circle

    Taken from the: Martial Arts WordPress Theme

    No alignment

    An exception to the rule. Done on purpose to add playfulness, but with added icon symmetry (bottom left vs. top right)

    Taken from the: Summer Camp WordPress Theme

    When it comes to the various logo elements (icon, title and subtitle) there are a number of best practices.

    - The icon should have a maximum width that is a 35% of the text block
    - The icon should have a maximum height that is 125% of the text block
    - The subtitle should have a smaller font size than the title
    - The subtitle should have either the same width or a smaller width as the title
    - The subtitle should be positioned below the title
    - The subtitle should be either left aligned or vertically aligned with the title

    Icon width

    The icon should have a maximum width that is a 35% of the text block

    Taken from the: Preschool WordPress Theme

    Icon height

    The icon should have a minimum height of 100% and maximum height of 150% of the text block

    Taken from the: Pest Control WordPress Theme

    Subtitle font size

    The subtitle should have a smaller font size than the title

    Taken from the: Contractor WordPress Theme

    Subtitle width

    The subtitle should have either the same width or a smaller width as the title

    Taken from the: Locksmith WordPress Theme

    Subtitle position

    The subtitle should be positioned below the title

    Taken from the: Electrician WordPress Theme

    Subtitle alignment

    The subtitle should be either left aligned or center aligned with the title

    Taken from the: Dental Clinic WordPress Theme

    Besides aligning elements that are part of the logo itself, the logo as a whole can also be aligned with the page. The following is called shape rhyme between page and logo. There are two options:

    - If you choose to have an icon on the left of the logo you have the option to align the entire logo to the left of the page or in the center.
    - if you choose to have an icon in the middle of the logo, probably on top of the text block, chances are the logo looks best aligned in the center of the page.

    The left aligned option is by far the most common one.

    Icon to the left and left aligned

    Icon to the left and center aligned

    Taken from the: Preschool WordPress Theme

    Icon in the center and center aligned

    To let you logo blend in with the rest of the theme it's a best practice to use the same colors you've used in your color palette. Or vice versa: the logo should dictate the color palette you should use. This also means that, besides black, white and gray variants, the logo's color scheme shouldn't be comprised of more than 3 colors. Since that's the numbers of colors we provide within the framework.

    90% of the time I use a flat color scheme for the entire logo.

    When designing a logo for a website keep the following in mind:

    - The name of the site should be part of the logo - The name of the site can be complemented with a subtitle - When using fonts, make sure they are either Google fonts, SIL licensed fonts or Public Domain fonts - When using icons make sure there's no copyright infringement. To achieve this you're only allowed to use icons you've drawn yourself or come from 123rf or the noun project.

  • About the Author

    Johan van Seijen

    Co-founder

    Johan van Seijen is co-founder of Nexus Themes and our lead designer. After gaining a Master's Degree in Information Science he decided to try his luck in the illustration industry, working for clients as Avantgarde, Cosmopolitan and Glamour. With the return to the software industry grew the desire to create something to be truly proud of and which could spearhead his ambition of having his own company. And this company is what followed. He lives with his wife and daughter in Amsterdam.