Шаблон как инструмент
Когда дизайнер берется за задачу, шаблон упрощает работу, задает направление, экономит время. Особенно это важно при сжатых сроках и разном уровне подготовки команды.
Но если цепляться за него, дизайн становится одинаковым: те же сайты, оформление, стиль. Все сливается, теряется лицо. Аудитория это чувствует и пролистывает мимо. Чтобы получилось живо и интересно, нужно отходить от него, когда пора.
Когда правила можно нарушать
Их можно ломать, если знаешь зачем. Например, необычная кнопка в стандартной форме привлекает внимание, а авиакомпании добавляют шутки в инструктаж, чтобы прервать режим автопилота. Если сайт оформлен как игра, он может быть неудобен. Но если задача — удивить и запомниться, такой подход уместен.
Важно не путать эксперимент с хаосом. Нестандартность должна вести к результату, а не сбивать с толку. Пример: новогодний вендинг VK который установили на автобусной на остановке. Он учитывал контекст: люди на остановке скучают, ждут транспорт, им неинтересно смотреть на обычную рекламу. Чтобы привлечь внимание, экраны анимировали и добавили возможность выиграть подарок и они включались в игру.
Контекст решает
Нет универсальных решений, все зависит от задачи. Для бухгалтерской программы важна простота, для афиши уличного фестиваля уместна смелость и эффект. Важно учитывать кто смотрит, где и зачем. То что сработает на выставке, может не подойти для приложения. Принт который круто смотрится на футболке, может не подойти для упаковки еды.
Пример с учетом контекста: обычный билборд на улице, люди идут уставшие с работы, но тут персонаж как будто вылетает из объемного 3D куба и неожиданно привлекает внимание. Новогодний ролик с Никитой Кологривым показал отличные метрики.
Контекст это аудитория, цель, место, время, и состояние человека. Он устал? Спешит? Читает на ходу? Всё это влияет на восприятие не меньше, чем платформа.
Делайте дизайн под разные сценарии: один — для беглого взгляда, другой — для вдумчивого чтения. Что человек уже знает о бренде? Как выглядел макет раньше и почему? Если сильно всё изменить, можно потерять доверие.
Пример: российские дизайнеры и лондонское агентство How&How разработали айдентику для Yango Maps (навигационное приложение, разработанное международной технологической компанией Yango Group, которая ранее была частью «Яндекса»). Приложение предоставляет подробные карты и маршруты для водителей, пешеходов и пользователей общественного транспорта.
Нарушение типографических стандартов пошло на пользу: айдентика получилась смелой и выразительной за счет того, что прием с перспективой дороги или пути подходил бренду.
Дизайн без правил? Не совсем
Но даже самые смелые проекты опираются на основу — сетку, композицию, типографику, цвет. Сильные решения часто появляются на стыке. Берешь стандарт и немного смещаешь. Сохраняешь знакомую структуру, но играешь со шрифтом, или оставляешь привычный сценарий, но добавляешь неожиданную деталь.
Важно чувствовать меру: насколько можно отклониться, чтобы не потерять смысл. И проверять это на людях — видят ли, понимают ли, реагируют ли.
Разделяй базу и фишку уже на этапе эскиза. Отметь, что точно не трогаешь, например читаемость. Отдельно укажи, что можно увести в эксперимент — паттерн, наклон, цвет.
На чем держатся шаблоны
Структура
Элементы на своих местах. Читателю сразу ясно, где искать нужное.
Иерархия
Заголовки крупнее, важное выделено, второстепенное не мешает. Все подчинено логике восприятия.
Сетка
Невидимая, но нужная. Помогает собрать в целое и навести порядок.
Контраст
Размер, цвет, отступы, начертание. Благодаря этому макет не сливается в кашу.
Повторяемость
Если человек понял один экран, остальные не вызывают вопросов.
Запас под текст
Шаблон учитывает разную длину заголовков, переводов и названий. Ничего не разваливается. Если не учесть это заранее, макеты на разных форматах начинают сыпаться.
В рекламной кампании мы собираем мастера ключевых размеров. На их основе создаем сотни ресайзов. Мы не можем править каждый макет вручную, но можем снизить число ошибок. Шаблоны помогают держать структуру, расставлять акценты и сохранять качество на всем объеме.
Ошибки при работе с нестандартным дизайном
Иногда креатив мешает, даже если идея была хорошей. Известна история с пожарной системой Нотр-Дама: интерфейс был настолько непонятным, что охранник не понял, где начался пожар. Дизайн был, но он не работал. Всё потому, что проектировался без учёта того, как реальные люди будут этим пользоваться.
Важно не путать «интересно» с «непонятно». Если пользователю сложно, он уходит. Иногда лучше отступить и вернуться к простой форме — пусть без фейерверков, но зато работает.
Хороший пример логотип Олимпиады 2012 года. Дизайн был описан как «логотип, который не просто стоит на месте, а прыгает вперёд», символизируя активную, живую энергию и готовность к переменам.
Его хотели сделать дерзким и современным, но он получился непонятным и отталкивающим. Цифры 2012 никто не считал (а они являются основой логотипа), цвета раздражали, а идея не просматривалась. Вместо прорыва логотип стал символом дизайнерской ошибки и плохой коммуникации.
Эмоциональные качели как помощник
Дизайн работает с эмоциями и вниманием, а без него не будет без контраста, а значит и не из чего выделяться.
Несколько советов
Сохраняй неудачные варианты
То что не сработало в одном проекте, может пригодиться в другом.
Покажи эксперимент человеку вне контекста
Если поймет, значит все работает.
Запоминающийся не значит удобный
Некоторые приемы цепляют, но утомляют при повторе. Отделяй эффект первого раза от пользы в долгую.
Сделай упражнение
Возьми стандарт и испорти его, нарочно сделай плохо. Так ты увидишь, на чем держится макет.
Слушай не только фидбек, но и тишину
Если никто не ругает, но и не хвалит, возможно дизайн просто прошел мимо.
Проверь макет без цвета
Убери иллюстрации и узор. Осталась структура? Хороший дизайн живёт без украшений.
Сначала выучи, потом нарушай
Если ты знаешь правила, то можешь гнуть их под задачу. Не знаешь — просто ошибаешься. Как в музыке: ритм можно сбить, но только после того как ты его освоил.
Подписывайтесь на Telegram-канал «Одна кавычка»: о коммуникационном дизайне, трендах и кейсах.