ания к файлам дизайн-макетов
- Формат файлов: 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 "