Omnia saecula — всё устаревает, в том числе и наш сайт.

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

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

Но начнём с consilio visual — визуального дизайна. Мы решили разработать новую визуальную концепцию без опоры на старый образ. Позаимствовали лишь цвета и фирменный логотип.

В первую очередь,

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

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

Второй этап

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

Многие называют дизайн чистым искусством, но мы придерживаемся другого мнения – это психология и логика, совмещенная с искусством. С такими мыслями мы и подошли к созданию макета. В качестве основы выступал наш скелет (структура сайта). Здесь опять сработал принцип “не перенасытить” – нужно было сделать так, чтобы у пользователя возникала привязка, но при этом не происходило чувства визуального зашумления. Важно было сделать все правильно: закрасить что надо, выделить что нельзя пропускать, заложить раскрытие определенных элементов и т.д. Т.е. нами была построена логика, а на Никиту ложилась исполнительно-творческая часть. Дизайн был обговорен, но мы задумались об изюминке, об вишенке, о том, что будет нас отличать от остальных.

Третий этап –

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

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

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

Вёрстка

.
Про данный этап достаточно сложно писать, так как ничего уникального и нового использовано не было. html, css и js – наши три кита, на которых всё и держалось. Достаточно было соблюдать выстроенную структуру и наслаивать слой за слоем, чтобы в итоге вышло то, что мы задумывали.
Несмотря на банальность задачи, попадались моменты, когда приходилось посидеть и подумать.
Логика процессов не вызывала затруднений, но процесс интеграции был сложнее – дело в мелочах. Нам нужно было создать почти идеальный образ, чтобы каждый элемент работал как надо. Ведь самое страшное – это разрушение иллюзии погружения. Например, пользователь скролит одну страница одним способом, а другая имеет иной паттерн. В такие моменты у пользователя ломается логика, возникает диссонанс, а это всегда негатив. Отрицательный опыт тоже опыт, но не для нашего сайта. С точки зрения юзера все должно работать идеально — кнопки нажиматься, анимация запускаться, а ссылки открываться. Поэтому самым долгим этапом оказалось исправление мелких деталей. Мы проходили сценарий посещения сайта шаг за шагом, устраняли любую оплошность или несостыковку.

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