Today I am going to talk about designers who code. This starts with a little bit about who I am. I went to school for Graphic Design but had been designing and developing websites since I was 16. My first full website was a Dragonball Z fan site. I wrote it in HTML with CSS and a little JavaScript, and because of that you can still see that site today. Really though, should designers learn to code?
I talk to many designers who ask me if they should learn to code. Where to start. What to learn. They feel like they are missing out because they don’t know how to code. They also feel like it would be too much to handle, considering how time consuming design can be.
Most designers spend a large portion of their careers working on web app or web design thinking they are missing a vital piece to their success. I do the same thing but with the idea that I should have gone to school for proper software engineering instead of graphic design.
The problem is that it truly does not matter.
- Designs can learn basic HTML, CSS and JS
- Designer don’t have to learn basic HTML, CSS and JS
- Your journey is what’s right for you
If you are a great designer and do not code, that’s perfectly fine. If you are a great designer and do code, that’s also perfectly fine. There are companies and roles for each of these types of individuals. Do not get yourself wrapped up in arguments that say you should be one way or another. Hone your skill to be the best at what you do, then consider something else. Or don’t. It’s perfectly fine either way.
If you are a designer who is specifically designing for the web, whether that is marketing sites or web apps, there are advantages to knowing some fundamentals of the code used to implement your designs. Recently DHH posted an article and the following Tweet:
This is perhaps the biggest secret to the productivity and viability of our two-person teams at 37signals. All our web designers work directly with the native materials of HTML, CSS, and usually even a fair bit of JavaScript and Ruby. Not in Figma. https://t.co/Fu29nvteCx
— DHH (@dhh) June 29, 2023
I do not always agree with DHH, and for the most part this article is simply sharing what works for them at 37signals. I used Basecamp for 13 years for client work with Hoverboard Media. My client work was branding and marketing websites for small businesses. What I would do for those clients, is start wire framing directly in the browser. That meant I could layout content, the real content being used, and the client could see how that looked on their desktop computers and phones. That improved communication between me in the client. It allowed me to test how solutions worked in the final medium faster. There were plenty of iterations going on and refining hierarchy, typography, then adding color, and graphical UI elements. By doing it this way I could ensure I wasn’t designing something that would cause accessibility, responsive, legibility or layout issues.
Today, that starts with a framework baked with Every Layout and Utopia. What Every Layout and Utopia have in common is that they give the browser suggestions and let it figure out the rest. This is difficult to reproduce in Figma. I would love for someone to share with me how they work with Every Layout and Utopia values in Figma. They are dynamic. If you have a perfect level one heading size and line height on a device with a 689px width, it’s different than 700px, 723px, etc. Similarly, the Switcher layout pattern switches between horizontal to vertical layout at something like 30rem. “rem” being a CSS unit of measurement based on the font size of the root element. This is without any media queries. The gist of this entire argument is that with these two starting points you have a more legible and accessible website or web app — only any screen size.
This is what works for me and my clients and we’re always exploring better solutions. This is what works efficiently for DHH and 37signals. “Having your designers become proficient with the materials of the web needn't require they become oracles of front-end development” is 100% correct — for some. “Leave Figma to the early conceptual stages of web design.” is also 100% correct — but not for all.
There will always be takes that will hurt to read because everyone has an opinion about what works for them. Take it all with a grain of salt. They are not living your life. They aren’t in your circumstances. Assume positive intent. They want to share what they know. That doesn’t make it right for you. You do you.
That’s it for today! Feel differently about this? Feel free to let me know. See you online!
Helpful?
