бюджет:

150 000 ₽ — 200 000 ₽

Сроки:

решения:

Анализ конкурентов

Информационная архитектура

1,5 месяца

Прототип

Дизайн

Анимация

Работа с кодом

Базовая SEO

Вёрстка

Айдентика

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

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

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

IT-технологии

UX/UI, сайт под ключ

Алёна Панюшкина, COO

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

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

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

Итак, после подробного брифинга мы приступили к агрегации требований.

Были проработаны этапы:

Сравнительный анализ конкурентов по различным параметрам (SEO-факторы, маркетинг, техническая реализация, контент, пользовательский опыт и дизайн;
Выводы конкурентного анализа с рекомендациями для дальнейшего роста;
Сбор ассоциаций компании для проработки брендинга;
Разработка информационной архитектуры с рекомендациями будущего расширения компании и вывод каждой услуги в отдельный лендинг;
Визуальное исследование, подбор референсов, составление Style Board, для определения будущей стилистики сайта и бренда компании;
Техническое задание на разработку сайта с учетом рекомендаций и исследований.

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

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

Style Board был принят без каких-либо правок, за исключением подбора шрифта.
С ним была длинная история подбора)))
У заказчика в целом был пунктик именно на шрифте, он вроде нравился, но вот какая-то отдельная буковка нет. Мы долго обсуждали варианты, вплоть до этапа дизайна.

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

UX-дизайнер разработала прототип будущего шаблона, с учетом универсальности. Были предложены варианты блоков со списком или без, с кнопкой или просто текстовым контентом.

Также от заказчика уже в процессе работы над сайтом поступил запрос разработать интерактивные навигационные табы на обложке, чтобы впоследствии пользователь сайта мог свободно перемещаться по ним в нужный раздел.
Назвали они это «Облаком тегов».

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

Были предложены несколько вариантов

Дизайн пришел в голову мгновенно. На всю концепцию у UI-дизайнера ушел один день.

В итоге теги приобрели стильный структурированный вид.

Получилось стильно и уверенно. Осталось решить лишь с обложкой, а именно фоном.

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

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

Впоследствии еще были корректировки по размеру, толщине надписи, цвету фона. Мы даже научили заказчика вносить корректировки в код.

Интересное решение мы придумали для блока команды. Это черно-белое изображение. при наведении на которое человек оживает. Заказчику очень понравилось, у него как раз имелось подходящее видео с таким эффектом.

Это решение заказчик уже сам доработает на сайте, мы с нетерпением ждем, что получится.

Задача состояла в том, чтобы разработать шаблоны визитки, презентации, документации компании. А также логотип и фирменный стиль.
Но не так всё просто. У нас же молодые прогрессивные юристы в сфере IT и интеллектуального права. Лицо компании должно быть ярким, не как у всех, ломать шаблоны. Но при этом не быть трешевым и дичным, а отражать молодой современный подход. Быть стильным и уверенным.

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

Итераций было много.

Мы разработали более 50 различных вариантов эмблемы.

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

В процессе работы запросы менялись. Сначала заказчики просили отразить в логотипе скорость и срочность, которая заложена в их названии ASAP LEGAL, а также обыграть букву А.

Потом не отображать скорость, не использовать А, но использовать слеш. Были варианты с компасом, в идею которого был заложен посыл: Мы направим вас в верном направлении, поможем найти решение, приведем к результату.

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

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

Подбор был долгим и сложным. Помимо выбора шрифта мы дорабатывали отдельные буквы, трекинг, жирность начертания))).

Итоговый вариант получился стильный, минималистичный.

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

После утверждения логотипа мы сформировали итоговый фирменный стиль компании. Тут также не обошлось без приключений. Шрифт, который мы выбрали для использования на сайте — Muller, оказался условно бесплатным, а именно два самых непопулярных начертания. Будьте внимательны при изучении лицензии ;))

Поэтому пришлось срочно искать альтернативу. Остановились на Montserrat. По итогу заказчик сказал, что он даже лучше))) Фух…

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

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

Правки были минимальны и касались обложки. Вы уже догадались какие?
Крутили вариант расположения и жирность надписи ASAP.

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

Отдали заказчику оба, вместо одного.

Меморандум. Именно этот документ было принято создать в качестве шаблона.

Было выполнено:
1. Дизайн обложки (название документа, адресаты, дата, логотип компании);
2. Создан черновой текст, заданы стили заголовков. Проработаны отступы между пунктами, междустрочное расстояние;
3.Настроен фирменный шрифт;
4. Все настройки сохранены в стилях google docs, чтобы можно было быстро все выравнивать при дальнейших изменениях текста;
5. Логотип в верхнем колонтитуле и подпись о конфиденциальности в нижнем.

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

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

Остановились на навигационном меню на главной и странице направлений деятельности.

Ещё при помощи кода были привязаны поп-ап окна, которые были сверстаны в Zero-блоках.

Ну и самый главный эффект шума на фоне тоже был добавлен кодом, а также кодом были разработаны теги в обложке.

FFFFFF

D8FF1D

ECECEC

000000

Игорь Болотов

01.12.21

Спасибо коллегам за оперативную работу и терпимость к мнению заказчика.
Работать в одной команде с каждым из заказчиков — непростая задача, у WebValley Studio получается!
Успехов и процветания от ASAPLEGAL ♥

Сайт-визитка и фирменный стиль для юридической компании

Разработка сайта-шаблона

Нам очень важно ваше мнение

Спасибо за просмотр

WebValley Studio

Maria Drokina

Maria Drokina

Anastasia Panchenko

Dmitry Navalov

Tatyana Vilkova

Alexey Gamov

Alena Panyushkina