Blog /

Design for Code — How to Create an Implementable UI Design

Twitter Facebook Google+
11 Jul 2016

This article was written to help entry-level designers learn to design for code. It’s originally published in 2016 and updated in 2018. Read this post on Medium.

Understanding how UI designs are implemented by front-end engineers is essential to creating an implementable design. Many times we’ve seen entry-level UI designers complaining about front-end engineers not respecting and following their work, and the engineers complain about the designers being unrealistic.

With a basic understanding of how the pixels on the design visuals are turned into the code behind the screen, UI designers can easily spot most hard-to-implement elements and reevaluate design tradeoffs. This might mean that they need to know how to code a simple website in HTML and CSS or how mobile developers put interaction animations on phone screens. With a basic understanding of the implementation, entry-level UI designers can avoid many design decision conflicts and implementation deviations.

Let’s check some examples. Assume you created the following website:

It does look good, but have you considered the implementing difficulties of this design? Whether your company has a strong Engineering team or not, it’s a UI designer’s responsibility to balance design and implementation.

In the current artboard, this design looks pretty good. What if we want to display it on another device and the dimension is changed?

If you didn’t know you were supposed to create a responsive design, this website might look like this now:

As you didn’t know you were supposed to create different artboards for different displaying devices, how can your design adjust based on the specific devices? And how do front-end developers cover the blank area and implement your design?

If you had thought about this issue and directly filled the blanks:

You might notice that many details such as how pictures and texts are layered together and the order of layers might need to be redesigned to match with the new screen dimensions and specific device interactions.

Here’s another example:

Animations are cool! However, it’s important to keep the extra amount of implementation effort, their influence on device performance and batteries, and many other factors in mind. The animations might give you some “wow”s, but when you add them to your design, consider the tradeoffs you’ll have to make — how these effects are implemented, how they are supported, what extensions they might need, and if they might slow down certain devices or even cause a crash. You may have spent a whole afternoon to design an amazing motion effect, but when you hand this to the PMs and engineers next day, it’d be very frustrating to be told that it can’t be implemented.

Enough scary examples of how designing not for code can cause troubles and frustration for both designers and engineers. Here’re some tips for entry-level designers to design for code:

Be familiar with platform design principles

Whichever platform you design for (iOS, Android, VR, etc.), you should be familiar with the respective design guidelines. Designing without understanding the design principles is like playing a game without following its rules, which can cause avoidable mistakes and a delay of the development process. Spend some time doing the research before you start.

For example, there’re some common rules you should know: Chinese characters under 12 pixels cannot be displayed on the web; text displays are supported by only local fonts; the heights of the tab bar and top bar in iOS cannot be casually changed, etc.

Establish project-specific design standards

You will find having your own project design principles is very helpful to improve work efficiency and design consistency. This is especially true if you are working with other designers on the same project.

Establishing design standards of frequently used elements such as spacing rules can help accelerate the design process and also keep a high consistency among the designs.

Prototype to optimize the interaction flow

Sometimes it takes playing with a design to realize the size of an icon is too small, the layout of the elements isn’t optimal for the device, or the interaction flow is confusing.

Prototyping provides a good opportunity for designers to review the user experience. It also becomes handy if they want to collect feedback from the test users or engineers for improvements.

Provide visual specs with detailed labeling and annotations

Labeling and annotations are extremely important in design collaboration. Whether your design will be implemented accurately depends on these. Without clear annotations, it’s impractical for engineers to check and review many design details, such as the spacings and text sizes. (They sometimes just “feel” it!)

If you are both a designer and a developer, congratulations! You’ve saved yourself some effort; if not, it’s completely fine — learn more about the basic front-end development process and take these tips, you will also be able to “design for code” soon.

Twitter Facebook Google+