Why Coders Need to Understand Design

I see more web professionals specializing these days. There was a time where web designers literally did everything. If you worked on the web it meant you did coding, design, photography and any backend work. Now many become so specialized they hyper focus, often on a specific platform. There are fewer Javascript experts and more jQuery consultants. You see plenty of Drupal experts but not many who just do PHP. There is a growing trend of specializing with-in a specialty.

There are many advantages to this. For one, by focusing on one specific aspect of your career you can become a master at it much quicker. Secondarily, people are often willing to pay more for expertise. Finally, it’s much easier to become known for something very specific than a broad range of skills.

I discuss specialization at great length with my students. The program I teach in exposes students to three aspects of the web, coding (front end and backend), user experience and design. Many of my students take classes in all three areas but are primarily interested in just one. As a design instructor I encounter plenty of aspiring coders who begrudgingly try to work their way through color selection, typography and layouts. Often times these students will vent their frustrations, confused as to why they are forced to learn skills that they “aren’t going to use.” In every case I correct their assumption, coders and developers are often responsible for design.

Users Interact With Code Through Visuals

Author Donald Normand describes design as a way to translate what happens behind the scenes of an object (or website) into something a user can understand through their senses. In industrial design this most often occurs through site, sound and touch. On the web, it really only happens visually. This means all of the senses we use to understand the world around us can’t be used with the exception of one. Therefor how a user interacts with a website, web application, etc… is largely determined by what they see, ie. the visual layer.

These days you don’t see too many sites designed by coders with no design experience. That’s a situation of the past. I do consistently see however, sites where developers/front end coders were asked to turn designs into html/css templates. If the coder had an adequate understanding of design then the project ended up successful. If not, you can be sure the execution of the design was blunted.

Great Design is All About the Details

How well could you replicate a Monet painting if you didn’t understand the difference between paint types? Even if you could accurately recreate the image, if you used the wrong type of stroke, pressure, paint or brush size it wouldn’t carry the same impact the original did. This is not unlike coding a design without understanding design principles.

If you don’t understand design you don’t know what to pay attention to. Your eye isn’t trained to pick up the subtle details that make a design most effective. Dark gray text ends up looking “black,” elements end up approximately in the right spot and elements are close to the right size. With out design knowledge spatial zones are estimated. If you don’t understand the importance of exact measurements it doesn’t seem worth the effort to take them (which would be time-consuming). If you don’t understand the importance of whitespace elements in approximately the same spot as the original design they are assumed to be close enough. The problem is you don’t know there is a strict grid the design was created with. You don’t know the text was intentionally lightened a tad to ease eyestrain. You don’t know things were sized based on very specific proportions. You don’t know because you never learned those sorts of things matter.

But those details do matter, a great deal in fact. As you evolve as a designer you begin to become hyper aware of these details. It becomes immediately apparent when a design has lost it’s luster due to poor implementation. I don’t mean to berate coders, because there are some truly stellar ones out there… but the best coders are the ones who understand and respect design principles. You don’t have to be an amazing designer to code well, you just have to train yourself what to look for.

What to Look For When Coding

Combining experience with knowledge of the design principles is the best way to improve your coding abilities. That being said there are some key things coders should be conscious of when building a design, most importantly spacing, sizing and detail. If you’re an aspiring programmer or web designer, you can quickly learn how to code through online courses like Treehouse Learning. If you’re unfamiliar with it yet, there is a review of Treehouse Learning online.

Pay Attention Spacing

The most obvious overlooked fundamental would have to be spacing. The space between and around elements is critical. Nine pixels are not the same as ten pixels. Great designers pay attention to every pixel of space and intentionally use spacing to communicate relationships, boundaries, develop balance and create resting areas for the eyes. Even being off by a few pixels can disrupt the design. Grids are held together by exact measurements. Failing to be exact breaks the grid.

Coders must pay attention to column widths, the height of elements, margins between columns, padding within areas and margins between text and images. Exact numbers mater so learning to measure is an invaluable skill.

Be Exact with Sizing

Like spacing, designs are held together by the relative sizing of everything on the page. If you make something larger or smaller than was intended the balance of the design is damaged. Sizing is not often a problem with images, where an exact portion of the design is transplanted into the website. More commonly it’s an issue with font size. I don’t deny it’s easier to guess a font size rather than use the type tool to see for sure, but it makes a difference on the overall design. Selecting a font size is not solely determined by legibility. The size of fonts relative to other type on the page plays a large role on the overall balance and information hierarchy.

Many designers are very intentional about how much larger headlines are compared to body type, some even use the golden ratio to select type sizes. If one size becomes off the golden ratio between type on the page is broken.

Be Mindful of Subtle Details

It doesn’t take much design experience to realize that details are more effective when subtle. A soft, subtle drop shadow adds depth to the design without being distracting. Sometimes a shadow can be so subtle it’s barely noticeable, but subconsciously the user picks registers it as part of the overall personality of the design. The problem is, if the coder doesn’t know to look closely for those details they will also miss them and the final design loses personality as a result.

There have been more than a handful of times where I knew details would be missed, for example adjacent dark and white lines which simulate a “groove” in a surface are often coded as a single black line. Subtle shadows or gradients get lost for solid colors. You don’t have to know how to create those details (or when to use them), but you do need to know how to spot them.

Ideally a design comes back from coding looking exactly like it did in photoshop (or your other tool of choice.) However I do realize this in some cases is asking a lot. In those cases, if the coder can handle the three items mentioned above making any final adjustments will require minimal investment.

In Summary

While this post has been focused on  front end coders, it applies to developers as well. I have seen plenty of teams where the developer ends up making design decisions because it’s too costly to involve a designer (in terms of time, hours, scheduling, etc…) Regardless of your official title, if you somehow alter the visual layer that users interact with you need to understand design well enough to preserve that layer. Again, that isn’t to say you need to know how to create usable and beautiful designs, rather you need to know what to look for.

The best coders not only know about semantic mark-up, efficient CSS, progressive enhancement and Javascript, they also know how to develop a page from a photoshop file design with out details getting lost in translation.