The visual display of each website is the result of the collaboration between UI designers, front-end engineers, and sometimes UX designers. To make this collaboration work well, it is crucial that each team member involved understands how the UI design work is transferred into the final released products. This will, to some extent, avoid the unnecessary conflict that can occur when the front-end engineer complains about what they believe is unreasonable design while the UI designer argues about the team not following the original artwork.
For the customer based website experience, UI designers focus on the visual aspect and front-end engineers focus on the implementation. It can be argued that it is the UI designers’ responsibility to make sure the design is feasible. Well, I agree with that. As a designer, it really depends on your creativity to make any piece of artwork. However, when it comes to the real website you are designing, you’re better served by being down to the earth. That means your artwork needs to be implementable with the skills of your available team members, and within the time and budget of your project.
Basic knowledge of Web Programming Languages
One tip which will be helpful for designers to make implementable artwork is to have some basic knowledge of front-end web development programming languages. HTML and CSS are not something new to UI designers. HTML defines the content structure of the website, and CSS creates the appearance style of each element. By knowing these two, designers might be able to realize that some parts of the web design could be difficult to implement, and they may want to consider design tradeoffs. Without being implemented into a working website and having some interactions with users, the design is just a beautiful image of a web page.
When building websites, another commonly used programming language is JavaScript. JavaScript is a scripting language that creates dynamic and interactive web pages. When working on highly dynamic web pages, it is significant for the UI designer to have some knowledge of JavaScript/JQuery in order to understand how all the elements work and what is possible.
However, it doesn’t mean a UI designer should have the skill to build the final codebase of his/her design although this may happen sometimes. Having some decent knowledge of programming languages may help UI designers to avoid creating “uncodable” web design. This will also reduce some back and forth communication about what is possible and what is impossible. Furthermore, this knowledge may save a designer’s effort in revising the design work again and again for its impracticality.
Annotations and Design Specs
Another tip to make implementable UI design is to make annotations and provide design specs. Making annotations always helps remove uncertainty and confusion about how the design works. In fact, annotations become useful when they are truly needed. For example, in the situation of presenting edge cases or tracking changes and decisions, designers may consider making annotations. An annotation can make the UI design clearer and more understandable to front-end developers, and this is very helpful to make the design work.
In addition, providing design specs helps front-end developers to translate the original design into a codebase with some basis instead of just guessing. The design specs may include details such as the color, font, size, padding and margin, and the z-index of elements. This also includes the involved flows and behaviors. Most likely, whether the UI design can be implemented accurately or not depends on these. Currently, there are several tools such as Sketch, Marvel, and Adobe XD are available to help provide design handoff. These aim to minimize the guesswork during development. With the help of design specs and annotations, the beautiful UI design is more likely to be implemented as close to the final product that was originally designed.
Besides helping our enterprise clients with DataStax and Sitecore projects we also provide companies with project planning workshops and Virtual CIOs.
We build and manage business platforms. Is your project going south? Did your vendor screw up again (that never happens)? Let’s talk for 15 minutes.
Photo by Farzad Nazifi on Unsplash
