Индивидуальные дизайнерские решения

Что такое индивидуальные дизайнерские решения?

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

Эта страница рассказывает о творческой и стратегической стороне работы. Такие вопросы, как структура меню, мобильное использование, скорость и доступность, мы разобрали на странице удобных веб-сайтов; индивидуальный дизайн строится на этом фундаменте и не заменяет его.

Чем готовый шаблон отличается от индивидуального дизайна

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

• Структура: в шаблоне разделы заданы; в индивидуальной работе поток страницы рисуется под историю, которую вы хотите рассказать.
• Визуальный язык: шаблон предлагает общую эстетику; в индивидуальной работе типографика, пустое пространство и пропорции изображений выводятся из вашего стиля.
• Отличительность: один и тот же шаблон могут использовать и другие сайты; индивидуальный дизайн под бренд нацелен на то, чтобы отделить вас от похожих компаний в отрасли.
• Гибкость: выйти за рамки шаблона чаще всего трудно; в индивидуальном дизайне новые разделы добавляются по системе, построенной с самого начала.

Для каких брендов это в приоритете?

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

Когда достаточно шаблона?

Не каждому бизнесу в первый день нужны индивидуальные дизайнерские решения. Для рекламной страницы, которая должна выйти в короткий срок, для новой услуги на стадии теста или для старта с ограниченным бюджетом хорошо подобранный шаблон может иметь смысл. В таком случае мы говорим вам об этом прямо и вместе определяем, в каких местах шаблон нужно адаптировать под ваш бренд.

Из чего складывается индивидуальный дизайн для бренда

Индивидуальный дизайн для бренда — это не один красивый экран, а сумма решений, которые дополняют друг друга. Эти решения мы собираем под тремя заголовками: структура под ваш бренд, персонализированный опыт и креатив, подходящий отрасли. Ниже мы описываем, чему каждый из них соответствует на практике.

Структура под ваш бренд

Структура — это решения о том, что посетитель увидит на странице и в каком порядке. Для производителя может быть правильнее сначала показать производственные мощности, а потом ассортимент; для бутик-отеля — сначала вид, потом номера. Индивидуальные дизайнерские решения выстраивают этот порядок по последовательности вопросов, которые клиент задает на ваших встречах по продажам.

Персонализированный опыт

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

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

Креатив, подходящий отрасли

У каждой отрасли есть ожидания, которые она формирует у посетителя: от юридической конторы ждут солидности, от кафе — тепла, от софтверной компании — ясности. Оправдывая эти ожидания в индивидуальных дизайнерских решениях, мы стараемся держаться подальше от повторяющихся клише отрасли. Цель в том, чтобы посетитель не терял ощущения «я попал куда нужно» и при этом мог отличить ваш бренд от похожих.

Например, на сайте производителя освещения важнее фотографий товаров показать, как свет влияет на пространство, а на сайте ресторана — дать почувствовать атмосферу за столом раньше, чем показать меню. Говорить на языке отрасли начинается с понимания того, на что смотрит клиент этой отрасли.

Типографика и ритм страницы

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

Индивидуальные иллюстрации, иконки и визуальное руководство

Страница, собранная из стоковых изображений, как бы аккуратно она ни была сделана, выглядит так, что ее можно увидеть и на других сайтах. В работах по индивидуальному дизайну для бренда мы при необходимости рисуем для вас отдельные наборы иконок, иллюстрации и инфографику. Если предстоит фотосъемка, мы до съемки готовим визуальное руководство по свету, кадру и цветовому тону; так фотографии не втискиваются в дизайн потом, а продумываются вместе с ним.

Движение и микровзаимодействия

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

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

Как разрабатываются индивидуальные дизайнерские решения?

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

1. Ознакомительная встреча

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

2. Выбор визуального направления

Вместо того чтобы сразу начинать дизайн, мы показываем несколько заметно различающихся визуальных направлений на референс-бордах. Каждый борд содержит предложение по типографике, использованию цвета, языку фотографий и ритму страницы. Если направление выбрано на этом этапе, сокращается время, которое теряется потом из-за неопределенного «чуть-чуть по-другому». Иногда из этого разговора рождается и третий путь, который объединяет сильные стороны двух направлений.

3. Ключевые экраны и прототип

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

Как мы работаем с обратной связью?

Больше всего времени в индивидуальных дизайнерских решениях теряется тогда, когда обратная связь превращается в личные предпочтения. Поэтому мы предлагаем на каждой презентации обсуждать решения по целям, которые мы вместе записали на ознакомительной встрече. Обратная связь вроде «Этот экран недостаточно внушает доверие нашим дилерам» вместо «Мне не нравится этот цвет» гораздо быстрее ведет дизайн в правильную сторону.

4. Библиотека компонентов

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

5. Передача в разработку и контроль реализации

Дизайн передается команде разработки вместе с размерами отступов, размерами шрифтов, временем движения и поведением на экранах разной ширины. В ходе разработки мы сравниваем экраны с дизайном и исправляем отклонения до публикации. То, что идея, хорошо выглядевшая на бумаге, производит тот же эффект и в коде, зависит от этой проверки.

Как связаны фирменный стиль и индивидуальный дизайн для бренда

Фирменный стиль — это свод правил, определяющих цвета, шрифты и использование логотипа вашего бренда. Индивидуальный дизайн для бренда — это оригинальное применение этих правил для конкретной работы. Стиль отвечает на вопрос «из какого материала», индивидуальный дизайн — на вопрос «что мы построим из этого материала».

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

Расширение фирменного стиля в digital

Стиль, подготовленный для печатных материалов, не отвечает на многие вопросы, которые возникают на экране. Что произойдет при наведении на ссылку, как будут выглядеть цвета на темном фоне, как будет выглядеть уведомление или сообщение об ошибке — такие решения определяются в процессе индивидуального дизайна для бренда. Если эти решения приняты в духе стиля, сайт и печатные материалы выглядят частями одного бренда.

Пример проекта: diMARE

Для diMARE, который выделяется коллекциями женской одежды, показами и магазинами, мы разработали сайт на английском языке и использовали съемку коллекций во весь экран. Темное верхнее меню и сдержанная типографика поддержали ощущение люкса у бренда; мы адаптировали использование логотипа к веб-среде, чтобы сайт выглядел с первой до последней страницы в едином стиле. Подробности — на странице проекта diMARE.

Индивидуальные решения в графическом дизайне

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

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

Объем работ, бюджет и на что обратить внимание

Называть сроки и бюджет для индивидуального дизайна, не выслушав ваши потребности, было бы неправильно. Объем определяют несколько базовых решений, и мы по очереди уточняем их с вами при подготовке коммерческого предложения.

Что определяет объем?

• Число страниц или материалов, которые нужно спроектировать индивидуально
• Потребность в отдельных путях для разных аудиторий и в многоязычной структуре
• Нужны ли индивидуальные иллюстрации, иконки или инфографика
• Входит ли в проект фото- и видеосъемка
• Насыщенность анимированных элементов и взаимодействий
• Будет ли библиотекой компонентов в будущем пользоваться и другие команды

Как эффективно использовать бюджет

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

Частые ошибки в проектах индивидуального дизайна

• Определять индивидуальный дизайн только как «выглядеть иначе» и отодвигать удобство использования на второй план
• Переходить к деталям, не выбрав визуальное направление, и менять направление на каждом круге
• Утверждать страницы без настоящего текста и фотографий, на условном контенте
• Замедлять страницу тяжелыми анимациями и большими видео
• Проектировать страницу за страницей без библиотеки компонентов и потом разбираться с несогласованностью
• Принимать решение по личным предпочтениям людей, не представляющих целевую аудиторию

Перед тем как прийти на встречу

• Краткая история вашего бренда, его обещание и описание целевой аудитории
• Логотип, цвета и брендбук, если он есть
• Вопросы и возражения, которые чаще всего слышит ваш отдел продаж
• Примеры, которые вам нравятся и на которые вы определенно не хотите быть похожими, с объяснением причин
• Список имеющихся у вас фотографий, видео и текстов

Приносить этот список в полном виде необязательно; недостающие пункты мы вместе дополним на ознакомительной встрече. Но чем конкретнее примеры вы принесете, тем продуктивнее пройдет первый разговор об индивидуальных дизайнерских решениях.

После публикации: сохранять и развивать индивидуальный дизайн

Индивидуальные дизайнерские решения в день публикации — не застывшее произведение; по мере роста вашего бизнеса добавляются новые страницы, новые кампании и новые товары. Сможет ли дизайн расти вместе с этими дополнениями и не разрушаться, зависит от системы, построенной с самого начала, и от внимания, которое проявляется потом.

Когда добавляется новая страница

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

Пересмотр дизайна по данным

После публикации можно следить, какие разделы вызывают интерес, какие кнопки нажимают и где посетители покидают страницу. Цели мы определяем вместе с самого начала, а результаты оцениваем через регулярные промежутки. Иногда небольшое изменение структуры заметно улучшает функциональность страницы, ничего не нарушая визуально.

Периоды кампаний и сезонов

Открытие сезона, новая коллекция или кампании к особым датам требуют временных изменений на сайте. Гибкие зоны, спроектированные для таких периодов заранее, избавляют от необходимости каждый раз заново перестраивать страницу. Так индивидуальные дизайнерские решения несут визуальный язык кампании и не отрываются от постоянного стиля.

Частые вопросы

Почему индивидуальные дизайнерские решения занимают больше времени, чем готовый шаблон?

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

Нужно ли менять мой нынешний логотип ради индивидуального дизайна для бренда?

Не нужно. Если ваш логотип хорошо работает в малом размере и на разных фонах, дизайн строится на нем; если есть проблемные места, мы отдельно делимся рекомендациями.

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

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

Можно ли заказать индивидуальный дизайн только для нескольких страниц?

Да. Самые важные экраны, например главную страницу или страницу кампании, можно спроектировать индивидуально, а остальные страницы собрать из тех же компонентов в более простой компоновке.

Чем индивидуальный дизайн для бренда отличается от фирменного стиля?

Фирменный стиль определяет правила использования цвета, шрифтов и логотипа. Индивидуальный дизайн для бренда применяет эти правила оригинальным образом для конкретной работы: сайта, презентации или раздела кампании.

Можно ли применить индивидуальные дизайнерские решения к нашему существующему сайту?

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

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

Расскажите о вашем бренде, клиенте и о том, чего вы ждете от дизайна; вместе определим наиболее подходящий вам подход и объем работ. Для ознакомительной встречи напишите нам через страницу контактов.