Secret ingredients to quality software

SSW Foursquare

Rules to Better Logos - 2 Rules

  1. Logo design is an extremely important part of establishing a strong brand for a product or service. An effective product logo should have a unique design that incorporates a brand's core visual language and colors, and makes a lasting positive impression on users or customers.

    SSW products logos

    Figure: Good Example - Some of the current SSW Product Logos

    The following are great ways to establish a recognisable product logo:

    1. Color

    One of the easiest ways to start creating consistency is by forming a color palette. Most brands have one primary color they're most known for, and other colors that compliment it.

    The primary colors for SSW are always reflected in our logos:

    • Red: #CC4141 | RGB (204,65,65)
    • Charcoal: #333333 | RGB (51,51,51)

    2. Typography

    Type is another great way to establish strong and consistent branding across different products. It's more subtle than color, but customers and consumers can very quickly notice when your typography is inconsistent!

    The font used on an SSW product logo is Helvetica Neue LT Pro, the font weight for the first part of the product name is 75 Bold, for the second part of the product name it's 45 Light.

    3. Consistent elements and imagery

    Creating a template for product logos is an easy way to save time during the design process while enforcing consistent branding. For example, an SSW product logo always has three parts: a pair of angle brackets, a unique icon, and the product name.

    logoparts
    Figure: Main elements of an SSW product logo

    4. Logo variations

    An ideal logo design should take into account the different environments or formats they might be placed in. SSW product logos can all be found in 4 different color variations: Two-Colored, SSW charcoal, true black, or all white.

    4 color logo
    Figure: Good Example - Colour variations of the SSW TimePro logo

    Logos should also have variations that allow the logo to fit different shapes or layouts. If needed, we can stack our icons and product name vertically, make the product name 80% of the original size (e.g. 30pt for original, 24pt for vertical) and then center align the elements to create a vertical version of a product logo.

    vertical logo
    Figure: Good Example - Vertical version of TimePro logo

  2. An SSW logo design will be used in different situations. Be in large or small, horizontal and vertical, black or white, for print or for the web. Whatever the situation, we will want to do all we can to ensure it looks good in every scenario.

    A number of different formats will be generated, each intended for a different purpose, so it’s important to know what format you’re creating and why.

    1. EPS: Encapsulated PostScript

    EPS format is a vector file that can be opened by the widest range of software, including older versions of Illustrator, as well as products outside of Adobe, such as Corel Draw and Sketch on Mac. For this reason, an EPS format must be created as an editable source file.

    2. SVG: Scalable Vector Graphics

    SVG is a vector image format that can be used online. With higher resolution screens becoming more and more common, since it’s a vector format, an SVG file will ensure the logo we designed remains sharp no matter the device it’s viewed on. Therefore, an SVG format should be created for developers to use on web or app projects.

    3. PNG: Portable Network Graphics

    PNG format allows for transparency, so it can be placed over colored background or images. A PNG format with a transparent background and width of 1000px also should be generated for various usages (e.g. using on a powerpoint).

    4. Favicon: Also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon

    Needed when we are creating a logo for a product that has a website, a favicon is used on apps and browsers. It used to be created specifically in the ICO format. Currently, any transparent file type will work nowadays. PNG is the preferred format of choice.

    With the iPhone and so many new devices created during the last 10 years, the favicon is no longer a single 16×16 picture. It has many usages, many sizes, and many designs. The most well-known derivative is the Apple Touch Icon for iOS. This icon is used when your visitor adds your site to his home screen. Therefore, we extract the most recognizable icon from the logo and make it as a favicon in different sizes.

    • 32×32: Standard for most desktop browsers (replaces 16×16)
    • 128×128: Chrome store and small Windows 8 start screen icon
    • 152×152: iPad touch icon
    • 167×167: iPad Retina touch icon
    • 180×180: iPhone Retina icon
    • 192×192: Google Developer web app recommendation
    • 196×196: Android home screen icon

    5. Color Variation

    We should have the following color variation when we creating a logo:

    1. Color
    2. All Black
    3. All White (in a dark background)

    ssw logo sample
    Figure: Good Example - SSW logo design has three different color set

    6. Source file: Illustrator/Sketch

    Always keep a copy of the source file in Illustrator/Sketch for designers.

    Example

We open source. Powered by GitHub