Giving life to design through coding: skills designers must acquire

#News
July 27, 2020 4 min read

On July 22, 2020, Innovecs hosted the online talk, “Why bother? Coding for designers”, dedicated to the importance of foundational coding skills for artists.

Playwork’s Art Director, Giacomo Maragliulo, and Manager of Creative Operations, Emmanuel Bergman, uncovered the main reasons designers have to learn to code and how it can help create better visuals.

Produced by the InnoHub platform & multimedia studio, this online conversation embraced a large audience and helped shed light on the value of coding knowledge in design. Like all our previous InnoHub events, this one was also aimed to share knowledge and help develop professionally. Keep track of all our events on the official InnoHub page.

Now, let’s outline the key points of the conversation below.

Making Design Respond to User Behavior and Environment

Design responsiveness and adaptability is one of the reasons designers have to dig deeper into the coding world. If you create a design that suits only, let’s say, portrait orientation and a particular device screen size, it will not look well on other devices in the landscape orientation. This is where responsiveness comes into the game.

We need to know how to react responsively with just one design in HTML and CSS. If you create a design for a portrait, it will not suit landscape orientation.
Emmanuel Bergman,
Manager of Creative Operations at Playworks

While developers think about optimizing or editing the code to make the look responsive to different environments and behaviors, designers can create an adaptive design to suit other sizes and orientations quicker, and the time of the developers will not be wasted.

I think one of the most exciting things in learning autocodes is bringing your creation to life in a new medium that is accessible and engageable by millions instantly. So, to be able to come up with the idea to design it, to build it, and to eventually go live. I think this is the reason to learn. It gives us an opportunity to create interactive experiences and generate visuals that respond to user inputs by combining code and design aesthetic at the same time.
Giacomo Maragliulo,
Playwork’s Art Director

According to the experience gained at Playworks, designers have to look at what they do through the developers’ lens. Learning front-end skills helps discover fresh approaches, develop new ways of thinking, and consider design more objectively.

Shifting Focus From Static to Interactive Design

To increase user engagement, designers have to learn how to make their visuals interactive by adding more animation with various options and conditions. At this point, the knowledge of HTML, CSS, and JavaScript basics is essential.

With the help of CSS, designers can turn static HTML visuals into smooth animations that are very light in terms of weight, meaning the overall performance will not suffer. CSS is an excellent tool for generating beautiful 60fps animations, which can be enriched with levels of different complexity by using JavaScript logic.

We have a lot of behaviors and user experiences; we usually make templates. In these templates, we save the parts of code, and we shape the template layouts to the design we want to achieve.
Emmanuel Bergman,
Manager of Creative Operations at Playworks

However, both experts from Playworks stated that it was not necessary to know how to code, it was important to understand what the lines of code meant and how it could be realized in future designs.

Combining Design and Code for Better User Experience

In a perfect world, there should be cohesion between the development and design teams to achieve expected results. Mutual contribution to the project helps create better user experiences, as both designers and developers apply approaches they think can improve the product.

Even if designers can’t write lines of code to enhance UX, they should be familiar with the main principles of CSS and JavaScript to understand the overall logic and, thus, be able to adapt proper designs to match user experiences.

If you do not know how to code per se, you can read it and understand what you are seeing. And there are a lot of variables that you can touch to make sure that your design is exactly how you envisioned it.
Emmanuel Bergman,
Manager of Creative Operations at Playworks

And More Statements

We have outlined the key topics discussed during the online talk. However, there is much more to discover. If you want more details from Playworks experts, watch the full record of the event below.

YOU MAY ALSO LIKE:
LET’S TALK