The past 25 years of the web have been all about code. Those that have been able to learn programming languages and wield the power of a text editor have built incredible products, and have often been rewarded handsomely.
While designers have played an important role, they’ve been more behind the scenes. Designers have always been at odds with the web development workflow, hindered by limited tools and slow-moving standards.
The next 25 years of the web will be all about design. We can make significantly more progress by opening up the power of web development to the masses. Similar to how desktop software once transformed print design, or how blogging services have revolutionized the publishing landscape, a more powerful web design software can completely change how we create for the web.
The progress paradox
When I first got into web design in 1999, it only took a few months of playing with Dreamweaver to learn the majority of the web designer’s toolkit. Almost immediately, I felt empowered and started taking on real projects for real businesses that paid me real money.
Getting into web design today, however, is an entirely different challenge. While browsers have become more standardized and predictable, the learning curve for developing for them is steeper than ever. HTML and CSS have expanded significantly in scope, and JavaScript has become a much more vital component of most websites and applications.
Although we’ve had many frameworks and tools built around the web design workflow, nearly all of them remain code-based and require a level of comfort with text editors that most designers don’t have. The sheer number of frameworks leads beginners towards a paradox of choice, causing many to give up before understanding the fundamentals.
If that wasn’t enough, the explosion of smart phones and tablets has made the job of the web designer even harder. Designers can no longer assume a fixed-width canvas, and have to make sure their designs adjust and reflow correctly at every possible resolution. They have to worry about network speeds, progressive enhancement, media queries, browser quirks, and so on. It doesn’t help that the solutions to all of these problems are code libraries.
So while the web has made incredible progress, it has become increasingly difficult to harness its power. This is unfortunate, because it means that a lot of people are being left out because they don’t know how to code.
Arrested development
Despite the growing complexity of web development, there has been almost zero progress made in visual web design tools over the last 10 years. All of the momentum behind Dreamweaver seems to have been killed by the Adobe acquisition, and most new tools that have emerged have been based on writing code. It seems that code has provided a nice crutch, as if we have admitted as an industry that it’s the only serious way we can create for the web.
But why should we settle for hand-written code as being the only ‘proper’ solution? For decades already, graphic designers have had tools like Photoshop and Illustrator to work in their medium and rid them of Bézier math and arcane details of physical typesetting. Print designers have access to visual desktop publishing software like InDesign. 3D artists have modeling and animation software that they can manipulate directly. And yet, web designers are stuck with two suboptimal choices: either learn to code or rely on programmers to translate designs to a working solution. This is completely broken!
The sad fact is that we are severely lacking in great tools specifically for web creation, and we need to build them in order to unlock more of the web’s potential. Telling designers that they need to learn to code is as not a good solution.
The capabilities of today's graphic and interface designers far outpace the tools that help bring their ideas to life. Instead of having access to a comprehensive web design environment, designers are forced to solve problems by trying to piece together hundreds of different frameworks, preprocessors, and code snippets. It’s no wonder that many designers feel overwhelmed and have to rely on others to implement their ideas.
An ideal web design tool
An ideal web design tool should fit the interactive medium of the web, and should allow the designer to directly manipulate their canvas. Designers shouldn’t have to type code into an editor and then go to some other place to see if the result of an action matches their intent — that is such an arcane way to do creative work!
An ideal web design tool should create visual abstractions around common web development primitives. It should give designers the power to create dynamic data and seamlessly inject it into designs and layouts. It should make it possible to visually specify user interactions without resorting to jQuery scripts. And it should empower designers to create flexible style systems and reusable components, and do so without requiring a background in programming.
An ideal web design tool should transcend the specifics of code and implementation, and help designers focus on things that really matter - like data, aesthetics, interactions, and usability. Designers shouldn’t have to worry about databases, FTP clients, file minification, or even HTML and CSS code. At the same time, it should respect the technologies that make up the web, and produce clean, structured, and performant code.
At Webflow, we’ve made it our mission to build this mythical web design tool, and have already taken the first few steps towards the future ideal. We’re creating a unified web design environment that empowers designers to not only make websites look great, but to solve real problems on the web.
Design can’t be automated
Design is a universal language. It transcends borders, races, and spoken languages. It is constantly changing and adapting to new ideas, new platforms, and new environments. It’s inherently more human than programming - most of us can tell good design from bad, while a only a tiny percentage can identify good code. Design is the interface between the problems we face, and the solutions we create to overcome them.
Unlike many technical disciplines, design is impossible to automate. Like great literature and art, great design draws on human empathy and emotion. If we somehow do manage to automate design, we would have essentially automated humanity.
The design of a solution is much more important than its implementation under the covers, since the latter is almost always invisible to the user and can take on so many different permutations. Whether it’s a simple web page, a data-rich online newspaper, or a full-blown interactive application - how users experience it easily trumps the underlying code used to build it.
Why does that matter? Because to move the web forward faster, we need to admit that design is the common denominator behind most of the content and experiences on the web. It’s not code. Code is just a means to an end; an implementation detail, albeit an important one. And yet, writing HTML, CSS, and JavaScript is still a prerequisite to creating for the web.
At Webflow, we’re working on putting design front and center, while automating away the repetitive programming bits as much as possible. And we’re doing this in a way that keeps the final code lean, clean, and fast - without resorting to shortcuts that break established conventions.
Towards a better web
Even though the web has been around for 25 years, we are still trailblazing. The web is a new frontier, and so far only a relative few have gone out to start exploring it. There are orders of magnitude more innovation ahead of us than behind us.
If the web is to reach its full potential, we have to empower many more people, with fewer technical boundaries. The needs and capabilities of the internet will grow faster than society can train up new computer programmers, so we have no choice but to transcend past programming to interact with this beautiful new medium.
With technical barriers out of the equation, we can usher in a creative renaissance on the web. Designers won’t just dream up and wireframe ideas, they will actually have the power to bring them to life!