Before things get rolling, I should say that I’m only going to provide a 1,000 ft. view of our process. This is for two reasons: 1.) every project is different, so the best I can do is provide a summary of the steps we take, and 2.) this needs to fit into a digestible blog post, so I can’t be too verbose with my details (lest I venture into QED territory). If there is enough demand, in the future I can write up something more in-depth.

In general, there are four steps to generating a graphic from a 3D object the DLB way:
1. get a model, 2. render the model, 3. vectorize the rendering, 4. style the graphic.

We’ll cover steps 1 and 2 today and finish off 3 and 4 over the weekend.

Step 1- Modeling

First things first, we need a model. If you’re interested in making your own, there are plenty of free modeling packages out on the web. SketchUp is a good place to start learning if you are a beginner. Blender is another option. It’s a bit more challenging, but offers a more comprehensive range of features.

Google 3D Warehouse is a decent resource for models or inspirado.

If modeling isn’t your thing, there are a number of free models to be found on the web. Just be sure to respect their owner’s copyrights if you are going to use them for commercial or personal gain.

TIP: If you’re modeling or looking for a model, it’s best to go for a more exaggerated or simplified look than something that looks detailed or realistic. Emphasize the most important aspects of the object; focus on legibility, especially if you’re going to use them for icons.

I won’t go through the actual steps of making or loading a model as it’s beyond the scope of this tutorial. Rather, let’s assume that you’ve got your model and go from there.

Step 2- Rendering

1. Once you have a model, the first thing to do is set up a camera view. How to do this varies depending on your software, but in any case, create of viewpoint that you want to turn into a 2D asset.

   We’re going to create a rendering from this view, but first we need to do a little prep work. Typically, renderings have a finished look, but we don’t want that for this tutorial. We’re going to use the 3D model to create a clean graphic that we’ll finish in Photoshop later.
   

2. In order to make it easier to read the model’s geometry, create and apply some colored materials to the different pieces of your objects.
   

   We’re not looking for accuracy, just high contrast. Each piece should stand out from its neighbors. This is going to make it much easier for us when we vectorize it.

3. Give it a test rendering and inspect your work. If you can’t read the edges of an object, you may need to explode some faces and apply more contrast materials. Adjusting the scene lighting for higher contrast might help, as well.

4. Once everything is looking good, render your camera view to a fairly large size, lossless image (start at say 800 x 600, .tif format). The bigger the image, the easier it will be to work with later—especially if you have fine details in your model.

The image on the left is rendered close to the actual asset size. The image on the right is rendered much larger, which should make it much easier for you (or the computer) to trace.

Now we’re ready for step 3. See you back soon.

Have a great 4th of July!

We've said it before, and we'll say it again. Designing a restrained billboard might be rare, and even culturally antonymic, but when it's done right, it's incredibly effective.

Billboard Advertisement for the Denver Water Public Utility

Here, the Denver Water Public Utility takes the Eskom strategy one step further, actually chopping their billboard down to about 20% of its allotted size. This is not only highly effective because it capitalizes negatively on our perceptual fluency for billboards, but it's also quite apropos to the content. Nicely done.

Billboard Advertisement for the BIC

Secondly, this incredible billboard for BIC razors makes excellent use of many of the principles we at DLB hold dear. Specifically, (1) the aforementioned confounding of perceptually fluent expectations, (2) the Power of Profiles (here, capitalizing on the unique and recognizable shape of the BIC disposable razor), (3) the judicious use of the context/environment of the design, and finally (4) a very interesting (sculptural) complication of the figure-ground relationship.^*

All these excellent factors add up to an almost completely blank billboard. Chew on that.

^* Please note also my near-giddiness that this billboard allows me a second occasion to use the Claes Oldenberg tag.

Apropos of a continuing discussion between Nick and myself about the nature of design here at Blogless, it seems almost compulsory to mention Jess McMullin's Design Maturity Model.

Jess contends that both corporations and designers are at different levels of design maturity, ranging from No Conscious Design — where "design value isn't recognized" — to Framing, where "design redefines the challenges facing the organization." (Here's a PDF of the DMM, for your inspecting pleasure).

In kindly keeping with what we've already understood as part of a "natural" paradigm for modern design-thinker types, Style (making things look better) constitutes the second-to-lowest stage of design enlightenment, followed by Form and Function (making things work better), and finally followed by Problem Solving en route to abstract corporate-strategic planning as design-nirvana, the aforementioned Framing.

Even assuming the stability of Jess' five manifestations of design, (E.g.: Can we really say that most "style"-focused projects necessarily understand design as a "cosmetic afterthought"? Further, even if they do, don't products still need cosmetics?) there still seem to be some significant questions about the legitimacy (or, let's say the finality) of this arrangement.

To wit: First, why is one manifestation more valuable as a practice than the other (no explanations are offered), and second, why should any one manifestation be more valuable than the other?

Compulsory Hierarchies

On the one hand, if we assume that the configuration of practices that constitute design need to be arranged in a hierarchical way (for pedagogical purposes, or what have you), we've simultaneously got to recognize that any hierarchy we choose constitutes, in some capacity, a sort of realpolitik.

In the least generous interpretation, it could be suggested that framing design intelligence as an ascending ladder in which each rung becomes more and more abstract (and thus each of whose products are less tangible) is a way of dissolving criteria by which judgment can be made on the results of a particular consulting engagement. This is, of course, the aforementioned Emperor's new clothes strategy.

In the most generous interpretation, we make an appeal to a rough-and-ready notion of something like "broadness of value" — in other words, what design practice is going to have the most far-reaching implications on the way that the object of the design is perceived by its audience (assuming this is the goal)? But even then, it seems that as soon as we cross the threshold into Problem Solving, we're already in danger of being too far up our own asses, as the practical implications of our solutions threaten to exceed the boundaries set by the terms of engagement.

Of course, this explicitly becomes no longer the case when our client corporations accept the notion of design maturity as set forth by us. And in this case, products and even companies theoretically may become better designed at a high level, so again, in the best design-esprit-de-corps, the DMM is a valuable corporate-pedagogical tool.

That said, either way you want it, the particular hierarchy set up by the DMM is firmly situated (framed) in the context in which the very best thing designers can do is to help corporations innovate. This is, regardless of what you think of it, not a presuppositionless standpoint, and further, I can assure you from experience, neither is it a globally agreed-upon one.

Alternately, one could imagine the Poyner/aesthetic hierarchy, or a handful of others, looking very different, and certainly being no less valid given an even slightly altered ideological design framework which proffers itself as the sort of degree-zero or realpolitik of design practice in general.

Strategies for Stratification

On the other hand, if we can momentarily divest ourselves of our ideo-pedagogical responsibilities, and reject the need for a hierarchical organization of these manifestations of design, we could begin to develop more productive stratifications for design practice.

And frankly, if we're going to array a stratification of design practices under the aegis of maturity, I think we owe it to ourselves to admit that the hierarchy is primarily a structure of convenience and self-reassurance, and that we need to do better. Selah.

Paul and I have discussed releasing a DLB icon pack in the near future, so I’ve been thinking a lot about icons lately. It’s interesting to consider the conventions of icon design, which, in some cases, haven’t changed much in 25 years (at least). In particular, I’ve pondered over the icon for “save” which, in most cases, is represented by a 3.5” floppy disk (most prominently, in Microsoft Office).

When you first think about it, it seems to violate the UI metaphor principle. I mean, the save-floppy represents something that barely anyone uses today. Children born ten years ago have probably never handled a floppy disk. Not to mention all those born later and yet to be born. It may as well be a picture of an 8-track tape.

I’m not the first person to ponder this question, but I’ve yet to see a satisfactory replacement.

Here's one that manages to combine both the folder metaphor AND the floppy-as-symbol.

One alternative I’ve seen, the “piece of paper into the folder” save icon, doesn’t hold up to scrutiny. There are too many folders and pieces of paper in our interfaces already. It just gets lost up there.

I don’t think updating the icon to something newer, say by making an icon of a keydrive, is any kind of a solution, either. Saving is a universal function. Why tie it to yet another, soon-to-be-obsolete technology?

More importantly, a keydrive wouldn’t read as well graphically. Shape-wise, they’re basically sticks; they’d probably fail the Groening test. Moreover, they aren’t nearly as standardized as other storage media. These days, anything with a male USB port is potentially a storage device.

Simple shapes, good profile, high contrast. Floppy wins, long live floppy.

When it comes to graphic legibility, the floppy disk is hard to beat. It doesn’t need any perspective cues as the real thing is almost two-dimensional already. Lots of nice crisp 90-degree lines, too. It’s really quite a good shape, especially at very small sizes.

Maybe that’s why it continues to survive? Perhaps it doesn’t matter. At this point, it’s not logical, it’s convention. Design-ego and UI principles be damned.

I think that’s the lesson here: it’s no kind of solution to reinvent things that work. In other words, design less—because the alternative would be bad design.

The save-disk icon is an intriguing case study because it has progressed beyond metaphor and now retains its legibility through familiarity. Just as the letter “A” evolved from a picture of a steer, maybe someday the symbol will become even more abstract until it barely resembles a disk at all.

I’m going to play with this idea a bit and see what I come up with…

Last week, I gave an example of brand collision: when two different products end up with the same or similar branding. At the very least, this is confusing for the consumer and has the potential to weaken both brands. In some cases, the collision can be downright embarrassing.

I talked briefly about how to avoid such an occurrence, but today I want to go a little further. It’s easy to spot overlapping taglines using Google, but those are really just the symptoms of a larger problem.

With a list of some 20+ businesses that all use similar slogans, it’s clear that not all of them can possibly be doing the same thing. They throw around the same buzzwords because they have nothing specific or extraordinary to say about themselves.

Brands collide not because everyone is trying to fit into the same spot, but because no one in the pileup has any idea where they are going.

In competitive markets, many look to design to make their company or product more noticeable. While it’s true that good design is important, its pursuit can often cause businesses to overlook the big picture. The way to emerge from the pack starts from within with a business, not its brand. If the message is vanilla it’s probably because the product, is too. Great brands grow from great businesses.

As a designer, I’d rather communicate your strengths than conjure some up for you. A great product starts by being better or substantively different from its competitors in some important area. That’s Business 101. I may be biting the hand that feeds me, but I don’t think better branding makes a poor or indistinguishable product “good”.

Success doesn’t begin with slick graphics or statistically improbable phases. If your product is not outstanding, how can your brand stand out?

In a market (ha!) saturated with "zing! pow! zoom!-esque" design, London-based R Design and IDEO founder Naoto Fukasawa show us the path to cut through the noise, and create powerful, harmonious packaging design with less.

We'll let London-based R-Design speak for their design for Selfridges & Co. products: "...this colour coding of black shines on shelves that traditionally blind us with lurid rainbows. One color. One typeface. One point size. Packaging good enough to eat."

Couldn't have said it better myself.

Taking design restraint one step further, the inimitable Naoto Fukasawa never ceases to amaze with this lovely package for banana juice. It is hard to extol this design enough: Fukasawa uses a communicative surface to actually remove the need for any type or graphics whatsoever. Nirvana.

Thanks to our friends at The Dieline Package Design Blog for the heads-up.

I wrote a post a while back about a conundrum I faced—which side of a can of Red Bull should display the label: the side facing the customer or the drinker? On one hand, I argued, people want others to notice what they are drinking, so it is important for the logo to face outwards.

Earlier this week, a reader commented that the logo wasn’t that important – the unique, narrow shape of the can was how people would recognize the brand. I thought this was a good point, and it reminded me of something I’d read frequently in interviews with Matt Groening about the importance of profiles or silhouettes in design:

The secret of designing cartoon characters — and I’m giving away this secret now to all of you out there — is: you make a character that you can tell who it is in silhouette. I learned this from watching Mickey Mouse as a kid. You can tell Mickey Mouse from a mile away…those two big ears. Same thing with Popeye, same thing with Batman. And so, if you look at the Simpsons, they’re all identifiable in silhouette. Bart with the picket fence hair, Marge with the beehive, and Homer with the two little hairs, and all the rest. So…I think about hair quite a lot.

Of course, everything has a shape, but I think it is common to overlook the effectiveness of profile. Too often, I think, we focus on the content rather than the container and profile simply is simply what emerges. What Groening is saying, I believe, is not necessarily to do the opposite, but that a strong design works even when it is reduced to a mere outline.

It’s something to think about the next time you’re designing something that needs to stand out and be recognizable, like a brand or even a collection of icons for an interface. Take a step back and look at the artifact in silhouette. Now how does it read? Does it distinguish itself?

As for the Red Bull… well, these days it’s not the only tall narrow can on the shelf. It’s disappointing because it’s no longer distinguishing in the same way. However, it speaks to how iconic the design has become—the Red Bull design is the energy drink can.

Your moment of Zen for the day:

Shapes are important.
But shape isn’t everything.
More Tao of design.

Reading Paul’s post from Wednesday, I was reminded how much work is performed by the word "design" and how many domains it crosses over. Poynor stakes a claim for greater emphasis on the visual in design, but as Paul wisely points out, a lopsided account of the discipline is unproductive.

Certainly, the way something looks is important, but this isn’t the only criteria for a design. John Maeda writes:

[I]n Japanese there is the word sekkei, which connotes designing a mechanism, system, or technology with rationalized metrics for quality. Dezain, on the other hand, goes beyond an object’s function to how it makes us feel.

This seems to be the right idea. However, such a definition places no limitations on how sekkei or dezain are accomplished or in what proportion. Something that works well can make us feel good; it doesn’t necessarily have to look good. Similarly, as Donald Norman points out, something that looks good can make us think it works well. Both might be considered good designs by their users.

The lesson here is that even as we try to isolate what a good design needs, design can never be so formulaic. Experience tells us that sometimes, when everything is accounted for, it still doesn’t add up.

The truth is, it’s not all that useful to separate the different aspects of a design. Design is everything taken into consideration. As Bryan Lawson writes:

“A piece of good design is rather like a hologram; the whole picture is in each fragment. It is often not possible [to determine] which bit of the problem is solved by which bit of the solution.”

Whether it is an object, a process, or the field itself, design can’t be fragmented so easily. To understand it all, we need both thinking and making; structure and surface. When we read articles like Poynor’s, we should recognize them for what they are:

Anyone who tries to draw battle lines around what is and is not design isn’t promoting design. They’re promoting an institutional view of design.

I don’t think it’s constructive to try and isolate one implementation from another. Whatever form it takes, design should be rigorous, not shallow. We can all agree on that one.