Фронтенд-разработчик занимается пользовательской частью веб-приложения. Значит ли это, что он должен понимать не только техническую, но и визуальную часть продукта? Где проходит граница между работой дизайнера и фронтендера? А нужно ли дизайнерам разбираться во фронтенде, если на то пошло? На эти и другие вопросы отвечают эксперты из IT.
Современная разработка требует все больше дополнительных хард скилов от специалистов, поэтому, на мой взгляд, frontend-разработчику просто необходимо понимание дизайна на базовом уровне. Это как минимум сделает общение с отделом дизайна намного эффективнее.
Разработчик с базовыми знаниями и навыками дизайна сможет оценить дизайнерские решения в продукте с точки зрения производительности. К примеру, в вебе можно сделать сложные wow-анимации, но они будут затормаживать работу сайта. Разработчик со знанием основ дизайна сможет уже на начальном этапе сказать, какая анимация будет слишком дорого стоить, потребует масштабного рефакторинга кода или нереализуема в данном проекте в принципе. Веб-разработчик, зная принципы дизайна, может помогать стандартизировать и адаптировать различные элементы приложения, в результате чего потребуется меньше кода.
Бывает даже, что цвет кнопки не тот просто потому, что дизайнер ошибся. Если у разработчика есть базовое понимание, как работают цвета, то, конечно он обратит на это внимание. Иными словами, если развита насмотренность — это большой плюс для разработчика с точки зрения его профессиональной ценности. Да и качество продукта, который он создает, повышается в разы.
Я с дизайном сталкивался просто в своих проектах, в работе, разбирался, погружался. Разработчику, который стремится улучшить свои навыки в дизайне, стоит обратить внимание на ресурсы и курсы, которых сейчас в изобилии. Также не стоит пренебрегать специализированными вебинарами, мастер-классами. Конечно, полезно смотреть флагманские продукты и сайты представителей индустрии, в которой вы работаете.
Чтобы сайт получился максимально удобным, frontend-разработчик и дизайнер всегда должны работать в тандеме. Хороший frontend-разработчик должен развивать насмотренность в области пользовательского интерфейса и дизайна. Он должен проводить ревью дизайнерских макетов перед их утверждением, оценивать все компоненты и механики и высказывать свое мнение о реализуемости и удобстве использования. Важно обсуждать, не потребуют ли некоторые решения излишних затрат времени на реализацию и можно ли найти более простую и эффективную альтернативу.
Любой крупный сайт требует внимания к оптимизации. Это процесс следует начинать, когда возникают проблемы с производительностью, иначе можно увлечься бесконечными улучшениями. Важно определить, в каком разделе сайта и по каким причинам возникают проблемы с оптимизацией.
Основные шаги, которые можно предусмотреть с самого начала, чтобы предотвратить большинство проблем:
1. Оптимизация изображений: сразу использовать современные форматы, такие как webp, которые обеспечивают хорошее качество при меньшем размере. Предусмотреть подгрузку изображений нужного размера в зависимости от устройства пользователя (desktop, tablet, mobile).
2. Ленивая загрузка изображений: загружать только те изображения, которые видит пользователь. Это предотвращает ненужную загрузку медиа на неиспользуемых страницах.
3. Разбивка кода на чанки: разделять код на мелкие компоненты, загружаемые только там, где они активно используются. Это ускоряет загрузку сайта.
4. Оптимизация анимаций: пересмотреть сложные анимации, возможно, упростить их или оставить только в определенных разделах или на определенных устройствах.
5. Оптимизация внешних ресурсов: ускорить загрузку внешних ресурсов, возможно, перенеся их на CDN для ускоренной доставки содержимого.
Безусловно, фронтендер должен понимать базовые вещи, связанные с работой дизайнера, чтобы из раза в раз не совершать одни и те же ошибки в верстке.
Вот несколько примеров:
- Знание сетки. Нередко разработчики не понимают, что такое сетка и зачем дизайнеры используют ее. Понимание этого инструмента помогает сделать верстку pixel perfect и сократить количество визуальных багов.
- Понимание правила внутреннего и внешнего поможет верстать быстрее.
- Умение отличить дизайнерскую задумку от бага. Часто дизайнеры используют оптическую компенсацию размеров и намеренно делают в макете неравные отступы. Если фронтенд-разработчик понимает замысел, он не примет это за ошибку и перенесет решение на верстку.
- Способность доработать состояние. Случается, что дизайнер упустил и не отрисовал одно из состояний системы — например, сообщение об ошибке. Здóрово, если разработчик способен сам подобрать в дизайн-системе визуально подходящее решение и доработать его.
Если у фронтенд-разработчика хорошая насмотренность, он может помочь дизайнеру найти удачное продуктовое решение, выбрать библиотеку и даже аргументировать решение в беседе с заказчиком.
Практика нашей компании показывает, что на проектах, где у фронта есть базовые дизайн-скилы, скорость и качество реализации задач выше.
В больших проектах задача фронтенд-разработчика — сделать свою работу именно так, как написано в техническом задании. Поэтому разбираться в дизайне ему нет никакой необходимости. При всем при этом, если фронтенд-разработчик работает в паре с дизайнером на этапе разработки визуала, то он может дать конструктивные советы по оптимизации элементов дизайна, чтобы сайт быстрее загружался и работал. Также очень важно определиться с правильной анимацией на проекте, работу которой всегда оговаривает дизайнер с разработчиком.
Если мы говорим о небольших проектах, в которых нет достаточно детализированного технического задания, то фронтенд-разработчик может легко дополнять дизайн-проект своими наработками. В современных проектах перед фронтенд-разработчиком стоит одна из самых сложных задач — это оптимизация приложения, чтобы сервис быстро и безотказно работал на всех устройствах. Это действительно непросто, если на проекте используются интересная анимация и сложная графика.
Фронтенд-разработчику необходимо разбираться в дизайне. Но речь не про эстетику. Что красиво, а что нет, какого цвета должна быть кнопка — такое разработчику решать не нужно. Зато понимание базовых принципов дизайна и инструментария очень пригодится в работе.
Профессиональные дизайнеры создают макеты, опираясь на продуманную дизайн-систему. В ней заложены определенные паттерны, правила, состояния элементов и множество других нюансов, которые необходимо учитывать. Понимание дизайн-системы проекта важно для качественной реализации интерфейса. Разработчик, разбирающийся в дизайне, способен полноценно использовать инструменты вроде Figma, переходить между различными состояниями, анализировать детали и в итоге реализовывать максимально качественный продукт в соответствии с замыслом дизайнера.
Все вышесказанное также справедливо и для дизайнеров — это двусторонний процесс. Профессиональный дизайнер должен разбираться в основах веб-разработки, механизмах рендеринга страниц, понимать, как устроены компоненты. Все это важно, чтобы не создавать нерациональные или труднореализуемые решения.
Зачастую дизайнеры, не понимая устройства веба, предлагают избыточные или противоречивые элементы. Например, на разных экранах они могут дублировать одни и те же компоненты вместо использования единого сквозного элемента. Опытный разработчик, разбирающийся в дизайне, способен распознать такие ситуации и предложить оптимизацию, избежав лишней работы и расходов.
Если же разработчик слепо следует указаниям, не анализируя их, он рискует сделать недоработанный, неэффективный продукт. Это чревато порочным кругом недоделок и итераций. Это замедляет процесс, снижает эффективность и в конечном счете ведет к некачественному результату.
