Предыдущий

Следующий

Лонгрид урока

Дизайн сайта как сторителлинг

1.

Перед тем, как приступить к созданию концепции сайта, нужно ответить себе на три вопроса: что? зачем? и кому? О чём рассказывает этот сайт? Об услуге? О продукте? О человеке?

Для чего нужен этот сайт? Какоё у него целевое действие? Должен ли он информировать, продавать, конвертировать в подписку или переводить посетителя на другой ресурс?

Для кого создан этот сайт? Кто будет на него заходить? Школьники с мобильных телефонов? Занятые люди, которые закроют его, если он будет грузиться пять секунд?

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

Несмотря на то, что сейчас мы в основном говорим про функциональность дизайна, любой дизайн — прежде всего коммуникация (проектирование интерфейсов, впрочем, тоже). Задача веб-дизайнера — сообщить нужную информацию с учётом особенностей среды восприятия так, чтобы она была понята и усвоена.

Классическая модель коммуникации Шеннона-Уивера

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

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

Сейчас, когда инструменты создания сайтов легко доступны, а тренды распространяются со скоростью 5G, многие говорят о том, что интернет стал одинаковым. Сайты похожи друг на друга, одни и те же элементы, и приёмы дизайна можно увидеть у дизайнеров из Нью-Йорка, Шанхая или Саратова.
Если мы вернёмся к метафоре сторителлинга, то и здесь найдём сходство. Вообще, основных сюжетов историй насчитывают то ли 12, то ли 20, то есть совсем немного. И они одни и те же, что в мифах древних Майя, что в русских сказках, что в классической литературе, что в современных голливудских блокбастерах. Фильмы Marvel, например, тоже все похожи, причём как сюжетно, так и визуально, но решают поставленную задачу — повышают нам настроение и разгружают мозг. За это мы их и любим.

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

Статья про основы сторителлинга в UX

Статья про 10 правил сторителлинга

Книга сценариста Макки «История на миллион долларов»

Что почитать

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

2. Это не проектирование интерфейсов

Профессии веб-дизайнера и проектировщика интерфейсов сближаются, и это здорово, когда один человек может соединять в себе две функции. Об этом сейчас говорят примерно так же, как раньше говорили о том, что веб-дизайнеру нужно уметь верстать HTML/ CSS. Однако в реальности технологии No-code и Flowcode позволяют дизайнеру либо вообще не верстать и делать дизайн из блоков или верстать очень мало и методом копипаста.

С проектированием интерфейсов похожая история: простые проекты дизайнеры делают сами, основываясь на общих правилах, а сложные сайты и порталы отдаются проектировщикам. При этом общая тенденция — простое становится ещё проще, а сложное — ещё сложнее.

Вообще рекомендуем издательство A Book Apart

Если хочется закопаться в проектирование, то неплохая книжка про информационную архитектуру

Что такое информационная архитектура

Смешное объяснение UX / UI через Средневековье;

Что почитать

Когда вы начинаете работать с заказчиком над сайтом, то вам обязательно нужен бриф. В Nimax мы делаем бриф в красивой презентации, но вам это совершенно не обязательно — это может быть документ в формате Word или информация, собранная в имейле. Главное, чтобы вы с заказчиком оба видели этот документ и согласились с тем, что в нём зафиксировано и обозначено как цели, задачи, контекст и ожидаемый результат вашей работы. Если у вас не будет такого документа или вместо него будет десять голосовых в Телеграме, то при сдаче работы могут возникнуть недопонимания.

3. Структура брифа

Стандартная структура брифа выглядит следующим образом:

рынок (что вокруг?)

задача и проблема (зачем и почему?)

о компании / продукте (кто? что?)

преимущества (почему мы?)

целевая аудитория (для кого?)

суть бренда и характер (о чём мы?)

ценности (если есть, могут влиять на подачу)

задача на дизайн (и как со всем этим работать)

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

О продукте

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

Пример

Есть задачи сайта, а есть верхнеуровневая задача бизнеса клиента. Сначала нам нужно узнать у клиента, что происходит с его бизнесом и чего он хочет добиться. Иногда бывает так, что сайт ему и не нужен или что ожидаемый результат не может быть достигнут путём веб-дизайна.

В чём задача компании? Выходят ли на новые аудитории? Собираются ли делать суббренд? Может, наоборот, есть проблемы? Падают продажи? Стареет аудитория? Если бренд новый, то, соответственно, узнаём планы на ближайшие 1-3 года.
Важно зафиксировать эти бизнес-задачи и затем уже определить задачи сайта.

Обычно мы делим их на презентационные (сайт-визитка), информационные (рассказать о событии, афиша), сайты с целевым действием (оставить заявку, зарегистрироваться) и сложные по функционалу сайты (образовательные порталы, e-commerce). В зависимости от задачи вы определяете шаги, нужные в дизайне сайта.

Цели и задачи

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

Пример

Несмотря на то, что мы говорим о различиях между веб-дизайном и проектированием, в начале каждого проекта нужно узнавать и учитывать специфические, технические и не только ограничения заказчика. Например, клиенту нужна интеграция, место для которой нужно предусмотреть в меню. У клиента может быть служба безопасности с опредёленными требованиями. Наконец, у нас в Нимакс однажды был клиент, который не имел права предоставлять никакие изображения своей продукции. В таком случае мы задействовали градиенты и 3D.

Технические и прочие ограничения

Рынок, преимущества и целевая аудитория составляют треугольник контекста любого продукта или сервиса.

Рынок и конкуренты

Самый простой вариант работы с конкурентами — это визуальный анализ предложения. Вы составляете список продуктов/сервисов-конкурентов и анализируете, как выглядят их веб-сайты, приложения, соцсети и так далее, в зависимости от вашего проекта. Поскольку, вполне вероятно, что вместе с концепцией сайта вы делаете клиенту ещё и брендинг, то чем полнее вы рассмотрите визуальные характеристики и сообщения конкурентов, тем полезнее будет для вас этот анализ.
Конкурентов можно объединять в группы на основе: визуальных решений (цвет, стиль), месседжей, технических параметров (есть приложение/нет приложения) и так далее. Если вы объедините их в группы, вам затем будет удобнее работать с этой информацией.

После того, как вы изучили и систематизировали конкурентов, вам нужно понять, как от них отстроиться. Анализ рынка поможет вам понять, в какую сторону идти. Не во всех сферах можно радикально отстраиваться от конкурентов. В консервативных областях, таких как недвижимость или банки, а иногда и IT, узнавание принадлежности к сфере может быть важнее, чем яркая индивидуальность бренда.

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

Пример

Пытаемся понять, почему люди покупают этот продукт или услугу. Основное преимущество, как правило, оказывает влияние на визуал.
Наш сервис самый быстрый? — Дизайн не должен быть тяжеловесным.
Наш банк самый надежный? — Так давайте уберём этот красный!
Не всегда продукт, с которым вы работаете, будет действительно разительно отличаться к лучшему от конкурентов. Иногда продукт может быть таким же, как остальные, и клиент хочет, чтобы его главным преимуществом был ваш дизайн. В этом случае как раз оригинальность решений выходит на передний план.

Преимущества

Рассмотрим кейс сайта юридической компании Versus.legal для GameDev. Главным преимуществом клиента в этом случае является включённость в геймдев-сообщество и понимание, как юридической, так и внутренней машинерии игровой индустрии. Мы выбрали показать это не текстом («мы знаем, как работает игровая компания» и т.д.), а визуалом и использованием игровых элементов. Такой подход работает как непосредственное доказательство — мы не просто декларируем своё качество, а проявляем его. Так, одни компании говорят, что они экологичные, а другие используют переработанные материалы и уменьшают количество упаковки. Доверия обычно больше вторым.

Пример

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

Диджитал-привычки — это то, как эти люди потребляют информацию в интернете. Если мы делаем сайт для молодых людей, то точно знаем, что заходить на него они будут со смартфона, и адаптив для нас жизненно важен. Если мы делаем сайт для банка со взрослой аудиторией, то открывать и внимательно читать они скорее будут с компьютера, потому что дело серьёзное… Хорошо понимать, смотрит ли ваша аудитория видео, нужен ли ей звук и так далее. Формы обратной связи также должны быть привязаны к диджитал-привычкам. Например, в России людям удобнее получать информацию в мессенджерах, а в США клиенты предпочитают заказывать обратный звонок.

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

Целевая аудитория

Визуальная культура аудитории определяет, понравится ли ей то, что она увидит на вашем сайте. Конечно, «СберБанком» и ebay люди пользуются вне зависимости от их внешнего вида, но это скорее исключение. Поскольку в нашей культуре предложение давно превышает спрос, то внешний вид и соответствие ценностям аудитории становятся важными факторами выбора. Например, насколько бы не было удивительным появление Моргенштерна в «Альфа-банке», маркетологи говорят, что компания была эффективна, причём среди всех возрастов аудитории.

Социально-демографические параметры — с этого обычно начинают описывать аудиторию, но сейчас возраст, место проживания и высшее образование человека почти ничего не значат. У них есть некоторый статистический вес, например, обзаводиться семьями в России стали позднее, поэтому аудитория до 25 лет не будет у нас ведущей, если мы продаём детское питание (Росстат говорит, что в среднем рожают в 26). Однако важнее образ жизни, культурные привычки и социальные группы, к которым принадлежит человек.

Вернёмся к нашей диджитал-школе. Здесь важна ситуация, в которой находится наша целевая аудитория. Это люди любого возраста, которые хотят поменять профессию на более современную. Таким образом, нам нужно одновременно им показать, что мы современные, но не отпугнуть, и сделать это понятно и располагающе. При этом возраст или место жительства потенциального студента совершенно не важны. Так, школа похожего профиля Яндекс Практикум пишет: «среди наших студентов есть водитель "Яндекс.Такси", ветеринар, менеджер "Макдональдса", священник. Ничего общего, кроме желания получить новую профессию, у них нет».

Пример

Эта часть будет у вас не всегда. Особенно если вы работаете на фрилансе или с небольшими клиентами.
Эта часть стратегии отвечает на вопрос: каким человеком был бы наш бренд?
Молодым, старым, весёлым или серьёзным?
Кто он? Помощник нашей ЦА? Учитель? Друг?
Характер бренда имеет прямое влияние на дизайн: онлайн-школа может быть и очень серьёзной, и развесёлой, и даже анархической. Это зависит от её стратегии и позиционирования на рынке.

Суть бренда и его характер

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

Пример

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

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

Ценности

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

Креативная задача

специфика аудитории: что ей нравится и что нет

преемственность: плюсы и минусы существующего стиля

do's & dont's

предпочтения заказчика

приоритеты по носителям и форматам: диджитал мы или нет

любая другая информация, которая кажется вам важной

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

В конечном счёте, дизайну, как и всему остальному, по-настоящему учит только опыт и сделанные проекты. А ещё общение с коллегами и фидбек от клиента. И собственные ошибки. Про пользу ошибок написано много, и почти всё правда. Без них действительно невозможно развитие и рост, ни профессиональный, ни личный.

Поэтому растите и делайте ошибки.

4. Практика

Ольга Якушенко, бренд-стратег Nimax

Спикер:

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

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

Домашнее задание

Материалы урока

Шаблон домашнего задания

Презентация урока

Учебный бриф

Предыдущий

Следующий

Что еще посмотреть

Где нас найти