Does A Designer Need To Know How To Program?

What Does A Web Designer’s Team Want From A Web Designer?

Let’s assume that the team consists of a manager, front, back, designer, and tester. We asked what skills their dream designer has and if development is on that list.

Soft skills and standard design duties, such as designing static interfaces, and creating clickable prototypes and mockups, scored the most points. JS and even HTML layout did not make it into the top five.

However, the question of programming knowledge for designers would have been resolved long ago if everything were so simple. From the comments, we learned that coding is not essential for all participants in the process.

Manager

The manager’s goal is to complete the task on time, successfully roll out and close the client’s “I want.” The technical side of the issue is of little concern to him, as well as the way the designer works with layouts. The manager needs someone who understands Tilda, typesets newsletters, makes animated prototypes, and understands user flow. Not a word about the code.

Front-End/Coder

A layout designer or front-end developer renders the layout in the browser. The work speed depends on this layout’s quality because it takes more time and effort to make a sloppy design.

The designer sees a picture on the layout, and the layout designer sees a grid of squares. The designer must remember this to create a beautiful and customizable form during rendering. For all headings, indents, and texts, the layout designer sets a single style; if it is not in the design – an extra headache for the front and QA is provided. Let’s say different techniques are applied throughout the layout. Or you will have to adjust everything to one style, and then the tester will put a subtask for each “incorrect” one and require an explanation. Or write your sort for each; there can be 20 of them in the layout. Imagine how long it will take. There is a simple rule for indents – the height should be divisible by 4: 4, 8, 12 … 64. This is a well-known fact, but designers often ignore it, and standardization in indents for identical blocks on different pages is lame. — Yerzhan Aitzhanov, front-end developer NEXT.

Back

In 90% of cases, the designer does not intersect with the backend developer. The remaining 10% includes issues with the “crutch” layout due to poor-quality design and non-standard solutions.

For example, backing solves many problems through cycles. They have usually been used for repetitive content: product columns on the site, image galleries, and the like. Let’s say a designer has drawn a layout with four columns of ¼ site width, and the formula: 1 iteration of the loop = 1 column works excellent here. But on the tablet layout, the designer decided to take a non-standard approach: column 1 takes up 100% of the width, column 2 – 50%, and the third consists of two nested columns at once.

Either the back will have to use a nested loop, which is time, or the front will remake the tablet version in JS according to the desktop model according to the formula: 1 column = 1 repetition. This is also time and additional load on the site.

Even QA

Testers enjoy it anyway. We summarize this chapter and get argument number 1 – if the designer knows JS and the hypertext markup language, he draws a layout that is convenient to typeset. The front will not waste time on padding, fonts, and headings. The backend will pull all this happiness onto the engine. The manager will meet the deadlines; the client will receive the product. Everyone is happy.

Will They Give More Money?

They do not require programming skills from juniors; often, there are no requirements for HTML / CSS in vacancies; only a standard set of Figma / Adobe Photoshop / Illustrator is indicated. But the salary is the same.

As the salary grows, the list grows – HTML, CSS, and even JS appear in the requirements for the candidate. But they don’t ask to make up the site itself.

There are vacancies for those who want to get two in one. The salary range is about the same.

Classic designers have a transparent system of grading from junior to senior; the presence of skills and their level is reflected in the salary. Knowledge of CSS, HTML, and JS, as well as, for example, watching or studying guides, give an outlook on the technical field; this affects the quality of the result. As a result, the grade and salary. Full-stack designers are offered a decent salary, but there are very few vacancies. It is possible to hire such a specialist full-time only on an exotic project; there are no uniform criteria for evaluating its effectiveness, which means it will be more challenging to grow in salary. Boris Bessonov, designer NEXT.

Thus, argument number 2 – knowledge of layout will bring you closer to the middle or senior level. With the growth of the grade, the salary will also increase.

Do You Need To Understand That We Will Not Use It In Our Work?

How else will we? And not just for testing the prototype in the browser.

Firstly, HTML / CSS / JS knowledge will save you from fakes. If a designer draws a complex animation feature on the site, like this or this, it’s better to do it right away in CSS or JS and not in the After Effects timeline. The front won’t have to be painstakingly optimized, and the designer won’t have to simplify the animation mechanics along the way.

Secondly, Boris Bessonov gave us 13 examples of what a designer with a technical background can do.

1. Make a good layout, where blocks and layers are sorted from top to bottom as in an HTML document; the front will lay it out many times faster.
2. Immediately adapt this layout to all devices and browsers by laying it out in HTML/CSS.
3. Immediately draw layouts for different scenarios: names like Constantine of Constantinople, pop-ups with network errors, scrollbars.
4. Do not fail the fonts; choose those available on Mac and Windows, Linux.
5. Show the client an actual prototype in the browser on accurate data using JSON and Firebase instead of screenshots from Figma.
6. Draw generative art like Spotify.
7. Use front-end tools like Codepen to visualize ideas and test them, as well as libraries with UI elements like Code my UI.
8. Use the Components / Autolayouts / Variants approach, which is similar to the front-end BEM (Block, Element, Modifier) ​​when you draw a single component, for example, the “Buy!” once, and then use ten more times in different projects, changing the word.
9. Set up an automatic transfer of components in Figma to the design system.
10. Make fonts responsive – that is, translate text styles into arrays so as not to get confused in font sizes at different breakpoints.
11. Apply Blur without compromising site speed. On weak devices without a GPU, sites with background blur slow down, so the effect is rare on average product resources. However, if the designer knows the code, he can blur the background beforehand and paste it like a typical picture. Read more in the Hybrid Designer report by Gazprom Neft Art Director Vadim Matveev.
12. Embed 3D animation that won’t disappoint you, for example, as in this New York Times article. A transparent video was inserted into the site and “seasoned” with parallax; it turned out stylishly; it works even on weak devices. We learned about this from Yuri Artyukh.

Conclusion

Technical training opens up new opportunities for designers in their profession – financial and professional. If you’re good at code, you’ll be able to create streamlined, structured layouts that colleagues and clients will thank you for.

Also Read: Are Clients Always Ready For Co-Creation & Few Strategy Sessions?