Метафора на сайте — это не просто красивая картинка или игра слов. Это приём, с помощью которого мы передаём смысл продукта или услуги через визуальные и смысловые образы, понятные пользователю интуитивно.
Это может быть образ, ассоциация, аналогия — всё, что помогает «упаковать» сложную идею в простую форму, которую легко почувствовать, а не только понять умом.
В этой статье я покажу, как мы использовали метафору в реальном проекте: от идеи — до визуального решения и реакции клиента.
Метафора: путешествие в горы — восход солнца в горах
Расскажу на примере сайта, который я делала для Карьерного коуча. Эта метафора тонкой нитью проходит по сайту в дизайне и тексте https://kotovacoach.ru/
Основная мысль
Жизненный путь человека / карьера — это подъём на гору (где я сейчас-куда хочу подняться). Ему нужен навигатор, чтобы не сбиться с пути, некая стратегия — где организовать привал, сколько еды взять и т. д. Эта метафора поможет визуально передать ключевые аспекты карьерного коучинга: ориентацию на успех, стратегическое планирование и надежное руководство.
Ассоциации
Путешествие Выбор, свобода, воздух — путешествие к себе. На сайте: Воздушный минималистичный дизайн.
Направление Путь, стратегия, навигатор, направление, компас, цель, (где я сейчас, куда я хочу), выход из тоннеля, начало нового — восход солнца. На сайте: использование частей компаса как иконки/буллиты, восход солнца — цвета, выход из тоннеля, цвета конраст проблема-темный/решение-светлый бэкраунд.
Цвета Тёплые оттенки — продолжаем историю про восход в горах. Также теплый оттенок создаёт ощущение уюта, комфорта, тепла, что немаловажно в общении с коучем
Типографика Шрифт Prata для заголовков. Новая антиква — округлые формы без наклона (про баланс). Основные штрихи толстые, устойчивые с ровной (устойчивой) засечкой внизу. Соединительные штрихи тонкие и составляют сильный контраст с основными штрихами (как метафора-построенный путь, поддержка в горах-рука).
Для основного текста — Manrope: В шрифте присутствует симметрия и вертикальные оси овалов, отсутствие контраста между штрихами
Метафора — это не просто «фишка», а инструмент, который работает на уровне восприятия. Она помогает рассказать о вашем продукте через ощущения, ассоциации и эмоции — а значит, выстроить связь с пользователем быстрее, чем это сделает сухой текст или стандартный блок «о нас».
Если вы хотите, чтобы ваш сайт говорил не только языком интерфейсов, но и смысла, подумайте, какую метафору можно заложить в основу. Или напишите мне, я помогу её найти и упаковать в дизайн, который работает на ваш бренд.