Руководство для веб-дизайнера по Sketch (передача макета Front-End)

Когда-то мы делали дизайн в Adobe Photoshop. Чтобы стандартизировать дизайн-макеты внутри компании, нам приходилось проводить много избыточных действий, так как правил для работы с Photoshop было много.

Сегодня мы используем связку Sketch + Invisionapp + Avacode, что значительно упрощает и ускоряет производство качественного дизайна и каждый дизайнер SLT следует им:

ЕЩЕ БОЛЬШЕ ПОЛЕЗНОСТЕЙ У НАС В TELEGRAM

Чек-листы

Готовые промты

Таблицы для генерации контента

Управление рабочими процессами

#1. Весь процесс демонстрации дизайна ведется в облачном сервисе invisionapp.com. Для сторонних дизайнеров также предоставляются доступы к рабочему проекту.

#2. Все действия (коммуникация, загрузка изображений, и т.п.) должны производиться под своим собственным аккаунтом в invisionapp.com.

#3. Все нестандартные шрифты, используемые в макете сайта, должны быть помещены в специальную папку “Fonts” в разделе assets (в формате TTF):

/prototype_name/assets/fonts

Если шрифт присутствует в сервисе Google Fonts, приложить ссылку с отфильтрованными настройками в

/prototype_name/assets/fonts/google_fonts.txt

#4. Сложная графика, паттерны должны быть нарезаны и помещены в папку

/prototype_name/assets/images

если вы заранее подготовили графику для экспорта в скетч во время синхронизации при помощи плагина craft, графика для экспорта будет перемещена в папку автоматически.

#5. Название прототипа в Invisionapp должно содержать название домена плюс контрольную точку (breakpoint), пример: seolt.ru [320], seolt.ru [1440].

#6. Для каждой контрольной точки создаем отдельный прототип.

#7. Все дизайны страниц в invision должны быть разбиты по разделам, пример: news, category, popups и т.д.

#8. Для синхронизации скетч с invision используем плагин Craft.

Требование к макету сайта sketch

#1. Цветовая модель RGB.

#2. Именование файлов, слоев, артбордов на латинице. Имя должно состоять только из латинских букв, цифр и _ (underscore).

#3. Контрольные точки - 320 Mobile, 1440 Desktop. Дизайн в других контрольных точках (640, 768, 1024, 1280, 1366, 1920 и т.д.) по требованию front-end специалиста.

#4. Использование 12 колоночной сетки (если дизайном не определена другая сетка). Gutter width - 30px (15px с каждой стороны колонны).

#5. Дизайн-макет должен сопровождаться favicon c разрешением 270x270px в формате *.png с прозрачной подложкой в папке

/prototype_name/assets/favicons.

#6. Подготовить графику для экспорта в скетч.

Требования к артбордам

#1. Именование на латинице.

#2. Осмысленное название артбордов (contacts, home, catalog, product, etc.).

Требования к слоям

#1. Именование на латинице.

#2. Осмысленное название слоев (header, card, footer, sidebar, etc.)

#3. Не должно быть слоев, которые не используются (скрытые и не играющие никакой роли слои должны быть удалены).

#4. Каждый элемент должен находиться в одном слое c понятным именем, не допускается названия типа «shape 1».

#5. Группировка слоев по смыслу (например, модуль авторизации).

#6. Обрезка фотографий (скругление углов и т.п.) должны производиться с сохранением исходных изображений с помощью масок.

#7. Важно: все типовые блоки с изображениями должны иметь картинку-заглушку (no_image), например, список новостей, если в превью он использует изображения, список объектов и т.д.

Требования к тексту

#1. Размеры (кегль) и интерлиньяж шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо.

#2. Возможно только три варианта выравнивания текста в макете: по левому и правому краю, а также по центру.

#3. В случае использования нестандартного шрифта, он должен быть бесплатным и присутствовать в Google Fonts. Список безопасных веб шрифтов.

#4. Недопустимо использовать прозрачность для элементов содержащих текст.

#5. В дизайне не использовать иконочный шрифт. Все иконки на сайте должны быть выполнены с помощью SVG-иконок и заранее подготовлены для экспорта в формате *.svg.

Интерактивные элементы

#1. Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний: hover, focus и др., если необходимо.

#2. Кроме необходимых для дизайна страниц, должен быть выполнен отдельный артборд «Style Guide», в котором перечислены все стандартные блочные элементы (меню, галерея, таблица и т.д.) в различных состояниях (наведение, клик и др.) Например.

#3. Список интерактивных состояний элемента, например, для ссылки: