Last CallLast Call Pool

Toolset

From No-Code to Know-Code: How much tech should designers understand?

September 19, 2024 1:45 PM

Long Lecture

🇬🇧 English

Wisła

About

The lines between design and technology have never been so blurred. AI, no-code platforms, and new breeds of design tools are shaking up established design and development practices.As the industry evolves, designers try to adapt: learning new tools, gaining new skills, staying competitive. From accessibility to performance, from design systems to no-code tools, the learning opportunities are plentiful. But which of them are truly worth it?In this session, we’ll navigate the vast intersection of design and development through the lenses of communication, processes, and tools. I’ll share hands-on insights from working with the best-known companies and top talent worldwide.The takeaways from this talk are heuristic recommendations for designers and their managers. We will identify which skills can maximize design's impact:

1. Communication: The key to maximizing design’s leverage lies in better communication with business and tech teams—knowing when to ask the right questions and how to bring everyone into the conversation. I will cover proven methods and rituals, such as:

* Cross-functional workshops

* Hot seat design reviews

* Team trios

2. Awareness: To ask the right questions, you don’t need to code. But you do need to be aware of the right topics. Here, I will explain the key dependencies designers should be aware of to create highly usable, accessible, and performant solutions from Frame 0, rather than as an afterthought. Examples include:

* How simplifying things can improve accessibility and performance

* Why choosing a component library before designing UIs is preferable to fitting the library to the UI afterward

3. Tools: Even without any coding skills, the choice of design tools can make significant impact. I’ll recommend:

* Using tools that help automate handoff, such as Penpot

* Utilizing no-code and low-code for appropriate tasks

* Choosing quality icon libraries and visual assets

Talk by

Photo of Mikołaj Dobrucki, Product Designer at Snowflake

Mikołaj Dobrucki

Product Designer at Snowflake

Watch the full talk

Watch this WaysConf session, then continue with related talks or explore the current programme.

Explore the 2026 agenda More WaysConf recordings

From the recording

Talk in brief

In his WaysConf 2024 presentation, Mikołaj Dobrucki, Product Designer at Snowflake, discusses the level of technical understanding modern UI/UX designers need to work effectively with developers. Dobrucki explains that while designers do not necessarily need to write production code, they must comprehend platform constraints, browser mechanics, web performance, and core architectural concepts. Through practical examples—such as custom select inputs that create maintenance overhead, broken web history navigation, and unmapped URL states—he shows how technical awareness prevents uneducated optimism and pessimism. He highlights the benefits of product trios, involving developers in user research and design critiques, and pairing in real-time co-programming sessions. Ultimately, Dobrucki emphasizes that top product quality stems from shared skill overlaps and treating production code as the single source of truth.

Key takeaways

01
Product Trios and Cross-Functional Process
Forming delivery trios that pair product managers, designers, and engineering leads helps align team objectives. Inviting developers directly into user research and design critiques builds a shared technical language from the start.
Watch from 3:55
02
Designing Within Technical Constraints
A strong grasp of technical limitations prevents uneducated optimism, such as custom select controls that degrade performance. Likewise, technical awareness avoids uneducated pessimism by identifying simple native capabilities like browser view transitions.
Watch from 11:39
03
Synchronizing URL State and Web Navigation
Failing to persist user configurations, such as selected product variants, directly into the URL breaks shareable links and leads to order mistakes. Designers must understand browser history and URL state to prevent subtle UX bugs.
Watch from 19:09
04
Prioritizing Code Over Static Tooling
Top product teams focus on moving ideas into working code rather than perfecting complex canvas files. Canvas design tools often fall short when testing dynamic scenarios like live data streams or typing into text inputs.
Watch from 28:50
05
Creating Skills Overlap Through Co-Programming
Bridging the divide between design and engineering relies on shared skill overlaps rather than passing static handoff tickets. Pairing designers and developers to build components live in real time fosters empathy and speeds up delivery.
Watch from 41:55

Video chapters

2:41Introduction and Collaboration Environment
Mikołaj Dobrucki describes his background across design and engineering and highlights how product trios and shared process rituals improve technical collaboration.
10:18Understanding Limits to Avoid Misinformed Assumptions
Dobrucki contrasts uneducated optimism with uneducated pessimism, demonstrating how technical awareness informs better creative choices.
16:06Navigating Web Browser Mechanics and State UX
An analysis of common web interface errors, including broken back buttons, conflicting swipe gestures, and missing URL state persistence.
20:05Web Rendering, Animation Performance, and Scrolling
Dobrucki covers the practical UX impacts of scrolling modes and explains how browser rendering affects CSS animation performance.
23:36Technical Concepts and Architectural Terminology
A review of essential engineering terms designers should know, ranging from frameworks versus libraries to client versus server rendering.
27:35Evaluating Design Software, No-Code, and AI Prototyping
The speaker explores the boundaries of canvas tools, the lock-in risks of no-code platforms, and how AI code editors enable rapid prototyping.
36:12Bridging the Technical Skill Gap on Teams
Dobrucki argues for building cross-functional teams with overlapping skill sets instead of expecting designers to fully master production code.
37:57Audience Q&A on Performance and Co-Programming
Mikołaj Dobrucki answers audience questions on web performance lessons, real-time developer pairing, and maintaining code as the primary source of truth.

Read edited transcript highlights

These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.

Avoiding Optimism and Pessimism in Design Choices

Design decisions often fall into two technical traps: uneducated optimism and uneducated pessimism. Uneducated optimism occurs when a designer assumes an interface adjustment is trivial, such as modifying a native web select element's focus ring or arrow icon, without realizing the extra code complexity, performance overhead, and maintenance burden it creates. Conversely, uneducated pessimism occurs when designers dismiss helpful features—such as the native Web View Transitions API—under the mistaken belief that they are too difficult to build. Understanding platform capabilities ensures creative concepts remain realistic and efficient.

Watch from 11:18

Addressing Common Web Navigation and State Defects

Web interfaces frequently fail when designers attempt to replicate mobile app patterns without accounting for native browser behaviors. Adding custom back buttons on web pages often breaks when users arrive directly via external links without navigation history. Similarly, horizontal image galleries can conflict with edge-swiping browser navigation, while bottom sheet overlays can accidentally trigger full page refreshes when pulled downward. Furthermore, failing to reflect user selections, such as product color variations, in the browser URL state ruins link sharing and leads to incorrect user orders.

Watch from 16:48

Optimizing CSS Motion and Browser Performance

Interface motion should be designed with an understanding of how browsers process graphic updates. Animating CSS properties like opacity or transform scaling requires minimal processing power and renders smoothly because it utilizes hardware acceleration. In contrast, animating heavy visual attributes like drop shadows, color transitions, or gradients degrades performance and creates jerky visual updates that lower perceived product quality. Designers should leverage native transition APIs or lightweight animation libraries rather than applying unoptimized visual effects.

Watch from 21:21

Recognizing the Practical Bounds of Canvas Tools

Relying exclusively on static design software can restrict final product quality. Leading engineering teams frequently capture interface screenshots, annotate quick directional sketches, and move directly into code where interaction behavior can be accurately evaluated. For data-intensive applications, drawing static shapes fails to reveal how UI components handle live data feeds. Additionally, standard interactive behaviors like real-time text input are difficult to simulate in tools like Figma, making lightweight code prototypes a far more effective medium for usability testing.

Watch from 28:08

Fostering Team Alignment Through Shared Code Truth

To eliminate friction between visual specifications and production builds, teams must move away from passing isolated tickets back and forth and treat the live codebase as the definitive source of truth. Rather than debating layout grid alignment inside canvas design files, designers and engineers benefit from co-programming and real-time collaboration. Sitting together to build features directly in code builds mutual understanding, strengthens working relationships, and creates a functional overlap in team capabilities.

Watch from 41:29

Explore WaysConf 2026

View the agenda

Get tickets