Older Blog Posts

When Form Trumps Function – Part II
03/8/11

In the digital design and marketing industry, we talk a lot about specialists — usability specialists, visual designers, technologists or strategists. But really, all of those specialties fall under the moniker of “designer.” Anybody involved in the design process must take responsibility for all aspects, or necessary skills, of design:

• Strategy Design: The concept or story
• Technology Design: The medium or vehicle
• Visual Design: The look and feel
• Usability Design: The functionality

Whether we’re designing toothpicks or skyscrapers, designers must accept the responsibility of commanding all four of these skills and becoming experts in at least two. Otherwise, we’re like a baseball player who is an incredible ground ball fielder, but can’t or won’t throw the ball, swing the bat or run the bases.

Gary Hustwit captured this in his 2009 film, Objectified. In the film, Bill Moggridge , a co-founder of IDEO, discusses his realization that being an industrial designer wasn’t enough. He was already incredible at his craft — a specialist, even — but he saw that his work would benefit from a more comprehensive skill set. Instead of just partnering with an interaction design specialist, he increased his own capacity and integrated his innate creative skill into a holistic design process. Here’s a clip.

Clip from Objectified, A Documentary Film by Gary Hustwit – ©2009 Swiss Dots Ltd. Support his newest project Urbanized on Kickstater. Click here >

However, we must not forget the most important function of design: solving problems. Thus, our most important skill — far beyond mastery of any specialty — is understanding the problem. The specifics of the problem determine the correct course of action. The more specific the problem, the more effective the design solution. Tell me you’re hungry, and I will fix you a grilled cheese. Tell me you’re hungry for something savory, but you ate pasta last night and are allergic to cheese, and my solution will be much more on target.

Let’s look at some examples of problems solved by design:

OXO Measuring Cup > Most measuring cups must be held at eye level to get an accurate reading, requiring cooks to trust a shaky meniscus, or awkwardly bend down to counter height. The slanted sides of the OXO Good Grip measuring cup solve this problem — measurements are best read from above.

Dutch Boy Twist and Pour Paint > Crying over spilled milk? Not ok. Crying over spilled paint? Excusable. The ubiquitous metal paint can has caused many a spill, is difficult to pour and is even harder to open and close. Finally, in 2003, paint cans got the milk-jug redesign they’d needed for ages. Carpets everywhere rejoiced.

Snuggie > The blanket with sleeves. I can’t think of a better elevator pitch. Sure, it looks a little cultish. But any mother who’s braved -2 degree temps at her kid’s soccer game, clutching a hot chocolate while gesticulating wildly and berating the ref, knows the value.

Problems solved.

But, not all problems or design solutions are so clear cut, so I break problems down into two admittedly over-simplified extremes: formative problems and functional problems.

Formative problems are affective in nature — they deal with emotions and feelings, are hard to measure and are psychologically ingrained. Form solves formative problems (duh), so solutions tend to demand interaction, require emotional investment and tap into pre-conceptions.

I never know what flavor of 
Ice Cream I feel like eating.

Functional problems are generally obstacles to an intended result or action, and are extremely measurable. Rooted in efficiency and desired outcome, solutions tend to be quick-hitting, tangible and task-based.

Ice Cream gets stuck in my scoop, and I can’t get it out without using my fingers (or tongue).

These two extremes on the problem spectrum cannot be solved by the same design solutions — again, illustrating the importance of understanding the problem. The people experiencing these problems to the greatest degree will be on the fringes, so when solving problems, I look there first. A design cannot be all things to all people, but focusing on the poles affords designers laser clarity. Besides, the solution will likely address at least some of the needs of the mid-spectrum folks, anyway. In another clip from Objectified, Dan Formosa of  Smart Design speaks on the topic:

Clip from Objectified, A Documentary Film by Gary Hustwit – ©2009 Swiss Dots Ltd. Support his newest project Urbanized on Kickstater. Click here >

All that said, why was Maya Lin’s design of the Vietnam Veterans Memorial so successful? She focused on the formative problems veterans, families and the country were experiencing. She looked beyond the top-level functional issues to find the more important emotional problems begging to be solved. She ignored conventional paradigms, and didn’t let centrist thinking guide her design. She didn’t recreate or reference existing monuments simply because they were familiar. She understood that visitors would come there to feel something, not to learn facts or experience déjà vu. Again, I’ll reference Objectified. In this clip, Karim Rashid discusses the ridiculous shape of digital camera and the importance of designing for change.

Clip from Objectified, A Documentary Film by Gary Hustwit – ©2009 Swiss Dots Ltd. Support his newest project Urbanized on Kickstater. Click here >

As designers, we’re sometimes tempted to repeat archetypes, even when they don’t keep pace with technology or society. Homogenization of design can be important in usability design. I need to be able to sit in any car and figure out how to turn it on. However, I shouldn’t be tied to a familiar metal turn-key ignition if a proximity or remote start-up is a better design solution. Change for the sake of change is counterproductive, but the failure to evolve can be damning to a design. Formative design solutions often challenge the status quo, and while they may not always revolutionize, they often inspire, build and push design to change for the better.

So, how do formative problems and solutions manifest in the digital space? We’ll pick that up in When Form Trumps Function – Part III.

Why Severing Your Logomark from Your Logotype Might Make Sense
01/18/11

Over the last month, two of the world’s biggest brands have departed from spelling out their company name as an element of their logo. Instead, they are opting solely for what is referred to as a brandmark symbol, ideogram or pictogram. Starbucks Coffee and, as of last week, Target are now strictly featuring their ideogram removed from its traditional wordmark. Examples below:

This trend is nothing new. Look at iconic brands like Playboy, Apple and Nike, who made a point to dispense with their wordmark years ago. However, I confidently predict that more brands will migrate to this strategy in what we affectionately call the Digital Age.

Does this approach make sense for your brand, too? Consider these five reasons why it just might:

1. If you have an established brand and a multi-channel marketing approach, why clutter your valuable brand real estate with both a wordmark and a visual brand element? With prices soaring for as little as 50px on websites and in social media, you must effectively capitalize on your brand’s allotted space.

2. The size of the physical world is inversely proportional to the size of the digital world — meaning, as the digital landscape expands, brands gain easier access to countries and consumers they wouldn’t have reached even 2-3 years ago. However, even in a contracting global marketplace, cultural and language barriers still exist. When a company simplifies its brand identity and messaging, it can seamlessly transcend continents, countries and cultures.

3. These brand symbols have far more visual design versatility than their wordmark counterparts. This is especially true with regard to dynamic identities (for instance, animated logo treatments in pre-roll ads, banner ads and broadcast executions). These icons can also add dynamic visual interest in the background or as a pattern, where wordmarks would yield too much substance.

4. In the age of “likes” and “sharing,” 140-character limits and check-ins, giving users the ability to interact and support the brand is key to building organic brand affinity. Again, in most cases, this must be accomplished in a less-than-50px space. The simpler the visual representation of your organization, the easier it is to recognize as it’s quickly ushered down a Twitter feed or Facebook Wall, or swimming elsewhere in the flood of available information.

5. Finally, just like individuals can rally around a flag, family crest or religious symbol, so too can they rally behind your brand’s identity. An optimum outcome of any branding effort is to have users tattooing your logo on their bodies, wearing it on their shirts or incorporating it into their digital profiles. By simplifying your logo down to its most essential elements, you can empower brand enthusiasts to fly your brand’s flag in both digital and physical spaces.

Of course, the practice of severing your brand’s identity and creating a stand-alone ideogram is not for every brand. In fact, the design community has been very vocal about whether Starbucks has made the right decision.

Look to these specific guidelines when your company is deciding whether to migrate:

1. An ideogram should fit as well as possible in a square or circle. Anything too oblong will interfere with optimum sizing.

2. Detailed illustrations or photos will not reproduce well when scaled down. Simple is always better, but it is absolutely vital to a stand-alone ideogram.

3. Ask yourself, “Is my brand unique enough?” That is, will it be confused with others or lack the necessary context to communicate what it is?

4. Last, and most important, know your users and customers, and how they are going to react to the evolution of your brand. Bring them in on the decision.

Before you take the plunge, weigh your options and consider your unique circumstances. While a brand refresh can attract positive attention and help maintain a current image, a branding disaster has just as much potential to draw scrutiny on an increasingly public stage.

Music in Review > 2010
01/11/11

I always like to look back at this time of year and think about the bands and music that helped me through the good times and craziness of last year. 2010 was a roller-coaster year for me personally, I took some great trips, clarified a lot of things in my career and had many friends take their life in different directions. I feel like these albums helped me power through, but remain reflective and introspective as well.

Without further BS, my favorite albums of 2010.

10 –> Vampire Weekend :: Contra

I can’t figure out why this album is landing this high up on the list. I loved it. Maybe its that it was released early in the year and I have moved on. It could be that I had unreasonably high expectations, and though I was not disappointed, I was not overwhelmed either. Regardless of its status on this list, this is a great sophomore album for what is turning into one of the most polarizing indie-bands. Hipsters love to hate them because other hipsters love to love them. Vampire’s broad knowledge and usage of a wide range of instruments and worldly musical stylings make Contra a triumph. I think Ezra Koenig is best compared to a young Paul Simon, with an earlier established interest in African music. I continue to look forward to whats next for this band.

Favorite Track :: Horchata
- – – – – – – – – -

09 –> Kid Cudi :: Man On The Moon II: The Legend Of Mr. Rager

Cudi’s sophomore studio album, and the sequel to his first. Still stuck in his (apparently ever-stoned) mind, Cudi remains king of the lethargic, yet incredibly elaborate groove. His lyrics and and production lay into the beat; pulling not only your body back and forth, but your mind as well. Better than Kanye’s My Beautiful Dark Twisted Fantasy? Maybe. Its clear the influence is going both ways with these two.

Favorite Track :: REVOFEV (Revolution of the Evolution)
- – – – – – – – – -

08 –> Ratatat :: LP4

Taking their signature sound to another level here, Ratatat gives the world and mash-up artists a gold standard for electro-pop. You can dance harder to it. You can work longer to it. You can run farther to it. At its core this album is movement and energy provided in many ways by the afro-percussion prominent throughout LP4. Every track has a build and payoff, without the stress that usually accompanies such songs.

Favorite Track :: Tough… Bare Feast will give the best example, but the album is best listened to strait through.
- – – – – – – – – -

07 –> Frightened Rabbit :: Winter of Mixed Drinks

Been strongly behind this band since first listen in 2007, and notoriously missed their 2010 STL concert (I may have overreacted at work when I found out I missed it). My theory is that Scotland is genetically engineering incredible bands like the soviets developed gymnasts. Frightened Rabbit is a good illustration of this, and follow up to 2008’s incredibleMidnight Organ Fight is proof positive. While Organ Fight proved the band had serious chops, Winter proves they are ready for the mainstream as well. Solid Lyrics and powerful delivery keep a consistently impassioned vibe across all tracks, even transitioning some songs from simple ballads in to what amounts to an all out footballers chant.

Favorite Track :: Swim Until You Can’t See Land (sure its most popular, but it is truly a solid song)
- – – – – – – – – -

06 –> Spoon :: Transference

There is a good argument that Spoon could be the most popular and talented band you’ve never heard. Not you, but you. Expansive sound and an improvisational intuition make them just progressive enough to stay off the radio, but their affinity for their sound makes them easy to write off among music snobs. Spoon often can be recognized by their impeccable utilization of tempo and echoing guitar riffs, which are a staple on Transference. Well-written songs combined with dynamic instrumentation is enough put this album on the list, but the band’s transparent yet seamless experimentation on Transference make it a special addition to 2010.

Favorite Track :: I Saw the Light (Love when it flips the switch half way through)
- – – – – – – – – -

05 –> Gorillaz :: Plastic Beach

Can you call this a Gorillaz ALBUM? Not only was it based on a comic book turned into a movie of which the music told the story, but it also featured so many other artists. Snoop comes in at the beginning, followed by the likes of Lou Reed, De La Soul, Mos Def, and Bobby Womack. While star-studded, Gorillaz admiral this ship. Their style and skill at establishing a hook are apparent throughout. The streamlines of the album begs for it to be listened to in its entirety. There is something quite retro about what is clearly a very progressive and dynamic album. Could be the prominence of the Casio keyboard Life Aquatic-esque sound throughout.

Favorite Track :: Some Kind of Nature (feat. Lou Reed) (Might be all about Lou, but I love the sound here)
- – – – – – – – – -

04 –> Matt & Kim :: Sidewalks

This band has so much power and popular appeal. I can see why everyone from 10 year olds to the most avid music festival goer look to them for incredible performances. I tried hard not to be into them, but its hard. Almost impossible to avoid not only singing, but screaming along to these songs. Send the album to your mom, to your daughter and then buy it for yourself. Everyone will find something love here.

Favorite Track :: Cameras
- – – – – – – – – -

03 –> Yeasayer :: Odd Blood

I first heard Yeasayer on my favorite album from last year, the Dark Was The Night compilation album with the song Tightrope. One of my faves on an album of favorites. But when I checked out the bands’ other albums, I was less than impressed. So much so, that I basically wrote them off as a one-hit wonder of sorts. I couldn’t have been more wrong. Odd Blood is a titillating sonic adventure. An album you love to sing along with, but have no clue what the words actually are. This album has some pop sensibilities yet extremely dynamic, rendering it unplayable on the radio but enjoyable to anyone.

Favorite Track :: Madder Red (The video is awesomely weird)
- – – – – – – – – -

02 –> Beach House :: Teen Dream

Lead singer Victoria Legrand’s voice is the star of the show on Beach House’s third well-recieved studio album in a row, Teen Dream. Relaxing but impactful songs make the album great to work to, but possibly better for a long road trip. Beach House has a way with guitar riffs. They are instantly recognizable and you can’t help but turn it up when you hear it. This album is great song after great song. Moody for sure, but sometimes you need that for true inspiration.

Favorite Track :: Zebra
- – – – – – – – – -

01 –> Arcade Fire :: The Suburbs

I am convinced that Arcade Fire will be the Pink Floyd of my generation. Suburbs is on par with every other Arcade Fire effort, which might be an insult to some bands. Here however, it is one of the best compliments I can extend. They continue to dominate every album they create. Always provocative and smart, but more so on Suburbs. This album is for anyone who has ever felt the in-authenticity of the suburbs but pined for a glimmer of what it was like to be a kid again. Its a dilemma of my and probably other generations, we want to build something new, but in doing so we have to destroy something old, something we loved as children that has fallen ill. Thats how I read this album, and with lyrics that amount to poetry and instrumentation that equates a symphonic arrangement The Suburbs hits on all cylinders. By it today, but more important, go see Arcade Fire when they come to town. Don’t wait until you have no choice but to see the Australian Arcade Fire Experience in 2035.

Favorite Track :: Sprawl I & II (I consider this one song, complete spectrum of emotion here.)
- – – – – – – – – -

The Alternates ::

15. Goldfrapp – Head First (80’s Pop-throwback done particularly well.)

14. Fitz and the Tantrums – Pick’n Up The Pieces (Retro-sound of Frankie Valley, done in a contemporary way.)

13. The Dodos – Time to Die (Acoustic pick’n done extremely well, all great songs.)

12. The New Pornographers – Together (Big fan of this band and A.C. Newman, Great album with a big sound and expansive songs.)

11. Kanye West – My Beautiful Dark Twisted Fantasy (Damn it, Kanye! Too much hype, but great album across the board. Production value was #1, unfortunately I thought this was Kanye’s worst lyrical effort to date.)
- – – – – – – – – -

Those were the albums I was listening to, my faves. I could chat for hours on why or why not they have merit, but in the end we all know it just my opinion. Music is subjective to the Nth degree, which is why it remains so personal and important in peoples lives.

Photography Class
11/10/10

I started taking a photography class through STL Community College last night. I’m trying to get the basics down, so I can stop having to butcher my photos in Photoshop to make them look half way decent.

I want them perfect in the camera, and then I can ruin them later in Photoshop.

Anyway, it inspired me to shoot some stuff today on the way to and from work. Here’s a few shots that I liked.

By the way, the shot of the Parking Meter is probably the best photograph I have ever taken. It will be hard to top that, and I wasted it on a parking meter.

5 Minute Design: Tilt Shifting
09/21/10

‘5 Minute Design’ is a biweekly blog post that features tricks, tools and techniques in design. I only have 5 minutes to complete it, so I will make the design as basic as possible, use shortcuts, and cheat if at all possible. It is my hope that other designers, with your superior skill and intelligence, will have a quicker, cleaner and more precise way to achieve the design. Then you will punish me for my ignorance and lack of talent by posting your own solution.

And so it goes.

Tilt Shifting. I’m sure many have been over-using this technique for years.

I just started over-using it last week.

It is a style by which you take a photo from a high angle (from above), and manipulate it in Photoshop to draw attention to a specified area by masking and blurring out the peripheral. This makes it look like a scale model, and apparently, so awesome that it needs to be done to every photo hipsters take.

Lets get started.

1. Grab your iPhone and go to a high place with a sweet view of a low place. I chose the parking garage across from work.

2. Take some photos. Choose the best one. I liked this one:

3. Open that photo in Photoshop.

4. Press the ‘Q’ key to enter Quick Mask Mode.

5. Grab your “Gradient” tool from your tool bar. Choose a Black to White Gradient, then click the “Reflected Gradient” option from the top tool bar. Click on the focal point (for me it’s that car crossing the intersection). Drag your mouse in straight line until the entire height of the area you want in focus is covered in that transparent red color (This might take some experimentation, enjoy it!).

6. Now that you have your vertical space quick masked, we need to shorten the horizontal focal distance. We do this because a camera lens does not focus a straight line, instead it focuses on a specific distance, and blurs from there. Even though tilt-shifting is not reality-based, we do want to keep some degree of photographic dignity alive. So, select a White to Transparent gradient and click the “Linear Gradient” option from the top tool bar. From the right side of your image click, and drag your mouse toward your focal point. Stop and release at a point near where you want your focus to stop.

7. Repeat on the left side of your photo.

8. Click the “Q” key to exit “Quick Mask Mode.”

9. Now, start whistling “The Ants Go Marching One-By-One” like I always do, as your mask changes to the “Marching Selection Ants.” Immediately go to the Filter > Blur > Lens Blur menu item. A pop-up will appear.

10. Play a bit, but really you only need to touch a few things. Make your “Radius” between 30-40. Make your “Blade Curvature” between 30-40. And make your “Threshold” between 225-250. Check your preview to make sure you like, and click “OK.”

11. Click the “Command+D” keys to deselect your focal area. And WOW! look at that. Pretty cool.

12. Almost done. We need a bit more contrast, so under your “Layers Pallete” click the “Create New Fill or Adjustment Layer” option. Select the “Curves” Adjustment Layer. Make a standard, but subtle “S Curve.” Click at the top of the diagonal line (not the very top) and drag that point to the left a bit (15px). Near the bottom of that diagonal line, click a point near the bottom and drag that to the right a bit (5px). You want more rich dark and bright white areas. Click “OK,” or just be done when your done (CS4-CS5).

13. We are going to saturate the crap out of the image. This will make the things in the photo look like they were painted by hand. Really bright colors. Go back to the “Create New Fill or Adjustment Layer” and choose the “Hue/Saturation” option.

Bring your Saturation up to about 20-40 depending on the resolution of the photo (iPhone smaller, DSLR larger). Click “OK” when you like it, and you’re done.

Not to bad for 5 minutes. Impress your friends on Facebook. Maybe your mom will hang it on the Fridge.

Now, designers … What did I do wrong? Tweet me @robhutti or comment below.