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

7 секретов хорошего макета

1. Структурированные слои

У каждого слоя и группы есть собственное название. Используйте для подписи латиницу, соблюдая при этом логику расположения деталей. Пример: podval – footer или knopka_1 – button-send.

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

Несколько слов о скрытых слоях

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

При отсутствии скрытых слоев границы вложенных объектов и поля группы совпадают.

Грамотная структура позволяет лучше ориентироваться в макете. Ниже представлены примеры хорошего (слева) и плохого (справа) решений.


image

2. Оптимизированные изображения

Если вам необходимо немного обрезать фотографию, например, сделать углы округлыми, всегда сохраняйте исходный вариант. Оптимальный выход – использовать маски.

Следите за параметрами холста. Он должен соответствовать максимальным значениям высоты и ширины дизайна.

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

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


image

3. Подходящие шрифты

Нестандартные и “креативные” варианты в современном мире уже не вызывают удивления. Их поддерживают почти все браузеры (93 %), а еще на 62 % сайтов они используются. Однако все дело в том, что подобные шрифты по-разному ведут себя в браузерах. На редкие экземпляры даже Photoshop “ругается” предупреждающими окнами. В таком случае есть два популярных решения:

  • подключить шрифт, написав @font-face;
  • вставить <link> с Google Fonts, предварительно убедившись в поддержке кириллицы.

Верстальщик скажет огромное “спасибо”, если вы потрудитесь приложить к макету все использованные шрифты минимум в 3-4 форматах:

  • ttf;
  • eot;
  • woff (или woff2, а лучше оба);
  • svg.

При оформлении дизайна не переусердствуйте: он должен быть понятным и простым, а потому большое количество шрифтов неуместно. Оптимальное решение – 2 основных варианта, которые можно немного менять в плане насыщенности для выделения текста.


image

4. Наличие UI-kit

Этим термином называются элементы пользовательского интерфейса. Такой набор следует обязательно отправить верстальщику. Что он должен содержать:

  • Детали, которых нет в макете. К примеру, кнопка с классом .send может отсутствовать в макете, но только не в файле UI-kit.
  • Hover-эффекты, а также прочие компоненты взаимодействия с пользователем;
  • Всю палитру оттенков, использованных в макете.

Хороший UI-kit выглядит так:


image

Также не поленитесь составить список стилей текста для всех элементов. Обязательно укажите начертание, гарнитуру, кегль, интервал между строками. В противном случае текстовых стилей может оказаться слишком много. Чаще всего такое происходит с крупными проектами, содержащими большое количество экранов.

5. Работа по гридами

Гриды (колонки) представляют собой специальную модульную сетку, которая условно делит макет на одинаковые по ширине вертикальные части, между которыми существует определенный отступ.

Помните о ширине макета. Она должна быть на 15px меньше с каждой стороны, чем ширина устройства. Пример: для горизонтального разрешения в 1170px макет должен быть не больше 1140px. Причина тому – необходимость учитывать границы окна и параметры скроллбара.

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


image

6. Предварительная проработка текстового наполнения

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

7. Наличие “адаптива”

Не поленитесь сделать по макету для максимального и минимального разрешения. Так вы сэкономите время верстальщику на просчет блоков, которые будут смещаться.

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

Помните, что облегчить проектирование адаптивных макетов может модульная сетка. Стандартные значения ширины составляют 320px, 480px, 768px, 960px, 1200px, 1440px. С каждым шагом ширина колонки увеличивается, а расстояние не меняется.


image

Полезные рекомендации дизайнеру

  1. Составьте перечень моментов, которые необходимо проверить, прежде чем сдавать макет на верстку.
  2. Дружите с верстальщиками. Обмен опытом не повредит.
  3. Научитесь хоть немного работать с HTML&CSS и фреймворками. Это поможет вам понять процесс изнутри и, возможно, предотвратит конфликты с верстальщиком.
  4. Выделите время для окончательной сборки макетов.
  5. Интересуйтесь новостями в сфере дизайна и верстки. Из них можно почерпнуть много полезного.

Следуя этим несложным советам, вы значительно упростите и оптимизируете рабочий процесс.