Author: UXPin

Designers and developers collaborate for a common cause–to build products and experiences their customers want or need. Their shared purpose is to serve their users. 

To achieve this common purpose and collaborate effectively, designers and developers should understand the other’s discipline. Designers don’t have to become coders, but understanding the basics of code and its limitations is incredibly beneficial.

Just like an architect must understand building materials to design a structure, UX designers need foundational knowledge of front-end code like HTML, CSS, and a little bit of Javascript–the building blocks of product design!

UXPin is a code-based design tool bridging the gap between design and development. Sign up for a free trial to experience how code-based design can revolutionize your UX workflow, reduce time-to-market, and increase a shared understanding between designers and developers.

Benefits for Designers Knowing Code

Designers who learn code have nothing to lose and everything to gain. The benefits far outweigh the time it’ll take to put your head down and learn a new skill.

We took inspiration for these benefits from Vanessa Jaramillo, who writes about her experience of learning to code as a designer.

Vanessa sums up her experience at the end of the article, “A digital designer won’t need to use their coding skills every day, and we definitely don’t all need to be full-stack developers. But, having an understanding of the basics makes us more flexible when working within a multidisciplinary team.”

Better Collaboration With Developers

When designers have a fundamental understanding of code, they can communicate with developers significantly better. They’ll also earn developers’ respect, who in turn might make more of an effort to understand design.

Design handoffs are always sticky between designers, product teams, and engineers. Why? Because they speak different languages with different constraints. By learning to code, or at least the basics, designers can better understand code constraints and limitations, making it easier to solve problems collaboratively with engineers.

Understanding Development Limitations

When designers know how to code, it’s easier to understand the limitations and fix problems, especially during quality assurance (QA) after the handoff. For example, designers can use the browser’s developer tools to inspect an element’s HTML and CSS if something doesn’t look right in the browser.

Understanding technical limitations can also save designers significant time during the design process because they know what is and isn’t possible-avoiding design decisions that exceed technical constraints.

Improve Prototyping

Image-based design and prototyping tools don’t offer the fidelity or functionality of a coded product. Limiting the testing and problem-solving designers can do during the design process.

Designers who know HTML and CSS can build functioning prototypes that outperform image-based design tools. 

With a code-based design tool like UXPin, designers don’t need to code to build fully functioning prototypes that accurately replicate the final product. Sign up for a free trial to experience code-based design with UXPin today.

Increase Your Value

The tech industry is an exciting landscape with new roles and opportunities constantly emerging. By learning to code, UX designers can take on bigger roles, transition to new careers, and increase their value to prospective clients or employers.

Which Programming Languages Should Designers Learn?

Learning HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) is a fantastic place to start for designers who want to learn code. You could describe HTML as the wireframe of the internet while the combination of HTML and CSS is the equivalent of a design mockup–except with greater degrees of fidelity and functionality.

Most of the properties panel in a design tool is CSS-sizing, color, spacing, typography, grids, shadows, etc. So, understanding the language will help you visualize and understand your designs in code. Plus, you can communicate better with devs.

In a code-based tool like UXPin, designers can use CSS instead of the panel to set properties for elements on the canvas. 

Designers usually stop at HTML and CSS because this is all you really need to build most mockups and prototypes. But Javascript will allow you to take things to the next level.

Beyond the Basics

Javascript is another excellent front-end language. It’s a little more challenging to learn but will allow you to enhance a basic HTML and CSS prototype significantly. This is why most front-end developers recommend designers learn HTML, CSS, and some Javascript.

Javascript is also beneficial because it is the foundation for many popular front-end frameworks like React, Vue, Angular, and others. Learning a front-end framework is significantly more challenging and time-consuming, so designers don’t need to go down this path unless they truly enjoy the coding experience.

How to Design in Code Without Learning Code

One of the primary reasons designers want to learn to code is to build better prototypes. The prototypes generated from most image-based design tools lack fidelity and functionality. Designers can’t test every aspect of the user experience, and errors invariably end up in the final product.

Designers need a design tool that generates HTML, CSS, and Javascript–which is precisely what UXPin does!

On the surface, UXPin works like any other design tool, but instead of generating vector graphics like other leading tools, UXPin renders HTML, CSS, and Javascript.

UXPin enhances prototype fidelity with states, code-based interactions, conditional formatting, variables, data capture and validation, functions, and more. The result? Your prototypes work exactly like the final product.

Taking Prototyping to the Next Level With Merge

You can take prototyping one step further with UXPin Merge–a technology that syncs code components from a repository to UXPin’s editor.

With UXPin Merge, designers are designing with code! The components look like any other vector-based element, except they have the same functionality and fidelity as those in your final product.

Designers can drag and drop design system code components to build fully functioning prototypes, limited only by the capabilities of your front-end framework!

Merge syncs directly to Git for React, or you can use our Storybook integration for other popular frameworks like Vue, Angular, Web Components, Ember, and more.

Find out more about Merge and how you can request access to this revolutionary technology.

Two Parts of the Same Team

UX designer Jenny Reeves wrote the second part of this article. She explores how design and development aren’t as different as you think and how developer experience can improve a design approach. 

First, let’s look at two development best practices and their design equivalent.

1) Create Modular Code to Increase Efficiency

Just like designers strive for component-based design, programmers apply reusable elements and efficient use of CSS. The lego-block methodology to development scales incredibly well (especially for complex products).

Consider this scenario: a client has a contact form and wants to add a feedback form. If the developer has already created a class for general forms, adding a new one is not that big of a deal. Since developers are innately thinking in this manner – they are inevitably aware of ideas in which different aspects of a user interface or application can be reused or re-appropriated in terms of functionality or UI.

2) Create Flexible Code for Scalability

Like designers build design languages that survive a growing product suite, developers seek to write code that doesn’t require complete re-writing for significant changes.

Much like a designer’s UI kit, a developer creates a code pattern library that is even more flexible in the long run.

Change one element, and the update occurs everywhere.

The modular approach is the same – it’s just expressed differently.

How Developer Logic Strengthens the Design Skillset

Of course, not all designers need to code. In today’s Agile teams, we should embrace the power of specialization.

That being said, code-savvy designers tend to understand technical implications better (especially useful for enterprise products). They also gain a more structured framework for problem-solving. I say that from personal experience as a developer turned designer.

Learning to code in grad school gave me a chance at an entry-level web development job, which led to programming roles, which finally grew into a UX career.

My development experience disciplines my design process like nothing else. Coding opens our eyes to new ways of thinking and unlocks hidden parts of the creative process. Thinking logically within coding parameters brings the design problem into focus.

For example, at the start of a recent project for a data analytics product, the only requirement I faced was to “reinvent our interface, inspire our company, and stand out in the marketplace.”

With such unclear requirements, I needed to blend design thinking and code thinking into three parts.

1) Identify the Situation as a Non-Traditional Exploration Exercise

First, I listened intently.

Is the client mainly concerned with the user interface? Not so, in this case.

Sure, their interface needed updating, but the deeper problem was presenting data in a meaningful way beyond icons and colors.

2) Reframe the Initial Thinking

As a developer, I’ve approached similar problems in the past by laying out a data model to support a richer experience.

I applied the same understanding to the client’s needs on this project.

When the client said they’d like to surface a specific piece of data on a particular screen, I understood it as so much more. They were essentially drawing a connection between the significance of this piece of data to the adjacent components.

Furthermore, I now understood that two specific pieces of data are more powerful together and was able to find opportunities to implement this type of “design relationship” throughout the application.

The client’s problem was much deeper than “we need a new design.”

• To support such a complex product, they must prepare for a high degree of collaboration and flexibility.
• Based on my past developer experience, I knew that the client would surface more data and capabilities as we went along. They were just preoccupied with too much work to communicate everything at once in a traditional “requirements gathering” stage.

So, I reframed my thinking: the entire design process must be treated as ongoing requirements gathering. Everyone needed to be flexible in their work, or the project would fall apart.

In short, Photoshop, Adobe XD, or Figma weren’t going to cut it!

3) Create a Sustainable Framework

This approach to segmenting the interface is code thinking at work.

When approaching an interface development project, developers usually start by creating a framework: in broad strokes, defining areas where smaller pieces will live and grouping these smaller pieces in a way that makes sense.

A developer’s job becomes complicated if this organization doesn’t exist before they start diving into the details (such as specific CSS implementation and smaller components).

Similarly, I first sketched a “UI framework” to designate some broad user goals for the design problem. We keep the look and feel consistent by outlining the general principles as we dive deeper into specific interactions.

When moving into the prototyping, I was able to dedicate the necessary time to perfecting the UI components since the overall vision was clear. Since the prototype elements were treated as modules, the transition from vision to detailed crafting was much easier.

Conclusion

Coding is an essential part of the design process, a launchpad to modular and scalable thinking, or a valuable design tool.

To ensure that code-thinking is part of the design process, consider the following:

• Include a developer or two at different checkpoints during the project planning and design activities.
• Collaborate with a developer about prototyping techniques that will benefit the project at hand.
• Discuss a modular approach with the development team to understand how the bits and pieces of information can positively influence the design.

Design in Code With UXPin

Learning code is a valuable skill. 

But designing in code can significantly enhance your UX workflow, produce meaningful feedback from usability participants and stakeholders, increase prototype fidelity, and facilitate better collaboration with developers and other teams.

Sign up for a 14-day free trial to experience code-based design with UXPin. 

If you found this post helpful, get more advice in the free guide UX Design Process Best Practices.