Развитие идеи в вебе
Урок 7
Лонгрид урока
Сложно представить продукт, который живет отдельно от диджитала. Даже компании, которые продают фермерские «счастливые яйца» заботятся о создании эмоциональной связи с пользователем с помощью сайта. Поэтому в этом уроке мы разберемся, как развивать айдентику в вебе.
1. Принадлежность бренду
При создании айдентики мы обязательно должны учесть ее дальнейшее использование на сайте и в приложении — в зависимости от специфики клиента. Основная задача дизайн-концепции сайта — сохранить визуальную принадлежность бренду. Проверить это очень просто. Закрываем логотип и название сайта — пытаемся угадать, какой компании он принадлежит.
Закрывая лого и название, все же, понимаем, что это сайт The New York Times — благодаря шрифтам, линиям и журнальной верстке
2. Типы сайтов и их задачи
Лендинг
Одностраничный сайт с формами обратной связи или заявки.
Цель — сбор заявок.
Промо-сайты
История бренда, презентация продукта, услуги, рассказ о команде. Чаще всего это креативные решения с анимацией.
Цель — эмоции, желание поделиться сайтом.
Корпоративные сайты
Многостраничные сайты о компании, могут содержать блог, новости, отдельные страницы с услугами компании. Дают всю необходимую информацию о компании.
Цель — презентация компании, информирование.
E-commerce
Каталоги и интернет-магазины.
Цель — презентация компании, информирование.
Сервисы
Сайты-инструменты. Например: личный кабинет, редактор, CRM-система и т. д.
3. Структура сайта
Чаще всего веб-дизайнер работает с готовым прототипом от информационного архитектора и копирайтера. Прототип состоит из структуры страницы и контента. Но если на этапе создания концепции этих материалов нет, то можно взять за основу какой-нибудь распространенный пример, подходящий под вашу задачу.
Всплывающие окна (pop-up)
Тело сайта (основной контент)
Шапка сайта с навигацией
Составляющие страницы сайта:
Подвал
4. Последовательность восприятия
Основным отличием макета сайта от макета офлайнового носителя является размер и способ восприятия информации.
Как правило, в офлайне мы имеем дело с небольшими макетами, которые можем охватить взглядом сразу же. В случае с сайтом пользователь воспринимает информацию постепенно, посредством скролла, свайпа или навигации.
Размер
Контраст может быть выражен с помощью размера объекта. Чем больше объект, тем сильнее он привлекает внимание.
Цвет
С помощью цвета и оттенка можно визуально отделить один объект от остальных. Чем ярче цвет — тем больше внимания. Акцентными цветами выделяют приоритетные блоки, кнопки, факты.
Воздух
С помощью воздуха создаем смысловые блоки. Объекты, связанные по смыслу, находятся ближе друг к другу. Подробнее про теорию близости.
Сложность формы
Чем сложнее форма, тем она контрастнее, чем контрастнее — тем более заметна. Много сложных форм рядом вызывают слишком большое напряжение для пользователя. Поэтому выделяем только самое главное.
Достаточно выделить объект одним из способов или комбинировать в рамках концепции. Необязательно делать заголовок крупным, красным и подчеркнутым, чтобы на него обратили внимание. Чем больше контрастов, тем больше внимания мы требуем от пользователя. Чем больше пользователь напряжен, тем быстрее он покинет сайт.
Смысловые блоки условно отмечены серыми прямоугольниками. Заголовок — больше.
Благодаря воздуху услуги воспринимаются как один цельный блок. Кнопка обращает на себя внимание с помощью цвета. Смотрите, как все элементы работают в полной концепции сайта ClubZigzag.
Композиция
При создании концепции сайта нужно постараться не перегружать пользователя, позволить ему быстро и удобно получить нужную информацию, показать ему правильные акценты (то есть, отделить главное от второстепенного) и при этом вызвать у него приятные ощущения от взаимодействия. Последнее особенно важно, т. к. количество сайтов растет, и к обезличенным интерфейсам быстро теряется интерес.
Композиционное решение на главной странице должно наследоваться остальными страницами. А композиционное решение главного блока — поддерживаться другими блоками. Все должно быть в едином стиле, в единой рифме.
5. Цветовая схема
Часто при отрисовке концепции сайта возникает необходимость в расширении основной фирменной палитры. Веб подразумевает динамику, а элементы сайта — различные состояния. Добавляйте оттенки основных цветов с учетом задач, которые они будут выполнять. Например, более светлый оттенок красного — для кнопки при наведении курсора.
Дополнительные цвета на примере сайта ClubZigzag. Основной фирменный красный дополнили оттенками черного, серого и красного
6. Типографика
Проверьте имеющиеся шрифты на читабельность в различных кеглях. Акцидентные шрифты умеренно используем в заголовках, для основного текста применяем наборные шрифты. Если заголовки предполагаются длинными, то также проверьте заголовочный шрифт на читабельность. Помните, что основная задача — читабельность и простота. Если шрифт вызывает дискомфорт при чтении текста большого объема — подбирайте другие созвучные с фирменным стилем шрифты.
Шрифт для заголовков и основного текста Zigzag + декоративные цифры в стилистике фирменного стиля
Элементы и смысл
Элементы с одним и тем же смыслом должны иметь одинаковую стилистику. Это упрощает взаимодействие с сайтом, делает его логичным. Например, если кнопки на сайте имеют закругленные углы и определенные внутренние отступы, то эти свойства переносим на остальные кнопки. То же касается текстовых стилей, расстояний между блоками и т. д.
7. Баланс и масштабирование
Нередко встречаются две крайности.
Веб-дизайнер пытается на каждом блоке и объекте показать фирменный идентификатор. В результате, страница получается перегруженной, пользователь напрягается, усложняется восприятие и исчезает иерархия.
1 крайность
Веб-дизайнер рисует главную страницу или блок в соответствии с брендом и забывает про остальные страницы или блоки. Это приводит к обезличиванию внутренних страниц либо отсутствию интереса к остальной части страницы.
2 крайность
Как нужно?
Не ограничивайтесь одной лишь базовой формой идентификатора, определите логику и правила его трансформации в вебе и используйте эти правила в разных частях сайта для одновременного поддержания как вариативности, так и цельности.
Недостаточно показать идентификатор только на главном блоке. Например, если это 3D-иллюстрация, то в других блоках также должны присутствовать подобные объекты либо части большой иллюстрации.
К примеру, на сайте Nimax Services основным идентификатором является анимированная 3D-композиция. Мы показываем ее в первом экране целиком, а в остальных блоках используем небольшие детали.
Сайт Nimax Services
Домашнее задание
Соберите главную страницу сайта на основе готового прототипа. Сохраните и раскройте айдентику в интерфейсе. Допускается отклонение от прототипа, если он ограничивает идею.
Отрисуйте макет в любом удобной конструкторе и редакторе (Tilda, Readymag, Figma).
Аша Саакян, ex-арт-директор Nimax UX/UI
Спикер:
