from Hacker News

Ask HN: How to address the anti-pattern of inferring design rules from mockups?

by mikaelaast on 3/31/23, 1:28 PM with 10 comments

At work, we recently discussed the issues arising from UX/UI designers using visual tools like Figma or Sketch to create mockups that front-end developers have to manually reverse-engineer into HTML/CSS. While these tools provide useful means of visual expression, they often lead to developers having to infer design vocabulary from the mockups themselves, causing a loss of value and potential misinterpretations.

As a community, how can we bridge the gap between visual and text-based web design to preserve design reasoning and intent? Are there better ways to communicate design requirements without relying solely on visual mockups? How can we emphasize the importance of a clear connection between description and visual presentation in modern web design tools to avoid costly mistakes and improve accessibility?

  • by Jtsummers on 3/31/23, 2:03 PM

    > While these tools provide useful means of visual expression, they often lead to developers having to infer design vocabulary from the mockups themselves [emphasis added]

    Unless your designers are a 3rd party, bring them over to the dev team. Throwing material over the wall is almost always going to lead to a bad time when there are not experts on both sides handing off from one to the other. The designers should be working with the developers to implement their vision. In essence, from the developer perspective, the designer is the customer (at least up to a point). Your developers having to "infer" suggests that they aren't in a position (either aren't aware of who to ask or explicitly barred from asking) to ask the designers for clarification, that's a communication barrier that will cause harm to the project.

    Barriers like this (silos in general) are a great way to isolate separate groups, but also greatly reduce the effectiveness of everyone.

  • by mikaelaast on 3/31/23, 1:56 PM

    OP here. I propose a concept to create a tool similar to Figma but focused on designing screen reader experiences. The goal is to encourage designers to formalize and structure their work in a way that would consider accessibility and user experience for those relying on screen readers.

    This new tool would require designers to think about the semantics and hierarchy of the content, forcing them to consider not just the visual presentation, but also the underlying structure that screen readers rely on. By doing so, designers would have to make their design intentions more explicit and less open to interpretation by front-end developers.

    I shared this idea with my coworkers and the reception was lukewarm.

  • by matthewwolfe on 3/31/23, 3:58 PM

    Why would you not have a design system that represents all of the Figma components, so that there is a direct 1-to-1 mapping from a Figma component to a code component? That’s like 80% of the purpose of Figma, to use the components to align with the code.