Требования к дизайну при создании сайта

Стандартные требования к Дизайнеру при проведении им работ по разработке дизайна сайта

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

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

Все требования обязательны за исключением пунктов ( подпунктов 5, 6, 7, пункта 2; и подпункта 4 в третьем пункте), которые носят рекомендательный характер. Также, приоритетом перед этим документом обладают ТЗ на сайт. ( Здесь и далее под ТЗ понимают — техническое задание на создание сайта )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    6. Все тексты на сайте обязаны хорошо читаться и на плохо настроенном мониторе. Рекомендация по шрифтам для обычного текста — “Verdana”, 11-13 пикселей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      • Блок с последними новостями (боковая панель)
      • Основной блок с новостями в центральной области отображения

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

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

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

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

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

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

    8. Все остальные функциональные блоки, указанные в ТЗ на сайт и имеющие индивидуальный дизайн ( Каталог, галерея, Интернет магазин, карта и т.д.)

  6. 5. Предоставляемые, по окончании работ, материалы

    По окончании работ над дизайном должно быть передано следующее:

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

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

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

      • Адаптивность сайта — должен ли сайт иметь фиксированную ширину, или быть "резиновым" (растягиваться на всю ширину окна браузера при изменении его размеров или разрешения монитора).
        И что очень важно, после внедрения поисковыми системами требования "mobile First", это новые требования по адаптивности сайтов для всех устройств ( Десктопов, планшетов, смартфонов ).  
         

      • В случае растягиваемого сайта — минимальная и максимальная ширина страниц сайта, а также алгоритмы и нюансы поведения всех элементов дизайна при изменении ширины страницы (размеров окна браузера): относительная (или абсолютная) ширина областей отображения, относительные позиции других элементов страницы и т.д. Поэтому, для удобства восприятия информации, и принципов движения функциональных элементов сайта, делаются 2-4 варианта дизайна: для узкого и широкого мониторов, планшета, мобильного телефона, используя уже стандартизованные размеры при адаптивном (responsive) дизайне
        480px
        768px
        992px
        1200px
         

      • Список всех использующихся в дизайне сайта шрифтов.
 
Задержки индексирования или эффект песочницы для новых сайтов Почему не хотим работать? Для желающих открыть новый бизнес

Наиболее популярные статьи, материалы на нашем сайте


продвижение сайтов