Дизайн-макет — это набор документов, описывающих внешний вид сайта. Он включает в себя:
- Изображения в формате PSD, оформленные согласно рекомендуемой структуре.
- Демонстрационные изображения в формате PNG. Можно использоваться и другие популярные форматы изображений, но они могут искажать цветопередачу.
- Пояснительную записку для:
- описания эффектов (в любой доступной дизайнеру формой: названием уже известных эффектов, ссылкой на ресурсы для примера, либо указанием на файл с анимацией в приложении);
- указания используемых шрифтов в GoogleFonts (либо комплекта шрифтов в форматах TTF, OTF, EOT, WOFF). В случае преобразования шрифта через FontSquirrel или другой сторонний сервис, необходимо приложить оригинал шрифта.
Дизайн-макет можно дополнить любым материалом, который поможет объяснить задумку дизайнера.
Подготовка PSD-макета
Документ должен быть корректно оформлен, прост для понимания и удобен для работы. Ниже приведены достоинства и недостатки оформления документа.
Работа со слоями
+Слои имеют функциональное назначение, отраженное в названии.
+Слои разложены по папкам, которые также имеют функциональное назначение, отраженное в названии.
+Слои выровнены по сетке (например, по 12ти колоночной сетке bootstrap).
˗Повторяющееся название слоя или папки.
˗Непоследовательное расположение слоев и папок.
˗Блоки выравненные по текстовым строчкам (для колонок).
Работа с текстом
+В названии обозначено семейство, размер, межстрочный интервал (прим. 'Заголовок Helv-14/1.6-b/i').
+Кратные размеры текста.
˗Изменение размера межстрочного интервала в результате манипуляций на странице.
˗Применены особые параметры сглаживания.
˗Применены векторные преобразования.
Работа с фоном и изображениями
+Мощеные паттерны обладают корректной бесшовной структурой (слоем-образцом с незаметными стыками), либо приложены отдельно.
+Кратные 2-м размеры блоков и изображений.
˗Чрезмерное обилие паттернов, без логической составляющей (не воспроизводимые по общим правилам).
˗Наложенные поверх видимых функциональных элементов (например, дымка над всем макетом).
Общий вид макета и перечень стилизуемых элементов
Макет должен иметь фиксированную ширину. Рекомендуемая ширина макета 970px. Есть несколько “резиновых” областей: “слайдер”, область “после слайдера”, область “перед подвалом”, технические области “перед шапкой” и “JavaScript”. Все области можно использовать для дизайнерских решений. Боковые колонки “Слева от контента” и “Справа от контента” являются не обязательными, их можно использовать в любых вариациях на разных страницах сайта. Содержание всех областей свободно редактируется и изменяется от страницы к странице, за исключением “шапки” и “подвала”.
Общая структура шаблона
Формы, автоматически генерируемые таблицы, составленные формы, страница пользователя, страницы регистрации/авторизации и встроенные редакторы структурно не редактируются, но к ним применяются глобальные стили оформления полей ввода, кнопок, групп полей, лейблов, ссылок.
Структура макетов
Сервис Pixlpark имеет набор редактируемых страниц и редактируемых блоков, которые можно поместить на любую страницу сайта, а так же набор страниц и элементов, редактирование которых ограничено. Что бы макет был наиболее приближен к реальному виду сайта, предполагается следующая структура исполнения макетов:
- Layout — неизменная часть сайта, включающая в себя оформление шапки, подвала и других постоянных элементов сайта. Для макетов других страниц слои шапки, подвала и других постоянных элементов можно "объеденить\Merge", чтобы не засорять макеты.
Layout состоит из:
- Шапка
- Логотип;
- Область контактов — контент, расположенный между логотипом и пользовательской панелью. Обычно используется для краткого отображения контактных данных.
- Пользовательская панель — область, не являющаяся редактируемой. Её содержание нельзя изменять, а позиции внутри неё нельзя
разбивать на части. При декорировании следует учитывать все используемые
внутри неё элементы: иконки для “корзины”, “заказов”, “авторизации”, “регистрации”, “личного
кабинета”, “выхода”, cчетчики товаров в корзине и произведенных заказов.
- Навигационная область — контент, расположенный после пользовательской панели. Обычно используется для меню сайта.
- Контент.
Задача контентной части страницы — демонстрировать максимум типичного поведения элементов, что бы использовать общие стили и для последующих страниц.
В контентной части размещаются:
- Названия шрифтов, выполненные в своих гарнитурах (если шрифт не является читабельным, то используемые символы и его название в читаемом шрифте);
- Сетка используемых цветов — цвета в rgba (если цвет сливается с фоном, то текст пишется в контрастном цвете, а объект обрамляется контрастными границами);
- Заголовки с 1-го по 6-ой уровень (пример);
- Параграфы в виде рыбного текста (желательно на кириллице), содержащие в себе начертания и примеры:
- Жирного текста;
- Курсивного текста;
- Ссылок в тексте (с понятным различием между: ссылками на другие страницы и действиями на текущей, визуализации посещенных ссылок и их поведением при наведении).
- Горизонтальная линия;
- Оформление таблиц:
- Отступы;
- Границы;
- Заливка;
- Заголовки;
- Простые ячейки.
- Элементы формы:
- Группы полей;
- Подписи полей ввода;
- Строчные поля ввода;
- Текстовые поля ввода;
- Оформление кнопок (статичное, при наведении, при нажатии).
- Подвал является полностью редактируемой областью.
- Home — домашняя страница сайта. Основной контент подчиняется принципу полностью редактируемого контента, т.е. возможности по оформлению ограничены только шириной макета и используемых областей.
Кроме типичного контента, на данной странице можно разместить:
- Блок последних новостей, который включает заголовок “Последние новости”, ссылку на новостную ленту и несколько последних новостей. Каждая новость состоит из:
- Названия — ссылки на страницу текущей новости;
- Краткой новости;
- Даты публикации.
- Блок со случайными отзывами, который включает заголовок “Случайные отзывы”, ссылку на “другие случайные отзывы”, ссылку на ленту отзывов и несколько случайных отзывов. Каждый отзыв состоит из:
- Содержания отзыва;
- Имя автора отзыва;
- Даты публикации.
- News (2 макета):
- Новостная лента (NewsList) — список новостей на одной странице;
- Страница новости (NewsView) — фрагмент новости.
- Feedback — страница отзывов, включающая в себя отзывы клиентов, ответы на них и форму обратной связи(стилизуется только общим оформлением из layout);
- Contacts, About-us и ReadPages делаются на усмотрение заказчика (по умолчанию берутся стили из layout), представляют собой полностью редактируемые страницы.
Страницы авторизации, регистрации, кабинет пользователя, блоки редактора, автоматически генерируемые таблицы и формы (корзины, заказа, регистрации ...) стилизуются на основании общих стилей, представленных в layout.
Реализация дизайн-макета
Для реализации данного макета в панели управления можно воспользоваться:
- Редактируемыми страницами. (CMS → Страницы сайта)
Основной инструмент разработки большинства информационных страниц. По умолчанию в редакторе доступно общее поле контента. Воспользовавшись функцией “расширенное редактирование содержимого” можно отредактировать и другие области в шаблоне (см. Общая структура шаблона). Контент в этих областях имеет приоритет над всеми остальными возможностями их заполнения — этот контент всегда будет идти первым.
Так-же на этих страницах доступны следующие виджеты:
- Последние новости;
- Случайные отзывы;
- Форма обратной связи.
- Блоками (CMS → Страницы → Блоки)
Вспомогательный инструмент разработки. Представляет собой редактор, создающий постоянную контент-переменную (в виде [number]), код которой можно разместить на редактируемых страницах.
- Слоями (CMS → Страницы → Слои)
Вспомогательный инструмент разработки. Представляет собой контент блоки, такие-же, как в “редактируемых страницах” и еще полями “перед редактором” и “после редактора”. Уникальные поля вставляются только на страницах с редактором.
Слои имеют атрибут - маска. Используя регулярные выражения, маска проверяется с текущим URL страницы, и ,в случае удовлетворения условию, дополнительный материал добавляются в поля страницы после контента из “редактируемых страниц”.
Является единственной возможностью добавить какой-либо материал на страницу с редакторами.
- Средством загрузки изображений (CMS → Дизайн → Загрузка файлов).
Предоставляет возможность загружать файлы на сервер (например .jpeg, .png, .flv, .mp4). Для использования этих файлов воспользуйтесь путем, который формируется автоматически. (Правило действует и для HTML страниц, и для CSS).
- Редактором стилей (CMS → Дизайн → Редактор стилей).
Редактор стилей представляет собой простое текстовое поле, редактирующее содержимое style.css. Эти стили применяются последними, поэтому имеют приоритет “по порядку”.