The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

Our Tools

There’s an interesting post on Quora called Life Without Photoshop where Joel Lewenstein explains why the design process at Quora does not involve Photoshop. A while back Jason Fried, the co-founded or 37signals, wrote a similar post on their design philosophy, and there have been other notable posts on this process. These posts tend to generate a healthy discussion and two camps begin to emerge: the start with Photoshop camp, and the skip Photoshop and mock in code camp. Rather than picking a camp, I think it’s wise to step back and examine the effects of each approach because I believe there is a bigger issue hiding under the guise of simple tool selection.

Each approach shapes the visual style of the website in its own image, irrespective of whether the designer intends for this to happen or not. Picking Photoshop pushes the design towards visuals, illustrations and decorations simply because it is the nature of the tool. Someone who enjoys visual aesthetic and is able to use Photoshop to execute their vision is presented with the tools to do so, and so inevitably these tools are used. The context of Photoshop is layout, textures, typography and visual effects. On the other hand, taking away this toolset and giving the designer only the basic raw materials–the CSS and HTML–forces the designer to think in the context of those resources: layout, content and code. Neither approach is necessarily better or worse, but each approach forces the designer to think in its own context, which influences the direction of the design.

It would be futile to argue that painting with oil on canvas would produce the same result as using a pencil on paper. While you could draw the same image using both tools, the painting will differ from the sketch because each tool has its own limitations and advantages. It would be pointless to try to imitate the pencil with oil, just as it would be pointless to try and imitate oil with a pencil. These tools have different characteristics, resulting in different outcomes, neither worse nor better, just different. The artist uses each tool in accord with its nature to arrive at the optimal outcome that the tool affords. The characteristics and results of tools like oil paints and pencils are different enough to make this apparent. The danger lies in tools that appear to produce the same results, while subtly influencing the work in their own direction. Take writing for example. When Nietzsche’s eyesight began to deteriorate to the point of making writing by hand impossible, he acquired a writing ball, an ingenious early typewriter design. As he began using it, his friend, Heinrich Köselitz, noticed a change in Nietzsche’s prose, noting that it has become more forceful, more mechanical. In his letter to him he noted that his own “thoughts in music and language often depend on the quality of pen and paper.” Nietzsche agreed, observing that: “Our writing instruments contribute to our thoughts”.

I really like Jason Fried’s approach to producing quick sketches on paper. When you use precise tools like pencils and pens, you inevitably begin to add too much detail–detail that is completely unnecessary at this early stage. As an artistically inclined person you will almost automatically begin to decorate and refine something which was originally intended to be only a rough sketch. This is because sketching with pens and pencils gives you the opportunity to do so: the tool is precise enough to make this possible. To combat this, Fried uses sharpie markers. These things are much thicker than your average pencil, making it impossible to add any fine details to the sketch—you can only draw a few large shapes and a couple of really short labels. The sharpie marker takes away the opportunity to refine and forces you to think in a different context, that of layout and content. For a rough sketch intended to nail down those two things, the sharpie marker produces a better job. This isn’t because the marker is inherently better than a pencil (it isn’t), or because it was designed to do this job (it wasn’t)–it is because when used in the context of drawing a rough sketch on paper, this tool responds better to our own human nature by blocking out the opportunity to refine and decorate.

Using Photoshop for web design, or skipping it, predisposes you towards a certain outcome: visually rich vs. content focused design. In the ideal world we’d like to combine both of these outcomes to create a website that is both, great looking, and one that has been thought out well in terms of layout, copy and content. Unfortunately our toolset is not ideal, so while it’s not impossible to create a really well balanced site, it’s more than likely that we’ll get pushed towards a direction dictated by the tools we pick for the job. So rather than striving for the perfect, we should strive for what matters most in the context of our project. If it is absolutely important that our design generates a strong emotional response through visuals, then Photoshop is probably our best bet. There are plenty of sites that will go this route: artists portfolios, marketing sites and gaming sites. On the other hand, if the content is more important then we can skip Photoshop, forcing ourselves to focus on the content, copy and layout. Plenty of sites will fall into this category too: blogs, newspapers, information sites, web apps. Marketing sites can fall into this category too unless there is a special focus on the visuals, as strong copy tends to be more important, and useless visuals may distract rather than help.

Now, I will admit that this is a pretty simplistic rule of thumb. Saying that one site will benefit from using Photoshop or skipping Photoshop doesn’t take into account the multitude of other factors like the skillset of the designer and their design process. What I do believe though is that sites like Quora, Reddit, Flickr and 37signals apps look the way they do not simply because this is the way they were planned during their conception, but because of the tools that their designers chose to use–and not use. The visual look and feel is the result of the tool–the tool was not necessarily chosen for this look. The spartan, clean, content focused look of these sites is a result of working primarily in HTML and CSS. If their designers begin to use Photoshop, their designs will evolve towards a more visually rich look. The designer works with the tools at their disposal, so being able to add complex illustrations and textures invites the designer to do so. Taking away those tools blocks this particular design path, so the designer comes up with a plan using the rest of the available resources.

Instead of simply picking tools based on what job they were designed for, we should look at how these tools influence our work and go with the tool that will produce the outcome we want.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: