Should designers start incorporating code into their workflow?
Mar 2, 2023
Yes, it's that cliché question. The question that often sends goosebumps down the spine of designers all over the world. The question that jolts designers bolt up-right in bed screaming. The question that tears design families apart.
Ok I've probably gone a bit too far there….
As designers, we're living in a very complex position in the corporate world. Many consider us to be the painters of the digital world. Often considered the 'go to's' when your dev teams need something that pops, or when your boss wants a quick mockup for a pitch deck. And that may very well be the case for you in your specific position at your company. This can be tedious for some, and perfect for others who enjoy to refine their craft.
But is refining our specific craft enough to keep us relevant in the digital age?
The answer is often yes. Being a great designer will carry you through your career if you're pioneering your particular skillset. Great UI designers, for example, may often find fame and fortune through being repetitive and militant in their specific area of expertise. That could be anything from selling design materials, to being hired by one of the super powers of the world to focus on aesthetic treatment in one specific area. One of the most important lessons we're taught as designers is to make sure we pioneer one area of design and try not to sell ourselves short by offering too much.
So, designers don't need to code then…. right?
*Taps pencil on table at increased pace trying to find the correct answer*
Technically, a designer does not need to learn to code, no. Design as a discipline in the digital space of course takes a slightly different learning path to development. It's often not a pre-requisite to know how to code when you're walking into UX/UI roles at many agencies.
BUT.. butbutbut …
Did I choose to learn to code? YES. To the degree of a seasoned developer, absolutely not, but from an early stage in my design career I chose to learn a basic level of HTML & CSS, which helped my ability to work with developers and dev teams enormously.
⭐️ Understanding the basics of HTML and CSS
Having a basic understanding of HTML and CSS is extremely valuable in how designers approach responsive page layout, and how they communicate ideas to developers. Without this understanding, conversations with developers can be a little longer and have a little more back and forth.
Utilising HTML & CSS best practices will almost certainly make you a better designer, and through understanding grid systems, H tags, flexbox, and popular libraries like bootstrap & material design, a designer will be able to deliver detailed works that will carry greater structure and require less pushback from development teams.
(and no, creativity is not hindered)
⭐️ Understanding the basics of Javascript
As a designer, you'll almost certainly not be expected to write complicated JS strings working in a design role. Your wonderful dev teams will take care of all of your complex javascript needs. That isn't to say that you should sleep on javascript through.
Javascript can inspire some of the most effective and creative interaction decisions within a project, and is a space that designers should admire deeply. It's likely that every single creative website you've saved from awwwards or siteinspire is operating with a strong javascript engine room dictating page scroll, hover effects, page load, and other funky animated content.
As a designer, being inspired by javascript libraries and understanding their application can also empower you when using no-code tools like Webflow or Framer.
Designers leveraging no-code tools may have very little understanding as to how to write javascript, but being able to implement JS libraries and assigning ID's to components is more than enough to take their design work to the next level.
⭐️ Understanding the basics of SwiftUI
Again, there won't often be a scenario in which you're hired as a designer but expected to walk into an organisation and sling complicated swift stacks for iOS, but to understand the basic structures of Swift will greatly assist your ability to be able to structure and design effective native app work.
One tool for iOS that I have found phenomenal is DetailsPro app, a design tool that uses best practises to be able to design native iOS apps that you can export into XCode. Whilst Figma is great, DetailsPro is phenomenal for creating interactive design work that developers can pick up already sitting on a SwiftUI foundation.
⭐️ Resources
https://designcode.io - A solid resource for designers to learn how to code creatively
https://www.domestika.org/en - Consider purchasing one of the creative code courses
https://framer.com - Visually build websites in a design viewport and utilise react code
https://webflow.com - Visually build websites, utilise code snippets, export site
https://detailspro.app - Design iOS applications that carry over into XCode
https://getbootstrap.com - Learn Bootstrap's framework from a design perspective
https://get.foundation - Learn Foundation's framework from a design perspective
