Feed Me

Icon

Seth Taylor Graphic Design

Vector checkmark design

When designing interfaces, frequently I’ll need a checkmark. In many circumstances it’s important to incorporate a humanistic element. This one tapers with the beginning stroke, gets heavier near the base, and finishes with a subtle taper. No big deal, I just wanted a place to share this and access it at other times. Feel free to use this one for whatever project you want. Below is a scalable vector and transparent png version.

checkmark-graphic-free

Revealing Compexity

Quick ux tip
Pay close attention to how you reveal complexity. Not all users care to become experts. And experts shouldn’t be required to use simple mode when they need to make precise configurations.

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.

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.

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.

Liquipel Logo and Branding Materials

Liquipel technology is easy to love; and it’s been a blast showing off it’s capabilities. Soaking your iPhone (with no case) in water with no damage to the device tends to surprise people. Not only has demonstrating the water safe technology been fun, but developing the Liquipel brand energized me every time I got to work on it. Everything ranging from logo design, website, CES display strategy, package design, photography and large environmental displays.

Here’s a few of the things I got to work on.

Download vector version of Liquipel logo here

Props to them for their nomination for an Edison Award 2012 and for the display at CES.

Designed while at Eli Kirk

Photography: Stotia

Link round up

Resource:
Make sure to take some time to peruse some delightful pre-disney era designs and illustrations. The color theory alone is well worth some appreciation time. I’m especially fond of the typography and filagrees of the Sanborn Fire Insurance Maps and the illustrations in calendars of the Antikamnnia

Favorite new app:
Recently I’ve enjoyed lemon.com and the free iPhone app. I like the simplistic interface design, and the convenience to take photos of receipts and have all the text OCRed for future use.

Videos:
Everything is a remix: Helpful viewpoint in learning creative solutions. I’ve always frowned upon people who blatantly ripoff some one else’s design. But a designer that can pull off a killer remix of previously uncombined ideas deserves smile of respect followed by a sketch of the new idea you just got from it.

Kid History: Clean and entertaining way to hear a story from the perspective and vocabulary of a child, but acted out by adults. My favorite way to watch these funny videos is in the company of my wife and children. My kids rarely stop laughing.

Adrenaline rush “I believe I can fly” – Proxy adrenaline rushes are sufficient for my tastes. This video foots the bill, and this comic captures my thoughts exactly. More video sweetness and slo-mo from the same film maker here.

The above video get’s me excited to do more sports/motion capture. I’ve gotta try a glidecam sometime. Does anyone know where I can borrow a glidecam around here in the UV area? I’ve called around here, and no one seems to have one available. Please drop me a line if you have any suggestions.

Categories