Почему веб-дизайнер должен верстать?
Кто такой веб-дизайнер?
Веб-дизайнер — это специалист, который отвечает за
проектирование и визуальное представление сайта или веб-сервиса. Если
сайт хорошо продуман структурно и интерфейсно, то посетитель быстро
найдёт нужную для него информацию и достигнет своих целей.
Чем обычно занимается?
- Формирует портрет пользователя;
- Разрабатывает сценарий взаимодействия пользователя с сайтом;
- Проводит брифинг с клиентом;
- Изучает конкурентов и их показатели;
- Анализирует сайт с помощью сервисов веб-аналитики;
- Проектирует интерфейс сайта или веб-сервиса;
- Разрабатывает прототипы;
- Рисует дизайн-концепции;
- Отрисовывает дизайн макетов и графических элементов сайта;
- Поддерживает и дорабатывает существующие сайты: отрисовывает доп. макеты и графические элементы сайта.
Почему веб-дизайнеру полезно знать фронтенд-технологии?
Многие считают, что для веб-дизайнера главное — сделать сайт «красивым». Но на самом деле веб-дизайнер должен стремиться сделать сайт удобным и комфортным для пользователя. А для этого важно иметь базовое понимание о процессах создания и отображения сайта.
На западном рынке, например, знание дизайнером веб-технологий является очень желательным навыком и зачастую может быть решающим при выборе кандидата. У нас такое мнение не так популярно, и многие веб-дизайнеры считают, что фронтенд — это территория разработчиков: скучная, ненужная и ограничивающая креативные аспекты работы. Но это не так.
Веб-технологии — это ещё один инструмент в арсенале дизайнера, который может быть полезен, если применяется в нужный момент. Давайте же разберемся, когда веб-дизайнеру могут пригодиться знания вёрстки.
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 являются их обязательными навыками. Данная тенденция понемногу доходит и до российского рынка. И мы советуем опережать тренды.
Научиться верстать можно на нашем основном курсе HTM-вёрстки. Не бойтесь, в течение всего обучения вас будет сопровождать тьютор, помогая с домашними заданиями и проектом. Он не даст вам растеряться и поможет с любыми сложностями.