хороший сайт
LEARN MORE
После сегодняшней лекции вы поймете для себя нужен ли вам сайт, для кого и каких целей он делается, с чего начинать его делать, что важнее…
ЧТО ЭТО
КАК ДЕЛАТЬ
ДИЗАЙН
КОНТЕНТ
ОТВЕТ ТУТ
кто прав: я или пользователь
А МНЕ ВООБЩЕ ВСЁ ЭТО НУЖНО
?
!
важнее
ЧТО
Что это такое?
Сайт - инструмент бизнеса
ОН УВЕЛИЧИВАЕТ ДОХОД ВЛАДЕЛЬЦА. Сайт создает верное впечатление
и управляет действиями ПОЛЬЗОВАТЕЛЯ при помощи логичной структуры И ВИЗУАЛЬНЫх АКЦЕНТов
Пользователь заходит на сайт, чтобы решить свою задачу (боль, проблему): ознакомиться с товаром, компанией, купить, записаться на семинар, заказать доставку и т. д.
Мы должны довести его до полезного для нас действия: заявка, покупка, обратный звонок, подписка, или создать верное впечатление.
Виды сайтов
ЛЕНДИНГ
01
Это посадочная страница, на которой мы последовательно отвечаем на вопросы посетителей и не уводим на второстепенные страницы: важно как бы провести за ручку — от описания проблематики до предложения решения
02
ИНТЕРНЕТ-МАГАЗИН
Если вы продаёте больше 10 товаров с разными функциями и параметрами, их уже не получится уместить в лендинг. Здесь нужна фильтрация, карточки товаров, корзина
03
САЙТ-ВИЗИТКА
Если вы просто хотите присутствовать в интернете и вам не нужно ничего продавать. Это информационная страница. Часто нужна, чтобы создать имидж за счёт креативного и нетипичного дизайна
04
КОРПОРАТИВНЫЙ
Он рассказывает о компании: чем она занимается, почему ей стоит доверять, подробно показывает услуги, рассказывает о команде
05
ПРОМО САЙТ
Подходит для частных предпринимателей и маркетологов компаний разного формата, организаторов и коучей, всем, кто проводит какие-либо мероприятия
КАКИМ ДОЛЖЕН БЫТЬ ХОРОШИЙ САЙТ?
ЕСТЬ КРИТЕРИИ?
ТАКИМ?
САЙТ ОТВЕЧАЕТ ПОСТАВЛЕННОЙ ЗАДАЧЕ.
Клиент достигает цели
01
ПРОСТОТА И ЛОГИКА.
ПОНЯТНАЯ НАВИГАЦИЯ
02
РЕЛЕВАНТНЫЙ И ОРИГИНАЛЬНЫЙ КОНТЕНТ
03
ЭСТЕТИКА ВНЕШНЕГО ВИДА
04
АДАПТАЦИЯ
05
ИЛИ ТАКИМ?
сайт - инструмент бизнеса, он должен работать
с чего начать?
контент.
текст важнее дизайна
Всегда начинайте работу с текста.
Задавайте много вопросов, разбирайтесь в бизнесе, чтобы писать о полезных фактах, которые подтолкнут постеителя к действию
Из текста целевая аудитория узнаёт о вас всё, что нужно, чтобы принять решение о покупке, работе, контакте.
Дизайн нужен для того, чтобы правильно расставить акценты в тексте, выделить визуально самую важную инфу, помочь человеку воспринять нужные смыслы и выделить среди конкурентов.
ГДЕ БРАТЬ КОНТЕНТ
собирайте весь контент
что с этим делать?
чтобы поймать бобра, надо
думать, как бобёр
чтобы пользователь совершил полезное действие, нужно продумать его путь, понять кто он, чего хочет от сайта, стать им, думать как он
Пользователь сайта - собирательный образ, характеризуется общими признаками. Именно для него любимого мы и будем создавать сайт. Но кто он?
исследования
ЦА
целевая аудитория
статистика существующего сайта, группы в соцсетях и тд
сбор информации вживую
информация от менеджеров
кто пользуется продуктом
Боль
юзера
и его путь
интервью
метод карточек
пользовательский портрет
что он хочет?
Анализ
сайтов конкурентов

анализ архитектуры, навигации
как выделить свои преимущества
анализ контента (что включать, что нет!)
перенять и изменить
и что с этим делать?
теперь мы знаем
о пользователе достаточно:
в чем его проблема, что важно для ее решения, как его убедить
пойми бобра
Пора строить?
логичная структура - высокая конверсия
Структура — это невидимая логичная архитектура сайта,
основанная на иерархии по важности доносимой информации
На основе полученных исследований анализируем контент и создаем смысловую иерархию.
Фильтруем и правим
контент
структурируем имеющуюся информацию
оставляем только полезное
делим на смысловые блоки
делим блоки на абзацы
выделяем заголовки. Заголовок - смысловой блок
важно для контента
полезное - то, что продает, убеждает и тд.
Смысл правда логика выгода примеры
правильно ≠ понятно
СОЗДАЁМ ИНФОРМАЦИОННУЮ СТРУКТУРУ САЙТА
на какие страницы разбивать сайт
Теперь нам стало понятно:
какие лид-магниты и где располагать
какие формы и кнопки
какие выстраивать навигацию
из каких смысловых блоков состоит каждая страница
ВОТ ТАК ЭТО ВЫГЛЯДИТ
ИНФОРМАЦИОННАЯ СТРУКТУРА ДЛЯ МАГАЗИНА ДВЕРЕЙ
ИНФОРМАЦИОННАЯ СТРУКТУРА ДЛЯ САЙТА МОРОЖЕНОГО
ТЕКСТОВАЯ СТРУКТУРА СТРАНИЦЫ САЙТА
пример
просто о товаре или услуге
что дает и для чего нужно (выгода, решение проблемы)
подробнее о товаре (детали)
как это работает
кто использует
призыв к действию
пример
структура, ориентированная на клиента
А вот теперь дизайн!
Дизайн -
не просто
рисование
Дизайн нужен для того, чтобы правильно расставить акценты в тексте, выделить визуально самую важную инфу, помочь человеку воспринять нужные смыслы и выделить среди конкурентов
Типографика это тоже про дизайн

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

используйте заголовки и подзаголовки

наглядно группируйте небольшие объемы соответствующей информации

выделите важные слова или фразы визуально

часто применяйте маркированные и нумерованные списки, разбивайте текст на колонки

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

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

Свободное пространство, как часть композиции — это инструмент дизайна, который используется, чтобы привлечь внимание к наиболее важным элементам интерфейса.
Стиль
Выбор стиля, который соответствует вашему бренду и подчеркивает его особенности, поможет вам более эффективно донести сообщение до пользователя.
Делайте акцент на кнопках
Убедитесь, что ваши кнопки выглядят кликабельными
Четко подписывайте все кнопки
дизайн не ради дизайна
Made on
Tilda