The designers’ guide to development
As a designer in the digital landscape, it is crucial to communicate effectively with various stakeholders in order to deliver pixel-perfect screens. As more people join the conversation, the complexity of a project typically increases. However, managing expectations and designing for that is just one side of the coin. The other side is development, which requires a high level of craft and knowledge that is often difficult for non-engineers to comprehend. Rest assured, as a skilled professional, I am equipped to navigate these challenges with ease and deliver outstanding results.
The discussion about whether designers should have coding skills is changing as the designer’s responsibilities also change. As designers have more ownership of the product, they move up the ranks and analyze what makes their design work. In doing so, they understand their colleagues’ perspectives and work together to create better experiences.
Coding makes you a better designer
Technical feasibility might be the single most important aspect of product development. However, it is often either black-boxed, miscommunicated or straight-up ignored. Learning to code can be invaluable for designers, especially in the low code/no code model. It can help them create more dynamic, customized, and efficient designs and better understand the product development process. Having more insight into the mechanics of how the app functions reduce the feedback cycles one needs to go through.
Additionally, coding helps designers think through the user experience in a holistic manner and can provide valuable insights into how to make the process more efficient and effective. By learning to code, designers can gain a better understanding of how to design better products and make sure that the product development process is well-designed.
Why now is a great time to start
Coding has been around for some time now, so why is now the best time to start? Well, as with any industry, software development has been evolving slowly. As more and more people have started coding, they have brought in their own philosophies on how products should be coded by creating new tools, changing existing mental models and designing solutions that are easier to understand.
Today we are looking at a new wave of no-code/low-code tools that are powerful enough to create any modern product — while keeping the human resource to a minimum. The barrier to entry for development and testing has never been lower and cheaper. So let’s look a bit closer at said tools and see how a designer can use the power of logic to bring life into their design.
No code/low code tools
The best place to get creating is with no code/low code platforms that have popped up over the past few years. Sites like Squarespace, Weblow, and Framer have abstracted away all the technicalities that go into making a website. This doesn’t mean that they lack power, though. These platforms serve as the perfect platter to serve up your smaller projects like a blog or maybe even that portfolio you’ve been working on forever 👀
Jump right in with Framer to create modern websites with amazing animation options. You can directly export your Figma files too!
Learn Shopify, Squarespace, Wix, or Webflow for your freelance projects. They are easy to get going and can expand your potential client pool.
Dive deeper into coding
Learning to code often comes with understanding various mental models in the form of data structures, algorithms and the flow of execution — all of which can differ from language to language and from framework to framework. The great thing about being a designer is that you can design a great curriculum to propel your learning.
First steps — get an overview
The first wave of overwhelm that is felt by people starting to code is the storm of technical jargon that is thrown at your face. Freecodecamp offers great resources on their site and on youtube, and the following video will run you through what programming is.
Choose your language
Now it’s time to select your weapon of choice. Javascript offers arguably the best ecosystem for a designer to step in and code. It’s not necessarily easier, but it allows for building the kind of solutions most designers already work on. This is where you connect the higher-level concepts to language-specific rules. There are a lot of great resources that explain both the inner mechanics of Javascript and also the ones that are more practical.
You also need to know some basic HTML and CSS for this, but those can be picked up as you move along in your journey.
Don’t stress too much on perfectly knowing everything. Just knowing the basics can enable you to start writing small scripts. Play around with some fun frameworks like p5.js to make generative art or make some figma plugins!
Let frameworks do the work
The great thing about a mature industry like coding is that a lot of the processes and paradigms have been explored. With a lot of problems already solved, frameworks have become a compilation of best practices that help the developer code more efficiently.
Check out this guide: React for Designers, to Start by learning the fundamentals, then poke through some example React projects, and finally create your first React app.
React has been the more popular approach for the last decade. This is where as a designer, you can truly connect the process. Since React and many other frameworks work on the concept of components as the building blocks of the UI, you can start coding your design systems.
This is where you can fully start building the solutions that you have designed. Try some newer frameworks like Astro or Svelte. The latter has an interesting approach to coding mental models. There is power in spilling a bit of coding magic into the design, but the reverse is also true. Svelte is designed to make development easier and more fun. They do this by providing a more intuitive coding experience.
Follow these frameworks and the people behind them on socials like twitter. They always have engaging conversations and give out great information. It’s a great way to follow what’s happening in the domain.
Coding is a practice
In a woodworking shop, you often find hacks and fixes that the shop runner has done using their tools. Similarly, coding can not only be used to build products but also improve internal processes of design. As a designer, learning this adjacent practice can improve your understanding of the products you work with holistically.
Programming is often associated with hustle-culture productivity baggage. However, by shifting your perspective and seeing coding as any other life skill, it can pay exponential dividends. It’s not about how well you understand programming, but rather if you can use it to solve problems. As designers upskill themselves, they move from just being designers to become builders.
Canvs Editorial regularly brings you insightful reads on design and anything related. Check out the work we do at Canvs Club.
The Canvs Editorial team comprises of Editorial Writer and Researcher — Sidhant Tibrewal, the Editor’s Desk- Aalhad Joshi and Debprotim Roy, and Content Operations- Abin Rajan. Follow Canvs on Instagram for more design-related content.
