Design is not veneer.
This is a response to the article ‘How to make your site look half‐decent in half an hour’ by Anna Powell‐Smith on 24 ways. I apologised for the way I reacted to the article on Twitter in a previous note. I also mentioned in my apology that I would detail my reasons for finding the article harmful in a future note. This is that note. And I write it in hopes that it will constitute constructive discourse.
The title of the article — How To Make Your Site Look Half‐Decent in Half an Hour — is itself enough to set the blood of any designer boiling as it perpetuates an already prevalent and harmful myth: that you can simply sprinkle design on top of an otherwise completed site like some sort of magic ingredient. In fact, the article’s summary makes just that very case:
Anna Powell-Smith stirs the silver sixpence of design into the Christmas pudding of web development… Impress your friends with your quick design fixes.
What is a silver sixpence, you ask? Good question. Here’s the low‐down, according to the Royal Mint:
In the past, everyone in the household would give the Christmas pudding mixture a stir and make a wish, and the cook would include a silver sixpence in the mix. Tradition had it that whoever found the sixpence would have good luck in the year ahead.
Now, let me tell you what design is not: it is not a silver sixpence. And it’s not something you add to your site in half an hour. There are no ‘quick design fixes’. Design is not veneer. Design is not synonymous with aesthetics, although aesthetics are a component of design. In the words of Steve Jobs, ‘Design is not just what it looks like and feels like. Design is how it works.’
In response to my initial tweets, several people stated that I was simply not the target audience for the article. I feel that this argument misses a critical point: the article in question is most harmful to its stated target audience — ‘programmers intimidated by visual design’ — as it can lull them into a false sense of security (if you use these shortcuts you ‘can make your personal programming projects look professional, quickly’). The intended target audience is the one likely to be tempted most by silver bullet recipes without realising that they are being given fish, instead of being taught how to fish. So it’s true that I am not the intended target audience for the article, however, unlike the intended target audience, I am in a position to see the article for what it is: a well‐intentioned attempt at providing pragmatic advice that nonetheless ends up perpetuating harmful myths.
The article, in summary, serves up design as a series of ingredients that you can simply add to your projects without thinking about why you’re adding them or the people who will be using your product. Want to add design to your site? Drop in a grid framework, add a few ‘sweet fonts’, embellish using colours, textures, icons, and a background image, and voilà, you have a beautiful website.
In the article’s defence, Anna does state that you will get better results ‘by working with a professional designer, and by studying design more deeply’. However, the rest of the article builds upon the assumption that programmers and designers are separate species and that design for the programmer is, at best, a distraction that she should get out of the way as quickly as possible using a set of hacks so that she can ‘focus on writing code’.
‘I am a programmer. I am not a designer.’
This statement, meant to empathise with a target audience of developers, is exactly the myth that we need to stop perpetuating. If you are a programmer, the work that you do contributes directly to the experience that the people using your product will have. Whether you know it or not, you are a designer. Whether you know it or not, the work you do affects the design of the site or application you are building. If you are aware of this fact, you can make a conscious effort to affect the design in line with the needs of your users. If you are not aware of it, you will still be impacting the design of the product, however you will be doing so without realising it and without thinking about the people who will ultimately be using your product.
The way something looks is not veneer layered on top of its functionality.
None of us are born designers. It is not a talent. It has very little to do with being able to draw well or make things look pretty (we are talking about design here, not illustration). The way something looks is not veneer layered on top of its functionality. The two are inextricably linked. The way a thing looks creates inherent expectations about how it is meant to be used. This is called an affordance. If your site or app has intuitive affordances — that is, if it satisfies with its behaviour the expectations that it creates with its appearance — it will go a long way towards providing a usable experience. But even this level of basic functionality — what we call ‘usable’ — takes lots of thought, effort, iteration, and testing to achieve. It also requires vision.
Good design rarely happens without intent — sustained, focused intent — what we call vision. If you don’t see yourself as a designer, you’ve already lost. For it is the designer who thinks about the user, tries to understand the user, and creates things that empower, amuse, and delight the user. And responsibility for design falls within the remit of every member of a team — regardless of the specialised role that they may be tasked with on their current project or within their current institution. Only such teams, supported by an organisational structure that is design‐led from the top‐down, can hope to create beautifully‐designed products.
Design is everyone's responsibility.
Design is everyone's responsibility. You are a designer whether you are aware of it or not. If you’re not aware of it, chances are that you are not a particularly good designer. Because good design doesn’t just happen. And there is no ‘five minute guide’ or ‘quick fix’ that can help you. Sure, you can learn how to put lipstick on a pig, but it’ll still be a pig. Not that I have anything against pigs… but you get the idea.
The right motivations
The problem with Anna’s article is not that it recommends bad tools or materials to use but that it suggests using said tools and materials for entirely the wrong reasons. Bootstrap may very well be a great tool for prototyping, for example, but it no more ‘democratises the whole process of web design’ than iMovie democratises the process of making feature films because it comes with pre‐made templates. In other words, simply adding a grid framework to your site guarantees a usable experience about as much as using iMovie guarantees a Hollywood blockbuster.
Typography is the art of laying out type, not just choosing fonts.
Similarly, web fonts are not ‘one of the quickest ways to make your site look distinctive, modern, and less Bootstrappy’. They are your voice in the land of the written word and there is much more to good typography than your choice of fonts. Typography is the art of laying out type, not just choosing fonts. Again, there is nothing wrong with providing a list of type foundries, it’s always good to have links to useful resources. But adding some ‘sweet fonts’ to your site is not going to make it read any better unless you’re also considering the measure (line length), line height, and rhythm of your treatment. And we’re not even talking about taking into consideration the differences in browser engines that render certain typefaces unreadable on certain platforms. At the very least, you should be asking ‘why?’ Why this font? What is the feeling I’m trying to convey? Is this text meant to be serious, fun, exciting, solemn, scary? What’s the voice I’m trying to achieve? And for whom? Who is my audience? Whom am I designing for?
Design is as much about asking the right questions as it is about answering them. It is about worrying about the right thing: solving your user’s problems not your own problems. And that’s the great shortcoming of this article: it doesn’t consider the motivations or reasons for using the tools and materials that it suggests. It doesn’t consider the user’s problems but focuses on alleviating your own problems as a developer. In attempting to find shortcuts to design, it sidesteps design altogether; replacing it with a shallow simulacrum — a simple mimicry — devoid of vision, purpose, and meaning. This is perhaps best demonstrated in the section that shows you how to add an icon to a sign‐in button:
Finally, we’ll add a truck icon to the main action button, as follows. Why a truck? Why not?
Why not, indeed? Does it matter that a truck icon makes no sense whatsover on a sign‐in button? It does not if all you are concerned with is adding meaningless decoration to your site. As an element without purpose, it simply adds to the noise in your interface. At best, it adds to the burden of the user’s cognitive load and, at worst, it might confuse her about the function of the button by muddying its intent. Design is not about spraying your site with a little visual je ne sais quoi like a drunkard pissing in an alleyway.
Purpose in design
Having read through Anna’s article several times now, and each time with an eye to find some — any — saving grace that I could use to temper my response, I can safely say that you can start on the journey to improve your sites by doing exactly the opposite of what is suggested in the article. Do not simply add a grid system, web fonts, textures, icons, ‘fancy CSS3’, a background image, and colour to your site without thinking long and hard about why you’re adding each one of those things and how they will influence the experience of your users. Your design will be better off for not having those elements rather than having them thoughtlessly dumped in like so much junk in a landfill.
Every element you add to your design is a potential bit of extra cognitive load. And every element you add will influence and be influenced by every other element in your site. Every change you make will have cascade effects on the rest of the experience. Every element you add is thus another bit of potential confusion, another speck of potential noise. Design is as much about knowing what not to add to your product in the first place as it is about knowing what to remove. That is not to say that we never add things. Of course, we do. But never without thought. Never without a process whereby everything we add goes through a trial by fire to earn its right to exist. Design is much more about saying ‘no’ than it is about saying ‘yes’. Even when it’s painful. Especially when it’s painful. As Antoine de Saint-Exupéry says in The Little Prince:
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
At the very least, do not add anything to your design without good reason. And the only good reason is if it adds more value to the user experience than it removes. And so you must constantly be thinking of the user.
Every element you add to a design must have a purpose. The purpose may be purely emotive. This is fine. We are, after all, emotional, irrational, unpredictable creatures. But it must have purpose. And that purpose must be a valuable one. Remember, every element you add either contributes to your product being more useful and easier to understand or makes it less useful and more confusing. You should no more be adding visual elements willy nilly to your sites than you should be adding code snippets and components without at least understanding their motivations, purpose, and effects.
So what’s a developer to do?
Instead of adding elements to your site just because you can, devote that time to learning about design. No one is born a good designer. It’s true that you need empathy but I strongly believe that — unless you are, by nature, a psychopath — you can cultivate empathy even if you are not, by nurture, empathetic. There are many design devices and games that can help you focus on the needs of the user.
So, learn design. Instead of learning Bootstrap to use as a magic bullet, for example, read a book on typography or take a typography class. When you’re done, you won’t need web fonts to create a pleasing and readable typographical treatment. And, if you decide to use a web font or two, you will use them for the right reasons: because you have made a conscious decision to control the voice of your content.
The same goes for the use of textures, colours, icons, background images, fancy CSS effects, etc. Without purpose, they are hollow, meaningless ornaments at best and confusing noise at worst.
There are no shortcuts to good design. There are no silver bullets, no magic buttons, no silver sixpences. Every design problem is unique. Design is a process, not a product. And you cannot take part in the process by ignoring the irrational, emotional, unpredictable beings who will be using your products. However much you may want to. However scary it may be to think of them. Quite on the contrary, you must base your process around them. Around understanding and fulfilling their needs. Because their needs are all that matter. Indirectly, their needs are your needs and your business’s needs. Because we are living in the age of user experience, where features are commodities and user experience is the differentiating factor.
Yes, it’s scary. Yes, it’s complicated. Yes, it can get messy. Unlike in code, there are maybes — lots of them. We live in a world of gradients. But it doesn’t mean that we get to ignore the scary, complicated, and messy bits or sidestep thinking about them by using a bunch of meaningless, shallow, and ultimately harmful shortcuts and ‘quick fixes’. Not if we want to create meaningful and authentic experiences for the people who use our products.
Because design is not veneer.
P.S. To further understand why I care so deeply about design, and why I feel you should too, please read This Is All There Is and watch the talk I gave last month called A Happy Grain of Sand.