Designing in code might be making us worse at designing. As building becomes cheaper and faster, we’re increasingly moving exploration into the same medium we use for production. If building is becoming cheaper and more accessible, shouldn’t we as designers take this extra capability we’ve been blessed with to add more delight and care to the work?

And what’s with the recent obsession with “designing in code”? Coming from a chemical engineering background, there’s usually a separation between exploration and production. This same distinction exists for other related engineering design disciplines such as architecture, civil Engineering etc.

Engineers use tools to model, simulate and explore what they intend to build before committing to production. These tools make experimentation cheap and somewhat fast, you can try something, see that it doesn’t work, and discard it without having to rebuild the actual product.

If we agree that exploration should happen before production in physical engineering, why should digital design be different?

Imagine a civil engineering team building a bridge without any drawings, models or simulations. Instead, they simply write a sort of PRD (Product Requirements Document) describing the problem and start building; telling the engineers what to do as they go. That would obviously be a terrible way to work. The cost of correcting mistakes and the cost of failure are far greater than they would be if the bridge had first been designed, explored and simulated.

The cost of failure in digital products isn’t comparable to that of building a bridge, of course. But the cost of exploration still exists. Claude tokens are a cost. Engineering time is a cost. Cognitive load is a cost. And because AI-generated code won’t consistently get things right on the first attempt, exploration can introduce bugs, inconsistencies and implementation constraints. Particularly when you don’t yet know where to look in a codebase, or aren’t thinking like a systems designer — considering how a solution scales and which patterns can be reused. A solution can look perfectly fine with five images and fall apart with fifty.

For example, take the project media section in my project modal. The first exploration placed the other project images below the description. It works with a handful of images, but quickly falls apart as that number grows: the section gets longer, noisier and harder to browse. The current version reuses the existing navigation slider instead, keeping the footprint predictable regardless of how many images a project contains while reusing an interaction pattern that already exists elsewhere in the experience.

If we’re given tools that make building easier, shouldn’t we use that extra capability to make the things we build more delightful?

Another risk that comes with exploration in code is that we start optimising for flows and functionality while losing some of the space in which unexpected ideas emerge. In the midst of unexpected ideas lives ‘Delight’ (a cause of great pleasure - Oxford Dictionary).

I don’t think we can fully champion delight if the primary exploration phase happens in production. When your starting point is an existing component, pattern library and a codebase, you’re naturally encouraged to compose what already exists. That’s great for consistency and speed, but the medium also influences what kinds of questions are cheap to ask. It becomes easier to ask how we can improve or combine what already exists than whether the component or pattern should exist differently in the first place, or whether there’s a completely new interaction worth exploring.

For example, take my Articles page. The first exploration was a simple list of cards. Functionally, it worked, and you could see more articles at once. But fully revealing each article would have meant introducing another modal, pop-up or page — another flow following the usual pattern.

Exploring further led to the current interaction, where you get a richer preview of each article before scrolling, dragging up or clicking to reveal it fully. It also created more opportunities for delight through motion and sound. For this experience, I’d argue it isn’t just more delightful, but more functional too.

Now, I’m not saying that designing in code is inherently worse, or that designers shouldn’t use code. Quite the opposite. I think code is becoming an incredibly powerful prototyping and testing medium, and designers should absolutely embrace the tools that make this possible. But I don’t think we should conflate prototyping with exploration.

For me, the best workflow is still one where both mediums work together, use a canvas for the messy, divergent, throw-it-away exploration; and use code when you want to test whether an idea actually works in real-life scenarios.

The important thing is that our exploration medium should make it easy to sketch, iterate, compare, break and bin ideas .

To conclude, don’t start your design exploration in a place where the cost of changing your mind is high.

At Wise, our design team has been exploring how AI can expand our creative workflow, from content and concept generation to prototyping. It’s been a fascinating process, full of experiments and workshops such as Ben Davies-Romano giving us the recipe for a perfect prompt 🥘.

To explore these possibilities, I built a distortion tool that distorts Wise Sans (Wise display font), allowing me to study how AI could handle both design fidelity and functional complexity in prototyping. This project became a case study on how to build with structure and flexibility using AI as a designer.

However, getting there wasn’t straightforward. When it comes to prototyping designs through code, I’ve experimented with numerous tools like Lovable, Replit, v0, Bolt.new etc. While these platforms often get the functionality right, they struggle to preserve the design fidelity, whether from a screenshot or a Figma file. As a designer, I find this trade-off frustrating. I want the prototype to look exactly as it was designed — not almost right. Instead, I end up in an exhausting tug-of-war between styling and functionality.

Many of these AI tools rely on open-source design systems such as ShadCN or Tailwind CSS. They’re great when you just want to test functionality or check for layout bottlenecks.

However, when your design(s) doesn’t share those foundations, the result quickly falls apart. The styling collapses, component structure breaks, and you’re left with something that looks nothing like your intended interface. The generated code also becomes hard to maintain or reuse in production.

To work around this, I began defining the HTML structure and CSS classes myself, routing only complex JavaScript tasks through Copilot in VS Code. The distortion tool became my testing ground for this approach — a way to maintain complete design control while still leveraging AI for the heavy lifting of interaction and functional logic.

Distorting a Non-Variable Font

For the Science Meets Art event organised by Wise Design, I wanted to build a small, interactive distortion tool, something visually engaging that allowed users to warp Wise Sans (Wise display font) in real time according to the art direction of the event.

I started in Lovable, testing basic distortion behaviours. The early results weren’t accurate, but they gave me structural clues. I then moved into Figma, designing how the tool should look across desktop and mobile, and rebuilt the whole skeleton in VS Code using plain HTML and CSS.

That left the central question:

How can I distort a non-variable font in real time?

Since, I had my structure and styling developed, I tried prompting the functionality directly with Copilot, the result was far from what I wanted. So I turned to ChatGPT, asking how to achieve distortion using a custom font file, where it suggested converting input text into SVG paths using OpenType.js. This solution would translate each character into vector data via OpenType.js and then inject it into SVG containers for further manipulation.

This solution was fed into Copilot which installed the OpenType dependencies, after which I prompted it to plug the text-input using its ID to the OpenType.JS. The conversion of inputted text into SVG worked, I could see the text written translated into an SVG version of the custom font on the artboard on the right. But, I was still left wondering how do I distort this?

When SVGs Don’t Bend, Divs Do

Repeated experiments and prompting towards SVG anchor-point manipulation went nowhere. So I stepped back, took a break, and had a sudden idea 💡:

What if the SVGs are fitted within a <div>(container) and then the container’s height is increased or decreased based on the distortion style?

So I created 14 <div> elements, each acting as a slot for one character (so the maximum input was fourteen letters). Every SVG letter fitted inside one of these containers. From there, I began describing the distortion style in plain language, prompting Copilot to generate CSS and JS that animated those divs. Below are the prompts for each distortion style;

For Bar distortion;

“For the first distortion… the height of the div 1–14 reduces from 600 to 200 px, with the first half (1–7) reducing from 600 to 330 and the other half (8–14) from 330 to 200 px evenly. This should be triggered on click of #bar.

For Wave distortion;

“Now for the second distortion… the divs 1–7 increase from 200 px to 600 px and 8–14 reduce from 600 px to 200 px. This distortion would be triggered by id-wave button.

For Arc distortion;

“For the third distortion, div 1–7 decrease from 600 px to 200 px and 8–14 increase from 200 px to 600 px. For this one, the stretch is from the top of the div only and it should be aligned to the bottom of .distortion-path.”

Once the core distortions worked based on mouse interaction, I then went on to add other functionalities such as the sound-based distortion, plugging the sensitivity slider to the distortion effects, a download feature to export the distorted artwork as high-resolution PNGs etc.

Structure First, AI Second

Keeping structure and styling handcrafted while letting AI drive functionality became the defining rhythm of this project. The final result — Factor-X — wasn’t just an event experiment, it became a testament on how to build with more flexibility and less frustration using AI.

Looking forward

AI doesn’t replace creative intent, it amplifies it when given clarity and constraint. By defining the skeleton (HTML, CSS, layout rules) myself, then prompting AI to orchestrate functionality, I found a balance between precision and automation.

This process shaped how I built Yescheff.co, a platform to learn, enjoy, and create recipes from YouTube videos. For Yescheff, I developed React components for the structure allowing for more flexibility and maintenance and then used AI for functionality and backend logic.

In the coming weeks, I’ll be writing about how using component based approaches allowed me to develop Yescheff , so be on the look out ✨.

I would like to give a big shout out to Henrique Gusso, Caio Orio, Willem Purdy, and the Design system team at Wise for their ideas and support on this project.

Thank you very much ✨.

Occasionally, I receive inquiries about breaking into brand design or even the tech industry in general. That is why I am writing this article.

“I believe that learning without implementing what has been learned is only half the battle." This article serves as a roadmap for aspiring brand designers, but it can also be applied to learning any skill or breaking into any industry. This roadmap consists of three steps:

1. Learning the software
2. Learning the skill
3. Learning the business.

PS: If you are a designer reading this, you might have even followed these steps unknowingly.

Let’s goo!

Learning the software.

To hone your desired skill, the first step is learning the software. This involves researching and familiarizing yourself with the tools and features of the software. Practice tutorials and replicating already-made or published works can help you understand the capabilities of each tool and shortcuts.

Learning the software is important because it allows you to explore multiple skills that can be achieved using the same software. It also gives you the flexibility to switch between skills or professions easily. For example, Adobe Illustrator is used by brand designers, digital illustrators, and fashion designers for vector graphics.

Starting with the software allows you to discover the possibilities and choose the skill that suits you and brings you joy.

As stated in my previous article (Brand Strategist X Brand Designer), I mentioned that the essential software a brand designer should learn includes Adobe Illustrator, Photoshop, InDesign, and Figma. However, if you are just starting out in brand design, I recommend beginning with Adobe Illustrator, as it is the most important tool to learn.

Personally, when I want to learn a new software, I love starting from the tutorials curated by the authors of the software. Below are a few resources to get you started with Adobe Illustrator.

• Adobe Illustrator Get Started Course
• Adobe Illustrator for Beginners | FREE COURSE

Learning the Skill (Brand design).

Once you have mastered the basics of a software, it is time to delve deeper into the skill and understand the process behind creating successful projects. In terms of design, it is more than just moving lines and shapes it is intentional, it serves a purpose and tells a story.

In the case of brand design, this involves learning how to develop ideas for a brand identity, craft a memorable identity, translate strategy into design, tell a brand’s story through design, build a portfolio, and present ideas and concepts. This step is crucial in understanding how professionals in the field work to deliver successful projects.

Additionally, brand design is a constantly evolving skill, as each project has its own unique personality, giving you the opportunity to create new and innovative designs, such as a specific style of brand pattern or illustration. It is important to continue learning and growing as a brand designer to stay up-to-date with industry trends and techniques.

Listed below are some useful resources to learn and improve yourself as a brand designer ;

• Building A Brand by The Futur
• Mohamed Achraf’s Youtube channel
• Color Theory by The Futur Academy
• Presentation of Branding Projects by The Branding People
• Developing a Creative Concept for Branding Projects by Human
• Typography by The Futur Academy

In conclusion, learning is a continuous process, and it takes time to master a skill. Don’t be discouraged if you don’t see immediate results — it is a journey, and with determination and consistency, you can succeed. Remember, learning is only half the battle (50%)—implementation is what truly matters (100%).

I hope you enjoyed this article and learnt a ton. I’m rooting for you ⚡️⚡️.

See you at the top.

Recently, I have been getting a lot of inquiries about what I do, what it means, and what are my roles. Therefore I am writing this article with the sole purpose of highlighting who and what a brand strategist and brand designer are and also the connection between both of them.

Who is a Brand Strategist?

A brand strategist is a professional who collaborates with executives of a company or creative team (founder, CEO, Marketing Lead e.t.c) to define what the brand’s persona is (who it’d be, if the brand was a person), where do they want to be (brand’s vision), how are they different (brand positioning), what’s the reason the company exist (brand purpose) and who does it exist for (brand’s target audience). Defining these questions help the company / brand gain clarity and structure, giving them an edge over their competition and helping them focus on things that pushes the brand forward.

A brand strategist conducts research, analyze market trends and anchor strategy workshops. They also ensure that all communication medium reflects the brand’s purpose and personality. A good brand strategist is known to have but not limited to, good copywriting, strategic, planning & thinking, communication, research, creativity and project management skills.

A brand strategist is not only limited to defining who & what a brand should be, they also work on campaigns and advertisements. They can work in creative studios or agencies, consultancies, freelance and full-time roles in companies.

Who is a Brand Designer?

A brand designer is a professional that basically translates the brand strategy into design. They breakdown the extracts from a strategy session/workshop (a.k.a Briefs) and then define the brand visually based on strategic contents such as brand’s purpose, values, positioning, audience, and personality. A brand designer is one who decides how the visual elements of a brand would look like, that is, how the logo should look like, what the typography should be, what are the color that suits the brand, patterns, photography & illustration styles that further helps in identifying the brand. All these visual decisions would be based on the brand strategy. After which, they then curate the guidelines for the proper use of the brand elements. They can submit the guideline plainly as a PDF or can go further to anchor a meeting explaining the guidelines to either the executives or the creative team of the company.

A good brand designer is known to have hard skills such as and not limited to Adobe illustrator, Photoshop, Indesign, Figma and maybe After effects 😞. They have soft skills such as and not limited to presentation, creative thinking, collaboration, project management and idea articulation.

A brand designer can work as a freelancer where they mostly work directly with brand executives to curate their brand’s visual elements based on the brief given, here decision-making is mostly within both the designer and the executives (+ maybe their spouse 😒). Brand designers can also work in creative studios/agencies where they mostly work in a team and answer to the creative lead or director and they may be asked to attend strategy sessions & workshops, here they have minimal say in decision making. Another aspect in which brand designers can work is in the creative or marketing team of a company where they take ownership of the brand style, monitor the use of the brand guidelines and help strategically grow and position the company’s visual presence in the minds of people.

Brand Strategist x Brand Designer?

Basically, a brand strategist and a brand designer work together to create a cohesive and effective brand identity that helps a company stand out in the marketplace and connect with its target audience. Now, a person is entitled to hone both skills, personally I do regard to such a person as a mini creative director .These persons have the ability to visualize what the brand would look like even during the strategy session or workshop. They create the briefs and execute them visually. They have the ability to direct the visual aspect of motion and web projects ensuring that the designers relate the message and maintain the personality of the brand while making use of the brand elements and usage guidelines.

Even though having both this skills makes your work really stand out, it’s not totally necessary to have both, you can hone one of them, I.e you can be a specialist brand designer or brand strategist.

To execute a good branding project, one that actually solves identity and marketing problems, both must work together as a team. If you’re looking to know how to break in into these skillsets, watch out for my next article that discusses how to go from ( 0–50 as a Brand designer ).

I hope you enjoyed this article. I’m rooting for you to be the best you. ⚡️⚡️

See you at the top.