Увидеть интерфейс «глазами дизайнера»: о взаимодействии фронтендера с дизайнером

Дизайнер интерфейсов и frontend-разработчик — хоть и разные специалисты, но их задачи тесно связаны. Настолько, что толковые дизайнеры понимают основы верстки, а программисты — знают принципы хорошего дизайна. Это помогает избежать недопонимания и получить ожидаемый результат. Детальнее рассказывает Владимир Синицын, руководитель направления «Дизайн и UX» в Нетологии.

Привет! Вот две главные причины, зачем фронтенд-разработчикам знать основы дизайна.

Причина первая. Фронтендер и дизайнер решают общую задачу

Дизайнер делает макет, а фронтенд-разработчик превращает его в полноценный интерфейс сайта. Качественный продукт получается тогда, когда оба специалиста понимают суть работы друг друга.

• Дизайнер должен понимать основы верстки и CMS (если делает макет для системы управления). Это позволяет лучше определять технические ограничения и то, насколько сложно будет фронтендеру реализовать идею.
• Разработчик должен правильно понять логику и структуру макета, разобраться, что и как в нем устроено, как отображается анимация, как происходит взаимодействие между элементами на странице. Потому что идеи дизайнеров не всегда очевидны на первый взгляд.

Дизайнеры часто мыслят необычно и находят нестандартные решения для веб-интерфейса сайта. Фронтенд-разработчику проще понимать логику дизайнера, понимая ход его мыслей. 
Системы совместной работы с макетами не всегда упрощают работу. Сейчас системы для создания макетов настолько развиты, что дизайнер может передать фронтендеру всю нужную информацию без личных встреч и обсуждений — просто организуя совместную работу в программе. С одной стороны, это экономит время команды. С другой — разработчику нужно понимать задумку коллеги и разобраться, как устроен дизайн макета. Иначе долгих обсуждений и доработок не избежать.

Как наладить взаимодействие дизайнера с разработчиком: базовые правила

Дам несколько советов из личного опыта, как наладить сотрудничество и сделать командную работу комфортной.

Если вы дизайнер и готовите макет, старайтесь упростить работу фронтенд-разработчику:

• Работайте по сетке. Да, сейчас становится популярна асимметрия как прием, но и она должна быть вписана в сетку.
• Максимально типизируйте объекты в макете. Типизация облегчает и ускоряет верстку.
• Показывайте состояния объектов при взаимодействии.
• Сортируйте слои и называйте их понятными именами. Например, слой с шапкой — header, слой с кнопками — buttons. Так разработчик быстрее разберется в вашем макете.
• Соберите все изображения, иконки, шрифты и другие элементы в одном месте, чтобы потом не тратить время на экспортирование элементов из макета.  
• Создайте UI-кит на отдельной странице и покажите все состояния и элементы.
• Не поленитесь прокомментировать макет с прототипом перед передачей фронтендщику — так коллега быстрее разберется.

Если вы фронтендер и превращаете макет в интерфейс сайта:

• Не стесняйтесь задать вопрос дизайнеру, если что-то непонятно.
• Если по опыту видите, что в макет нужно внести правки, сначала обсудите их с дизайнером. Любые изменения нужно согласовать.
• Если проект командный, на первом этапе работы обсудите с коллегами, какие инструменты планируете использовать и как лучше передать макет вам на верстку.
• Не бойтесь обсуждать дизайн и давать конструктивные комментарии. Если видите, что что-то нельзя реализовать, объясните, почему именно и чем можно заменить.

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

Причина вторая. Разработчику, который знает дизайн, проще найти работу

Разработчик с хорошим знанием дизайна может стать универсальным специалистом и закрыть сразу две позиции.

Где востребованы фронтедеры-дизайнеры

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

Сейчас популярны конструкторы сайтов и большинство систем CMS работают, как конструкторы. С их помощью сделать простой интерфейс может и программист, но для создания качественного макета все еще нужны навыки дизайнера. Конструкторы массово используют небольшие компании и частные заказчики. Им выгоднее нанять универсального специалиста, который сделает макет и превратит его в интерфейс с помощью конструктора или без него. Подобная ситуация и на фрилансе.

Что изучить о дизайне в первую очередь, если вы фронтенд-разработчик

Я сразу вспоминаю хорошую иллюстрацию о 20 базовых принципах дизайна. Советую начать погружение с нее.


На следующем этапе разберитесь на практике с инструментами создания интерфейсов: Figma, Adobe XD или Sketch. Почитайте, посмотрите обзоры каждого и выберите, какой вам ближе. Главное, не ограничивайтесь только мануалами. Смотрите их и сразу отрабатывайте навыки на практике, прямо в инструменте.

На перспективу рекомендую разобраться и в 3D: программы Cinema 4D и Adobe Dimension; и анимации интерфейсов: ProtoPie и Adobe After Effect.

Где учиться

В университете. Вузы я не буду рекомендовать, в них дают слишком много лишнего для быстрого старта, а само обучение растянуто. Если для вас это первое образование, то ради диплома можно пойти в университет. Тем, у кого уже есть образование, стоит посмотреть в сторону интенсивов (их проводят даже в некоторых университетах) или онлайн-курсов.
Самостоятельно. Самообразование подойдет тем, кто умеет фильтровать и структурировать информацию, обладает усидчивостью и самодисциплиной. Сейчас в свободном доступе слишком много не всегда проверенной и полезной информации, в ней можно запутаться и отдалиться от нужных скиллов еще больше.
На онлайн-курсах. Вариант для тех, кому важно получать структурированную информацию, наставления и обратную связь от преподавателей.

Советы

• Освойте основы дизайна, чтобы лучше понимать макеты и превращать их в интерфейсы без долгих обсуждений и доработок.
• Изучайте дизайн углубленно, чтобы стать универсальным специалистом и претендовать на должности не только в крупных компаниях, но и в диджитала-агентствах, стартапах, искать заказчиков на фрилансе.
• Осваивайте инструменты дизайнера не по мануалам, а вручную — открывайте программу и разбирайтесь в ней.
• Если готовы фильтровать информацию и находить полезные обучающие материалы в интернете, учите дизайн самостоятельно. Если хотите ускорить процесс и учиться по структурированной актуальной программы, выбирайте курсы.

Если вы готовы изучить основы веб-дизайна, приглашаем на новый курс Нетологии

Мы запустили курс «Веб-дизайн с нуля до middle» и приглашаем на него фронтенд-разработчиков, которые хотят освоить интерфейс именно «с точки зрения дизайнера». 
Четыре с половиной месяца обучения в формате видео, воркшопов и разборов домашних заданий. Теорию закрепляем практикой, а также осваиваем главные инструменты веб-дизайнера.