Feed Me


Seth Taylor Graphic Design

Observations about the logos of highest valued companies

This April Apple’s company valuation passed the $600 billion mark. There are only 5 other company’s to reach that same value. Here’s a few commonalities of their logos.

Simplicity reigns supreme.

  • All of them employ a strong super-simplistic-easy-to-remember logo
  • 4 of the 6 use a single color for their primary logo
  • 3 use red; 3 use blue.
  • 3 of the 6 use a clean typographic ligature.
  • All of the 6 have simplistic customized fonts. Even Apple a customized version of the ubiquitous Myriad.
  • All of them have gone through revisions that greatly simplified the logo. This helps logos to be easier to reproduce and apply to products.
  • 4 use a sans-serif font. One uses a script.
  • 3 use a shape and then repeat it at least 4 times
    • Microsoft with one block repeated in various colors
    • GE with the tear shape rotated and repeated
    • Cisco with varying and repeating vertical lines
  • All of them make legibility and readability absolutely obvious
  • None of them use dimensionality – shadows, layers or foreshortening.

highest value logos

If you can’t find the perfect font, sculpt it

For a recent logo development project, a beloved client loved a particular sketch. After culling through thousands of fonts in the database memory it became clear that a custom typeface would be the only way to proceed. So the lettering sketches began.

Frequently when crafting the perfect logo it makes sense to start with a pre-existing font and then alter a few of the letterforms to make sure all the letterforms flow together nicely. Conversely, the following font is completely built from scratch starting with a single line being drawn in Illustrator and incrementally building and manipulating the curves.

For those who’ve embarked on custom font development, you know it can be a joyous discovery of voluptuous curves and intersections. However, as Christian Robertson said, “the ‘s’ is the most difficult letter to design in the [english/latin] alphabet.” I agree — there were a few profanities released during the building of this set. Here’s a few tips to sculpting an ‘s’ of steel.

› Make sure that the upper and lower counterspaces aren’t equal.
The bottom is frequently slightly larger than the top
› The diagonal curve will likely be thicker than the rest of your strokes
› Don’t be afraid to start over several times
› The terminals determine a significant amount of the attitude of the font

custom type design

FYI – This font will not be for sale as it is a proprietary font built for a client (unless they choose to make it available) If you’re looking for similar well-crafted fonts, you should consider: Silas Dilworth’s Breuer or Hoefler & Frere-Jones’ Forza.


Get ready to vector your retinas

The MacBook Pro with Retina Display changed more than your appetite for resolution; it will change the way many people view the web. Because its resolution (around 300 dpi) is so much higher than most (72/96 dpi) screens, many websites will either look too small or many sites will begin to get fuzzy looking. (example below)

There’s a few ways to compensate. The way that will be discussed here is to use .svg for images where possible. SVG or Scalable Vector Graphics have been around since 1999 but have limited adoption for web use until recently. As usual, Internet Explorer lags in adoption, but the good news is that according to wikipedia, IE9 supports the basic svg feature set.

UPDATE:  added .png example – thanks for the suggestion Chris!

These two images are both generated from Adobe Illustrator. The one on the left is our rusty-dusty .jpg format, the middle a transparency supporting .png while the one on the right is an crisp and smooth and transparency supporting .svg. What? You say they look the same? We say, right you are!

.jpg example (file size: 4,329 bytes)    svg 40 x 68

But wait and see what happens when you start to scale the exact same files.

.jpg example (file size: 4,329 bytes)     svg 40 x 68
Fuzzy Wuzzy was a jpeg (or png).

The imagse on the left and in the middle is what your website will look like on a HiDpi screen like the Retina, whereas if you use .svg icons, navigation elements, and other graphics your site can stay clean, large and crisp.

And, because I love you and don’t want your websites to gain any weight, check out the file size on these images.

40px by 68px JPG: 4,329 bytes
40px by 68px PNG: 937 bytes
40px by 68px SVG: 1,273 bytes

You may be saying, but that’s barely a 4k footprint for file size for a .jpg That’s true. However the beauty of the .svg is that you can scale the dimensions indefinitely and it still maintains it’s original file size.

1000px by 1700 px JPG: 134,505 bytes
1000px by 1700 px PNG: 49,075 bytes
1000px by 1700 px SVG: 1,273 bytes

There’s a lot we could talk about to properly prepare svg files and how it will affect your website of the future. Feel free to reach out in the comments below or @stotion on twitter.

Protip: As of the writing of this post, WordPress doesn’t natively support the .svg file format. So, like the Zelda guru says “It’s Dangerous To Go Alone, Take This …  SVG Plugin

Yesterday, Chris gave a great presentation about the new navigation on the Apple.com navigation menu at Eli Kirk (where we’re coworkers constantly tweaking the web).  It’s sporting a svg sprite with subtle dimensionality effects. It’s a well-crafted and not-too-hard-to-recreate example.

Living in the Venn

Great quote celebrating the importance to have an integrated approach to conceptualizing and creating.

Somehow, the powers of the commercial design and advertising industry often have the unfortunate effect of separating the “thinkers” from the “makers” over time. Our goal is to buck that trend, and to build a company that has powerful conceptual thinkers (people who have inspired, blank-canvas ideas) as well as powerful makers (who bring those inspirations to life, within the constraints of the real world). There are a few renowned companies who seem to have successfully done this; we aim to follow suit – and we are.

Erik Karasyk at hush studios

In many ways it espouses the Bauhaus movement to bring artisans and engineers together so that each can be benefitted from symbiotic constructive comments. In the end an artisan/designer will become more efficient and effective in building; and simultaneously, the engineer/developer powerfully contributes to the enjoyability of the finished product. The more these disparate skills coordinate and overlap, the larger the sweet spot of the living Venn diagram.


The path of digital interaction

In developing interfaces, many people enunciate a common goal “it has to be simple” then within in a very little time they want to add feature after feature and make the user experience surprisingly complicated. While those features are helpful for expert users, it estranges the new adopters. So, what is to be done? How do you add features to your site, app or software without getting prohibitively complex? Here’s a hint at a longer blog post I’m preparing.

Custom web font kerning

I have a not-so-obvious attraction to two things. Kerning and butter. It seems nice kerning makes the nicest headlines feel so smooth and tasty, which is why I’m pretty happy about the TypeButter. Although I haven’t sufficiently kicked the tires of this little jquery plugin I’m looking forward to web headlines being custom fonts, beautiful, and well-kerned.

Have you ever drank motor oil?

Stop a moment to think about how ugly some of the food you eat is. Ever tried looking at a Clif Bar for too long?

At Eli Kirk, there’s a current food packaging project that oozes interesting visual challenges. And whenever there’s a good challenge, there’s always something that can trigger a several creative ideas. Some products look absolutely delicious the moment you unwrap them. Meanwhile some of the products require some creative problem solving to figure out which colors, patterns and typography are going to make the product look its best.

When I look for inspiration in packaging, one of the great successes that comes to mind is Odwalla. Take a look at the picture below. Without its label, the thick viscous liquid seems like remains from well-blended slugs. But with the intelligent color combinations and strategic appealing shapes, I’m more inclined to enjoy a drink.

Roll over the image below to see the difference a good label can make.