Should you learn to code as a designer?

How to find the best design-to-code tool ? | by Joris Guerry | Prototypr

Design to code bubble transitions by Viz2Code

Diving deep into the design field requires a major time commitment on its own. But with a major gap between design and development in product teams, should designers learn how to code? From both my personal experiences and an article from CareerFoundry’s UX sector, I can confidently say the answer is:

YES.

But why?

Design is about perspectives

Author and editor Emily Stevens poses an interesting question in her first point: “What if you could view things from a different vantage point?” In general, most designers focus on seeing the problem from the user’s perspective.

However, viewing design work or the design process from the developer’s lens can help improve your skills as a designer. In my previous internship at New American Economy, I used common front-end layouts (flexbox and grid patterns) to guide my UI design process during legacy page refreshes.

Not only did this make it easier to roll out an intuitive design, but consequently made implementation a breeze because the initial layout was already considered with the developer’s interests in mind.

Merging business, user, and developer needs is possible through a diverse skillset achieved by learning how to code.

Design is a progressive field

The market needs for designers are constantly changing. More and more designers are actively collaborating and participating in the development stage of the product creation process.

As Stevens reiterates, learning to code makes you a more attractive candidate to employers who value cross-functional teams and iterative software development systems. Commonly referred to as “unicorns,” these designers have no issues staying relevant in their field. It’s goofy, but being rare and desired doesn’t sound so bad, does it?

Download Unicorn PNG Image for Free

Where to start

There is a multitude of free resources online such as Freecodecamp or The Odin Project that give beginners the foundations of web development. As a student, I’ve leveraged web development courses in conjunction with my design courses to become more well-rounded.

Go out and be the best!

Easing Into Developer Handoff as a UI Designer

A Guide to Smooth Designer-Developer Handoffs | Adobe XD Ideas

Illustration of designer and developer collaboration from Adobe

One of the most important stakeholders in the product creation process is developers, which fully realize and “flesh out” the solutions created by the design and research teams. When branching out of working solo, understanding the developer handoff stage is crucial for rapid turnaround times on projects.

It’s a daunting process

Most designers don’t work with front-end or back-end technologies in their personal projects. Personally, as a junior designer, it’s easy to feel overwhelmed at the idea of collaborating with someone from a different field.

Luckily, this sentiment is shared in the design community among beginners looking to work at larger companies. Through a recent article written by Akshat Srivastava, I began to understand the factors that create roadblocks in this process.

Designers and developers speak different languages

No, not in terms of English or Spanish, or Korean. Being a designer versus a developer is largely boiled down to mindset and approach. Without proper documentation from a designer, development strays from the original design.

Developers prioritize making a dropdown work rather than the visual fluff in UI animation that designers view as crucial to the brand identity.

Designers need to empathize with developers during implementation; moving an element to the right is a mouse drag for us but potentially several lines of code for them.

Be mindful of assets

As someone who has worked in both design and development for a brief period, there’s nothing more infuriating than receiving missing images, fonts, or colors for a project. It’s easy to spend more time fishing for these assets rather than actually coding.

“Define images as components … set their behavior in different states,” says Srivastava. Designers need to think about how their images and fonts scale across a variety of devices

The goal is empathy

In the end, these tips serve to make life easier for developers. As a designer, it’s important to be empathetic; not only to your users but to your teammates in the project.

The Difference Between UI and UX

UI vs. UX Design: What's the Difference? | Coursera

UI/UX Venn Diagram by Coursera

The world of digital design is constantly changing. Thousands of websites, apps, and other products are created each day to grow businesses and deliver services. Maze, a well-known product insight company, recently published an article detailing specializations in the industry that have appeared in the last decade.

What is UI and UX?

When I started making my first website, I had generalized my work under “web design.” In reality, there exist terms that refer to the research involved in creating a user-friendly site (UX) and the visuals that enhance the brand identity (UI). These two terms outline the processes required to create a successful product.

Is there a simple way to understand both?

Thankfully, this article includes a fantastic analogy that puts both UI and UX into a practical visualization. Let’s take a look at a house:

UI v UX: What's the difference? | Orfi Media

UI vs. UX House Diagram by Orfimedia

User Experience (UX)

The foundation and structure of the house would be the UX. Consideration is given to how much space each room should occupy and where they exist in the house. The overall feel of the house and its rooms boils down to this consideration in the earliest phases of building.

User Interface (UI)

The paint on the outside of the house or even the granite coloring on the counters of the kitchen can be considered UI. These seek to help harmonize the existing furniture and rooms to provide a more pleasant living experience.

The A-Ha Moment

When looking at this example, it might be easy to jump to the conclusion that these fields are separate. After all, there exists an interior designer and an architect in all stages of the project, right?

In truth, the UX and UI are intertwined with one goal: to create a pleasant and safe place to live. When these considerations aren’t in place, users begin to nitpick at larger issues that affect this experience.

Why should I care?

Ultimately, clearer boundaries and established practices improve the products we use immensely. Whether it’s a website or a vacuum cleaner, design can improve the quality of life for people everywhere.