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

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

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

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

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

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

Работа со слоями

+Слои имеют функциональное назначение, отраженное в названии.

+Слои разложены по папкам, которые также имеют функциональное назначение, отраженное в названии.

+Слои выровнены по сетке (например, по 12-колоночной сетке bootstrap).

-Повторяющееся название слоя или папки.

-Непоследовательное расположение слоев и папок.

-Блоки, выровненные по текстовым строчкам (для колонок).

Работа с текстом

+В названии обозначено семейство, размер, межстрочный интервал (прим. 'Заголовок Helv-14/1.6-b/i').

+Кратные размеры текста.

-Изменение размера межстрочного интервала в результате манипуляций на странице.

-Применены особые параметры сглаживания.

-Применены векторные преобразования.

Работа с фоном и изображениями

+Мощёные паттерны обладают корректной бесшовной структурой (слоем-образцом с незаметными стыками), либо приложены отдельно.

+Кратные двум размеры блоков и изображений.

-Чрезмерное обилие паттернов, без логической составляющей (не воспроизводимые по общим правилам).

-Наложенные поверх видимых функциональных элементов (например, дымка над всем макетом).

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

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