Дизайн-макет — это набор документов, описывающих внешний вид сайта. Он включает в себя:

1. Изображения в формате PSD, оформленные согласно рекомендуемой структуре.
2. Демонстрационные изображения в формате PNG. Можно использоваться и другие популярные форматы изображений, но они могут искажать цветопередачу.
3. Пояснительную записку для:
   1. описания эффектов (в любой доступной дизайнеру формой: названием уже известных эффектов, ссылкой на ресурсы для примера, либо указанием на файл с анимацией в приложении);
   2. указания используемых шрифтов в GoogleFonts (либо комплекта шрифтов в форматах  TTF, OTF, EOT, WOFF). В случае преобразования шрифта через FontSquirrel или другой сторонний сервис, необходимо приложить оригинал шрифта.

Дизайн-макет можно дополнить любым материалом, который поможет объяснить задумку дизайнера.

Подготовка PSD-макета

Документ должен быть корректно оформлен, прост для понимания и удобен для работы. Ниже приведены достоинства и недостатки оформления документа.

Общий вид макета и перечень стилизуемых элементов

Макет должен иметь фиксированную ширину. Рекомендуемая ширина макета 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. Эти стили применяются последними, поэтому имеют приоритет “по порядку”.