Frontend skills for the Web Designer
Web designer role evolved in last years, just like frontend did. Today client side apps are huge and expensive. Designer can improve her/his skillset to boost the career.
I'm against "cutting HTML & CSS" by designers - modern frontend is based on components, which mix templates, styles, tests, logic at the same place, which is quite impossible to delegate only the template and styles layer to the designer.
Modern frontend stack is hard to divide between designers and programmers
However there is a knowledge designers should learn in my opinion, so:
- They can make better designs
- They can make frontend work easier and faster
- They can improve communication in the product team
- They can make overall design-frontend quality
Let's dive into frontend skills designer can (should) learn
Component thinking (and design systems)
UI development is mostly based on components.
header, custom framework components, web components
or even native DOM elements. Everything is based on reusable component approach.
Designs should understand this concept, so they can create designs based on reusable blocks.
Modern tools like Figma or Sketch have built-in components concept, but they still require designers to use them and understand them.
Style system is one step further. Frontend developers started developing "style guides" to manage complex libraries, but today designers can adopt this tool as well. Creating frontend UIs having existing style system is a pleasure.
Basics of HTML & CSS
There are simple concepts designs can learn in a few days, but thanks to them they can become far better in their craft. Understanding box model, box sizing and DOM tree is valuable during creating designs easy to implement.
Also some basic CSS understanding is a precious knowledge - not everything done in Photoshop can be implemented.
Very important it understanding how RWD works - how boxes stretch and shrink with resize, how they wrap to next lines. I often faced problems with mobile layouts designed impossible to "naturally" adapt with RWD.
Speaking the same language
Designer should use padding-margin-border etc terms, so it's the same thing as common naming in CSS and browsers. It's not easy to communicate when the same things are named differently.
Knowledge how typography works
One of the most often bug reported by designers is not accurate typography. However it's not that simple. While designer set 20px gutter between section and bottom of the text, browser renders also a white space (like height) and pixel-perfect approach is not possible. Even browsers engines and operating systems render fonts differently.
Knowledge of browser dev tools, especially with some CSS skills is very precious. Instead of bug-reporting tickets like "increase the gutter", designer can open inspector, play with CSS and tell frontend developer directly to change concrete value in concrete class. Very fast.
I believe in T-shaped skillset. While frontend developers learn a little of backend or design to improve the cooperation and understand these areas, designers should learn somewhat frontend (as well as UX, researching etc) to improve cooperation with frontend engineers.
Learn basics of the areas you touch.