As the only UX designer at my current company I wear many hats when it comes to the design process. Yet the hat I was asked to wear today provided me with an insight I hadn’t expected. Not an earth-shattering revelation, but definitely an informative one. Today I was asked to wear the hat of “front end developer” for the first time — meaning that I was asked to simply translate a high fidelity mockup I’d received into code and not provide any personal design input. My marketing director needed a project to go live and since I have a coding background I was pulled from my usual responsibilities and utilized as a developer for the day. And no sooner was I given the mockup then I was reminded of a debate that I’d previously refrained from picking a side on: is familiarity with code an important skill for a web designer? Though in the past I had debated on both sides of the issue, when finding myself on the development side today it seemed pretty clear that the answer is yes.
As a UX designer it is my job to consider that every experience, product, project and interaction exits in the context of something else. Though most often when I refer to the context of a project or interaction I am referring to the users’ context the truth is that the platform or language in which a product is created is an extremely important element of that product’s context and cannot be discounted. Lets take the example of an airplane. If I asked you to design an airplane chassis for me — with no prior knowledge of aerodynamics or metallurgy — it would be ridiculous for me to assume that the design you’d come up with would be a likely success. Yes, maybe you’d stumble upon a design that sort of worked — if you’d looked at enough airplanes in your lifetime — and may appear on the outside like a beautiful outline of an airplane. But I think it would be safe to say that even the best thought out design wouldn’t be nearly as successful as it could have been had you been armed with a proper understanding of the materials used to construct the chassis itself. The same goes for the web. Browsers use very powerful, very specific languages to interpret the content and design of a website. Without knowledge of the materials being used to build the product — along with their strengths and weaknesses — it’s all the more difficult to come up with a design that works wonderfully on all levels; especially at its core: the code.
Though the design that was handed to me today wasn’t particularly complicated or unattractive by the time I was finished with it my code was a mess because, in all frankness, the design was not built with any consideration for the code behind it. I found myself using CSS hacks way more than I was comfortable with and was counting individual pixel spacing in a way that rendered any shot at responsive design completely out of the question; all in an attempt to create a working site from a mockup that wasn’t designed with web in mind. This design, especially, could have benefitted exponentially from its designer having a basic knowledge of how an html doc is structured. Not that it is a utterly impossible to succeed in web design without code familiarity, but my paradigm shift today has lead me to urge anyone interested in web design to learn the basics of front end code. Worse comes to worst you’ll never have to write a single line of CSS in your entire career. But, I guarantee, with the knowledge of what’s under the hood of your designs your design insight will only get better. And your front-end developers will thank you too.
