Distinguishing between structure and style in design

Aug 15, 2015 | 6 min

Summary: Style is what people immediately think about (and remember), but structure is what communicates.

Years ago, there was a discussion in the online design community about the merits and demerits of using things like filters, drop shadows, gradients, bevel effects, and the like. At the time, CSS3 wasn’t even a thing yet. The discussion was about Photoshop and how to use it properly. More recently, designers have held a similar discussion about minimal design and then material design.

These are good discussions, but they’re prone to a lot of confusion.

In order to think clearly about design and its purpose in the world, I believe we need to understand the difference between two fundamental categories: structure and style. Both of these categories are important for design, but they each have very, very different roles.

Let’s look at an example from public speaking.

Musk’s battery pitch

Back in July, messaging and positioning consultant Andy Raskin used Elon Musk’s Tesla Powerwall presentation to illustrate a point about making a compelling pitch. Basically, Raskin told his readers that Musk’s pitch was successful because it followed a particular, winning outline. Musk had a structure that was good. Raskin goes on to point out that, “Musk’s delivery isn’t stellar. He’s self-conscious and fidgety. But at the end, his audience cheers. For a battery.”

What Raskin does is highlight the contrast between structure and style. Even though Musk’s use of rhetoric, gesture, vocal production, etc. — his style — wasn’t all that great, his presentation was well structured. And it was successful. Musk got his point across.

This illustrates the first point about structure and style:
structure is about function.

I’ve listened to a lot of public speakers. Some of them were bad. A lot of them were pretty good. Even the most engaging speakers, however, sometimes missed the mark. I’ve laughed and cried and been moved deeply . . . only to walk away and wonder, “What was that even about?”

The difference between the speakers who were truly effective and all the others was this: I came away from the effective speakers knowing what to do with what I had heard.

Speaking is not just about carrying the audience’s attention or being entertaining. Those things are important, but the purpose of the speech, its function, is to communicate a message. That’s something that structure provides.

Let’s look at an example from another field.

Stradivari’s concert pitch

In The Shape of Design, designer Frank Chimero talks about purpose in design. At one point, he uses the example of master violin maker Antonio Stradivari:

“I can imagine the excitement in the room when Stradivari would hand his newest violin to a skilled musician, because the violinist would unlock the instrument’s full potential by playing it. The products of design, like Stradivari’s violins, possess an aspect that can only be revealed through their use.”

Chimero highlights the violin’s use. A violin is meant to be played. Stradivari’s violins are not priceless because of how they look; they are priceless because of the exquisite perfection of sound they produce — in other words, because of their function.

The instrument is shaped a particular way because that shape is necessary in order to produce the right sound. Design constraints impose themselves upon the maker. The violin’s function informs its structure.

But here’s the thing: the audience associates the experience of the music with the violin’s appearance, not it’s structure. They don’t care about the corner blocks and the base bar, or the fitting of the neck and the nose. Those things are essential to the function of the violin, but they are invisible to the hearer. Instead, the audience sees what the violin looks like. They tie their experience of its music to its appearance.

This illustrates the second point about structure and style:
style is about being known.

It’s about attraction and memorable experience, what ad people call branding.

The interesting thing is that style is not constrained the way structure is. A violin must have a certain shape in order to create its signature sound. Beyond that, however, it’s appearance can vary greatly. The violin may be polished and glowing or rough and grimy. It may have a beautiful, luminous wood-grain finish . . . or it may be decorated with a violently magenta, zebra-stripe pattern. These are stylistic choices that don’t majorly impact the violin’s function. A master violinist might bring the same sound from either instrument.

The difference will be in what the audience ties their memory of the music to. Will they remember Shostakovich’s Concerto No. 1 in A Minor and think of the wood grain? Or the zebra stripes? This, too, is a design choice.

In determining design, structure should precede style because structure has more rigid constraints. A thing must work first. But after that, strategic decisions about style can be made. Once it works, a designer is free to plan how it ought to be known. And that is not unimportant.

Let’s look at one last example to bring the two together.

Pixar’s monster pitch

As a field, animation illustrates (quite literally) the interplay between structure and style. Let me show you what I mean. One of the key structural constraints in Pixar’s Monsters, Inc. is recognition. Each character (and environment) needs to be instantly recognizable. That way, in the midst of cutting back and forth from one shot to the next, from one scene to the next, the audience never gets lost.

To address this structural need, the Pixar character designers gave each character a unique silhouette. No two monsters are shaped alike. Even without any detail filled in, the characters are recognizable. In addition, the important characters also have a unique color profile. Choices like these help the audience recognize where they are and orient themselves as they are carried along through the plot.

Cut to a new scene in a new location that the viewers have never seen before? No worries. Give them a glimpse of a round, slightly pear-shaped silhouette and flash of bright green. In a fraction of a second, the audience understands that they’re watching something happen to Mike Wazowski. They’ve oriented themselves and are now ready to deal with the new situation, to experience it alongside Mike.

The silhouette and color serve a function — orienting the audience.

But the stylistic decisions of the Pixar character designers are important too. The fuzzy texture of Sulley’s fur or the gross, slug-like folds of Roz’s skin influence how the characters are received and remembered. Without consciously thinking about it, the audience forms impressions about the characters because of how they are styled. Those impressions are memorable. It’s how the characters are known.

A concluding pitch

Steve Jobs famously said, “Design is not just what it looks like and feels like. Design is how it works.”

He, of course, is highlighting function, structure. But notice that he doesn’t ignore style. Both are important for design; they just have different roles.

So in the end, drop shadows and bevels, minimal and material — all these things are good in their right place. The key is to first consider a thing’s function and provide the appropriate structure. But don’t stop there. That’s only part of the journey. After the structure is set, there’s still a richness of variety in style to be explored. And style is important. It’s how your structure will be known.

Rate this note

Read this next

Shinichi Suzuki and the three domains of mastery
An exploration of the interaction between talent, education, and skill.