Разработка дизайна сайта

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

Проектирование сайта и разработка прототипа

Всегда разработка сайта начинается с разработки прототипов и технического задания. О премудростях написания технического задания для разрабатываемого сайта мы подробно рассказываем в статье “Техническое задание на разработку сайта”.

Итак, что же такое прототип сайта? В первую очередь это схематичное изображение всех типовых страниц сайта. Для блоков страниц при этом рекомендуется использовать “реальный контент”, именно тот, который будет в итоге использоваться на страницах сайта. При разработке прототипа следует отказаться от любых использований стилей и оформления. Это делается не потому, что у проектировщиков отсутствует чувство прекрасного, и они не в состоянии хоть немного добавить красоты. Дело в том, что при использовании стилей в прототипе дизайнеру будет сложно не обращая на оформление прототипа внимания, разработать концепцию сайта. Это безусловно приведет к ухудшению качества разрабатываемого дизайна.

В прототипе задаются основные параметры страниц будущего сайта, такие как количество колонок, разрешение рабочей зоны и количество перестроений адаптивной версии. Про перестроения и адаптивную версию стоит поговорить отдельно.

Адаптивные сайты всегда разрабатывают под определенное количество перестроений макета, например если большая часть целевой аудитории сайта использует для просмотра сайта ноутбуки, ПК и смартфоны, то нет смысла разрабатывать отдельные интерфейсы, для аудитории пользующейся планшетами и смарт телевизорами. При этом не стоит думать, что этими пользователями пренебрегают и сайты на их устройствах будут плохо выглядеть. Дело в том, что они будут видеть самое близкое к ним по размеру перестроение, например на планшете в горизонтальном положении будет показан дизайн, как на ноутбуке, а на планшете в вертикальном положении - расположение блоков макета, как на смартфоне. Точки перестроения называются brake point (англ. - точка перелома, точка изменения).

С точки зрения структурного построения страниц существует ряд современных тенденций:

• Фиксированная центральная колонка
• Закрепленная боковая навигация
• Колонки с разной длинной
• Горизонтальный скролл 

О каждом из них читайте в нашем материале: “Структура и проектирование страниц сайта”

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

Имея на руках готовый набор прототипов и структуру сайта, дизайнер приступает к разработке концепции дизайна. В некоторых случаях дизайнеру приходится разрабатывать концепцию, что называется с нуля, имея только пожелания заказчика по цветам и шрифтам. Конечно в этом нет ничего криминального, но разработка дизайна сайта будет проходить гораздо эффективнее, если у дизайнера будет профессионально разработанный фирменный стиль и brand-book. Это позволит ему использовать не абстрактные, придуманные им лично стили, а именно те, которые использует ваша компания в печатной и рекламной продукции. Правила использования логотипа позволят web-дизайнеру точно передать стиль компании и задать правильное направление всему стилю сайта.

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

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

Современный сайт уже сложно представить без адаптированной под мобильные устройства версии, именно поэтому концепция должна разрабатываться и утверждаться под все типы устройстройств, на которых планируется корректное использование сайта.

Во все времена, есть определенные тенденции, в которых работают дизайнеры. На данный момент есть ряд современных направлений, которые безусловно нельзя оставить без внимания.

• Material дизайн
• Flat дизайн
• Minimalism
• Скевомофизм
• Metro стиль

О каждом из этих направлений мы довольно подробно написали соответствующий материал на нашем сайте: “Тенденции современного web-дизайна”

Разработка дизайна типовых страниц сайта

После утверждения концепции дизайна, разрабатываются дизайны всех типовых страниц. Для того, чтобы оценивать эту работу не с точки зрения “нравится-не нравится”, а с пониманием эффективности того или иного дизайнерского решения стоит разобраться с двумя составляющими любого успешного web-дизайна, а именно UI и UX.

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

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

UX - пользовательский опыт. Проще говоря, это набор данных, о том, как пользователи воспринимают интерфейс сайт, насколько активно с ним взаимодействуют и насколько быстро достигают целевых действий. Эти данные невозможно получить, без привлечения реальных посетителей на сайт. К сожалению разработка сайта и его последующее тестирование и отладка на основе данных о реальном поведении пользователей - не всегда по карману средней компании, заказавшей разработку сайта. В таком случае используются имеющиеся данные о действующем сайте компании и сайт проектируется именно таким образом, чтобы улучшить все показатели пользовательской аудитории.

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

При поэтапном запуске проекта появляется невероятная гибкость, позволяющая вносить корректировки в интерфейс сайта не подвергая переработке все системы сайта. Проиллюстрируем это примером:

 Допустим мы запустили ядро сайта состоящее из нескольких текстовых страниц, каталога на 100-200 товаров и пары форм обратной связи. Через несколько дней стало очевидно, что пользователи попадающие на карточку товара не доходят до совершения покупки. В этом случае переработка карточки, не нагруженной различными дополнительными модулями - вопрос нескольких рабочих дней. В случае когда большой проект, запущенный на боевую не дает необходимого результата усложняется процесс аналитики, а переработка элементов в рамках расширенного функционала - становится настоящим наказанием для разработчиков и мучением для заказчика.

Разработка дизайна для динамических элементов сайта 

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

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

Нас часто просят разработать для сайта форму или калькулятор, состоящие из 20-30 полей для заполнения. При проектировании таких систем вы должны четко понимать, что пользователь взаимодействующий с ними не прикован к монитору и не обязан заполнять такое большое количество полей. Что-то должно его заставлять и подстегивать к этому действию, поэтому в первую очередь стоит продумать его мотивацию и произвести простой замер: сколько времени уйдет у Вас на заполнение данной формы. При этом у пользователя Вашего сайта уйдет на это в среднем в 3 раза больше времени. На сайтах, на которых среднее время посещения составляет 2-3 минуты, форма должна заполняться не более чем за 20-30 секунд, а значит она должна быть достаточно очевидной и простой.

Кросплатфоменность

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

Подготовка макетов к верстке 

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

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

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

Каждый макет сопровождается папкой с используемыми на нем элементами: картинками, иконками, и проч.

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

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