How I Deal With The Pressure To Code As A Product Designer.

Published in

Arotec Digital

8 min readApr 13, 2020

Please note that this article is written to purely give a solution to fellow designers like me looking to ease off their coding pressures, and not in any way promote any product(s) or tool(s) being mentioned. Neither is it being sponsored by any third party.

Over and over again, designers have proven to be an integral part of any software development project across the world. Yet many downplay the roles of designers by arguing that coding should be part of their mainstream since (they believe) it’s where the job lies. This is a very poor and wrong perception of Designers. Here’s why.

Designers work like Architects who carefully structure and map out the outcome of buildings and construction projects. If architects do not painstakingly draw up all the necessary requirements and modalities towards erecting a strong infrastructure, the construction stands a danger of collapsing. And despite that they aren’t the building engineers, their roles are so important to construction processes and the overall success of building projects. Yet, no one mandates them to wear the hats or develop the skills of the construction engineers.

Why then is the case different for UI designers? Why does the world keep devaluing the role of designers, making their contributions seem infinitesimal and forgetting that designers are the architects of any software development projects? Why should the same person who designs be troubled to code; whereas the person who codes isn’t bothered at all about designing? Why have we failed to understand that as Architects are to huge construction projects, so are Designers to deep web/mobile projects?

More and more questions agitate my mind as I reflect on the negative curve on which wrong perceptions about Designers often spring. Unfortunately, not a lot of Senior Designers have been able to wade off notions underestimating their roles along the technology chain.

In fact, watering down the role of Designers has not only forced but pressured a lot of Designers like myself into learning programming languages. And in most cases, the results aren’t as excellent as compared to when they are allowed to focus on what they do best; creating highly interactive designs.

Here’s another case in point; you wouldn’t expect an Android Developer to double as a Web back-end Engineer and then a blockchain specialist, and even when you see such persons, you’re often tempted to question their level of expertise in each of the areas because specialization seems lost.

While our advocacy to reorient the world about the integral role of designers in the software development value chain persists, we cannot guarantee that debates on whether or not UI designs bring value to the table will abate soon.

This is why, as a Designer, instead of allowing the pressures to learn programming weigh you down or hamper your creativity, there’s good news on how to go about realizing your design efforts without even consulting a third part programmer who may end up messing up your designs. ☹️

The best part is, you still wouldn’t need to learn anything about coding. In fact, I will strongly suggest you focus and tailor your energy towards establishing your creative design thinking process rather than taking up another skill that may be parallel to yours.

Many organizations that appreciate the value and works of designers have developed numerous tools which now allow UI Designers to finally bring their design projects to live without lifting a finger of code or racking to study a lot of programming languages which conflicts with their own specialization or even entrusting their clean designs to Developers who may end up messing them up.

These new sophisticated tools and software are evolving to catalyze the process of design-code translation. They range from pre-built frameworks, Content Management Systems, to Website Builders and Design Studio Softwares.

In my experience as a Senior Designer for the past 3 years, I have used some of the top-rated tools that facilitate the design process. However, there is one particular tool that I’ve recently come across with functionalities that have not only fascinated me, but finally made my career as a Designer very easy, and eliminated the pressure coding places on me thanks to its Code Export Feature. This tool is called Webflow.

Webflow is an online software that allows you to design and then builds your output without necessarily exporting codes. It develops the work-frame upon which your design is nested and it is really very responsive.

…Simply put; You design, Webflow builds

There are indeed many interesting points to Webflow; but before we proceed, kindly refer to the disclaimer above, as I may be delving into, and exploring the tool unreservedly.

Having done that, let’s proceed.

What I have realized as a Designer is that, besides solving basic problems we face such as building responsive websites with browser-based visual editing software, Webflow automatically generates HTML, CSS, and JavaScript. The best part is, it allows you to export this code perfectly! So it can be easily translated by any programmer. Isn’t that awesome?

Let’s delve further into how Webflow really makes your designs flow.

The Designer

As a designer, nothing thrills you more than bringing your design vision to life with a tool that’d give you a very clean and definitive output, using the combined semantic HTML5, CSS, and JavaScript. This is exactly what Webflow promises with its Code Export Feature.

Without writing code, you get to experience the power of code in a completely visual canvas. And after translating your design into the clean semantic code, you can decide to publish to the web or hand off to developers.

Think of this as a more flexible and dynamic structure for its work environment. First, it comes with inbuilt elements like sliders, tabs, background videos, and more, that you can easily drag and drop — as seen in the image below:

Also, it gives a huge balance when it comes to symbols and navigators. Just like Sketch or Figma, you can create reusable symbols (i.e. turning navbars, footers, signup forms, and more into symbols) that are changeable across your whole site with just one edit and its navigator element enables you to access all your pages seamlessly.

While the structure of Webflow is one of its many perks, there’s more to its style features. When it comes to building flexboxes, grid layouts, and styling every element to your satisfaction, Webflow’s got you. Its CSS-based class system makes it possible to style changes across multiple elements at the same time. It also maintains a high level of responsiveness that makes it previewable across multiple screens and devices.

And on layouts, typography and colour, Webflow gives you total control.

When you’re done with your designs, you can either publish directly to the web or hand-off your clean works to your developer. Clients or colleagues are also free to make edits and publish or update content with an intuitive Editor. An interesting add-on is the integration of marketing tools and more that Webflow offers.

But Webflow isn’t for just basic websites or designs. Despite being flexible, it has developed a highly responsive framework for CMS and eCommerce websites. This brings us to the second category of exploration — the CMS and eCommerce features.

Webflow’s CMS and eCommerce

“When content management meets visual designs” is a phrase that sums up the Webflow CMS and eCommerce experience. Publishers, designers and developers can completely build custom databases for dynamic content types (added from a CSV, or via Webflow’s API), then design it visually, including the online stores.

Although the Webflow’s store feature isn’t a novel offering, especially since platforms like Shopify already have a wide adoption amongst users, Webflow offers more intuitive and novel features. For instance, its customisable and visually interactive eCommerce experience, codeless nature and free forever plan all contribute to its edge.

Moving over to the third category — Interactions & Responsiveness.

Interactions & Responsiveness

Many designers can attest to how bad they cringe when codes mess with their pre-designed web interactions. This is probably why, Webflow, in order to appeal to designers promises an environment to easily create immersive interactions and animations.

This aspect is also one of the most interesting features presented by Webflow.

This aspect is also one of the most interesting features presented by Webflow. From the scrolling effects, elements and triggers, to effects and control, animations that build as you scroll, micro-interactions around on mouse hover, content reveal on click, text presets, AfterEffects and Lottie animations and much more, Webflow truly understands the core needs of high-end designers and tries to satisfy them fully. All of these interactions are maintained while exporting with Webflow’s Code Export Feature.

What’s More?

I mustn’t forget to mention that another important thing about Webflow is its designer-friendliness. And if you ask me, that’s something we designers love when interfacing with our tools.

It gives such a relief to know that we can now completely defy the mounting pressures to learn programming languages thanks to website builders which easily lets us export codes.

What a lot of clients and individuals including Project Managers in most parts of the world often fail to understand and recognize is, just like Programming, the design process is a skill of itself that requires the same level of attention, dedication and professionalism. And it is only normal that people explore their skills freely.

More often than not, everyone forgets that UI designs give programmers the fundamental frameworks upon which to build, hence making development processes much easier to execute, and eliminating trial by error along the way. This is why the role of Designers should never be downplayed.

And to all my fellow UI Designer, even if you’re being pressured on programming, my question to you is, why veer off your core skills to start learning how to code when you can easily use Webflow’s Code Export?