Рекомендации по разработке дизайн-макета

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

  1. Изображения в формате PSD, оформленные согласно рекомендуемой структуре.
  2. Демонстрационные изображения в формате PNG. Можно использоваться и другие популярные форматы изображений, но они могут искажать цветопередачу.
  3. Пояснительную записку для:
    1. описания эффектов (в любой доступной дизайнеру формой: названием уже известных эффектов, ссылкой на ресурсы для примера, либо указанием на файл с анимацией в приложении);
    2. указания используемых шрифтов в 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. Эти стили применяются последними, поэтому имеют приоритет “по порядку”.

Add Feedback