ания к файлам дизайн-макетов

• Формат файлов: Adobe Photoshop (.psd);
• Отдельные страницы сайта создаются отдельными файлами. Если это интерфейс приложения, возможно использование монтажных областей;
• Файлы должны иметь название формата проект_страница_ММГГ (project_main_0318);
• Цветовая схема (Color mode): sRGB;
• Разрешение (dpi): 72 pixel/inch.

Требования к слоям и группам в дизайн-макете

• Все неиспользуемые слои нужно удалить;
• Слои нужно группировать по папкам с соответствующими названиями;
• Активные элементы (кнопки, движущиеся блоки и т.д.) должны быть разнесены по слоям и группам. Названия слоев и групп должны быть осмысленно названы и отражать находящиеся в них объекты;
• Если в макете встречается форма ввода данных, должны быть показаны все состояния, а также вывод сервисных сообщений.

К макету нужно приложить ТЗ, в котором содержится следующая информация

• Поведение динамических элементов и элементов управления контентом, разбитые поблочно, в том числе вид ссылок и интерактивных кнопок для различных состояний (hover, active, visited);
• Любая другая информация не очевидная из самого psd-макета.

Требования к используемым шрифтам в дизайн-макете

• Используемые шрифты, за исключением стандартных системных, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только в формате .woff;
• Шрифт текстовых элементов сайта запрещается деформировать, преобразовывать в кривые, растрировать, использовать наложение слоёв и масок.

Требования к активным элементам (кнопки, изменяемые или реагирующие на поведение пользователя элементы) в дизайн-макете

• Активные элементы должны быть точного размера в пикселях;
• Все состояния активных элементов располагаются либо в скрытых слоях, либо отмечены в ТЗ, которое прилагается к макету.

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

• Рекомендуемая ширина макета в пикселях: 1224 рх, где 1024 - ширина контента, 100 рх и 100 рх - поля, указывающие, как выглядит контент при ширине макета свыше 1024 рх;
• Первый, а также любой фиксированный скролл - 700 рх в высоту;
• Все используемые фотографии должны быть приложены к макету в большом разрешении, с примененными эффектами.

Текстовые элементы (блоки) сайта, выравнивание

• Для указания размера шрифта необходимо использовать целое четное число: 12 рх, 14 рх и т.д.;
• Выставить режим сглаживания текста “Резкий” (Sharp), и не менять;
• К текстовым элементам страницы не должно применяться масштабирование, искажение, деформация;
• Не применять к тексту псевдо полужирное и псевдо курсивное начертания.

Ссылки на странице

• Необходимо показать, как выглядят обычные ссылки, при наведении, а также использованные (подчеркивание, цвет).

Элементы форм

• Для элементов формы, которые будут заполняться текстом, необходимо показывать, как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы);
• Нужно отрисовывать сообщение об ошибке в заполнении формы, а также сообщение об успешном отправлении формы.

Меню

• Для пунктов меню необходимо показать, как выглядит обычное содержание, при наведении и в активном разделе;
• Если есть выпадающее или разворачивающее меню – следует нарисовать и выполнить требования предыдущего пункта.

Адаптивный дизайн

• Макеты для desktop должны быть сделаны под ширину контента 1024 рх;
• Макеты для mobile расчитываются под ширину экрана 320 рх;
• Допускается дизайн по стандартной сетке Bootstrap.

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

Digital-дизайнер
Компании IT-Мастерская

Поделиться:

Комментариев: " 2 "