Halvor William Sanden

Code knowledge to design

Successfully designing web interfaces requires the intentional picking of HTML elements. As interfaces aren’t clickable visuals, we can’t avoid code and we can’t hand things off to be "translated" into code it later.

Knowledge to use #

Knowing HTML doesn’t mean knowing each element by heart. Knowing HTML means having a combined knowledge enabling us to use the right elements and communicate what they are and what they can do.

It means knowing the element’s conventions and which properties are connected to user expectations. And it means being aware of the element’s defaults, and that they can vary between browsers – and that such variation is often OK.

In addition, when native elements aren’t enough, we still base our custom elements on them.

Orphaned knowledge #

When we insist on working only with code or only with visuals, either separately or collaboratively, this combined element knowledge has nowhere to belong. As long as we disconnect the choices we make related to an element, the choices remain mostly visual and syntactical.

Instead of making intentional, combined choices based on conventions and properties, we end up sourcing too much from other interfaces and random styles without knowing why. By designing from scratch or adding too much custom styling, we risk removing the elements’ unique properties that users need to decode their interfaces.

When we fail to base our output on an actual system, we invent an arbitrary interface language system in an attempt to introduce order and reason. The more disconnected we are from the elements, the more consequential errors we introduce.

It’s not uncommon to see HTML elements being reduced to style guide-ridden rectangles of organisation-centric coherency.

That’s how we end up with things like brand-coloured buttons, inputs without borders and circular checkboxes. Anything can be drawn, and most correctly chosen elements can be styled to death. But who is responsible for telling us that the output doesn’t communicate "checkboxes" to the users?

Knowledge to write #

Whenever we consider something someone else’s job, our sense of collective responsibility quickly disappears along with valuable insight mostly ending in a shrug followed by "… but I don’t know".

Only through homogenised decision-making can we achieve and use sufficient element knowledge. Writing an element doesn’t mean you can pick it, but if you can pick an element, chances are you can write it.