Дизайн

Возлюби ближнего своего или как передавать макет в верстку

Как оставить верстальщику хорошее настроение и ускорить срок сдачи проекта целиком.

Основываясь на пожеланиях верстальщиков и личном опыте, рассказываю как подготовить psd к верстке и как это делаю я.

Бонус: чек-лист, чтобы ничего не забыть.

Ради чего стараться?


Итак, по отзывам специалистов фронт-энда 70% макетов — проблемные.

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

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

Всего 30 минут подготовки макета перед отправкой поднимут карму и ценность дизайнера как специалиста на пару ступеней вверх. Не ленись, оно того стоит.

Хорошо, как мне исправиться?


Довольно просто решить эту проблему, всего навсего нужно прочитать эту статью и твоя жизнь больше никогда не станет прежней. Просто следуй чек-листу. Кстати, дизайн всегда начинай с прототипа. Большинство правок улетучится на стадии проектирования и дизайном будет заниматься приятнее.

Еще далеко не все пересели на Скетч, поэтому в рамках данной статьи обсудим только Фотошоп, но правила применимы и туда и обратно.

В конце будет краткий чек-лист, если лень читать. Поехали по списку.

Работаем с PSD


1. Используй сетку и направляющие

Встроенные направляющие Photoshop или сетки Bootstrap, исходники бутстрапа с сеткой для десктопа, мобилки и планшета, которыми пользуюсь я, можно скачать здесь. Контентная зона — 1140 px, размера макета — лучше 1920 px. Чтобы фоновые изображения и прочие элементы хорошо смотрелись на Full HD.

Bootstrap сетка PSD
Рис. 1.1. Классно

Рис. 1.2. Не очень

2. Группируй слои в папки, называй осмысленно

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

Лично я, на месте верстака, хочу распаковать архив, далее открыть макет и получить такое же удовольствие как от открытия коробки с любым яблочным устройством, где все продумано до мелочей и сделано максимально удобно. Открыв такой ужас, как на Рис. 2.2. желание работать отпадет у любого специалиста.

Рис. 2.1. С этим будет приятно работать

Рис. 2.2. Жесть

3. Мобильная и планшетная версия

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

Адаптив хорошо сделать в отдельном файле, с использованием артбордов. Т. е., в итоге для каждой страницы — psd десктопа и psd адаптива с планшетом и мобилкой внутри.

Рис. 3.1. Адаптив в артбордах

4. UI-кит, все состояния элементов

Любая кнопка, ссылка или элемент управления имеют состояния. Обычно это: состояние покоя (:normal); эффект наведения (:hover); момент клика (:active), и опциональные: посещенная страница (:visited), чаще используется для ссылки; не активная (:disabled), обычно для некликабельных до выполнения какого-то условия кнопок; также псевдокласс для форм при вводе текста (:focus).

Классический список элементов, встречающихся почти в любом проекте: кнопка, текстовая ссылка, стрелка слайдера, пункты слайдера, поле формы, иконки соц. сетей.

Особенно круто, если ко всему этому ты добавишь стили типографики и соберешь небольшой UI-кит для проекта. Что войдет в типографику: заголовки (h1, h2 и т. д.), параграф, маркированный и нумерованный списки, цитата, таблицы (при необходимости).

Рис. 4.1. Небольшой UI-кит для небольшого проекта

Рис. 4.2. Никакой UI-кит никакого проекта

5. Используй .svg иконки, вместо .png

Векторные иконки лучше кастомизируются при адаптиве, они не «шакалятся» и выглядят отлично, при любом раскладе. Еще они занимают меньше места и цвет меняется кодом, что отлично для hover-эффектов.

Рис. 5.1. SVG — к деньгам

Рис. 5.2. PNG — какашка

6. Округляй размеры шрифтов и элементов

Округляй все числа до целых. Не нужно назначать шрифтам и элементам размеры, такие как «33,12». Просто округлите до целого числа. Не будет проблем как с визуальным различием похожих элементов по макету из-за разных размеров, так и проблем в верстке.

7. Не оставлять слои с эффектами наложения

Растрируй, объединяй, заменяй прозрачность на осветление цветом (избегая слоя на слое). Множество, но не каждый верстальщик профессионально владеет фотошопом. Будет проблемно разобраться и перенести на верстку ту красоту, что была сделана с помощью этих эффектов.

8. Не применяй эффекты слоя

Не своди такие эффекты, как «Тень», «Градиент», «Граница», эти стили прописываются через CSS и для верстки нужны параметры, которые были заданы в стилях слоя.

9. Еще несколько «Не»

Не использовать сглаживание и размытие текста, это умеет только фотошоп, Браузеры не умеют в сглаживание и шрифт в браузере может значительно отличаться от макета.

Не помещать в один текстовый блок несколько стилей слоя. Например, заголовок и параграф нужно разделить и разместить в разные текстовые слои. Кстати, текст разбивать не через «Ввод», а создавать рамку «Блочного текста».

Не набирать текст капсом, использовать кнопочку «Все прописные».

Организационные моменты


1. Не забудь про favicon

Дело 5 минут, а всем приятно. Минимально — создай PNG 512×512 пикселей. Добавь логотип, возможно, фон. Но, можешь постараться и сделать красиво. Дальше сохрани и закинь на сайт icoconverter. Получаешь favicon. ico в одном экземпляре, но с любым разрешением, от 32 до 512 пикселей.

2. Собери все ресурсы по папкам

Папка с использованными в макете шрифтами (желательно, если найдешь, приложить сразу веб-шрифты), кстати, не забывай про лицензию шрифтов, если не хочешь на бутылку штраф. Папка с использованными векторными иконками. Также, превьюшки для удобного просмотра без открытия PSD, также favicon и, конечно, папка с исходниками.

3. Назови файлы исходников осмысленно

Проще простого, не «project-res-ver2-final32.psd», а, например, «Главная, десктоп. psd». По русски, по-нашему. Проблем с ОС в 2018 году нет, можно использовать кириллицу.

4. Запакуй в zip архив

Ни rar, ни 7z, не заставляй кого-то скачивать лишние программы. И да, обязательно запакуй. Архивация уменьшает размер архива минимум в 2 раза. Это легче хранить у себя на ПК, это проще скачать.

5. Залей на файлообменник

С нынешней ситуацией закинуть в Telegram — проблема, во ВКонтакте — извращение. Самый точный вариант — загрузить на Яндекс.Диск. Роскомнадзор не забанит, хранится бесконечно, 10 гигабайт бесплатно.

Обещанный чек-лист


  • 1920px макет с контентной зоной 1140px, направляющими и колонками Bootstrap
  • UI — кит (опционально)
  • Логично названные и сгруппированные слои
  • Макет без эффектов наложения и прозрачностей (слой на слое)
  • Планшетная версия 750px
  • Мобильная версия 320px
  • Папка с иконками в SVG
  • Папка с шрифтами (желательно веб)
  • Фавикон
  • Превью
  • Архивация в ZIP

Заключение


Я не претендую на последнюю инстанцию в вопросах дизайна. Не считаю себя профессионалом. Просто я видел макеты, которые передают верстакам и это действительно портит мнение о дизайнерах и их работе. Это портит и усложняет жизнь людям. Дизайн — упрощение жизни, для всех.

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

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

Поделиться статьей:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *