Создание нового сайта или редизайн старого — это всегда длительный процесс в несколько этапов с активным участием и исполнителя, и заказчика. В этой статье мы расскажем, с какими этапами и терминами вы столкнетесь в ходе этой работы.
Переговоры
Первый этап работы над проектом нового сайта — переговоры клиента с командой веб-студии или веб-дизайнером. На данном этапе важно определить цели и задачи работы, и вот с какими этапами вы столкнетесь.
Бриф
Бриф — это нечто вроде опросника или анкеты, который заполняет клиент. В нём он рассказывает о задачах проекта, раскрывает позиционирование бренда, высказывает пожелания к конечному результату. В рамках брифа клиента могут попросить указать референсы — образцы сайтов, которые нравятся или не нравятся. При этом не существует универсального шаблона брифа, у каждой веб-студии или у каждого дизайнера он свой и иногда даже разрабатывается индивидуально под клиента. При этом суть у такого опросника одна: собрать по-максимуму информации с заказчика, которая потом пригодится в работе.
Брифинг
Брифинг — это встреча или совещание заказчика и исполнителя. Если в брифе цели и задачи проекта озвучиваются, то во время брифинга они детально обсуждаются. Личная встреча — важный этап взаимодействия с клиентом, который помогает уточнить детали и раскрыть нюансы предстоящей работы. Качественный брифинг всегда позволяет узнать проект глубже, посвятить клиента в тонкости работы, а также установить живой доверительный контакт.
Референс
Референсы — это примеры того, на что следует ориентироваться при создании новой концепции дизайна. Например, через референсы клиент может показать то, что ему нравится. Дизайнер будет учитывать стилистику, настроение или технические фишки образцов при создании нового сайта. Кроме того, референсы можно использовать как способ дистанцироваться от конкурентов. Например, можно выявить, что среди конкурентов преобладают определённый стиль или цвета. Можно сыграть на том, что вы будете абсолютно не похожими на них, уникальными и от этого — узнаваемыми.
Целевая аудитория
Целевая аудитория — это аудитория, для которой работает бизнес. От того, насколько хорошо вы понимаете характер и потребности вашей ЦА, зависит успех продвижения бренда. Знания о целевой аудитории нужны в том числе при создании визуального позиционирования и при проектировании интерфейсов.
Важная черта любой ЦА — её неоднородность. Люди разные и это нужно помнить, даже если ваш продукт или услуга решает одну задачу. Поэтому существуют портреты целевой аудитории — так называемые сегменты, в которые вы объединяете людей с общими чертами. Чем лучше у вас проработаны такие портреты, тем более точечно вы можете взаимодействовать с целевой аудиторией, говоря на одном языке с каждым её представителем.
Способов разработки портретов целевой аудитории несколько:
- Аналитика существующих клиентов: их социально-демографические признаки, предпочтения по продуктам/услугам, опросы по интересам.
- Исследования и опросы клиентов конкурентов.
- Работа с фокус-группами.
- Массовые опросы и исследования потенциальной целевой аудитории.
Примеры того, как могут выглядеть готовые портреты ЦА.
Покупательница хенд-мейд украшений с индивидуальным дизайном
- Светлана, 26 лет.
- Место проживания: Москва.
- Семейное положение: замужем, детей нет
- Сфера занятости и уровень зарплаты: бухгалтер, 50 тысяч рублей.
- Получает юридическое образование заочно.
- Потребности, желания, страхи: Светлане хочется выделяться, иметь красивые украшения и вещи. Но вместе с тем она не желает терять индивидуальность, поэтому приобретает бижутерию ручной работы, сделанную на заказ. Ей нравится то, что изделия существуют только в одном экземпляре.
Студентка онлайн-курса по интернет-маркетингу
- Екатерина, 29 лет.
- Место проживания: Екатеринбург.
- Семейное положение: не замужем, без детей.
- Кем работает, уровень зарплаты: учитель английского, 35 тысяч рублей.
- Потребности, желания, страхи: Екатерина хочет сменить сферу деятельности, мечтает о работе интернет-маркетологом. Екатерина обеспечивает себя сама, вынуждена совмещать работу и обучение новой профессии и очень ценит возможность проходить курс дистанционно с гибким графиком.
Уникальное торговое предложение
УТП — это неповторимая ценность, которую вы дарите своим клиентам. Это та выгода, которую они могут получить только у вас и ни у кого больше. В создании убойного УТП помогает отличное знание целевой аудитории, анализ конкурентов, SWOT-анализ бизнеса и другие исследования.
Пример неудачного УТП, например, для интернет-магазина ювелирных изделий: «бесплатная доставка при заказе от 5000 рублей». Казалось бы, есть выгода: бесплатная доставка. Однако покупатели ниже указанного ценника чувствуют себя обделёнными.
Пример удачного УТП Domino`s Pizza: «получите свежую горячую пиццу в течение 30 минут или бесплатно».
Проектирование
Следующий этап после переговоров — проектирования будущего сайта. Разберёмся в основных понятиях.
Предпроектный анализ
Включает в себя:
- Анализ посетителей сайта (пол, возраст, технические характеристики: устройства, размеры экранов, ОС, браузреы и т.д.)
- Анализ текущего сайта компании (ошибки структуры и логики)
- Выводы и рекомендации при разработке нового сайта
Пользовательские сценарии
У каждого сайта есть вполне понятные цели: заставить пользователя позвонить по номеру, оставить заявку или оформить заказ. Проработка пользовательских сценариев или customer journey map помогает в этом и буквально «за руку» ведёт посетителя сайта по его страницам так, что он так или иначе достигнет нужных целей. При создании пользовательских сценариев учитывается типы пользователей, которые будут посещать сайт, их цели и интересы. Например, пользовательский сценарий человека, который нацелен купить конкретный товар будет отличаться от сценария пользователя, который только узнал о том, что такой товар существует.
Структура сайта
Информационная структура сайта — это то, из каких разделов и страниц будет состоять новый ресурс. Иногда для её создания может потребоваться помощь сео-специалиста, который на основании данных семантического ядра помогает выстроить максимально эффективную структуру, которая будет понятна и пользователям, и поисковым роботам.
Прототип
Прототип — это схема будущего сайта и его отдельных страниц. Обратите внимание, что это не дизайн! Здесь нет никаких стилистических решений. На данном этапе решается то, какое наполнение будет у каждой страницы сайта, какую задачу они должны решать, как будут располагаться элементы. Это конечный результат UX-дизайна, в котором учитывается то, как именно пользователь будет взаимодействовать с сайтом, на какие кнопки нажимать и в каком порядке получать информацию.
Прототипы бывают двух видов:
- статичные (их ещё называют вайрфреймы)
- интерактивные.
В интерактивных макетах элементы «живые»: они меняются, двигаются, на них можно нажимать, листать, раскрывать или сворачивать. Словом, прототипы — это «репетиция» вашего будущего сайта, выполненная в формате схемы.
Пример интерактивного прототипа. А вот ссылка на сам прототип.
Подготовка контента
Копирайтинг
Подготовка текстового контента начинается параллельно с разработкой структуры сайта. Тексты и визуальная составляющая должны дополнять и усиливать друг друга. Профессиональный копирайтер действует, как маркетолог: он продаёт, работая с любыми форматами текста; прямо или нативно продвигает продукт или услуги клиента.
UX копирайтинг
UX копирайтинг - это разновидность копирайтинга, который используется при создании мобильных приложений и онлайн-сервисов (например, онлайн-школ, интернет-магазинов). Такой вид копирайтинга помогает пользователям легко ориентироваться в интерфейсе, быстро выполнять задачи (например, покупка товара или загрузка домашнего задания) и не испытывать при этом трудностей. К UX-копирайтингу также относится разработка текстов для всплывающих подсказок, короткие инструкции по использованию сервиса и подготовка справочной информации.
Пример, в котором решили обойтись без текста на кнопке заказа товара. Не самая лучшая идея.
Удачный пример того, что присутствует призыв к заказу товара, а сама кнопка не случайно выделена контрастным цветом.
Дизайн
Теперь давайте разберёмся в понятиях, непосредственно связанных с веб-дизайном.
Мудборд
«Доска настроения», если переводить дословно. Мудборд — это визуальная концепция будущего проекта, которая передаётся на согласование клиенту. По мудборду можно понять стиль и общее настроение будущего сайта, какие ассоциации он будет вызывать у пользователей, какая палитра цветов будет использоваться, какие шрифты, иконки и прочие визуальные паттерны будут взяты в работу. Это желательный этап перед стартом самого дизайна, потому как с его помощью можно задать общий стиль и настроение сайта, который будет устраивать заказчика. Источник
Концепция дизайна
После создания прототипа и согласования мудборда желательно разработать предварительную концепцию дизайна. Как правило, это дизайн одной или нескольких страниц, которые транслируют общую визуальную идею будущего сайта, без деталей. Такая концепция будущего проекта помогает верно скорректировать направление дизайна с заказчиком и сэкономить время на правках, когда будет готов дизайн всего сайта. Источник
Макет
Макет — это финальный результат дизайна, который показывается клиенту. При необходимости вносятся правки. Согласованные макеты передаются в работу программистам для вёрстки и дальнейшей работы, после которого новый сайт «оживает».
UI дизайн
Мы уже выяснили, что UX дизайн — это дизайн интерфейсов или схематичная логика того, как пользователи будут взаимодействовать с новым сайтом или сервисом. UI дизайн — это стиль и визуальная составляющая проекта, в который входят иллюстрации, анимация, цветовое решение, шрифты и фотографии. Ошибочно полагать, что UI дизайн — это чистое творчество. На самом деле, даже здесь используется психология продаж и взаимодействия с будущими покупателями.
UI гайд или гайдлайн
UI гайд — это правила фирменного стиля бренда. Это книга, как правило, в электронном формате, которая наглядно показывает, какое настроение должен транслировать дизайн, какие цвета и шрифты необходимо использовать, как правильно размещать логотип и прочие правила работы с элементами. Гайдлайн показывает, как нужно работать с элементами не только на сайте, но и на баннерах, визитках, полиграфии. Такие инструкции выдаются дизайнерам, которые только начинают работать с проектом, и помогают им сориентироваться в стилистике. Вы можете заказать разработку гайдлайна в студии, которая разрабатывает вам новый сайт.
UI-кит
Это набор визуальных элементов для каждого конкретного проекта. В него входят кнопки, иконки, формы регистрации и прочие элементы. UI-кит решает важную задачу: он упрощает работу frontend-разработчикам, а также другим дизайнерам, которые могут работать над проектом, если мы говорим о больших командах. UI-кит можно использовать и как базу знаний для новичков, и как способ ускорить работу остальных участников проекта.
Фрагмент UI kit проекта
