Открыть главное меню

На главную о дизайне | Готовый дизайн | Уникальный дизайн | Собственный дизайн | Логотип

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

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

Требования к файлу дизайн-макета
1. Формат файлов: Figma(.fig), Adobe Photoshop (.psd), Sketch(.sketch)
2. Цветовая схема – RGB
3. Разрешение (dpi): 72
4. Рекомендуемая ширина макета в пикселях: 1920 (HD-монитор). Рекомендуемая минимальная ширина области с контентом 1004 пикселя для сайтов с горизонтальным меню в шапке и 1260 пикселей для сайтов с вертикальным меню слева.

Требования к слоям и группам в дизайн-макете
1. Каждый элемент должен находиться в одном слое, именование слоев должно быть логичным и отражать суть содержащегося на слое изображения. Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
2. Слои не должны быть склеены, кроме особых случаев.
3. Эффекты для слоёв не должны быть растрированы.
4. В слоях и эффектах не использовать какой-либо режим наложения слоёв, кроме Normal
5. Не следует оставлять в макете невидимых слоёв, которые использовались в процессе разработки макета, но не были включены в его финальный вариант.

Требования к текстовому содержимому
1. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier и шрифты Google Fonts, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf и otf. Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
2. Лучше всего шрифты выбирать на сайте Google Fonts. Выбрав тут шрифты, можно без проблем подключить и использовать их на своем сайте.
3. Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
4. Размер шрифта должен быть указан в пикселях. Для указания размера шрифта использовать целое число, то есть не 12.5, а 12 или же 13.
5. Обязательно должно быть указано оформление следующих HTML-тегов: параграф, абзац (p), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список, нумерованный список.
6. К текстовым элементам страницы не должно применяться масштабирование (вытягивание/сжатие), как по горизонтали, так и по вертикали.

Прочие требования
1. Все активные элементы (ссылки, кнопки, пункты меню и др.) должны быть предоставлены во всех возможных состояниях: статичное, при наведении, при нажатии.
2. Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы).
3. Фон сайта может быть одним из ниже перечисленных: однородный цветовой; линейный вертикальный или горизонтальный градиент; фоновое повторяющееся изображение; фоновое неповторяющееся изображение с переходом в однородный цвет, фоновая картинка, которая будет зафиксирована при прокрутке.


Какие блоки должны быть на макете и требования к ним

1. Форма авторизации
Должна быть представлена на макете в двух состояниях:
1.1 Форма входа на сайт содержит
- поля для ввода логина и пароля
- ссылку "Забыли пароль"
- ссылку "Регистрация"
- кнопку входа на сайт
Login.png

1.2 Форма выхода содержит:
- имя пользователя и (или) email.
- кнопку выхода
- дополнительно в форме может выводиться баланс клиента.
Logout.png

2. Строка поиска
Для авторизованных пользователей должна включать ссылку "История поиска"
Search.png

3. "Живая" корзина содержит:
- количество товаров в корзине
- суммарная стоимость товаров
Cart.png

4. Меню
Может быть горизонтальным или вертикальным и содержать подменю 1го уровня. Рекомендуем выделять пункт меню, в котором содержится скрытое подменю (например, стрелкой)
Menu.png

5. Ссылка "Работает на платформе ABCP"
Размещение ссылки обязательно. Она помещается в подвал сайта.

Что можно менять на внутренних страницах

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


1. Результаты поиска. Здесь можно менять только стили (цвет и шрифт текста, фоны таблиц, цвет и вид границ таблицы). Добавлять или объединять колонки в таблице в рамках редизайна нельзя. Также нельзя добавлять на макет элементы, которых нет в стандартном функционале поиска (например, ссылку "добавить в закладки" и прочее)

Результаты поиска.png

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

Корзина.png

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

Оформление заказа2.png

4. Личный кабинет. Можно менять только стили (цвет и шрифт текста, фон таблицы, внешнее оформление кнопок, внешний вид границ таблицы). Удалять, перемещать, объединять вкладки Личного кабинета нельзя.

Des3.png

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

Des4.png

5. Форма VIN-запроса. Запрещено менять местами поля, удалять или добавлять новые. Можно изменить цвет и шрифт текста, внешний вид инпутов.

Des5.png


6. Обратная связь. Внешнее оформление может быть каким-угодно, но вот переставлять местами пункты и добавлять пункты в рамках редизайна нельзя.
Des9.png


7. Заказать звонок. Представлен в виде всплывающего окна. Внешнее оформление может быть каким-угодно, но вот переставлять местами, удалять и добавлять пункты в рамках редизайна нельзя.

Des10.png


8. Форма регистрации Так как самостоятельно через ПУ вы можете выбрать какие пункты регистрации отображать, то ограничений по переименованию и количеству пунктов нет. Вы не можете изменять структуру страницы, то есть текст должен быть слева, а input'ы справа. Также вы можете изменить стиль вкладок и кнопки.

Des11.png


9. [Шины и диски], [Каталог масел], [Каталог аккумуляторов] Здесь можно менять только стили (цвет и шрифт текста, фон таблицы, внешнее оформление кнопок). Добавлять колонки в таблице, убирать кнопки, перемещать их в рамках редизайна нельзя. Также нельзя менять структуру фильтров слева. В какталоге шин и диском можно изменять вид вкладок сверху.
Tyres.jpg


10. Каталог Carbase Здесь можно менять только стили (цвет и шрифт текста, фон таблицы, внешнее оформление кнопок, внешний вид границ таблицы). Количество колонок настраивается в панели управления.
Des7.png


11. Каталог ламп Данный каталог предоставляется "как есть". Никаких изменений делать нельзя, в том числе по внешнему виду.
Des8.png


12. Карточка товара. Можно менять только стили (цвет и шрифт текста, внешнее оформление кнопок, внешний вид границ элементов, оформление таблицы с характеристиками, вкладок). Нельзя изменять структуру страницы, переставлять местами блоки.


Карточка товара.png