Product design is the intersection of art and science. It requires creativity and intuition, but it is also deeply technical, based on research and hypotheses. Balancing these elements is what makes product design such a great discipline. Designers live in the realm of visual aesthetics, user-centered problem-solving, and the power of technology to build things that are not only functional but also fun to use.
Product Design: A Broad Church
Product design spans a wide range of activities, skills, and mindsets. On one end of the double diamond framework, we have discovery and research: a space where soft skills like questioning, empathy, and facilitation are critical. This is where designers uncover the real problems users face. Techniques like interviews, usability testing, and workshops play a key role in ensuring that we’re solving the right problem.
On the other end, we move into delivery: translating insights and research into tangible designs. This phase requires precision and a deep understanding of user experience (UX) design and user interface (UI) design. UX design focuses on the flow, structure, and interaction of a system – how users navigate and achieve their goals. UI design, often associated with visual elements, ensures that the interface is not only aesthetically pleasing but also usable and consistent. While these disciplines are distinct, the boundaries between them are fluid, requiring designers to excel in both areas.
Technical Depth of Figma
In 2024, a product designer’s life is (generally) in Figma – a powerful tool that combines layout, design, and prototyping in a single platform. As the tool evolves, so does its complexity. Plugins, extensions, variables, components, and other advanced features empower designers to create intricate prototypes and reusable systems. Mastering these capabilities demands a high level of technical expertise.
For instance, building an interactive prototype that closely mimics the behavior of a final product isn’t just about arranging screens. It involves understanding how to use variables, link interactions, and optimize components to ensure the prototype is functional, scalable, and testable. This technical fluency allows designers to iterate quickly and get actionable feedback from users.
The real power of Figma lies in enabling rapid iteration. Designers can reuse components, adjust layouts, and test ideas with users faster than ever before. This agility is essential in product design, where speed and accuracy can make or break a project.
Other artefacts might be user flows or service blueprints: these are also technical documents that represent flows and user paths. Again, the technical knowledge of designers is needed to understand how to put these together and present them well.
Understanding the Possible
Just as an architect must understand structural engineering and materials to design a feasible building, product designers need to understand the technical constraints and opportunities within their development environment. This technical awareness ensures designs are both innovative and achievable. This is why you will see on designer job adverts: “must know HTML/CSS/Javascript”. The hiring manager is not expecting you to be an expert, but you must understand the concepts of the building blocks of how your designs will get built.
There is a perennial question asked on social media: “should designers code?”. I think the question will remain perennial as it certainly isn’t imperative, however the great designs will definitely code, getting them closer to how their designs will get built.
Frontend Development Knowledge
To bridge the gap between design and implementation, product designers benefit greatly from understanding frontend development. Familiarity with frameworks like React, Vue.js, and Svelte, as well as utility-first CSS libraries like Tailwind CSS, can profoundly enhance a designer’s ability to create realistic and implementable designs. Knowledge of UI kits and component libraries, such as Material UI or Ant Design, allows designers to align their work with the tools and patterns developers use, reducing friction during the handoff.
When designers understand the building blocks of frontend development, they can:
- Design for easier build: Knowing what’s feasible with the available tools prevents designs that are difficult or expensive to implement.
- Speak the developer’s language: Effective collaboration becomes easier when designers and developers share a common understanding of frameworks and libraries.
- Optimise for scalability: Designers can create components and systems that developers can implement efficiently and reuse throughout the product.
- Spend more time on the detail: if the designer can get the main aspects of design done faster, then they can spend more time on the edge cases, transitions, animation and getting the details right to make an overall better-feeling product.
How can designers be more technical? Using ChatGPT to Build Prototypes in Code
The invention of tools like ChatGPT has made it easier than ever for designers to experiment with code directly. For example, a designer can use ChatGPT to generate Tailwind CSS or Vue.js code snippets for a prototype. This capability enables designers to:
- Quickly translate their Figma designs into functional code.
- Experiment with interactive behaviors and layouts without relying solely on developers.
- Iterate on designs in the actual medium they’ll be implemented in, ensuring greater fidelity to the final product.
- Give developers styled up layouts, ready to implement into a full application
I love Tailwind UI – it’s been so useful in getting quick layouts up and running in Vue.js quickly. The example below is a multi-column layout from Tailwind UI – it gives a great starting point for getting a Vue.js prototype up and running, with navigation and a weighted column layout all set up for you.
When designers working closer to frontend development, good things happen:
- Detail-oriented Implementation: Designers can obsess over the details, fine-tuning spacing, animations, and interactions directly in the code. This reduces the risk of design elements being lost or misinterpreted during the handoff to developers.
- Faster Iteration: By working in the same environment as developers, designers can test and refine ideas more quickly.
- Stronger Collaboration: Designers who understand development tools and workflows can collaborate more effectively with developers, creating a more seamless product development process.
- Empowered Problem-Solving: Designers equipped with coding skills can prototype solutions for complex problems independently, accelerating the overall design cycle.
By embracing these technical skills, designers move closer to the “coalface” of development, enabling them to craft designs that are not only beautiful and user-friendly but also practical and production-ready.
Balancing Art and Science
Design is inherently a balancing act. On one side is the art: the visual design that creates an emotional connection with users. On the other is the science: the research, testing, and technical understanding that ensure the design solves real problems effectively.
Product design isn’t just about making things look good or work well in isolation. It’s about harmonizing these elements to create something greater than the sum of its parts. By embracing both the artistic and technical aspects of the craft, product designers play a vital role in shaping user experiences that are functional, beautiful, and grounded in reality.
Design is technical, but it’s also so much more. It’s a discipline that requires constant learning, collaboration, and creativity. By mastering the tools, understanding the possibilities, and balancing art with science, product designers can create solutions that are truly awesome.