Главная » Требования для дизайна сайта

Требования для дизайна сайта


нужны для того, чтобы дизайнер сделал нужную работу и не делал лишней

1) Адаптивный дизайн
2) Ширина контента 1170 px !
3) Сетка — 12 колонок, расстояние между колонками 30 px
4) Если нужно создать дизайн “на всю ширину экрана”, использовать канвас 1366 px
5) Желательно, чтобы высота блока не превышала высоту экрана ноутбука (768 px)
6) Использовать векторные иконки (SVG). Или лучше из библиотеки FontAwesome. Скачать можно тут.
7) Шрифты использовать из библиотеки Google
8) Все изображения (фоны, иконки) предоставить отдельно от макета. Название файлов на латинице соответственно блоку, к которому они применяются.
9) Фоновые изображения должны быть минимум 1920 px по ширине
10) Прилагаемые изображения оптимизировать для загрузки на сайт, используя tinypng.com или подобный сервис
11) Если иконки (маленькие картинки. Пример) растровые, сделать их в 2 раза больше, чем они есть в макете. Это нужно, чтобы они не выглядели размытыми на мобильных устройствах: концентрация пикселей будет выше…
12) К макету прилагать шрифты, которые в нем использовались.
13) Прорисовывать ховеры по требованию (уточнить у менеджера для каких элементов они нужны).
14) В подвале добавить текст “Сайт разработан BRAIN WORKS”
15) Сделать favicon. Удобный сервис — favicon-generator.org
16) Хлебные крошки рекомендуется делать на всю ширину контента страницы, даже если занята левая или правая колонка.
17) Минимальный рекомендуемый размер шрифта 14px. Желательно не более 5 размеров шрифта.
18) Использование не более 2-х семейств шрифтов, в идеале 1, так как это влияет на производительность сайта.
19) Использование типичных начертаний шрифтов: bold, regular, italic, не более; чем их меньше, тем лучше для производительности.
20) Максимум 2 стиля кнопок: со сплошной заливкой не более 2ух цветов, outline — не более 2х цветов
21) Если есть отзывы: в карусели должно быть по одному отзыву (не в 2 или более колонок)
22) Если есть идея упаковать контент в виде функциональных элементов (вкладки, табы, карусель…), согласовать с менеджером
23) Уточнить у менеджера необходимость выполнять этот пункт для данного проекта.
23-a) Показать, как будет выглядеть сайт (первый экран и максимум второй блок) на различных устройствах (пример ниже).
23-b) Какие элементы будут в шапке в мобильной версии сайта, должно быть отражено в ТЗ. Если эта информация отсутствует, запросить у менеджера.
23-c) Шапка (часть, которая остается закрепленной при скролле) в мобильной версии обычно имеет вид: лого слева, «гамбургер» — справа