Native Design Flow.

When I first started building websites professionally, much of the “design work” took place in WYSIWYG tools within the browser or browser-like environments. I remember using Dreamweaver to create pages with tables and GIFs.

In 2003, web design was far less advanced than today. It was primarily pixel-based, with no need for responsive design. Technical capabilities were limited, with basic CSS features and a narrow focus on UX. Advanced libraries were scarce, making the overall design and development process simpler but less flexible. Photoshop was the leading design tool, with visual web editors like FrontPage, Dreamweaver, and others playing key roles in web development.

Over the years, I went through many design iterations. At NETNODE, we relied on Sketch for quite some time (roughly from 2015 to 2020). Sketch, paired with InVision, was a fantastic combination for creating visual designs and prototyping them for client presentations. However, everything changed when Figma arrived. We made the switch around 2020 and never looked back—its collaborative design features are unmatched.

Our Old Approach.

Our approach has largely remained waterfall. We would start with wireframes, develop a design concept, and then create sections and components. After that, there was a “design handoff” to frontend developers. When new client requirements arose, additional designs were needed. Often, it was more efficient to implement changes directly in the frontend. Updating designs in Figma could be slow and costly, often leading to them falling out of sync or not being updated at all. Frontend implementation was frequently followed by multiple design review cycles, which could introduce new issues.

Some might suggest building a component library in Storybook, and I agree—it's a great idea. However, it's not feasible to develop a fully-fledged component library for a mid-tier project with a budget of $50k. Often, this complexity is oversold by agencies with little real benefit to the customer. At NETNODE, we do offer code-based design systems, but they require appropriate budgets. The new design process I describe here supports building Storybook-based component systems, aligning our services with both the project's needs and the client's budget.

Tech Advancements.

In recent years, we’ve transitioned our frontend stack from Drupal/PHP/Twig to a modern setup using Next.js, React, Tailwind, and other contemporary frameworks. On the backend, we’ve adopted NodeHive Headless CMS, which supports a composable content architecture. This shift has unlocked access to a vast array of React-based libraries, component libraries, and building blocks for web applications, making in-browser design appealing once again. New frontend deployment tools like Vercel, Netlify, and others have also revolutionized our workflow, enabling rapid delivery of frontend results.

Our Unsolved Questions.

These developments, along with ongoing discussions about the role of design tools like Figma (as seen in this Hacker News thread), have prompted us to rethink our approach. Here are some of the key questions that have emerged:

• Is Figma the single source of truth for design?
• Is code the single source of truth?
• If code is the source, should it be a Storybook repository?
• How are design systems developed and maintained?
• How are user flows developed and maintained?
• How do we keep design systems in sync with production code?
• Is this approach necessary for all projects?
• How do we create digital experiences that evoke a "wow" factor instead of relying on boilerplate components?
• How can we leverage AI in design and code?

Native Design Flow. [Draft]

We call our new experimental approach – Native Design Flow.

Based on current needs and our tech and design capabilities, we are experimenting with the following workflow, structured into three main categories:

1. Basic Design System (Figma)
   • Logo
   • Colors
   • Fonts and Typography
   • Photos
   • Illustrations and Icons
2. Experience Design Ideation/Exploration (Figma & Code)
   • Paper Scribbles
   • Figma Ideation
   • Code Ideation (using predefined components and AI)
   • Full pages/flows with experiential components
3. Experience Design Building and Finetuning (Code)
   • CMS/Backend Integration
   • Finetuning in code

This might not sound revolutionary, but I believe it is. Code and Figma coexist from day one—it's our new default approach.

Advantages of Our New Approach.

• Early Delivery: We deliver results early in the medium that will be the final product—the web.
• Best Practices: By using existing components like RadixUI, we incorporate best practices, particularly for accessibility.
• Single Source of Truth: Code becomes the single source of truth, stored in version-controlled Git repositories.
• Reusability: Components and user flows can be reused across multiple projects.
• Web-Native Features: We leverage web-native features from the start, such as CSS properties and animations.
• AI-Driven Ideation: AI makes it easy to ideate “crazy ideas,” and creating React components with AI is impressively effective.
• Client Presentations: Client presentations are straightforward—we simply share a link to the digital experience prototype, typically via a staging URL.
• CMS Integration: We can connect a CMS with dynamic content early in the process.
• User Testing: We can run user tests with a "real" web experience or prototype, providing more accurate feedback.

The Downsides.

• Risk of Boilerplate Designs: There’s a risk of creating websites that rely too heavily on boilerplate components, as design ideation might be overly influenced by the available code.
• Need for Enhanced Developer Skills: Frontend developers must develop a stronger design mindset to effectively contribute to the creative process.
• Expanded Skill Set for Designers: UX/UI designers need to acquire coding skills, as digital experiences are increasingly designed directly in code.

At NETNODE, we’ve always emphasized working early in the browser due to our strong technology focus. However, we now recognize the need to start new projects in both Figma and code simultaneously. We've integrated a "playground" directly into the project repository where the production application is developed. This approach allows us to explore layouts, sections, and components in real-time, resulting in shorter review cycles and a balanced approach to design exploration, experience optimization, and rock-solid production code.

Do You Want to Work with Us?

We've just published a new job offer for a Design Engineer role to work on client projects using this approach. This role is integral to our process, combining design and development skills to bring our integrated Figma and code workflow to life.

Apply: https://jobs.netnode.ch/job/design-engineer-web-brand