Артефакты в дизайне — презентация
Практическое руководство

Артефакты в дизайне

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

Тезис
+
Доказательство
+
Артефакт

Картинка ≠ артефакт

Если убрать картинку со страницы и смысл не изменился — скорее всего, это просто декор.

Слабо

«Тут пустовато»

Поставить мокап, 3D, абстрактную иллюстрацию или случайное фото, чтобы экран выглядел заполненным.

Сильно

«Что это доказывает?»

Выбрать визуал, который подтверждает тезис и помогает человеку считать смысл за 2–3 секунды.

Определение

Артефакт — это визуальное доказательство

Он помогает человеку поверить в обещание не через слова, а через конкретный объект, сцену или знак.

Показывает

Результат, процесс, масштаб, очередь, заявку, договор, интерфейс.

Уточняет

Не просто «клиенты», а Porsche, Mercedes, Audi в заявках.

Доказывает

Не «мы крутые», а кейс, отзыв, цифра, календарь, CRM.

Люди верят не словам, а подтверждениям

Можно написать «миллионер», «эксперт», «профессионал», но если артефакты вокруг это не подтверждают — доверия не будет.

Визуальная среда либо усиливает слова, либо уничтожает их.
Формула сильного поинта

TAKE + RTB + ARTIFACT

TAKE

Тезис

Что мы хотим донести человеку.

RTB

Причина поверить

Аргумент, логика, объяснение, proof of value.

ARTIFACT

Объект

Визуальное подтверждение, которое считывается быстрее текста.

Пример: «мы управляем проектами системно»

Слабо

Текст + ноутбук

Красиво, но не доказывает, что у команды есть процесс.

Сильно

Диаграмма Ганта

Этапы, сроки, ответственные. Клиент визуально видит систему.

Главный человек на сайте — не заказчик

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

Дизайнер
Клиент
Покупатель

Перед дизайном представь пользователя

  • Кто он и что сейчас ищет?
  • Какая у него боль или задача?
  • Какие слова и образы он понимает?
  • Что вызовет доверие?
  • Что покажется визуальным шумом?

Тест трёх секунд

Открой первый экран, посмотри 2–3 секунды, закрой и ответь:

Что здесь продают?

Для кого?

Какой результат обещают?

Что мне предлагают сделать?

Ошибка: эксперт видит интерфейс, клиент видит таблицу

Рекламный кабинет, CPC, CTR, графики и стрелки понятны маркетологу. Владельцу детейлинга это может выглядеть как случайный набор цифр.

Если визуал приходится расшифровывать — он уже проигрывает.

Текст — тоже часть дизайна

Слабо

«Клиент так написал в ТЗ»

Вставить огромный абзац и сделать вид, что это нормально.

Сильно

Заметить проблему

Сказать: текст нечитаемый, главный смысл теряется, нужно сократить.

28 секунд → 5 секунд

Слабый первый экран требует полминуты чтения. Сильный формулирует результат сразу.

«Легко приведу в ваш детейлинг 30 клиентов на оклейку авто, каждый с чеком от 2,5 млн тенге»

Визуал должен продолжать предложение

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

Пример

Мастер детейлинга, вокруг которого появляются обращения

Не абстрактные «лиды», а конкретные сообщения с дорогими машинами.

Хочу оклеить Porsche Cayenne
Сколько стоит Mercedes GLE?
Audi A6 на следующую неделю

Детали меняют смысл

Обычно

«Хочу оклеить машину»

Смысл есть, но он слишком общий.

Лучше

«Хочу оклеить Porsche Cayenne»

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

Мелочи не играют решающей роли

Они значат всё.

Модель машины, текст уведомления, выделенный пункт договора, цифра в интерфейсе — именно такие детали создают доверие.

4 инструмента визуальной коммуникации

Текст

Когда мысль проще сказать.

Картинка

Когда смысл быстрее показать.

Видео

Когда нужно доказать процесс или масштаб.

Анимация

Когда важно показать изменение или последовательность.

Видео часто сильнее сложной графики

Вместо слов «мы приведём столько заявок, что детейлинг будет забит» можно показать короткий loop: парковка перед детейлингом полностью занята машинами.

Реальный фрагмент жизни иногда продаёт сильнее, чем идеальная 3D-сцена.

Анимация должна объяснять, а не украшать

Слабо

Текст красиво вылетает

Движение есть, смысла больше не стало.

Сильно

Появляются новые заявки

Анимация показывает рост, очередь, поступление денег или изменение статуса.

Отзыв тоже может быть слабым

Слабо

«Спасибо, всё понравилось!»

Приятно, но почти ничего не доказывает.

Сильно

«Остановите рекламу, мы не успеваем обрабатывать заявки»

В одном сообщении есть спрос, результат и реальность кейса.

Договор сам по себе ничего не доказывает

Если тезис: «даём гарантии в договоре», то нужно показать не просто лист бумаги, а конкретный пункт гарантии.

Договор
+
Лупа
+
Выделенный пункт

Цвет тоже коммуникация

Цветовая гамма выбирается не потому, что красиво, а потому что она поддерживает контекст ниши.

Медицина

Чистота, спокойствие, надёжность.

Детейлинг

Графит, металл, премиальность.

Ландшафт

Природные оттенки, земля, зелень.

Сильный пример: текст и визуал говорят одно и то же

Если продукт построен как игра, визуальная система тоже должна считываться как игра: интерфейс, персонажи, ресурсы, прогресс, награды.

Текст

Обещает понятный формат и результат.

Визуал

Показывает этот формат ещё до того, как человек дочитал текст.

Знакомые образы работают как сокращения

Game Over

Провал задания.

Хомяк в колесе

День сурка.

Пустой карман

Нет накоплений.

Морковка

Мотивация «к».

Телефон засасывает

Залипание в соцсетях.

Чашка Boss

Желаемая роль.

Не думай экранами. Думай вопросами

  • Что вы предлагаете?
  • Почему мне это нужно?
  • Почему вам можно верить?
  • Уже получалось у других?
  • Что конкретно я получу?
  • Что мне сделать дальше?

Каждый блок закрывает сомнение

Клиент задаёт внутренний вопрос. Сайт отвечает тезисом, аргументом и артефактом.

Сомнение
Поинт
Доказательство

Быть правым недостаточно

Можно написать самый умный текст, но если его никто не дочитал — он не сработал.

Дизайн должен не только объяснять, но и удерживать человека внутри коммуникации.

Алгоритм выбора артефакта

  • Сформулируй смысл блока одним предложением.
  • Определи, что могло бы доказать этот смысл.
  • Найди образ из мира пользователя.
  • Проверь визуал без текста.
  • Доработай детали.
  • Удали всё, что не помогает понять или поверить.

Чек-лист перед сдачей экрана

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

Красные флаги

«Тут просто красиво»

«Нужно заполнить пустоту»

«Клиент прислал картинку»

«Добавим анимацию, чтобы было живее»

Хороший дизайн — это система доказательств

Текст говорит. Визуал показывает. Артефакт доказывает. Анимация объясняет. Каждая деталь двигает человека дальше.

ТЕЗИС
+ ПРИЧИНА ПОВЕРИТЬ
+ АРТЕФАКТ

Если хотя бы одна часть отсутствует — коммуникация становится слабее.

Не вставляй картинки.

Проектируй доказательства.