Шаблоны и инструкции

Разработка индивидуального дизайна главной страницы

Анкета для заказа дизайна

Перейти к анкете

Шаблон задачи

Заголовок

Разработка индивидуального дизайна главной страницы

Текст

Материалы, предоставленные Заказчиком
Эскиз главной страницы — http:// 
Прототип главной страницы — http://
Результаты этапа «Наполнение» для главной страницы, опубликованные на тестовом сайте — http://
НЕ ОБЯЗАТЕЛЬНО, ДОСТАТОЧНО ПРЕДОСТАВЛЕННЫХ МАТЕРИАЛОВ: Собранного сайта [ссылка на сайт] с опубликованными материалами.
ЕСЛИ БЫЛИ, ПРЕДОСТАВИТЬ СПИСКОМ В ЗАДАЧЕ: Пожеланий клиента к блокам главной странице, полученных по итогам демонстрации типового прототипа. 

Требования
Макеты рисуются по шаблонам:
Шаблон макета главной — Y:\_Cetera\Templates\Project\Design\home.psd
Дефолтный прототип всех страниц сайта — http://wireframes.cetera.ru/wireframe/
Требование к макету с точки зрения производства:
Макеты должны максимально соответствовать оформлению элементов, сетки и т.д., описанной на http://foundation.zurb.com/docs/ и в http://wireframes.cetera.ru/wireframe/
Макеты должны содержать отдельный слой с символами отступов [[https://www.figma.com/file/Y1UeLqqraqGgzhsDkDTtDMIE/%D0%92%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D1%8B?node-id=0%3A1|Набор для figma]], Каждый вертикальный интервал должен быть обозначен символом с цветовым кодированием. 
[[https://www.figma.com/file/N1VUa4dOI6q4U6qiJXkF6OB4/Wildcraft?node-id=143%3A0|Пример макета]]
Макеты должны содержать минимальное количество нестандартных элементов.
При разработке макета должны учитываться общие требования по UX https://kb.cetera.ru/docs/qa/checklistux
Макеты должны быть адаптивными.
Макеты должны иметь возможность быть адаптироваными по сетке 1200 — 960 — 640 — 320 пикселей.
Макет для десктопа должен иметь ширину артборда 1920px.
Не должен нарушаться порядок следования блоков: если блок с описанием на широком макете был после картинки, то на узком макете он не должен оказаться над ней.
Макет должен соответствовать требованиям верстки — https://kb.cetera.ru/docs/design/designlayout
В целях упрощения дальнейшей поддержки не рисуем баннерных мест на макетах. Только центральный анонс. Фоновое фото и текст поверх него. Отступление от правила допустимо только в случае письменного запроса от клиента на этапе согласования макета. Остальные промо-блоки на главной странице следует решать выводами анонсов разделов: «последние новости», «популярные товары», «перечень преимуществ», где выводятся списки материалов из какого-то раздела в составе заголовка, краткого описания, фото или иконки, возможно, даты.
По готовности, макет отдельной CE-задачей отправляется арт-директору, для проверки на соответствие концепциям эскиза, и общим требованиям дизайна. 
На выходе дизайнером должна быть подготовлена презентация макета, основываясь на https://kb.cetera.ru/docs/design/presentation. Уточнить у менеджера о дате и времени проведения презентации до сдачи макета Заказчику. 

Требования заказчика
*** ЗДЕСЬ ВСТАВЛЯЮТСЯ ОТВЕТЫ НА АНКЕТУ ПО ДИЗАЙНУ До начала этапа Заказчик предоставляет заполненную анкету по дизайну - https://cetera.ru/forclients/forms/website-design-template/  ***
Требования к исходным материалам
Макет разрабатывается на основе фактически опубликованных на сайте материалов, изображений, иконок, логотипа, фирменных цветов заказчика и т.д.
В рамках этапа не изменяется логика, компоновка и форматирование работы функциональностей сайта.
На основании предоставленных материалов Исполнитель разрабатывает точное графическое отображение главной страницы со следующим рекомендуемым, но оставляемым на усмотрение Исполнителя, списком элементов сводной страницы:
Навигационные блоки
Локальная навигация (по подразделам и материалам текущего раздела)
Последовательная навигация (переход к соседним разделам/материалам)
Статусная строка (путь от главной страницы до текущей)
Возможные блоки
Список подразделов в составе
Название раздела
Краткое описание раздела
Ссылка на раздел
Изображение раздела
Количество материалов в разделе
Список материалов раздела в составе:
Название материала
Краткое описание материала
Ссылка на материал
Дата публикации материала
Автор материала
Раздел, в котором опубликован материал
Изображение материала
Материал или товар
Название материала
Цена товара
Наличие товара
Артикул товары
Варианты товара (цвета, размеры…)
Автор материала (фото, Ф. И. О., краткий текст, переход на страницу автора).
Дата публикации материала
Основное содержание материала
Ссылки
Заголовки 1-5 уровней
Абзацы
Абзацы в несколько колонок
Фотоматериалы
Выноски
Таблицы
Многоуровневые нумерованные и ненумерованные списки
Рейтинг материала
Файлы, прикреплённые к материалу
Дополнительные материалы по теме
Требования к элементам сайта 
Требования к структуре интерфейсных форм 
Диалоги обладают отчетливо выделенной и понятной кнопкой перехода к следующему шагу и/или кнопкой отправки формы
Многостраничные формы имеют указание на то, что они многостраничные; пользователь всегда видит количество оставшихся экранов («Экран x из y»)
Если поле предназначено для ввода заметного количества текста, оно многострочное
Если поле предназначено для ввода даты, оно снабжено календариком
Сообщения о некорректности введенных данных показываются рядом с полем, данные в котором некорректны
Форма вывода указанных выше сообщений прорисована с учетом того, чтобы сообщения двух соседних полей не перекрывали друг друга
Сообщение об ошибке дополнительно выводится в алерте в верхней части страницы. При успешной отправке формы также выводится алерт об успешной отправке
Все поля, обязательные для заполнения, помечены, есть соответствующее пояснение.
Блок прикрепления файлов могут иметь 2 варианта представления:
Поле, кнопка «Обзор», комментарий по поводу размера файла. И все – больше никаких кнопок Прикрепить или Отмена
Поле, кнопка «Обзор», кнопки "+" и “-" для возможности прикрепления нескольких файлов и отмены прикрепления к-л из них 
Нет разных состояний кнопок, которые выглядят одинаково. 
Требования к визуальному представлению
Цвет шрифта достаточно контрастен с фоном
Направление теней во всех элементах управления одинаково: снизу справа.
Ширина основных блоков (текст.блоки, таблицы, формы) одинакова
Нет разных состояний ссылок, которые выглядят одинаково
Существует отчетливо выраженная ссылка на главную страницу. 
Требования к меню
Первая буква в названии пунктов меню – заглавная.
В меню не используются нестандартные шрифты 
Требования к иконкам 
1. На главную страницу 
2. Email 
3. Принтер 
4. Карта сайта 
5. Поиск 
6. Файлы-приложения a. DOC b. XLS c. PDF d. GIF e. JPG f. TIF g. MP3 h. AVI i. ZIP j. RAR k. EXE 
Требования к новостям, очеркам и т.д.
В списке новостей у каждой новости указана дата
Прорисована ссылка на архив
Прорисована навигация по соседним периодам (годам, например) 
Требования к формам
Радио и чекбоксы не поддаются стилизации, они всегда стандартные. Поэтому не рекомендуется использовать в дизайне нестандартные радиокнопки и чекбоксы.
У селектов нельзя делать отступы внутри поля
У селектов нежелательно делать цветной фон.
Нельзя делать нестандартным поле для загрузки файлов, его все равно нельзя переопределить через CSS. 
Для кнопок можно менять ширину рамки, цвет для каждой границы отдельно, фон, размер, стиль и цвет шрифта. 
В крайнем случае, допускается использование закругленных краев у кнопок. 
7. У текстовых полей можно менять рамку, фон

Макет предоставляется в виде 2-х графических файла в формате JPG или PNG.

Количество итераций замечаний — неограниченное.

Количество итераций доработок (ранее не заявленных) — 1.