Material Honesty on the Web

To cover brick with plaster, and this plaster with fresco, is perfectly legitimate… But to cover brick with cement, and to divide this cement with joints that it may look like stone, is to tell a falsehood; and is just as contemptible a procedure as the other is noble.
John Ruskin, The Seven Lamps of Architecture, 1849

Material honesty—the idea that a substance should be itself, rather than mimic something else—has guided everyone from Ruskin, an art critic, to Charles and Ray Eames, designers of the iconic plywood chair (LCW).

Article Continues Below

By stripping away any coverings and celebrating both its material and its manufacturing process, the chair lays bare exactly what it is: molded plywood. In so doing, it is modern, functional, and timeless—so timeless, in fact, that it’s been continually produced for eighty years.


Herman Miller molded plywood chair by Charles and Ray Eames.
Eames Molded Plywood LCW chair, courtesy of Herman Miller, Inc.

Today there’s a materials debate between flat and skeuomorphic design. While design debates are healthy, too much finger-pointing is prolonging the problem—web folks on all sides are still figuring out their sensibilities to and vocabulary for web materials.

Fortunately, the material honesty debates of the nineteenth and twentieth centuries have given way to mature philosophies with practical guidelines—guidelines we can now use to develop our awareness to web materials, produce longer-lasting work, evaluate design processes more wisely, and collaborate better with common tools and unambiguous terminology.

It starts by defining the core web materials and understanding when they’re honest, and when they’re not.

Web materials#section1

Web materials fit nicely into three categories.

  1. Foundation: HTTP, URLs, and HTML
  2. Style: CSS
  3. Decoration: Raster graphics

Foundational honesty#section2

Paul Robert Lloyd’s article, “The Web Aesthetic,” lays the foundation.

The web could almost be considered a composite, made up of HTTP (the how), URLs (the where), and HTML (the what). Omit any one of these ingredients and you’re no longer building the web.

Layer what you want on top, but if these protocols don’t exist, it’s not the web. It’s not honest.

For example, a Flash site that lacks foundational materials won’t load on many popular devices. Since honest URLs for each page in the Flash site don’t exist, they’re really dishonest pages that are difficult to permalink, not sharable in predictable ways, and hard to navigate because the browser back button can produce unexpected results. Some search bots can index Flash content, but since it’s not delivered with honest HTML, all kinds of SEO, accessibility, and updatability issues arise. It’s no secret that poorly planned AJAX interactions can be dishonest for these same reasons.

Stylistic honesty#section3

Imagine you’re in the zone, typing CSS with lightning speed. All of a sudden you have to stop typing, shift your mindset, launch a new app, create a linear gradient raster image in a painting application like Photoshop, and finally, add it to a sprite file to produce a gradient from #4d90FE to #4787ED. This is a hack—it creates a process and material that’s not honest on the web. As a result, the gradient’s color can’t be changed easily. The raster image doesn’t grow without losing fidelity and it adds another HTTP request to your page load. It’s dishonest.

Raster gradients are just one example. Rasterized icons, text, textures, and lighting effects like drop shadows are common, too. In every case, a bit of the web’s universality is removed.

Pure CSS, on the other hand, doesn’t load raster images.

Pure CSS isn’t just about removing impure elements like background-image, list-style-image, border-image, and cursor:url from your work, though. It’s also about honoring the manufacturing process, rather than mimicking physical materials. You see, the more interwoven the relationship between the appearance and the manufacturing process is, the more honest the material.

Here’s an example: A pure CSS button that’s crafted to look like a vintage stereo knob is dishonest. Yes, even though it’s pure CSS. It’s dishonest because the material mimics something it’s not. It looks like a hi-fi component manufactured from steel, but it’s manufactured from CSS. The look and the manufacturing process are disconnected, like Ruskin’s fake stones.

Even lighting effects like drop shadows, form shadows, specular highlights, and reflections are dishonest because there’s no light source inside a digital screen that’s manufacturing these lighting effects.

Without all the shading, shadows, and bulbous buttons, we get a flatter (or honest, or native, or authentically digital) web. Call it what you will, the flat web focuses more on content. It’s quick to craft. It loads quickly, too. Designer and developer workflow is more collaborative because both use the same tools.

Talented “flatlanders” add emotional depth to their work, but it’s not the kind that wows on Dribbble. When viewed as a static screen, flat web design shoots air balls.

The palette of emotional design for flatlanders is instead temporal. Temporal beauty lives in state-change animations, nuanced timing effects, strategically placed user feedback, and other “interesting moments,” not drop shadows and Photoshop layer effects. Flatlanders build all kinds of emotion and depth combining these moments with delightful microcopy, personality, and typography. All honest—all web—all good.

In his 1953 essay, The Language of an Organic Architecture, master architect Frank Lloyd Wright called this kind of aesthetic “of the thing, not on it.”1

Again and again, design history shows that when we try to trick a viewer into believing a material is something it’s not, the value and the timelessness of the design decrease. Industrial designer Norman Bel Geddes—and others—wrote volumes on this topic in the early twentieth century. Geddes coined his use of materials as “a sincere style…of the materials involved.”

Consider a 1980s microwave oven wrapped in a simulated wood veneer. Products like these went out of style quickly, because dishonest materials cheapened their design, quickly turning them into eyesores of peeling veneer rather than timeless machines. But a microwave oven that exposes the manufacturing process of stainless steel remains mechanically intact, demands higher prices, and is more stylistically relevant, even to this day.

Decorative honesty#section4

Assuming the foundational and stylistic honesty exists, a decorative layer can (but doesn’t have to) live on top. This outermost web material is broken into groups: micro metaphors and macro metaphors.

Micro metaphors—a nondescript Gaussian noise texture, or maybe a shopping cart or trashcan icon—are dimensionally small, and so is their influence on the aesthetic. Replace that trashcan icon with a link labeled “Trash” and the site’s usability and aesthetic remain intact. Micro metaphors are cool. Don’t sweat ‘em.

Macro metaphors, on the other hand, are big—like an interface that looks like a three-ring binder with translucent multi-colored plastic divider tabs. They drive the aesthetic, and the design falls apart without them.

Designers sometimes use macro metaphors to create wowtastic design reviews of static mockups, to leverage their skills with outdated tools and processes, or just out of habit. But for end users, macro metaphors are dishonest, no matter how you slice ‘em.

A continuum#section5

It’d be fun to rant on about pure, ivory tower honesty. But it’s not that simple, and there are times when decoration adds value. Drew Wilson’s attitude is right on when he says, “whatever looks good and is usable.” His premise is similar to Tufte’s “whatever it takes,” and even Frank Lloyd Wright’s “less is only more where more is no good.”

So, contrary to what the detractors say—there is a place for decoration, and a place for material honesty. These two exist on a continuum, with decoration at one end and material honesty at the other. There’s no precise point at which a design becomes honest or dishonest. The web designer has the messy job of sorting it out.

How long does the design need to be stylistically relevant? How easy does the site need to be to edit? Does the client really love skeu’d-out designs, and with rent due, can you afford to risk losing them as a client in order to steer them away from what they love? Or, if you’ve spent years training your clients to judge web design by the look of static Photoshop comps, then you’ll have a transition period in which you adjust your design process while you re-train your clients to focus on your designs’ interesting moments and universal access. This can’t happen overnight, but if you’re conscious of your design decisions, you can move along the continuum in the direction you’d like to go.

The great jazz musicians say: You have to know the rules to break the rules. Like philosophically astute industrial designers and architects, web designers who are aware of where their work lies on the continuum can break the rules, be playful, and still produce great, lasting work.

The plastic planter base of Stefano Giovannoni’s budding toilet bowl brush pretends to be earthenware. But, it works! And, you can bet Stefano knew exactly which rules he was breaking.


Stefano Giovannoni's Merdolino, toilet brush, 1993. Courtesy of Alessi
Stefano Giovannoni’s Merdolino toilet brush, 1993. Courtesy of Alessi.

Not only is it emotional and fun, its affordances and ergonomics are masterfully designed. It still looks current and has been continually produced for twenty years.

A materially honest process#section6

Just as the Eames chair required a new manufacturing process, the honest web demands a new approach to web design—an approach defined less by fixed comps and more by rapid iteration and prototyping.

Rather than look for material honest processes in a long list of new software design tools (many of which will come and go quickly), we should invest in honest tools that will forever be part of the designer’s toolkit.

Enter the pen sketch.

Pen sketches are—and will forever be—the fastest, cheapest, and most universal way to create and share your ideas for any medium, particularly in early ideation phases. The pixel precision of wireframes can lead clients—and designers—into thinking there’s no design work left to explore once the first round of wireframes is complete. Or, precise wireframes can lead them to fuss with fonts, styling, and alignment of elements on a grid. These are the wrong things to focus upon in early design phases.

Because pen sketches are so far removed from web materials, they’re never confused for the final design. Even if you wanted to, it’s hard to fuss about fonts in a pen sketch. This keeps everyone focused on the right things at the right time. After the concepts are resolved through pen sketching, designers can work honestly with clients and design in the browser to bring the visual ideas and prototypes to life.

At 29th Drive, we start most projects with pen sketches. Our customers know the sketches are coming because we talk about sketching in our sales process and again in a “What To Expect” page in our proposals.

None of our customers are in Scottsdale, so we use the IPEVO document camera to screen-share big, easy-to-read sketches (created in real time or in advance). IPEVO has a fixed focus mode so that when your hand enters the frame, the camera’s focus remains fixed on the paper. You can’t do this effortlessly with a webcam.


29th Drive presenting sketches with a document camera
Stefano Giovannoni’s Merdolino toilet brush, 1993. Courtesy of Alessi.

We often work from home and use the IPEVO to collaborate with the rest of the team in the office. It keeps the process human. We even send cameras to our customers so they can sketch with us. It takes time for non-designers to overcome the “I’m not an artist” stage fright, but with some encouragement, they’ll eventually sketch their first beautifully crooked box—and better collaboration is born.

Paper prototyping techniques are great in person, but they don’t jibe with scanners. So if you’re working remotely from your clients, video record the screen with Go To Meeting and snap photos (another handy feature of the IPEVO) while you present the paper prototypes. Afterward, post the video and stills to a centralized archive you all can access.

Betting on your future#section7

Working with honest materials is exhilarating. The folks at Typekit must have felt it when they first brought true typography to the web (web fonts are more honest than SIFR or rasterized text, right!?). Ethan Marcotte must have felt it when he first articulated his responsive web design principles. Indie designers and developers who create honest CSS frameworks or WordPress templates feel it, I’m sure.

By using honest materials, these folks have become leaders in the design community—people who’ve not only innovated, but also spurred others to take their ideas further. That’s rewarding—and profitable. In the coming years we’ll see a divide emerge between web designers who choose to make sense of the messy work needed to adapt to an honest spot on the continuum, and those who do not. It’s time we stop pointing fingers and start looking to the lessons of Eames, Wright, and Giovannoni: Material honesty will breed longevity—in our work and our careers.

Notes

About the Author

Kevin Goldman

Kevin Goldman is an industrial designer turned software designer. His software adventure began in the mid ‘90s in Seattle crafting claymation CD-ROMs. He was an indie web and app designer for a long time. Now he’s the founder of 29th Drive, Inkwell, and MoreBlu. These days, he lives in Scottsdale with his wife and two boys.

61 Reader Comments

  1. Fantastic post and a great reminder for all designers, regardless of discipline. I appreciate the references to industrial design, and it brings to mind #6 of Dieter Rams’ 10 principles: good design is honest. This article is one of the best explanations of that concept I’ve seen.

  2. Temporal beauty lives in state-change animations, nuanced timing effects… and other “interesting moments,” not drop shadows and Photoshop layer effects… All honest—all web—all good.

    Aren’t state-change animations dishonest by the same reasoning? Elements on the page aren’t really fading out. I’m not trying to be snarky. I’m just curious about the limits of honest design on the web.

  3. I completely agree with the use of sketches. “Even if you wanted to, it’s hard to fuss about fonts in a pen sketch.”

    Another sketching option might be an iPad app, like Paper by FiftyThree.

  4. Excellent article. I can’t help wondering though whether you aren’t a little harsh on drop shadows: given that items on a web page are indeed layered one on top of the other, can’t use of shadows provide an essentially “honest” indication of this aspect of a page’s structure? Sure, there is no source of light on a web page, but the information that shadows (and opacity) convey about layering can be a useful, immediately understandable affordance – perhaps even more so when you’re playing with temporal aspects of the page: elements appearing over each other, etc.

    I guess, like you say, there is bound to be a degree of subjectivity about what constitutes “honesty”, and there is a continuum from subtle, intuitive indication of layering, to fully decorative pseudo 3D effects.

  5. Wonderful article. It says so many things, that have been wondering about for so long.

    There might also be another thing to the honesty, don’t force things to materials:
    One of the bests advices I’ve ever got was from my sculptural professor. We were working in clay and I tried to shape the small spikes out of it. He looked at it and said I can’t do that. Clay is to soft for such delicate structures, they will keep hanging down. And even if I’d managed to get it burned this way I would end up with something that would break of, to the slightest touch. Such fine structures can’t be done in clay, they are, as he said „not in the material“.

    I guess that is a bit different thing than sceumophism, but the implications are similar to what the article states.

  6. Alexander, Dave, and Ben,
    Thanks so much!

    Branden,
    Your question is similar to some of my own questions that first motivated the article. It’s tricky to answer them because they can be metaphysical. For example: are pixels the material? Is a pixel light? Is light a wave or a particle? Do we touch the screen glass, the light, or the image on the screen when we interact with a phone? These juicy metaphysical questions are exciting (just out of scope for this kind of article).

    All this wind up to say that Bill Scott’s interesting moments, or what Matthew Moore calls Branded Interactions, are more honest because they can use web materials and web manufacturing processes rather than raster images manufactured with non-native tools such as Photoshop and processes such as sprites.

  7. Nick,
    I can’t agree more. I want hard and steady rules that shall never be broken : |. But as you say, subjectivity can come into play. Some principles of design never change (orange is the complimentary color to blue), and some principles require subjective stuff like taste, experience, intuition, or trial and error.

    Marcus,
    Wow. Your clay example gives me chills. Thank you for sharing this. It’s a great physical example of Paul Robert Lloyd’s concept that materials will break if pushed beyond their limit.

  8. The flat design is more honest discussion reminds me of the Clement Greenberg discussions (manifestos) in the 60’s that flat painting is more honest.
    This ultimately led painting to the Modernist end-gaming of painting.

  9. The article describes what is practical and the emerging or dominant paradigm today, but I’d hesitate to assign it values. There’s no debate of context, content, control, or any of the thorny issues that frame design where it is associated with the notion of honesty.

    Google or Facebook have a more “honest” arsthetic approach than Apple. Does that make one company more honest than the other?

    Also where is the room for the web’s equivalent of molecular gastronomy – where the formal elements are pushed beyond what anyone knew to be possible, creating new forms and experiences?

    I’m drawn to material honesty myself, but can’t help thinking the current period is a precursor to something else – perhaps a time where digital design becomes truly ubiquitous and largely invisible.

  10. In the end, I agree with Alan Bauchop. This article makes great arguments for using it, including its practicality and longevity. I favor design devoid of drop shadows and pseudorealism myself. However, I would hesitate to use the term “honesty.”

    Getting deeper into the “juicy metaphysical question” of computer honesty, consider that our machines are “dishonest” by their nature. Computers trick us into thinking a series of 1s and 0s represent something else. The monitor tricks us into thinking we are seeing things with more meaning than light passing through filtered cells onto a screen. On top of that, there are countless metaphors that help us understand and use computers ― desktops, files, folders and so on. Some concepts have stood the test of time, others have not. This evolution seems to have more to do with practicality than material honesty. Who can say these metaphors are more dishonest than a representation of a vintage stereo knob? The article notes that there is a subjective continuum. I would argue that the continuum is too subjective to pass judgement.

    I agree we should use flat design. Not because it’s more honest, but because it works well.

  11. I hate it but is true. Flash and Styling mostly with Images were a necessary evil to get to where we are. We are moving to simpler designs due to mobile devices (and fashion), better UXs and Leaner UIs. And we’re all getting purists because of this, someday.

    This is all valid for the written part of the web, web interactive/video/animated/art heavy stuff has it’s well deserved spot and should be classified apart. We know they provide experiences we all want, worth spending on and the kind of thing you’d like to see on web tv.

    What I’m aiming for this days is to get rid of the ugly middle, so that content pops up. I often recommend my clients to put the effort of overly designed websites in advertising and aim for a clean visual identity…

    Great article!

  12. Is “dishonest” to talk about “materials” in an immaterial medium like the Internet? Is “dishonest” the use of serif fonts (SIFR or web fonts), because serifs mimics the effect produced by tools used in the manufacture process of letters? Is “dishonest” to use cursive fonts (SIFR or web fonts) that mimics hand writing? Is “dishonest” to use the word “dog” or the picture of a dog because it’s not the actual dog? Is “dishonest” to design gestural interaction when users are not actually touching anything but a glass surface? Is “dishonest” the tag “flat design” because screens are flat, anyway?

    This article is a macro-metaphor. The arguments for the adoption of “flat design” (what a silly name *facepalm*) is far more simple. Like @agargara said: “it works well”. Period.

  13. This is like useless, completely impractical, buzz-wordy crap. I will never get time spent reading this article back… this is sort of BS that makes life of all front end people needlessly complicated, website designs fugly and makes no sense to end user. Waste of time. Complete waste of time.

  14. I agree with the intent of this article, but the logic problem appears to me to be that images are excluded from any category of “web materials”. What made The Web different from The Internet was the ability to present raster images as page content and to present a visual layout for content that improved readability and utility of content.

    I’ll agree that the use of raster images for decorative elements is overdone, and our team has numerous examples of this in our portfolio. But to fundamentally exclude them from the list of materials available to a web designer seems to be an arbitrary decision. I’m not sure I see the support for that decision within your article.

    I absolutely appreciate your position and I agree with you, but I think you’ve set up a premise that leads to a specific conclusion and I see this as problematic. Why, for instance, is a drop-shadow effect to distinguish a page element more like putting cement over brick than putting plaster and a fresco over brick?

    Thanks for a great article, my opinions on web aesthetics are completely in line with yours.

  15. Alan & MDixon,
    Regarding context: ALA is for web folks. Of course, the materials and context for other mediums like iOS, Kindle, the pending Intel TV, automotive dashboards, etc … are all unique.

    Regarding other fields: I agree that many, like molecular gastronomy, landscape architecture, perhaps painting, have similar histories with material honesty.

    Agargara & Kenosha,
    More than the semantics or metaphysical topics, I want folks (who don’t already know) to know that this material honesty debate isn’t new. It has been played out for centuries. Here’s some more historic quotes:

    Le Corbusier, one of the most influential and prolific architects of the twentieth century punches:

    “Trash is always abundantly decorated; the luxury object is well made, neat and clean, pure and healthy, and its bareness reveals the quality of its manufacture’ ; ‘This taste for decorating everything around one is a false taste, an abominable little perversion”
    Le Corbusier, The Decorative Art of Today, 1925

    To which Paul Follot, an influential and respected decorative French artist of interiors, furniture, tableware, and architecture counters:

    “We know that the ‘necessary’ alone is not sufficient for man and that the superfluous is indispensable for him or otherwise let us also suppress music, flowers, perfumes, and the smiles of ladies!”
    Paul Follot, from a speech in 1928

    The modern UX/UI designer doesn’t need to be elitist. Neither extreme is always right. Some of the answer is in knowing that the continuum exists, not that we shouldn’t use drop shadows or not that our work must land at a certain place on the continuum for theoretical reasons. We have real deadlines and real customers / users to serve.

  16. Kevin, thanks for all the thought and research that went into this article. I agree that the web 2.0 look is bloated and dishonest. However, some designers are taking this “flat design” aesthetic too far… like building websites where you can’t tell a button is a button 🙂

    Also, one thing we need to remember is that not every product/website should have the same design style.

    If you are working with a company who wants to portray a fun-loving style instead of a business professional look, then you might need to add more design elements that are “”dishonest. You might want your text to look like a crayon, when it’s really not…. this would not be dishonest to the company’s values and that particular design style.

    Just some food for thought.

    Thanks again!

  17. Hi Kevin, I enjoyed the article and your exploration of the question. I feel the translation of ‘honesty’ doesnt quite work for a digital medium which has no real tangible form….except perhaps 1’s and 0’s. What would it be like if we replaced the term ‘honesty’ with simplicity? For me this is core of design.

  18. HI Kelvin, you’r article is really interesting, According to me just few designers to can use honest materials or their design are unique. I personally belive in this policy…. Honesty is a best Policy…..

  19. Celeb,
    Thank you for contributing here. You’re perspective is right on. I’m 100% sure you could capture a fun-loving feel with web materials. Or, break some rules and still have a successful design, like Giovannoni’s toilet bowl brush.

    Joseph,
    I like what you bring up—is material honesty applicable to digital 1’s and 0’s? Yes! As Paul Lloyd spells out the foundational materials of the web aren’t the 1’s and 0’s, they’re the protocols.

  20. Hi Paul Bellows 1,

    Images (as in ) are all good. They’re content, like , , and other HTML tags that hold content. HTML tags are the foundational materials of the web.

    But loading raster images via background-image, list-style-image, border-image, and cursor:url is a hack. It’s a hack we’ll continue to use in some contexts, but nonetheless a hack that creates real limitations.

  21. Thanks for sharing your thoughts. I see a lot of correlation between your talk of honest design and minimalistic design principles. It is a much needed direction change in the web design industry and one that I am glad to be making on our own website, Kesil Consulting. I dare call myself a web designer, but I am learning, and more importantly, willing to learn!

  22. Just do a simple mock-up, all these “gadget & electronics enhanced mock-sessions” where one paints bored on the board instead of having a nice session where every one scrabbles on paper – why should someone go for the first option?
    I can’t remember any meeting where this gadgets brought any value to.
    Just my 2cts 😉
    Regards,
    Thomas
    Lelala

  23. no to noUI – a must read in the debate between flat and skeuomorphic design:
    “We must abandon invisibility as a goal for interfaces; it’s misleading, unhelpful and ultimately dishonest. It unleashes so much potential for unusable, harmful and frustrating interfaces, and systems that gradually erode users and designers agency. Invisibility might seem an attractive concept at first glance, but it ignores the real, thorny, difficult issues of designing and using complex interfaces and systems.”

  24. Really great thoughts. Very inspiring. Though it seems to me that the list of “Web Materials” is a little bit too short. There is so much more to the web. Tons of other protocols and technologies. What about vector graphics and other forms of media that are shared through the web?

  25. Thanks for sharing your philosophy on honesty in design and the methodology for implementing it. We follow similar steps pen sketching, pure css so really enjoyed the article.

  26. Regardless the quality of this web site, this article is a pure bullshit. If you are a web designer, you know that Design is not a decoration, it gives sens to a web site. Evil Pixels are a necessity for the visitor, Could you imagine a butcher’s shop and a jewelry store with the same decoration ? No They will require different styles to make sens to the visitor. Nowadays people are well educated to design so we can give them more simplicity, but we have to take care who will visit the web site.

  27. Some of the ideas are worth exploring but it’s clear that by the time you’ve reached “The Continuum“, this was all an incomplete thought that begged for further polish by the author.

    With all due respect, the very premise crumbles before the headline ends and repeatedly falters throughout in its misapplication of metaphors, analogies, and parallels.

    That’s not to say there aren’t some good points–there certainly are–but, taken as a whole, it’s entirely unclear what the core message was intended to be.

  28. background-image a hack? Since when standards are considered hacks? Is there any other way to achieve a pattern background or border effect? Oh, please, and don’t suggest CSS Gradients thing, because that is way more “hackish”.

  29. Even lighting effects like drop shadows, form shadows, specular highlights, and reflections are dishonest because there’s no light source inside a digital screen that’s manufacturing these lighting effects.

    There aren’t any printing press or metal movable-type system in your computer neither: should we stop using typography on the web because of this awful lie?
    =)

  30. No raster images? We all should probably stop taking pictures too, those aren’t honest. Flatland is so boooooring, and 99% of the web looks exactly the same: flat. I agree with Gene Dombrovskiy and I want my 10 minutes back. Way too many yesmen here and no discussion at all.

  31. Hi Kelvin, I really enjoyed reading this post, Honesty is the best policy but unfortunately only few designer adopt it. Strongly agreed with your thoughts.

  32. John Nguyen
    Adolf Loos is right on (and intense!).

    Lordfpx
    Your example is great:

    Imagine if a butcher’s shop looked the same as a jewelry store.

    Squarecat
    The core message: material debates aren’t new. History shows that the use of honest materials lead to longer lasting work. Web aesthetics are temporal as much as they are static. Material honesty issues aren’t resolved with stylistic trends. They are solved with an awareness of design history and an awareness that process affects material honesty and the longevity of the work.

    Dave Fillippone
    img tags are all good (of course). Background images are limiting, however.

  33. Thanks Kevin; much agreement, and the idea of honesty of design and materials goes a long way towards explaining why some of the things around us resonate very deeply, and why some just seem cheap and shallow.

    I like to draw a distinction between visual design that arbitrarily mimics another material, such as a fake stone interface, and one that mimics another material to take advantage of either deeply and broadly understood interaction modes (the stereo interface, if not overdone, may achieve that, and add some delight) or to take advantage of universal pre-existing hardware and software, such as our ability to differentiate small and complex objects and textures using three-dimensional cues of lighting and shadow. That particular hardware/software system has hundreds of millions of years of refinement behind it, and is universal.

    An interface that makes use of just enough drop-shadow and shading to make a large number of new and unfamiliar things stand out as distinct and operable chunks is being honest within the larger context of interface/human. A tab, as this site uses for comment numbers, even without a shadow, gives a subtle sense of layering and depth which simplifies our cognitive load through the metaphor.

    Some contexts that are more dense with information and complexity may need stronger cognitive differentiation, and thus may use stronger cues of dimensionality. Those cues are honest and true to the human operating system. So we can say the rules to follow or break are within the entire context of the interacting systems, which includes us, our messy and varied cultural histories, and our astonishing evolved visual cognition.

  34. Honesty is very important, but who are we to say that certain ways of displaying information is dishonest? When you say dishonest, do you mean that using pic art or other insert methods are dishonest? Is it dishonest to put a picture of the beach on a page even though it is truly not a beach? Our computers are designed to create images that seem real. What we take from material that is displayed to use is based off of our life experiences and our cultures. So again who are we to say that certain material is dishonest verses material that is honest? It is all about cognitive reception. annexcore.com

  35. Ruskin also wrote in The Lamp of Truth: “Evidently, then, painting, confessedly such, is no deception: it does not assert any material whatever. Whether it be on wood or on stone, or, as will naturally be supposed, on plaster, does not matter. Whatever the material, good painting makes it more precious;…”

    Apparently, Ruskin was more an artist than an architect; here he says the material being used “does not matter”, presumably in terms of artistry. There is nothing deceptive in art, in other words, but then Ruskin tries to speak for architecture, where he feels the use of cement is deceptive.

    In many senses, web design is artistry expressed, so perhaps raster images are not after all dishonest?

    Since Ruskin was speaking to architecture, let’s consider a few modern examples of material honesty. Suppose a house is being built. Is the use of air sealing tapes, designed to cover sheathing joints, dishonest? Can that be likened to cement over brick? To me, air sealing tape is a new construction material that could help preserve the sound structural condition of the house and help lower the cost of heating and cooling it. I’ve never asked myself whether it is honest or not. I just see that it is an advance in construction techniques.

    Now suppose we could replace cement when it is used as mortar and the replacement is a plastic compound that you simply press into the mortar joints. Is that dishonest because it totally replaces cement? I don’t think so. Again I think of it as an advance in construction techniques.

    Is a bicycle made of the latest lightweight materials dishonest because the first bicycles were constructed of metal and possibly some wood? Is a car dishonest for using an electric engine, rather than an internal combustion engine? Are engine-powered ships dishonest when compared to the sailing vessels of thousand of years of antiquity? I would say that these are all successful efforts to make the bicycles, cars, and ships better as products and perhaps even cheaper to operate. There is always an evolutionary effort to make a thing that is really wanted better. I find such efforts to be honest.

    With that said, I don’t quite understand the point of the article. I have no background in website design, perhaps that disqualifies my commentary. You did, however, convince me to purchase an Ipevo document camera. I’m not sure how pen sketches make website design more honest. I can see how the sketches will almost surely make all the parties think a great deal more about the design and performance of a site. But as a tool to promote honesty? Or honest design? Perhaps the point is to sell more document cameras (smile.)

  36. Aw god, what a bullshit… Seriously man, i thought ALA was a serious website.

    What is the material on the web ? Why CSS shadows are more/less honest than plain color ? No light soure in a flat screen ? So no Typography, paint bucket or servomotors either, but you can write in a website, add colors and animation.

    And you use a camera form filming sketches. Is this honest ?

    wow O_O.

    For french reading people : http://www.mariejulien.com/?post/2013/04/07/Webdesign-Malhonnête#main

  37. As someone else has mentioned, this article reminded me very much of the 1950s art critic Clement Greenberg’s failed arguments about medium specificity and creating artworks that were more and more about their particular medium. In the case of painting, the emphasis was placed on showing the flatness of the 2 dimensional surface of a painting as honest as opposed to the illusional depth found in paintings before it. Greenberg promoted the work of Abstract Expressionists as the next stage in Modernist art as these painters emphasized the flatness of the canvass and a more “pure” form of art.

    Painting isn’t exactly web design, I understand that, but we can learn a lot from other artistic fields. This debate about “pure” art was settled long ago and it was shown to be a completely false and shallow argument. Robert Rauschenberg, Jasper Johns and later Pop, Minimal and Conceptual art challenged the idea of medium specificity; the distinction between an object and its depiction, the genius of the emotional artist and purity in art. Are Johns’s American flag paintings impure and dishonest because they are paintings of a flag which is a flat object on a flat canvas? If I make the same flag using CSS on my web page is that dishonest or impure because I’ve made a flat real world object using CSS? If I make a sculpture of a cursor, is that dishonest because I’ve made a real world object from something that is two dimensional on my computer screen?

    I think most of us know what bad design is that tries to use every bell and whistle available rather than crafting a design for the content. Using a flat design is currently the trend in web design now, there are many technical as well as aesthetic reasons for this trend some of which the author covers in the article. That said, it is a trend and like all trends at some point will change and go in a new direction. Trying to brandish one design as more pure than others is a very slippery slope and leaves many philosophical holes of which this article has many.

  38. Great article, I agree with so many points you make, but, where does this leave HTML5 ‘s SVG standard? Or Canvas, for example? SVG is semantic XML but it isn’t constrained by the limitations of traditional structured markup … is this also dishonest? SVG is considerably more powerful than HTML in that it can do much that HTML does ( like css, hyperlinks and dom traversal, because it’s XML ), plus its a fully fledged vector language. Open standards vector graphics on the web! How can this be dishonest? To me, its evolutionary. When you combine SVG with javascript it has the potential to create much richer experiences in the geometric plane without sacrificing ‘honesty’.

    In my mind, animation and visualisation with SVG is just as powerful a medium and just as truthful, as text based markup. It embraces ‘Flatlander’ and skeuomorphic.

    Web materials fit nicely into three categories.

    Foundation: HTTP, URLs, SVG
    Style: CSS
    Decoration: Raster graphics

  39. Steve Caney Martin
    Thanks for laying out your thoughts on SVG. Some of the editors at ALA had similar points of view. I completely agree that , , and other HTML tags that hold content are foundational materials of the web. I didn’t attempt pick appart HTML tags because I’m not qualified to do so : ), and also because the article would become too long. For example, if I included , why not also include <video> or and dozens of other tags?

    Anthony Kirwan
    Thank you for adding detail to this other historical view (painting). I can’t agree more that we should stop pointing fingers about flat or skeu’d being more correct than the other. The Eames chair is honest and works. The Giovannoni brush isn’t honest, but still works. We need to understand that this flat/skue’d debate isn’t new. We can learn from history. Finding the sweet spot on the continuum differs for each project context and at different points in our careers.

    nwhitney
    Images (as in ) are all good. They’re content, like , , and other HTML tags that hold content.

  40. I wonder if the main motivation for simpler, flat, more honest, what ever you want to call it, design is that the people who best know how to use the tools of HTML and CSS will always promote designs that are best made with those tools and just those tools. Illustrations and photography, best made with other tools, will be pushed to the side. Carpenters seldom advocate the beauty of masonry work.

  41. Kevin, thanks for the wonderful article. It resonates with me as it elegantly encapsulates everything I’ve been striving for in my web designs for a long time.

    I specialise in developing websites for architects, and always aim for relevancy & functional simplicity in my designs – with varied success! Too many architects are after a flashy extravaganza, instead of simply getting on with the business of explaining their work.

    I honestly don’t know why this is! I really should know, being an architect myself who is really passionate about modernism (which for me is another way of encapsulating the core points of your article).

    Your article has provided me with some wonderful ‘mental hooks’ to explore in my future work.

    Great stuff!

    .

    3 of my recent websites for architects – check them out for the fantastic modern architecture / hundreds of high-res photographs, if nothing else 😉

    Harry Seidler & Associates
    Kerstin Thompson Architects
    David Langston-Jones Architect

    And if you must, my own website, where things are all black and white: all-sorts website design

  42. I can’t believe how right on you are with this article, I just wish everyone felt the same way about making digital look and feel unlike any other medium, because that’s what it is, a whole new thing. Great Article!

  43. It seems that feeling should be considered in with honesty and dishonesty. If the image (or other element) is inline with the general feeling then it becomes an honest part of the design, just as embelishments or flat design can be honest or dishonest to a design.

    And as far as background images are concerned, I always felt that if the image was not really content, but a positive addition stylistically then the honest way to include it would be as a background image. That so, I do think that content is way too often included as background image.

  44. Thank you for the thought provoking and well written article. I enjoyed it. I question the use of “honesty” and some of the assumptions you’ve made about design.

    The transformation of raw materials into something that they are not is at the heart of human creativity. Human beings don’t paint paintings of paint nor do we merely write words about words. The material is transformed to represent something that it is not. A woman, Mona Lisa. The psyche, No. 5, 1948.

    The degree to which human imagination is engaged and a fantasy played out is a matter of design aesthetic. Were the romantics less honest than the impressionists? The impressionists less honest than the abstract expressionist? It certainly can be, and has been, argued yes.

    I would say the imaginative projections that took shape on the canvas during the romantic period honestly represented what they understood. The same for the abstract expressionists.

    Designers of video games are constantly imitating the real world in order to engage the fantasy of the player. Are they decorating trash? Maybe so. Or is all that decoration and fantasy just modern theater? No doubt Aeschylus would have employed to great use.

    What about a dollar bill? Yes, a dollar bill. That is perhaps the greatest lie of all. It is not materially what it represents. It represents something abstract–the social contract between human beings and an exchange of power. And despite being a complete lie, it is something people will kill to get.

    Does that make me a fan of skeuomorphic design? No. I find a lot of it silly and unnecessary–in particular, Apple’s Calendar and Contact apps. Do I like flat design? When flat design helps me have a valuable experience then I like it. What kind of experience do I want to have? I don’t know. Surprise me in way that I can understand. The way a comic does with a good joke.

  45. I’m not a troll … but zzzzzz. First off I reject a mass movement to any one aesthetic be it fashion, decor, or web design. This is painful, academic navel-gazing. Hooray, we’re all so smart! (And boring.)

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Nothing Fails Like Success

Our own @zeldman paints the complicated catch-22 that our free, democratized web has with our money-making capitalist roots. As creators, how do we untangle this web? #LetsFixThis