Управление рабочими процессами
#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. Список интерактивных состояний элемента, например, для ссылки:
- Обычная (не посещенная, не активная)
- При наведении (:hover)
- При нажатии (click, если необходимо)
- Посещенная (visited, если необходимо)
Пример дизайна страницы со стандартными интерактивными элементами.
UX/UI рекомендации
#1. Избегать полностью черного шрифта (#000) на белом фоне.