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

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

1. Изображения в формате .psd, оформленные согласно рекомендуемой структуре.
2. Демонстрационные изображения в формате .png. Можно использоваться и другие популярные форматы изображений, но они могут искажать цветопередачу.
3. Пояснительную записку для:
   • описания эффектов (в любой доступной дизайнеру формой: названием уже известных эффектов, ссылкой на ресурсы для примера, либо указанием на файл с анимацией в приложении);
   • указания используемых шрифтов в GoogleFonts (либо комплекта шрифтов в форматах  .ttf, .otf, .eot, .woff). В случае преобразования шрифта через FontSquirrel или другой сторонний сервис, необходимо приложить оригинал шрифта.

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

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

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

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

Макет должен иметь фиксированную ширину. Рекомендуемая ширина макета 970 px. Есть несколько «резиновых» областей: «слайдер», область «после слайдера», область «перед подвалом», технические области «перед шапкой» и «JavaScript». Все области можно использовать для дизайнерских решений. Боковые колонки «Слева от контента» и «Справа от контента» являются необязательными, их можно использовать в любых вариациях на разных страницах сайта. Содержание всех областей свободно редактируется и изменяется от страницы к странице, за исключением «шапки» и «подвала».

Общая структура шаблона

Формы, автоматически генерируемые таблицы, составленные формы, страница пользователя, страницы регистрации/авторизации и встроенные редакторы структурно не редактируются, но к ним применяются глобальные стили оформления полей ввода, кнопок, групп полей, лейблов, ссылок.

Структура макетов

Сервис Pixlpark имеет набор редактируемых страниц и редактируемых блоков, которые можно поместить на любую страницу сайта, а так же набор страниц и элементов, редактирование которых ограничено. Чтобы макет был наиболее приближен к реальному виду сайта, предполагается следующая структура исполнения макетов:

• Layout – неизменная часть сайта, включающая в себя оформление шапки, подвала и других постоянных элементов сайта. Для макетов других страниц слои шапки, подвала и других постоянных элементов можно "объеденить\Merge", чтобы не засорять макеты.
  Layout состоит из:
  1. Шапки, включающей в себя:
     • логотип;
     • область контактов – контент, расположенный между логотипом и пользовательской панелью. Обычно используется для краткого отображения контактных данных;
     • пользовательскую панель – область, не являющаяся редактируемой. Ее содержание нельзя изменять, а позиции внутри нее нельзя разбивать на части. При декорировании следует учитывать все используемые внутри нее элементы: иконки для «корзины», «заказов», «авторизации», «регистрации», «личного кабинета», «выхода», cчетчики товаров в корзине и произведенных заказов;
     • навигационную область – контент, расположенный после пользовательской панели. Обычно используется для меню сайта.
  2. Контента. Задача контентной части страницы – демонстрировать максимум типичного поведения элементов, чтобы использовать общие стили и для последующих страниц.
     В контентной части размещаются:
     • названия шрифтов, выполненные в своих гарнитурах (если шрифт не является читабельным, то используемые символы и его название в читаемом шрифте);
     • сетка используемых цветов — цвета в rgba (если цвет сливается с фоном, то текст пишется в контрастном цвете, а объект обрамляется контрастными границами);
     • заголовки с 1-го по 6-й уровень  (пример);
     • параграфы в виде «рыбного» текста (желательно на кириллице), содержащие в себе начертания и примеры:
       • жирного текста;
       • курсивного текста;
       • ссылок в тексте (с понятным различием между: ссылками на другие страницы и действиями на текущей, визуализацией посещенных ссылок и их поведением при наведении);
     • горизонтальная линия;
     • оформление таблиц:
       • отступы;
       • границы;
       • заливка;
       • заголовки;
       • простые ячейки;
     • элементы формы:
       • группы полей;
       • подписи полей ввода;
       • строчные поля ввода;
       • текстовые поля ввода;
       • оформление кнопок (статичное, при наведении/нажатии).
  3. Подвала, который является полностью редактируемой областью.
• 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. Эти стили применяются последними, поэтому имеют приоритет «по порядку».