Так вышло, что дизайнеров не учат разработке в университете или на курсах — её нет в программе обучения. Могут преподавать информатику, но и здесь студенты изучают лишь основы программирования, слабо связанные с тем, что делают программисты на реальной работе.
Тем не менее, знать разработку надо — эти знания увеличат шансы на повышение и хорошую зарплату в IT.
👉🏻 Есть определённый объём знаний, который необходим разработчику и дизайнеру, чтобы нормально общаться друг с другом.
Что знать из вёрстки сайтов
Базовую вёрстку дизайнер должен знать полностью, но без глубокого погружения. Вот главные знания и навыки.
Когда дизайнеры узнают, что сетки должны работать на гридах, они осознают, что делают то же самое на auto layout в Фигме. В этот момент они начинают понимать смысл жизни.
✅ Семантическая разметка, графика и базовая стилизация, сетки на флексах и гридах.
Ещё нужно понимать, как стилизовать декоративные элементы. Там много всего, но это всё мелочи, которые придут с опытом. Например, тонкости оформления контента с точки зрения стилизации ссылок, кнопок, состояний, а ещё попапы, слайдеры и формы.
При этом дизайнеру не нужно объяснять, как делаются тень и градиент. Это мелочи, которые делаются плюс-минус одинаково — дизайнер управляет ползунками в фигме, а разработчик пишет код.
В общем, если можете сверстать по макету с нуля — вы готовы к следующему этапу.
Что изучать
- Как сверстать макет. Пошаговый план
- Что такое семантическая вёрстка и зачем она нужна
- HTML и CSS. Профессиональная вёрстка сайтов
Что знать из адаптивной вёрстки
✅ Адаптивные сетки, адаптивную графику и немного векторной графики.
❌ Методологию вёрстки, автоматизацию и производительность вёрстки.
То есть дизайнер должен уметь что-то сверстать руками или сделать в конструкторе с учётом дизайн-системы. При этом дизайн-систему обычно не сделать без понимания, как строится код, так что сразу пригодится и следующий пункт.
Что знать о JavaScript
Это следующий уровень для дизайнера.
✅ Нужно понимать, как работает код, и как CSS связан с JavaScript.
Дизайнер, который знает JavaScript, лучше работает в рамках дизайн-системы, если она есть. Он может описывать компоненты с помощью JS и программировать прототипы, чтобы лучше передать свою задумку разработчикам.
Что изучать
⭐ Ступени развития дизайнера в веб-разработке
Первая ступень — быть дизайнером, хорошо работать.
Вторая ступень — знать HTML и CSS.
Третья ступень — знать JavaScript и понимать, как он работает с вёрсткой.
А дальше — светлое будущее и классная карьера. Всё получится.