Технические требования к дизайн-макету

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

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

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

1. Формат файлов: Figma(.fig-файл или ссылка на проект с figma.com), Sketch(.sketch).

2. Ширина макета в пикселях: 1920 (Full HD). Минимальная ширина области с контентом 1004 пикселя для сайтов с горизонтальным меню в шапке и 1260 пикселей для сайтов с вертикальным меню слева. Рекомендуемая ширина области с контентом: не менее 1200 пикселей и 1400 пикселей соответственно.

3. Если вы хотите сделать ваш сайт привлекательным на экранах 4К, рекомендуем подготовить также дополнительные макеты и для очень большого разрешения экрана.

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

1. Именование фреймов/групп/компонентов должно быть логичным и отражать суть содержимого. Все части одного логического элемента должны быть в одной группе/фрейме и не должны быть разбросаны по всему документу.

2. Эффекты для слоёв не должны быть растрированы.

3. В слоях и эффектах не должен использоваться какой-либо режим наложения слоёв, кроме Normal. Исключением может быть только фрейм или группа, которые планируется экспортировать из макета как растровое изображение

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

5. Каждая страница макета должна находиться в отдельном фрейме (или монтажной области), который не должен располагаться поверх предыдущего.

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

7. Все состояния и варианты элементов должны выть видимы и явно указаны визуально или с помощью комментариев. | Требования к текстовому содержимому

8. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier и шрифты Google Fonts, необходимо прикладывать к передаваемым материалам. Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.

9. Лучше всего шрифты выбирать на сайте Google Fonts. Выбрав тут шрифты, можно без проблем подключить и использовать их на своем сайте.

10. Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.

11. Размер шрифта должен быть указан в пикселях. Для указания размера шрифта использовать целое число, то есть не 12.5, а 12 или же 13.

12. Обязательно должно быть указано оформление следующих HTML-тегов: параграф, абзац (p), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список, нумерованный список.

13. К текстовым элементам страницы не должно применяться масштабирование (вытягивание/сжатие), как по горизонтали, так и по вертикали. Прочие требования

14. Все активные элементы (ссылки, кнопки, пункты меню и др.) должны быть предоставлены во всех возможных состояниях: нормальное, при наведении, при нажатии.

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