Как на сайте создать правильные ассоциации с вашей компанией

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

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

Компания PRO. BPM. -Consult занимается автоматизацией бизнес-процессов на современных платформах BPMSoft и Loginom и помогает клиентам эффективно достигать цели и увеличивать прибыль компании, оптимизируя рутинные задачи и процессы. Целевая аудитория – бизнес, который вышел на необходимость внедрения автоматизации бизнес-процессов.

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

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

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

Работа с референсами.

Прежде чем приступить непосредственно к дизайну сайта, мне нужно максимально детально выяснить взгляд клиента на этот дизайн и понять что именно он хочет увидеть на своем сайте. Как правило, клиентам сложно это описать и поэтому на помощь приходит работа с референсами. Я подобрала примеры референсов смыслов блоков сайта (услуги, преимущества, о компании и пр.) и попросила клиента прокомментировать какие примеры ему нравятся, а какие нет и почему.

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

Как на сайте создать правильные ассоциации с вашей компанией

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

Поиск визуального решения.

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

Как на сайте создать правильные ассоциации с вашей компанией

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

Как на сайте создать правильные ассоциации с вашей компанией

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

Как на сайте создать правильные ассоциации с вашей компанией

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

Таким образом у нас получился сайт, посвященный бизнес процессам, а визуальные элементы ненавязчиво исполняют свою роль — визуальное напоминание о том, что бизнес-процессы, после внедрения автоматизации, будут работать у вас как идеальные часы. Все будет лаконично, по делу и четко.

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

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

Оля Грачева, веб-дизайнер.

33
4 комментария

Очень интересно!

2
Ответить

Спасибо!

1
Ответить

Работа с референсами особенно впечатляет, искать их самостоятельно очень сложно, а без них трудно объяснить чего именно я хочу от сайта)

2
Ответить

Спасибо! Согласна на все 💯

1
Ответить