The technical designer
I learned to code midway through my design career, and it’s helped me in ways I never anticipated… especially with working at a startup. It’s made me more scrappy, more consistent, and it’s given me perspective to set my design team up for the future.
I was fortunate to start my design career right as Web 2.0 exploded. Glossy buttons, AJAX, and animation everywhere. As a design freelancer I worked with developers to bring my designs to life in code. Often times that consisted of a handoff, waiting a week or two, and then a (rather tense) tszujing session with the developer.
Can you make these text blocks the same width? Can you move this image 2px left and 1px down?
It was frustrating for developers, but it was deeply frustrating for me too. Not just because of the extra work, but because I almost always ended up compromising my design vision in some (seemingly) trivial way. No animation here. Lack of consistency there. “That’s not possible in code.” I lived in a world where my Photoshop mockups were always way nicer than what shipped. That was the way of things.
I also spent an inordinate amount of time trying to co-opt engineer friends to help me build websites, apps, and goofy side projects. I could design anything I wanted, but I couldn’t build anything. It sucked.
I took some time between graduation and finding my first startup job to learn to code. I started by building my personal website and sending lots of annoying iMessages to coder friends asking for help when I got stuck. It was really hard at first because I knew what I wanted things to look like, but not how to code it nor how to Google with the right words. It was slow and arduous, but eventually I picked up on patterns and learned the lingo. Searching for code examples and asking the right questions became a lot easier.
Eventually I built Startups, this is how design works — the first side project that I ever shipped on my own — and finally felt like I was getting the hang of coding. I even designed a grid system by mistake, because I actually didn’t know things like Foundation and 960 grid existed 😬. A few projects later, HTML and CSS felt like second nature. I firmly believe that it was the most important skill I ever learned as a designer.
The scrappy designer
When I joined Envoy, the team (a.k.a. the 5 people crowded around a table in a SoMa apartment) needed to ship the public beta in seven days. We also needed a new website to show it off.
The two engineers were focused on building product features and squashing bugs, so I was tasked with designing and building the website on my own. No worries! I had done this before. But it turns out we also wanted to simulate the entire iPad sign-in experience with animation as part of the landing page…so maybe I got in a little over my head.
Thankfully having basic HTML/CSS knowledge made it easier to ask the right questions when I was stuck. I stumbled through StackOverflow (a great technical resource!) and discovered a hacky way to simulate typing and swiping with Javascript. The new website was so much fun to build, and the animation was something I’d never have considered if I started in Sketch like I usually did. The iPad animation was easy to conceive and experiment with in code, but much more difficult to convey in a static mockup. We were able to move quickly and produce an awesome result in time for launch.
The systems designer
With my newfound skill designing product in code, I grew to hate handoffs. It became easier to realize a UI design in code and work with an engineer to wire it up than to dump mockups in an engineer’s lap. I also learned that it was much easier for me to craft a great experience for users when I worked in a partnership with engineers from the beginning. Having vocabulary in HTML and CSS (at least) made this process much easier on both sides.
Shortly after launch, we rebuilt and redesigned our web app to accommodate new functionality and added complexity. Designing the entire frontend of a new product was an incredibly daunting task: keeping components consistent, defining a type system, and setting ourselves up for the future was a big ask for a small team with one designer.
One of my friends suggested using a CSS framework to design reusable components in code, with presets for fonts, typescale, colors, and other elements. This revelation made a daunting 50-screen website into a handful of components arranged in different ways on different screens. It was still a huge project, but much more manageable for our small team.
The framework also set us up for growth. With a design team of five, we still use a version of that original framework today. We have lots of plans for making it even more extensible consistent in the future!
The team designer
As the design team grew, my job changed from designer to mentor. The team jokes that my Sketch version is always out-of-date…and unfortunately they’re usually right. Instead of designing interfaces, my new job is to help design the best design team in the world.
Envoy is still a small company, so every designer and copywriter needs to wear different hats. We collaborate heavily with product managers to understand problems and define solutions, we work closely with engineers to bring those solutions to life, and QA the work we ship to customers to maintain a level of craft and quality that we can all be proud of.
Many of the designers at Envoy joined with limited coding experience, but everyone (yes, even writers) have touched code in a meaningful way. We invest in teaching each other skills (not limited to coding!) and it’s part of our culture to help each other be better designers. Our goal is to become an invaluable partner to our engineering and product teammates throughout the product development lifecycle.
I believe (probably non-controversially) that designers are more than pixel pushers. Designing digital interfaces in 2018 without a familiarity with code is akin to a painter hiring someone else to wield the brush, without understanding the viscosity of the paint, how colors mix, or what a brush can and can’t do. The design and the medium are one.
Learn to code. If you want to push the boundaries of design at an early-to-mid stage company, you need this skill in 2018. Understanding the basics and pushing the boundaries of your skills will help you work scrappily, build awesome design systems, and create things you never imagined possible.
How has learning to code helped you in your career? I would love to hear your stories in the comments 🙂
Thanks for reading! Be sure to visit envoy.design and subscribe to get notified when we publish something new.
