Руководство веб-дизайнеру: как передать макет сайта верстальщику

Между веб-дизайнерами и верстальщиками часто возникает недопонимание. На то бывают разные причины, но наиболее распространенная — проблемы с макетом. Трудности возникают тогда, когда дизайнер не знает основ верстки и поэтому передает специалисту по HTML/CSS проект, который сложно или вовсе невозможно осуществить по техническим причинам. В этой статье мы поговорим о том, что нужно сделать хорошему дизайнеру, чтобы программист не поседел от увиденного.

Почему порядок важен не только для коллег, но и для самого дизайнера

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

Если же проект объемный и долгосрочный, дизайнеру выгодно иметь все параметры объектов, чтобы не искать их на страницах, а просто скопировать значения из общего файла.

Что такое макет и для чего он нужен

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

Правила создания макета

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

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

Процесс верстки можно облегчить простыми действиями

  1. При создании файла выставить в редакторе цветовую схему RGB. Зачастую она является стандартной, но стоит проверить этот параметр.
  2. Использовать сетку или столбцы, чтобы выравнивать отдельные части и соблюсти логику отступов.
  3. Сохранять пропорции изображений, при изменении их размеров. Для этого достаточно зажать Shift.
  4. Использовать начертания шрифта, а не псевдостили.
  5. Если объекты должны взаимодействовать друг с другом, можно создать анимированный прототип, демонстрирующий весь интерактив.

Важно выбрать правильный формат файлов

Перед стартом работы над проектом дизайнеру необходимо уточнить необходимый формат готового файла. Это играет роль потому, что трансформирование файла из Figma в Illustrator будет не самым приятным занятием. Новички часто теряются в разнообразии профильных программ, но на данный момент можно выделить ряд основных: Figma, Sketch, Photoshop.

Первые две более узко заточены, поэтому их будет легче освоить. Вне зависимости от того, какой из редакторов выберет человек, ему все равно придется научиться обращаться с Photoshop, так как в нем можно ретушировать графику, обрезать ее, стирать лишние элементы или чистить фон. Разработчики также используют Zeplin, который позволяет им получать исходный элемент в один клик.

Порядок в слоях

Чтобы верстальщику было легко работать с макетом, нужно создать структуру в панели слоев: удалить пустые и скрытые, сгрупировать, написать названия, отображающие смысл. Для именования используют латиницу.

Насколько вредоносно наличие скрытых слоев

Если в макет заложены скрытые слои, некоторые программы подхватывают из них информацию, позволяя ровнять текстовые блоки и другие элементы по краям скрытых форм. Это усложняет работу с отступами и искажает поля группы при ее выделении. Когда специалист удаляет скрытые слои, поля группы и границы всех вложенных объектов сходятся.

Правильное взаимодействие со шрифтами

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

Web-дизайнер может задействовать нестандартные веб-шрифты, если того требует задумка. В таком случае файлы с ними необходимо приложить в архиве к выполненному заданию. Стоит позаботиться о том, чтобы они были в трах-четырех форматах: ttf, eot, woff (или woff2), svg.

  1. Перед добавлением шрифта в макет нужно проверять на наличие кириллицы.
  2. Нестандартные начертания могут по-разному отображаться в браузерах.
  3. Если используется вариант из Google Fonts, добавляют ссылку на него, а не архив.
  4. Не стоит забывать, что обилие стилей — не самая лучшая идея. Обычно хватает двух-трех вариантов, с использованием полужирного и других режимов отображения.

Текстовые стили

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

Стоит сформировать перечисление параметров — благодаря им frontend-разработчик сможет понять логику. Web-дизайнерам рекомендуется указывать гарнитуру, кегль, начертание, межстрочный интервал и поведение текста при переносе на экран большего/меньшего размера. Если вводятся нетипичные стили, люди оставляют комментарий с объяснением первопричины подобной меры.

Наличие UI-kit, унификация элементов

UI-kit — единый для проекта набор типовых частиц пользовательского интерфейса. Он ускоряет деятельность не только верстальщика-профессионала, но и самого web-дизайнера.

Из чего состоит UI-kit

  1. Все объекты, необходимые для функционирования веб-платформы, но не содержатся в дизайн-макете.
  2. Формы деталей, появляющиеся при наведении на кнопку/ссылку курсора (hover-эффекты) и другие интерактивные области;
  3. Полная палитра оттенков.
  4. Перечисление используемых отступов.
  5. Другие сталые значения.

Когда унификация отсутствует

  1. Деятельность frontend-разработчика усложняется, поэтому увеличивается затрачиваемое время и стоимость продукта.
  2. Повышается вероятность того, что программист выберет усредненную форму или задаст первые значения, которые ему попадутся.
  3. Пользователь испытывает дискомфорт — ему приходится привыкать к новым формам элементов, даже если он этого не замечает.
  4. Подобная схема работает и с отступами — посетитель веб-сайта будет нервничать «без причины», а причиной тому будет отсутствие ровных линий, за которые цепляется взгляд.

Когда проект будет разрастаться, управление разномастными элементами станет максимально сложным.

Выравнивание и работа с гридами

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

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