Дизайн. Типографика. дизайн-Методы
01.
Что такое сайт? Виды. Критерии
02.
С чего начать? Сбор контента
03.
Целевая аудитория. Исследования
05.
Структура сайта. на основе результатов исследования
04.
Гайд. как сделать хороший сайт
с чистого листа
Этот сайт - пособие по созданию хорошо собранного сайта, и скорее он для клиента, заказчика. Он поможет разобраться нужен ли вам сайт и какой, с чего начать сбор информации для него, каким критериям он должен соответствовать.

КАК ДЕЛАТЬ
ДИЗАЙН
КОНТЕНТ
кто прав:
я, дизайнер или юзер

А МНЕ ВООБЩЕ ВСЁ ЭТО НУЖНО
А МНЕ ВООБЩЕ ВСЁ ЭТО НУЖНО
важнее
ЧТО
с чистого листа
Этот сайт - пособие по созданию хорошо собранного сайта, и скорее он для клиента, заказчика. Он поможет разобраться нужен ли вам сайт и какой, с чего начать сбор информации для него, каким критериям он должен соответствовать.

КАК ДЕЛАТЬ
ДИЗАЙН
КОНТЕНТ
кто прав:
я, дизайнер или юзер

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

выбирайте понятный шрифт
выбирайте шрифт, подходящий под общий стиль
включите наиболее важную информацию в первые два абзаца
используйте заголовки и подзаголовки
группируйте небольшие объемы информации
вообще-то нет
так и загубить хороший
Как круто попрбовать все шрифты, которые у меня есть!
выделите важные слова или фразы визуально
типографика может как
вытянуть средненький дизайн,
применяйте списки, разбивайте текст на колонки
05/1
5.
1.
2.
3.
7.
4.
6.
Вы должны быть уверены, что самая важная информация находится на виду и привлекает внимание пользователей
05/2
5 основных
дизайн методов
В любом дизайне важно соотносить размер
и степень важности контента — на странице самая важная информация должна быть самого крупного размера
Размер

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

Свободное пространство, как часть композиции — это инструмент дизайна, который используется, чтобы привлечь внимание
к наиболее важным элементам интерфейса
Стиль
Выбор стиля, который соответствует вашему бренду и подчеркивает его особенности, поможет вам более эффективно донести сообщение до пользователя
Эти нехитрые приемы помогут максимально привлечь внимание к контенту
Делайте акцент на кнопках
Убедитесь, что ваши кнопки выглядят кликабельными
Чётко подписывайте все кнопки
05/3
дизайн не ради дизайна
Спасибо
за просмотр!

На сайте использовался материал статей
@uprock.school
@kontora.name
Made on
Tilda