Вёрстка сайтов для веб-дизайнеров

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

Так вышло, что дизайнеров не учат разработке в университете или на курсах — её нет в программе обучения. Могут преподавать информатику, но и здесь студенты изучают лишь основы программирования, слабо связанные с тем, что делают программисты на реальной работе.

Тем не менее, знать разработку надо — эти знания увеличат шансы на повышение и хорошую зарплату в IT.

👉 Есть определённый объём знаний, который необходим разработчику и дизайнеру, чтобы нормально общаться друг с другом.

Что знать из вёрстки сайтов

Базовую вёрстку дизайнер должен знать полностью, но без глубокого погружения. Вот главные знания и навыки.

Когда дизайнеры узнают, что сетки должны работать на гридах, они осознают, что делают то же самое на auto layout в Фигме. В этот момент они начинают понимать смысл жизни.

✅ Семантическая разметка, графика и базовая стилизация, сетки на флексах и гридах.

Ещё нужно понимать, как стилизовать декоративные элементы. Там много всего, но это всё мелочи, которые придут с опытом. Например, тонкости оформления контента с точки зрения стилизации ссылок, кнопок, состояний, а ещё попапы, слайдеры и формы.

При этом дизайнеру не нужно объяснять, как делаются тень и градиент. Это мелочи, которые делаются плюс-минус одинаково — дизайнер управляет ползунками в фигме, а разработчик пишет код.

В общем, если можете сверстать по макету с нуля — вы готовы к следующему этапу.

Что изучать

  • Как сверстать макет. Пошаговый план
  • Что такое семантическая вёрстка и зачем она нужна
  • HTML и CSS. Профессиональная вёрстка сайтов

Что знать из адаптивной вёрстки

✅ Адаптивные сетки, адаптивную графику и немного векторной графики.

❌ Методологию вёрстки, автоматизацию и производительность вёрстки.

То есть дизайнер должен уметь что-то сверстать руками или сделать в конструкторе с учётом дизайн-системы. При этом дизайн-систему обычно не сделать без понимания, как строится код, так что сразу пригодится и следующий пункт.

Что знать о JavaScript

Это следующий уровень для дизайнера.

✅ Нужно понимать, как работает код, и как CSS связан с JavaScript.

Дизайнер, который знает JavaScript, лучше работает в рамках дизайн-системы, если она есть. Он может описывать компоненты с помощью JS и программировать прототипы, чтобы лучше передать свою задумку разработчикам.

Что изучать

  • Как стать JavaScript-разработчиком в 2022
  • JavaScript. Профессиональная разработка веб-интерфейсов

Ступени развития дизайнера в веб-разработке

Первая ступень — быть дизайнером, хорошо работать.

Вторая ступень — знать HTML и CSS.

Третья ступень — знать JavaScript и понимать, как он работает с вёрсткой.

А дальше — светлое будущее и классная карьера. Всё получится.

Что читать дальше:

  • Что нужно уметь верстальщику
  • Что такое семантическая вёрстка и зачем она нужна
  • Когда использовать флексы, а когда гриды
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии