Почему веб-дизайнер должен верстать?

Вадик Матвеев, преподаватель школы Epic Skills и арт-директор цифровых продуктов «Газпром Нефти», в прошлом дизайнер интерфейсов в Яндекс.Деньгах, поделился своим мнением о том, почему дизайнеру полезно знать фронтенд технологии.
Preview
Автор статьи
Света Стахнёва
SMM
Дата
2 июля 2019
Рубрика
Статья

Кто такой веб-дизайнер?

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

Чем обычно занимается?

  • Формирует портрет пользователя;
  • Разрабатывает сценарий взаимодействия пользователя с сайтом;
  • Проводит брифинг с клиентом;
  • Изучает конкурентов и их показатели;
  • Анализирует сайт с помощью сервисов веб-аналитики;
  • Проектирует интерфейс сайта или веб-сервиса;
  • Разрабатывает прототипы;
  • Рисует дизайн-концепции;
  • Отрисовывает дизайн макетов и графических элементов сайта;
  • Поддерживает и дорабатывает существующие сайты: отрисовывает доп. макеты и графические элементы сайта.

Почему веб-дизайнеру полезно знать фронтенд-технологии?

Многие считают, что для веб-дизайнера главное — сделать сайт «красивым». Но на самом деле веб-дизайнер должен стремиться сделать сайт удобным и комфортным для пользователя. А для этого важно иметь базовое понимание о процессах создания и отображения сайта.

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

Веб-технологии — это ещё один инструмент в арсенале дизайнера, который может быть полезен, если применяется в нужный момент. Давайте же разберемся, когда веб-дизайнеру могут пригодиться знания вёрстки.

1. Базовое понимание, из чего состоит сайт, и как он строится

Знание фронтенд-технологий помогает лучше понять, как его нарисованные макеты «оживают» и становятся блоками на сайте. В качестве примера можно привести дизайнеров интерьеров. Зачастую они знают не только 3D-редакторы, в которых проектируют интерьер, но также хорошо разбираются в конечных материалах: дерево, камень, обои, ткани и прочее.

Хорошие дизайнеры интерьеров знают эти материалы тактильно, как они дополняют друг друга, и как их использовать и встраивать в интерьер. Им известны все трудности и «подводные камни» каждого из материалов. Это помогает дизайнерам интерьеров находить оптимальные решения, как по качеству и прочности, так и по конечной цене проекта.

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

2. Оценка трудоёмкости своего решения

Когда дизайнер понимает, как и что делается на сайте, он начинает оценивать стоимость своего решения: стоит ли это решение в данном конкретном случае того времени, и сколько часов уйдёт на его разработку. Если у дизайнера нет понимания, как создаётся сайт, как он загружается, как и сколько сайт рендерится на клиенте, то визуальные решения такого дизайнера часто могут сказываться на длительной и дорогой разработке. И ладно, если это себя оправдывает в конечном счёте, но иногда бывает так, что речь идёт о третьестепенных страницах или сценариях, а на создание этого уходит несколько дней.

3. Дизайнер начинает мыслить блоками и компонентами

Дизайнер перестаёт мыслить макетами страниц. Он начинает думать системно: лучше структурирует и разбивает контент на слои, блоки, компоненты. Такое мышление помогает сокращать количество уникальных сущностей, в случаях, когда в них нет явной необходимости. Такой подход не только оптимизирует работу разработчика, но и помогает пользователю быстрее решать свои задачи за счёт бо́льшей консистентности элементов.

4. Дизайн прямо на сайте

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

5. Упрощается передача анимации и прочих «красот».

Визуальный стиль и анимация — это территория дизайнера. Если процесс передачи макетов в разработку уже налажен, то передача анимации по-прежнему болезненна. Для создания анимации дизайнер обычно использует Principle, Adobe After Effects, реже Invision Studio, либо вовсе ограничивается примитивными встроенные возможностями основного редактора.

Так или иначе, зачастую у разработчиков нет этих инструментов, поэтому чаще всего анимации передаются записанными видосами. По ним очень сложно проследить нужный тайминг анимации, угадать верную изинг-функцию и прочие параметры, которые дизайнер так долго и скрупулезно оттачивал. В результате получается недопонимание: разработчик сделал что-то, но не так как на видео. Дизайнер просит переделать, излагает свои мысли в терминах графического редактора, разработчик пытается их перевести на свой язык. После нескольких таких циклов худо-бедно находится нужное решение. Однако, если бы дизайнер с самого начала открыл codepen и самостоятельно, сверстал самые сложные для передачи анимации, это бы сильно ускорило процесс работы над проектом.

Анимация — это территория дизайнера. А хорошему разработчику есть чем заняться помимо всяких «рюшечек». Ему предстоит ещё «оживить» сам сайт: наполнить его реальными данными, оптимизировать загрузку, продумать доступность и многое другое. Докручивать изинг-функцию условной анимированной стрелочки — последнее, что его заботит. Зато дизайнеру это важно. Поэтому проще и лучше создавать анимации сразу в той среде, где они будут в конечном счёте жить. Это поможет вовремя остановиться и не ввести процессор компьютера в анабиоз своей головокружительной анимацией. А ещё это безумно интересно — анимировать собственные же макеты на реальных веб-технологиях.

6. Один язык

Знание фронтенд-технологий на базовом уровне помогает эффективнее коммуницировать дизайнеру и разработчику. Команда начинает разговаривать на одном языке. Разработчик, безусловно, — носитель языка, дизайнер же, скорее, — турист, но даже этого хватает, чтобы лучше взаимодействовать, быстрее достигать совместных результатов и делать проекты круче.

Хорошая коммуникация особенно важна, когда ведётся работа над дизайн-системой — трендом нескольких последних лет у большинства цифровых брендов. Конечным хранилищем любой дизайн-системы всегда является репозиторий с готовыми компонентами и стилями. Угадайте на чём они написаны? Правильно, на фронтенд-технологиях. Поэтому, чем лучше налажено общение и взаимопонимание между дизайнером и разработчиком в команде, тем лучше продумана дизайн-система. И, как следствие, становится удобнее её использовать и поддерживать. Благодаря этому дизайн-система расширяется и дополняется, а процесс создания новых цифровых продуктов с её использованием становится дешевле и проще.

7. Framer Studio

Помимо всего вышеперечисленного, знание фронтенд-технологий позволяет на полную использовать такой мощный дизайнерский инструмент, как Framer Studio. В нём можно рисовать макеты или импортировать из Sketch, Figma и Photoshop, создавать интерактивные анимации, проектировать сложные прототипы с возможностью экспорта в html, css и js для последующего тестирования на пользовательских исследованиях. Но увы, для большинства из этого нужен базовый фронтенд.

В заключение

Знание HTML и CSS сегодня не является чем-то очень узконаправленным и доступным только избранному кругу лиц. Базовая врёстка нужна не только фронтенд-разработчикам, но и другим специалистам.

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