Design for your engineer

Part I: Bridging design tooling and web technology

Jory Tindall

Jory Tindall

Product Designer, HashiCorp Design System

jorytindall.com

What is this talk about?

  • Assessing the state of design tooling
  • Overview of the Document Object Model (DOM)
  • Parallels, overlap, and methods of communication

More importantly, why?

  • Communication barriers between designers and engineers still exist.
  • Shifting between a design and engineering mindset helps to better communicate design intent.
  • Having a basic cross-disciplinary understanding ships better products and experiences.
  • Everybody is responsible for designing the experience.

💅

Current state of design tooling

Current state of design tooling

  • Tools are moving quickly to close the gap between designers and engineers

🧰

Understanding the DOM

What is the DOM?

Dominic Toretto
"Without family the DOM, you've got nothing."

What is the DOM?

Document Object Model (DOM): the data representation of the objects that comprise the structure and content of a document on the web. (Source)

  • The logical semantic tree structure of an HTML document
  • Can be styled to change the visual appearance
  • Can be used with JavaScript to add interactivity