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!

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.

In the late 1870s, scientist and eugenicist Sir Francis Galton developed an image of the prototypical "face of crime" by creating composite photos of men convicted of serious offenses.

Though Galton failed to discover anything abnormal in his composite criminal faces, he did find that the resulting visages were shockingly handsome. (The middle face here is the product of 14 criminals.) Studies have since established that people find prototypical faces—those with average features—to be attractive.

– Maggie Wittlin, Seed Magazine

An attractive ‘average’ face generated by the Face Research Lab

Back in September, 2006, a paper published in the journal Psychological Science proposed a new explanation for this phenomenon: Prototypical faces are pleasing because they’re easy for the brain to process.

"The principle finding is that you like a pattern to the extent that you classify the pattern fast," the study’s author and psychologist at the University of California, San Diego Piotr Winkielman said.

On the one hand, this is pretty old-hat to anybody in the design business, and particularly anyone in the interface design business (web or otherwise).

We all learned in UI 101 that (a) a good operative definition of "usability" is that a user doesn’t have to think about how to do what she’s going to do, (b) that one of the best ways we can accomplish this is give them interface elements that they’ve already learned how to use.

On the other hand, the Gestalt Laws of Prägnanz provide us with some formal figurations that explain why our brains like puzzles.

Just as doing a bit of physical exercise, mental exercise is not only helpful to us in the long run, but can provide an "adrenaline-rush".

A simple Gestalt ‘Figure-Ground’ puzzle

So, obviously our designs should be created to take advantage of our user’s perceptual fluency both positively (providing familiar UI components) and negatively (using Gestalt and other techniques to provide users with the endorphin-rush of solving a simple visual puzzle).

The really interesting question is whether you can do both of these things at once in a way that preserves the value of each. Now that’s a design problem.

The 3D tutorial is going to be delayed until next week. It’s taking me a long time to prep all the models and images I need.

Instead, I’m going to share something I came across recently on Drawn!. (If you’re a fan of illustration and animation, this site belongs in your bookmarks.)

I can’t find much information about him other than his images, but I like what I see. Parfenov reminds me of the work of Tamara de Lempicka, one of my favorite artists.

Like de Lempicka, Parfenov’s focus seems to be portraiture with the occasional landscape. I think the fact that these are paintings, and not vectors, is what makes them so appealing to me. The geometry is strong, but the natural colors and the blending soften things up. It’s that “soft-machine” look that really appeals to my tastes.

Some of his likenesses are better than others, but overall he’s got some striking pieces– like our ol’ buddy John, here. Check him out.

A standard Fenske blog post takes the form of a letter to his students. Here is an example excerpted in its entirety (sans picture):

Q: What Does the Pilot of an Airliner Do if the Plane Suddenly Drops 2000 Feet?

A: Look up from his newspaper.

Dear Students,
You’re not going to get any preparation for this in your classes.
But you should know it.
The key to success in big time advertising: learn to live out of a carryon.
Don’t get into this business unless you truly love airplanes.
Merry Christmas.
The holiday dedicated to us not having to get what we deserve.

I quote his post here in verbatim, as I can’t think of a more effective advertisement for his inimitable style. He’s like Paul Arden, if Arden were a character in a Kafka story.

Among my favorite of his aphorisms: A Promise is an Infomercial, Maybe you suck, and this image, from It’s February. Time to let Mr. Wacko in:

His blog is markfenske.com.

Hail to the king, baby!

Newly-installed RISD President, John Maeda with newly-enrichened RISD Alumnus, Seth MacFarlane (creator of Family Guy).

Not quite Brad Pitt with Rem Koolhaas, but I am big fan of both of these guys and it makes me smile to see them together in one place.

Check out John’s shirt, too. Is that wild, or what?

For some reason, I always read these, and inevitably end up frustrated. Not just because of the standard objections to eye-tracking as a useful methodology, but because out of the 20 of them I’ve read, it feels like numbers 2-20 haven’t added anything substantive – or, more importantly, generalizable – to the information I got in the first one, which taught me about the "F"-shaped eye pattern (later popularized as the "golden triangle").

So this time, I was determined to review some of the secondary literature on these studies (in the form of scanning the first page of Google’s search results [note to self: touché]), and see if I could generalize the lessons of eye-tracking studies for myself and people like me.

And when I say generalize, I don’t mean come up with a Smashing magazine list of "The Top 276 Things Designers Can Learn from Eye-Tracking Studies" that basically recapitulates the bullet points of all the harvested literature verbatim. I’m talking about getting this down to a set of rules of thumb you can write on the back of a business card.

Now, if the post title didn’t scare you away, here’s your explicit warning: I am a web designer. I make sites that don’t tend to be advertising-supported. My problems are very different than the problems of people who have to figure out how to increase click-through at Google, or who sell their expertise at ad-placement. I am honestly concerned with usability here, not revenue. If you want that, here are about 89,400 references for you.

Mutatis mutandis, and without further ado:

1. Use the top left corner.

As indicated back in April of 2006 by the Nielsen group, readers focus hard at the top left corner, and progressively less to the right and down the page. This means that you’ve got a relatively small piece of your total real-estate to both get your readers hooked on your content and to teach them how to use your site.

This gets exploded into a lot of facts, but the rule here is simple: Don’t get creative about where you put your site hooks. If they’re not in the top left corner, users are going to leave before they ever find them.

This is, of course, only true for countries and alphabets that read from top left to bottom right, and particularly in languages that allow people to effectively create useful semantic maps by scanning (as opposed to more ideographic alphabets).

Additionally, all of the standard corollaries about short paragraphs, big headlines, preference for single-column layouts, etc. are established by this rule. Assume that your reader is already not paying attention. "This seems consistent with ‘Information Foraging Theory’ where users are said to hunt for information by ’scent’ or navigation and content of the highest value to them." (Spillers, 12-2004)

2. Type size & attention have an inverse relationship.

The data seems to indicate that people read smaller type more carefully.

That said, you’re going to need to strike a balance, as left to run amok, this can operate contra to all that good advice about not fatiguing our readers eyes, and about bigger text being "friendlier", etc.

In fact, bigger text is presumably thought friendlier precisely because it invites you (the reader) to scan it easily, and doesn’t force you to pay particularly close attention. So, understanding that screen type-design is a negotiation between being better liked (using bigger fonts) and being better read (with smaller fonts), it’s clear that you can’t just make all your text minute with the hope that it will force your readers into a trance-like focus on your every word.

You can’t, that is, unless you have a 250px-wide readable column.

3. Pretty bird!

Finally, there is apparently some evidence that people will look more carefully at images if they are (a) big, and if (b) they contain a person’s face.

You talkin’ to me? Pretty bird!

We’re calling this "Pretty bird!", because I am pretty sure this is an Amygdala-level reaction that operates similarly to a parakeet staring at itself in the mirror. We like to look at big, clear pictures of people. We can sympathize.

Mission Accomplished!

I should state upfront that we didn’t set out to work in 3D. It’s primarily a symptom of my training as an architect. Although most architects still draw your standard 2D plans, these days we also do a fair amount of design work using 3D. The majority of us know how to model fairly well. When Paul and I first started out, I used to draw everything by hand, but since I went to school, whenever I want to create a graphic it just seems easier for me to start with a model of it.

Advantage: 3D

What’s the advantage of working this way? It completely changes how you think about your assets, which, in turn, gives you far more options as a designer. Instead of focusing on one static image, you get to work with things.

Working in 3D allows us greater freedom to experiment. Left: various perspective views; Right: trying out different objects inside the box; Bottom: Final rendered image for site

For example, recently we needed to draw an icon of box of documents. Once I made the models I needed, I used the virtual camera to create several different versions of the icon. I found a camera view that I liked, but I didn’t like the layout of the objects. With the 3D model, I could move them around inside the box without having to erase or redraw anything. Working this way is almost more like studio photography than drawing.

Along those lines, once you have a model of something, it’s trivial to make several copies and arrange them into new compositions or mix and match old models into a new one. Of course, you can do this with 2D, but the images often look so similar and/or have different perspectives that it’s obvious they are clones. With 3D, the rendering generates plenty of visual cues so the elements don’t get boring.

Left: Photoshopped copies using scaling and transform only; Right: 3D provides more variation with the same objects

More than anything, I use 3D as a drawing aid. Unless you’re creating something like a container or an icon that is meant to be flat, objects need to have perspective. Almost anyone can draw a 3D cube, but for irregular or organically shaped objects, it’s easier to make the object in a 2D view and let the 3D camera figure out the perspective. This is probably my biggest secret: with this technique, a lot of our graphics look right without necessarily looking 3D.

It’s not commonly known that 3D models can generate any number of image styles. Most designers opt for the glossy car-paint look and never get much further. There are a number of different software options and techniques one can use to transform a rendering. Model files have more data than an image, so the differences are greater and better looking than the mere pixel distortions one receives from a Photoshop filter. The same model can be rendered as photorealistic, exaggerated 3D (think Toy Story), cartoon, sketch, etc. This allows us a lot of flexibility when we’re developing a site’s look and feel.

The BlogLESS Bucket is a 3D model, post-rendered with a cross-hatch plugin.

With the ability to change both viewpoints and rendering styles, it’s quite possible to reuse models for different projects because the resulting images look so different. For generic web design objects like, say, computer equipment, this saves us a lot of time.

Sounds great, but…

The primary disadvantage is that it’s a lot for someone to learn. 3D software can be pretty complicated, but it is getting better. I would still say it’s more difficult to pick up than something like Photoshop, simply because most people have some experience drawing or working with layers of paper, but they generally have far less exposure to the idioms of working in 3D space.

Furthermore, like most tools, the strength of 3D is also its weakness. It’s great to be able to move around with a virtual camera and make an image from any side of an object, but that also means you have to build more of the thing. With a drawing, all you need to worry about is what’s in the image and much of the time it’s possible to fake details. With 3D this is more difficult to do.

In the end, I’m not saying that web designers need to go out and pick up yet another skill, but I do think it’s worth pointing out that the method exists. It’s not for everyone, but it has worked out well for us, creating some interesting possibilities for our projects that we wouldn’t have without 3D.

Who knows? Maybe when people get tired of fake 3D, there will be that much more demand for the real thing.

Next week, I’ll post a quick tutorial that explains our process in better detail, and the following week, I’ll be sharing some free assets you can use to give it a try yourself.

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.

A lot of people have had similar ideas on how to handle this. I suppose it all started with Michael McGrady’s solution, which was followed closely by an improvement on McGrady’s technique from Peter-Paul Koch over at Quirksmode. The closest thing I found to a satisfactory solution, though, came from Shaun Inman. His solution was definitely the right idea, but it wasn’t exactly full-featured, and I wanted it built in my favorite Javascript framework.

Like Shaun, I don’t think that the text-box is an appropriate UI element for a file upload in 2008 (who wants to type c:\Documents and Settings\Paul\My Documents\My Photos\2008-06-02-Me.jpg into a field that only shows 25 characters?!). Further, every implementation I’ve ever seen that makes use of a text-box is wonky. So I wanted to do a Safari-style upload.

I appreciate the cleanliness of Safari’s implementation. It’s the best default browser implementation out there…but it’s still not good enough!

Shaun’s really clever idea involves setting the input’s opacity to zero and then using a little javascript function to keep the button under your mouse while you’re hovering inside the input’s parent container. With the hardest part figured out, I had two additional goals:

1. First, I needed it to display the file name of the uploaded file. One problem with Shaun’s is that I couldn’t even verify if I’d successfully attached a file.
2. Second, I agree with Peter on the importance of being able to clear the file from the form. No implementation I’ve seen allows you to do that, so I added the feature.

To see how it’s done, you can either read the walkthrough or else download a working example.