How the tools we use change the products we design

Every era of product design on the web brings with it new design tools, these tools change how we design websites and also influences the next generation of design tools to come.

I know it seems like a novel idea for some of you reading this, you might think you design the websites you want to design and you’re only limited by your imagination, but you’re only half-right.

That’s somewhat true but also you’re human and all humans are lazy sometimes and we like to design websites that are easily designed and easily developed, we don’t like friction, as any designer who studied UX already knows.

So as Marshall McLuhan once said “The medium is the message”, meaning that our ever-changing medium does box us into certain realities as we approach the tools for web design.

In this article I’ll try to go over the different tools for designing the web as they were used in chronological order, of course some of these tools got used simultaneously so there is no clean cut.

But I’ll do my best to paint the history of web design tools in stages as I lived through them, so let’s begin.

First, we had plain HTML.

Before any design tool ever existed, there was HTML, it was (and still is) the most fundamental building material of the web.

When HTML was the only way to design websites we had WYSIWYG interfaces to better move around what was essentially just HTML tags like paragraphs, headings, tables and images.

CSS didn’t exist yet so all the styling was done inside of the actual HTML itself (remember bgcolor?) and the only way to center anything was to use tables and make their borders invisible.

In some ways simple HTML styling lives on today in email newsletters and passion projects but the web itself has moved on to better things.

Websites of this area were made to emphasis the tags and their aesthetics were unique with lots of GIFs, lots or background images that repeated themselves endlessly, and of course some background music to set the mood.

The most well known offender in this category of early 90s websites was GeoCities, which did offer a WYSIWYG editor for everybody to use for free.

Websites of that era were built for Netscape or later for Internet Explorer, nobody ever tried to make their websites cross compatible and they all just worked sometimes.

These compatibility issues often occurred while using specific tags (that aren’t in use anymore) like lots of marquee tags, framesets, blink tags and more.

Those were visually unique but ultimately were deprecated for accessibility and/ or security reasons, so we could only find them in early web design relics.

Speaking of security concerns, then came Flash

When Macromedia Flash (later — Adobe Flash) became the standard tool everyone was both a designer and a developer, Flash had its own scripting language called ActionScript and it’s own animation-driven interface.

As a result people started replacing their entire websites with Flash sites, these sites were very animated and very tailored to their needs, no more templates and no more copying HTML tags from one another (Flash sites were nutritiously closed off — unlike HTML “view source” feature)

Flash transformed the web more than any other tool, it made the entire web dependent on its proprietary technology, it made us all developers and animators, and sometimes even game designers.

As a result those sites were often bloated, since optimization was optional, and they were very unfriendly to SEO, since it was all closed off.

But the Flash era was the most creative the web had even been, Flash websites could do pretty much anything we could imagine, Flash games were also a big thing in the mid-2000s, see Newgrounds website above.

Flash is still alive in the form of Adobe Animate, but today it’s less geared towards websites, since the web had moved on — partly since the web moved to a mobile first web.

Flash websites were bloated and had security issues but above all else: they weren’t responsive enough to survive in the mobile internet era, when screen real estate and battery life were much more scarce.

I encourage everyone to read “Thoughts on Flash” by Steve Jobs, it sums the problems with Flash on mobile devices nicely.

Photoshop and Illustrator are both Adobe products, they weren’t new at this point but the industry defaulted to them when Flash was on its deathbed.

When Flash was no longer the dominant design tool for the web, nothing could really fill its place, so the industry moved on to the tools that were already proven to stick around.

This era of web design felt especially static, as designers only designed Desktop and Mobile websites, with often nothing in between, keep in mind that iPads weren’t a thing yet and/ or just came out.

Everything was done manually using hard labor, no automation, no tools to make the process any easier, certainly no specialized tools yet.

Photoshop and Illustrator are general purpose software — Photoshop is for editing images and Illustrator is for editing vector shapes, none of them were made for web design specifically.

As a result they had many tools that were irrelevant to Product Design and many relevant tools were missing.

These relevant/ irrelevant tools were the blueprint for the next generation of tools, that built upon the workflow of Photoshop/ Illustrator and decided what tools to include and what tools to exclude.

Photoshop and Illustrator as web design tools were never great tools for the job, but they were great at being placeholders until some more specialized tools arrived.

Sketch, for many designers, was just that — a new tool built from the ground up for Product Design (or UI Design, as it was called then). Sketch didn’t have the bloat Photoshop and Illustrator had since it was purpose built.

The application itself and the tools in it were lean and were exactly what users wanted. I didn’t get into Sketch although a lot of my friends and colleagues did. Sketch was (and still is) a Mac only application so I knew it can’t be the tool of the future.

There were entire industries built on Windows PCs and the Mac-only Sketch were making a lot of problems in their pipelines, for example: the gaming industry, the data security industry, AR & VR (at the time), the banking industry etc.

Sketch did a lot of things right but eventually the one thing it did was making the entire design industry reconsider the tools they use.

Sketch walked so Figma could run.

Figma wasn’t just a cross-platform version of Sketch, Figma took the formula that Sketch made of lean and precise design tool specifically made for UI design and expanded upon it.

It was a new kind of tool — it was an online first tool, Figma was available from your browser, without any installation (when it did that, it was all new and exciting, I know today it’s more common).

Since it was all online, Figma files could also be shared and worked on together, Figma had the most advanced “multiplayer” tools I’ve ever seen, which meant designers can work together on the same design file and in the same time, since it was all online.

Think of Google Docs, you can also edit the same file in Google Docs, or the same code in a Git repository, for example, but Figma brought the same philosophy into a design tool and since then many tools tried to do the same.

Since Figma tried to be lean (much like Sketch before it), many tools were dropped in the process, no more photo editing tools, limited filters, limited Motion Design tools, no 3D tools etc.

On the other side many new tools were introduced, responsive design controls for every frame, a prototyping tool and auto-layout controls — just to name a few.

Still, Figma was very “flat” looking by design and more detailed work was harder to achieve, many still used Adobe Illustrator or Photoshop for detail design and many just gave up and embraced the flatness.

Since advanced Motion, Animations or working with 3D elements is virtually impossible in Figma and as a result, those elements are very rare to see in the web today.

I would argue that to this day, features like Motion Design and 3D work are still missing since they weren’t present in the original catch-all tools Photoshop/ Illustrator and as a result they are still missing from Figma today.

Just to be clear — I am not against any of it, I like flat design and I think intelligent design can be done in any style and in any medium, regardless of the rendered output, when I say “flat” I don’t mean it as a criticism — just as a visual observation.

From no tools for design, through WYSIWYG and Flash, Photoshop/ Illustrator, Sketch and of course Figma it was quite a ride.

The tools change not only how we design interactive websites but what we design as well, including how they look, how they work and how the users experience them. No website is made in a vacuum.

We can clearly see how the tools of each era influenced the design of the websites below, they are all promotional websites that were designed when the movie released.

The first example (Space Jam) used HTML and WYSIWYG tools and the result is a more fined version of GeoCities websites, with the repeated background image and the secluded elements.

The Matrix example was done in the era of Flash and it has many TVs showing small clips from the movie, notice how they don’t really design a UI but they design a “world” you can go visit.

The Last example — John Wick is modern design that was probably done with Figma, it is highly reusable, probably using the same template as any other movie and it is a UI with text, titles, menu and even a video in a rectangular shape, how long have we come indeed.

It can be said that any creative industry is bound to change, the history of painting and art in general is full of these examples — how the invention of oil colors gave a way to the renaissance masters to shine, how watercolors freed the impressionists from their studio to go paint outside and so on.

As Marshall McLuhan proclaimed more than 60 years ago: “The medium is the message” and it is much more pronounced in any technological field since technological tools change all the time.

No one can predict the future. However I’m pretty sure that the tools will keep evolving and Figma won’t be the end-all for Product Design.

Thank you for Reading 🙏

Web Design History Timeline / Web Design Museum

A Brief History of Web Design Tools and the Original Sin / Eden Vidal

A History of Web Design: From Notepad to AI (1998–2025) / Digital Impact

The History and Evolution of Web Design (Timeline) / WebDesign Inspiration

I Used Netscape Composer in 2024 / Pier-Luc Brault

Sketch App Review / Newbird

How to Design with Figma / OneSignal