May 5, 2020Frontend Pattern: Route Object
May 1, 2020Frontend skills for the Web Designer
April 10, 2020Learning Frontend Path
January 26, 2020Podcasts I listen to (Jan 2020)
January 23, 2020Are you too old to start programming
January 22, 2020Use tabs not spaces
October 18, 2019Refactoring Overgrown React Components slides
October 2, 2019Book Review: Factfulness
October 1, 2019Yes, it's a good time to add TypeScript to your project
September 24, 2019Code Review – Best Practices, Guidelines & Process Insights
June 10, 2019Why I read on the iPad
March 18, 2019Software & Hardware I use
March 16, 2019Why I dont use React Router Link component
November 15, 2018Why public money software is not open source?
July 5, 2018How learning Angular made me better React developer
May 23, 2018My 12 tips how to increase your frontend coding productivity

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. Button, 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.

Dev tools

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.

Summary

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.