The following background patterns are generated from a single CSS-property, using stacked background-image gradients to achieve the approximated woven effect.

Richard Nixon

Richard Nixon - Presidential portrait

Lyndon B. Johnson


Harry S. Truman


Gerald Ford

Gerald Ford presidential portrait

– Mikael

Licensed under the Creative Commons Attribution 4.0 International License.

Quick thoughts on the anti-pattern of inferring design rules from mockups.

When tasked with creating a web page mockup, UX/UI-designers predominantly employ visual tools, like Figma or Sketch. In essence, these tools produce what amounts to a picture of a web page that requires manual reverse-engineering into HTML/CSS. Granted, some of these tools lets you create interactive and responsive mockups, thus expanding the means of expression at the design stage. Some of them even output code or offer other machine-readable output. Nevertheless, the fact remains that these tools are geared specifically towards a visual workflow, whereas other possible forms of articulation become an afterthought.

The optimal way to articulate a web design mockup in terms of its native implementation is, of course, to write the actual HTML/CSS. Alas, this is not every UX/UI-designers cup of tea. Text-based web design is non-intuitive, and the possibilities are not as apparent or as readily available as in a GUI. Working with visual tools makes sense for a visual medium.

A visually constructed mockup conveys the desired appearance but can gloss over design reasoning and intent. The likely UX/UI-designer pitfall would be to expect a developer to infer the design vocabulary from the mockups themselves. When this happens, a lot of value is lost.

When the ultimate formalization of a design is at the front-end developer's hands, it can take varied forms. The developer might very well have no eye for visual language or, conversely, could be of the type that's driven crazy by the smallest visual inconsistency. The latter might struggle to reconcile and utilize that impulse constructively without veering off into pedantry.

“Pixel-perfection” is a side-effect of precision, which is the hallmark of unambiguously communicated design. Alas, the visual web seems to be in the hands of people who happily leave denotation to the coders, allowing non-designers to go off on their own and infer rules about aesthetics and user experience, making for costly mistakes.

The visual web's predominance is the current biggest roadblock to improving accessibility on the web and why the once touted “semantic web” remains a pipe dream. Part of the problem boils down to UX/UI-designers operating in environments that presumptively are unburdening them of systematically describing designs in favor of enabling more freedom of visual expression.

While a staple of traditional text-based web design, the interrelationship between description and visual presentation remains downplayed in today's graphical tools. This “lost art” is so often an exercise in subtlety and restraint, which are qualities that one should think would resonate strongly with the designer mindset, given a chance.

– Mikael

Enter your email to subscribe to updates.