Win a free ticket to the 2020 IoT Innovator Summit in Austin, TX.

Subscribe to our blog to get the latest articles straight to your inbox.

Stop me if you’ve heard this before: “Designers should write copy”, “Designers should know how to illustrate”, “Designers should {insert culturally relevant joke}”. The role of a product designer is never going to stop changing, however, there is a big shift happening whether you want to believe it or not: Designers should know how to write code (or at the very least, start thinking like an engineer).

Very early in my design career, I avoided writing front-end code as much as I could. Like many young product designers, my focus and passion were on the visuals and the experience, not the implementation. Eventually, I started to dabble with some high-level front-end languages like HTML/CSS, writing basic layouts and styles, but at that point, I still wasn’t very savvy.

My life as a product designer changed dramatically once our company decided that all of our designers should be writing production-ready front-end code. I had no choice but to dive head first into not only thinking like an engineer but providing real deliverables on the front-end code. It’s been 4+ years since that day, and it has changed my entire outlook on how to design and deliver products.

Things You Learn by Writing Code

As you begin to write code, you will start to see patterns and constraints that a designer who is strictly visual would not see.

You Start to Think in Systems

When designing a product, whether it is a web app or native app, if you are writing the front-end code for that product, you start seeing ways that the components can be reused. It is extremely helpful having this mindset when you start getting into wireframes of the project.

Your Layouts are More Consistent

Reusable components are an essential element in designing systems, but another “layer” to that is consistent use of whitespace (or negative space). Once you begin to implement your designs into code, you start to notice that vertical spacing is just as important as horizontal spacing, and there are patterns that can be applied in areas surrounding the components.

Your Crazy Ideas are Less Crazy if You Have to Implement Them

Dribbble shots that have beautifully complex motion are a dime a dozen now that prototyping tools are making it easier to create without the use of code. It’s awesome to look at, but there is a reason why we rarely see those animations actually being applied in the real world: It’s difficult, time intensive, if not downright impossible.

If you are the one that is actually implementing animations into your app, you start to get more creative on ways to develop simpler, quicker solutions without compromising on user experience.

What you can do to start thinking like an engineer (without writing a line of code)

 

Before Wireframes or Hi-Fi Designs, There’s a Story

Being able to articulate what you are about to sketch out/prototype is just as essential as the actual design. By writing down every interaction a feature can do, you will start to think about how the implementation takes place. By documenting gestures, animations, user states, you start thinking not only how your user will interact, but how implementation would work.

 

Always Capture Sad Paths 

For every successful state that happens in a login flow, there is an equal and opposite unsuccessful state (I think there’s a law about that or something). When designing for any product or tool, there are going to be sad paths (error states, access denied, etc). If you think of these use cases from the design level, it will be much quicker to implement on the front-end.

Keep Your Design Files Clean and Structured

When you are working in sketch or other prototyping tools, the folder and file structure is very similar to the project codebase in an application. By naming your folders and layers similar to what you would name something in your front-end code, you can train your mind to view them as one.

Re-use, Re-use, Re-use

If you are familiar with any popular design tools out there, you know that most of them have a way of reusing symbols/components. If you set up your elements and components in a way that if you edit it once, it will reflect in multiple places, you can start to imagine how components work in an actual codebase.

Stick to a Style Guide

When in a design tool like sketch, it is extremely beneficial to set your text and color styles early on. This method is almost a mirror image of how you would set up your CSS or Styled Components in the codebase. An enormous amount of time can be saved since you’ve already figured out what is shared.

BONUS: Design in a Browser (Caution: Requires Coding)

If you have the time, and the desire, designing and working through interfaces in an actual browser is quite useful in becoming a designer who codes.

Final Thoughts

In the end, as with any skill, the fastest way you are going to learn to code is diving in and getting messy. But hopefully some of these techniques will help you shift your mind a smidge into thinking like an engineer.