запомнить Регистрация +

Чек-лист на дизайн сайта

Данный документ должен учитываться дизайнером при работе над дизайном сайта. Приём работ происходит по этому чек-листу.

Предполагается, что работа над дизайном ведётся на основании как минимум анкеты-ТЗ на дизайн сайта, предоставленной нашей студией. В противном случае перед началом работ над дизайном стороннее ТЗ должно быть обсуждено с представителями нашей студии.

Все требования чек-листа обязательны за исключением пунктов, выделенных блеклым цветом, которые носят рекомендательный характер. Также, приоритетом перед этим документом обладают ТЗ на сайт и ТЗ на дизайн сайта, но лишь в том случае, если ТЗ составлены нашей студией или при её участии.

Условные обозначения

  • ТЗ — техническое задание на дизайн сайта
  • ШС — шаблон страниц
  • ОО — область отображения
  • ФБ — функциональный блок

  1. Общие требования к макету дизайна сайта

    1. Дизайн сайта передаётся на вёрстку шаблонов страниц в виде файла формата PSD или XCF и файла формата PNG.

    2. Все элементы дизайна сайта должны быть предоставлены в PSD- или XCF-файле на отдельных понятно названных по-русски слоях, логически объединённых в понятно названные по-русски группы. Например: слои «Форма поиска» и «Кнопка поиска» объединены в группу «Поиск», которая вместе со слоями «Логотип» и «Слоган» объединена в группу «Шапка».

    3. Макеты дизайна главной и внутренних страниц сайта, если они отличаются друг от друга, предоставляются в одном PSD- или XCF-файле, размещённые в отдельных понятно названных по-русски группах. Так же должны быть предоставлены варианты страниц, отличающихся друг от друга наличием и расположением элементов — блоков, колонок и пр.

    4. Все «невидимые» (отключенные) слои в PSD- или XCF-файле верстальщиком игнорируются.

    5. В PSD- или XCF-файле результаты работы всех нестандартных для программ “Adobe Photoshop” или “GIMP” стилей, фильтров, режимов наложения, скриптов и т.п. должны быть «сведены» в отдельные обычные слои.

    6. Ширина макета дизайна не должна быть больше заявленной минимальной ширины страниц сайта.

  2. Требования к дизайну элементов страниц сайта

    1. В макете дизайна должны быть представлены все элементы, указанные в ТЗ — навигаторы, формы, текстовые области, тематические картинки, пиктограммы и пр. В том числе стоит обратить внимание на следующее:

      • Дополнительная навигация. Ссылки на некоторые служебные страницы, не входящие, как правило, в основную карту сайта. Например: «Личный кабинет, RSS, Прайс, Карта сайта, Контакты, Написать письмо»). Могут быть в виде пиктограмм. Из них рекомендуется предусмотреть по крайней мере «Личный кабинет», «RSS», «Карту сайта» и «Написать письмо», поскольку соответствующие страницы при всей своей важности, как правило, труднодоступны из основной навигации по сайту.

      • Путь по сайту (Главная страница ▸ Продукция ▸ Люстры). Нужно учитывать, что он может быть довольно длинным.

      • «Подвал» с контактной и правовой информацией, кнопкой техподдержки студии, местом для счётчиков и т.п.

    2. В макете дизайна должны быть представлены как минимум первые три уровня основного навигатора и карты сайта. Остальные уровни, если их внешний вид не представлен в макете дизайна, будут смотреться так же, как и третий уровень с увеличенным отступом слева.

    3. Для каждого уровня навигации можно предусмотреть свой стиль — для активных и неактивных разделов, но важно, чтобы это были одинаковые стили для всех пунктов навигации данного уровня. То же верно и для карты сайта.

    4. Все элементы навигации должны быть доступны пользователю на каждой странице сайта.

    5. Высоту шапки для внутренних страниц информационного сайта желательно делать не более 300 пикселей.

    6. Все тексты на сайте обязаны хорошо читаться и на плохо настроенном мониторе. Рекомендация по кеглю шрифтов для обычного текста — от 13 пикселей.

    7. Если это не указано в ТЗ на дизайн сайта явно, для информационных сайтов предпочтительно использовать тёмный шрифт на светлом фоне. Для сайтов, больше ориентированных на дизайн, чем на информационное наполнение, допустимо использование светлого шрифта на тёмном фоне.

    8. Для всех текстов на сайте, кроме тех, что будут представлены в виде графики, рекомендуется использовать только стандартные шрифты. Но в случае взаимного согласия заказчика и разработчика дизайна сайта допускается использование нестандартных шрифтов. В случае использования нестандартных шрифтов и вёрстки шаблонов страниц студией “Scrofa Tridens” эти шрифты должны быть переданы вместе с макетом дизайна сайта.

    9. Текст, который должен быть представлен на сайте в виде графики, в макете дизайна должен быть переведён в растр. Текст, который должен быть представлен на сайте в виде текста, должен быть оставлен в макете дизайна текстом.

    10. В макете дизайна необходимо обозначить внешний вид всех типов ссылок:

      • Обычная ссылка
      • Активная ссылка
      • Ссылка посещённой страницы
      • Ссылка при наведении курсора мыши
      • Ссылка в фокусе

    11. Внешний вид всех типов ссылок должен отличаться от внешнего вида всех других элементов сайта (заголовков, текста, выделенного полужирным, и пр.) цветом и/или подчёркиванием.

    12. Назначение пиктограмм («иконок») должно быть интуитивно понятно посетителю сайта.

    13. В основном навигационном меню используются исключительно текстовые ссылки. При необходимости дополнительно можно использовать тематические картинки к разделам с жёстко прописанными адресами этих страниц. Так же, исключительно текстом, должны быть представлены все заголовки всех уровней. Желательно так же — название сайта, слоган, контактная информация и т.д. В идеале — весь текст должен быть текстом, а не графикой.

    14. Меню основной навигации стоит располагать в верхней и нижней части страницы, если в ТЗ не оговорено другое.

    15. Пункт меню навигации может быть достаточно длинным (состоящим из многих и/или длинных слов). Также, само меню навигации может содержать произвольное количество пунктов. Необходимо учитывать это при разработке дизайна сайта.

  3. Замечания по компоновке страниц сайта

    1. Специфика движка сайта предполагает следующую иерархию расположения информации (контента) на страницах сайта, что должно учитываться при разработке дизайна:

      1. На сайте может быть несколько шаблонов страниц (ШС), отличающихся по внутреннему иерархическому строению. Например, в одном шаблоне должно быть три колонки с текстом, шапка должна быть большой и содержать контактную информацию, форму авторизации и т.д. А в другом шаблоне в шапке должен быть лишь логотип со слоганом, поиском и дополнительной навигацией, в то время как форма авторизации должна находиться в левой колонке, а правой колонки быть не должно вообще.

      2. Каждый ШС (тип страницы) содержит несколько областей отображения (ОО) контента. Как правило, основных ОО три (но теоретически может быть неограниченно много) — левая с навигацией и второстепенными информационными блоками, центральная с основным наполнением и правая с различными информационными врезками, например, комментариями по основному наполнению, лентой новостей и пр. Часто правую область(-ти) имеет смысл сделать в виде обтекаемого(-ых) основным текстом блока(-ов) вместо реализации полной колонкой.

      3. Каждая из ОО содержит несколько функциональных блоков (т.н. функций, ФБ), представляющих собой тот или иной вид контента — обычный текст, ленту новостей, фотоальбом, каталог товаров, анкету, опрос и пр. В одной и той же ОО может быть по единственному экземпляру той или иной функции. Например, в левой ОО могут быть представлены один блок с текстом, одна лента новостей и один фотоальбом.

      4. Каждый из ФБ содержит в себе несколько объектов своих функций. Например, блок с лентой новостей содержит несколько новостей с датой, названием-ссылкой и анонсом, блок с текстом может содержать несколько разных объектов текста (хоть это и не столь очевидно внешне), блок с фотоальбомом содержит в себе несколько фотографий с названиями, описанием и пр.

    2. Для страниц сайта с требовательным к ширине страницы контентом (таблица товаров и т.п.) следует предусмотреть отсутствие правой(-ых) ОО.

    3. Создавая узкие ОО, важно помнить, что бывают длинные слова или слишком широкие баннеры и таблицы, которые будут не укладываться в отведённое для них место.

    4. ФБ желательно визуально выделять в дизайне сайта для лучшего восприятия информации — фоном, рамкой или какими-либо графическими элементами (в основном это касается ФБ слева и справа).

    5. ФБ, как правило, имеет заголовок, а многие объекты ФБ — изображение вначале. Нужно предусмотреть для них место.

    6. Создавая макет дизайна страницы, важно помнить, что никто не помешает заказчику ввести в любую ОО и ФБ произвольное количество информации. Т.е., высота (а часто и ширина) любого ОО и ФБ непредсказуемы. Дизайн это должен учитывать.

  4. Требования к оформлению контента

    В макете дизайна необходимо предусмотреть внешний вид всех элементов контента — заголовков разных уровней, абзацев, ссылок, списков, таблиц, всех элементов форм и пр. Если в макете дизайна не присутствует тот или иной элемент контента, и вёрстка шаблонов страниц выполняется студией “Scrofa Tridens”, внешний вид этих элементов оставляется на усмотрение студии, и претензии к нему от заказчика не принимаются. Элементы контента имеет смысл представить в ФБ следующих типов:

    1. Текст со следующими элементами:

      • Заголовки всех, с первого по шестой, уровней
      • Абзацы
      • Таблица с заголовками
      • Картинка
      • Нумерованный и ненумерованный списки

    2. Новости с датой, заголовком, анонсом и картинкой:

      • ФБ с горячими новостями (боковая ОО)
      • Основной ФБ с новостями в центральной ОО

    3. Подробный просмотр новости (дата, заголовок, картинка, текст новости, автор, ссылка на источник)

    4. Форма ввода со следующими элементами:

      • Поле ввода
      • Флаг
      • Переключатель
      • Многострочное поле ввода
      • Выпадающий список
      • Обычная кнопка

    5. Фотоальбом с картинкой, названием, описанием, автором, ссылкой на источник и флагом «Проголосовать» в каждом из как минимум двух представленных объектов

    6. Голосование

    7. Гостевая книга

    8. Все остальные ФБ, указанные в ТЗ на сайт и имеющие индивидуальный дизайн

  5. Предоставляемые материалы

    Если вёрстка шаблонов страниц осуществляется студией “Scrofa Tridens”, по окончании работы над дизайном должно быть передано следующее:

    1. PSD- или XCF-файл макета дизайна и, для сверки, PNG-файл макета дизайна.

    2. Исходники в векторном виде всех изначально векторных графических элементов (логотипы, 3D-модели, пиктограммы и пр.), использующихся в дизайне сайта.

    3. Сопроводительный текстовый документ, в котором должно быть чётко описано следующее:

      1. Растягиваемость сайта — должен ли сайт иметь фиксированную ширину, или быть растягиваемым (растягиваться на всю ширину окна браузера при изменении его размеров или разрешения монитора).

      2. В случае растягиваемого сайта — минимальная и максимальная ширина страниц сайта, а также алгоритмы и нюансы поведения всех элементов дизайна при изменении ширины страницы (размеров окна браузера): относительная (или абсолютная) ширина областей отображения, относительные позиции других элементов страницы и т.д.

      3. Список всех использующихся в дизайне сайта шрифтов.