Две главные причины, зачем фронтенд-разработчикам знать основы дизайна.
Фронтендер и дизайнер решают общую задачу
Дизайнер делает макет, а фронтенд-разработчик превращает его в полноценный интерфейс сайта. Качественный продукт получается тогда, когда оба специалиста понимают суть работы друг друга.
Дизайнер должен понимать основы верстки и CMS (если делает макет для системы управления). Это позволяет лучше определять технические ограничения и то, насколько сложно будет фронтендеру реализовать идею.
Разработчик должен правильно понять логику и структуру макета, разобраться, что и как в нем устроено, как отображается анимация, как происходит взаимодействие между элементами на странице. Потому что идеи дизайнеров не всегда очевидны на первый взгляд.
Дизайнеры часто мыслят необычно и находят нестандартные решения для веб-интерфейса сайта. Фронтенд-разработчику проще понимать логику дизайнера, понимая ход его мыслей.
Системы совместной работы с макетами не всегда упрощают работу. Сейчас системы для создания макетов настолько развиты, что дизайнер может передать фронтендеру всю нужную информацию без личных встреч и обсуждений — просто организуя совместную работу в программе. С одной стороны, это экономит время команды. С другой — разработчику нужно понимать задумку коллеги и разобраться, как устроен дизайн макета. Иначе долгих обсуждений и доработок не избежать.
Как наладить взаимодействие дизайнера с разработчиком: базовые правила
Если вы дизайнер и готовите макет, старайтесь упростить работу фронтенд-разработчику:
- Работайте по сетке. Да, сейчас становится популярна асимметрия как прием, но и она должна быть вписана в сетку.
- Максимально типизируйте объекты в макете. Типизация облегчает и ускоряет верстку.
- Показывайте состояния объектов при взаимодействии.
- Сортируйте слои и называйте их понятными именами. Например, слой с шапкой — header, слой с кнопками — buttons. Так разработчик быстрее разберется в вашем макете.
- Соберите все изображения, иконки, шрифты и другие элементы в одном месте, чтобы потом не тратить время на экспортирование элементов из макета.
- Создайте UI-кит на отдельной странице и покажите все состояния и элементы.
- Не поленитесь прокомментировать макет с прототипом перед передачей фронтендщику — так коллега быстрее разберется.
Если вы фронтендер и превращаете макет в интерфейс сайта:
- Не стесняйтесь задать вопрос дизайнеру, если что-то непонятно.
- Если по опыту видите, что в макет нужно внести правки, сначала обсудите их с дизайнером. Любые изменения нужно согласовать.
- Если проект командный, на первом этапе работы обсудите с коллегами, какие инструменты планируете использовать и как лучше передать макет вам на верстку.
- Не бойтесь обсуждать дизайн и давать конструктивные комментарии. Если видите, что что-то нельзя реализовать, объясните, почему именно и чем можно заменить.
- Когда каждый член команды понимает, что конкретно делают его коллеги и как упростить им задачи — работа проходит гладко. В результате получается качественный интерфейс, сданный в срок.
