Рай для перфекциониста: как мы сделали проект для архитектурного бюро ink

Ink — архитектурное бюро с идеальным сервисом. Компания проектирует, строит и полностью комплектует объекты премиум-класса. Отличительная черта компании — приводить каждый проект к единственно верному решению. Такое же ожидание было и от нашей работы: сайт должен быть не просто хорошим, а идеальным. О том, как мы оправдали ожидания, читайте в статье.

Мы молодая, но активная digital студия AffArts — дизайним по-человечески с 2020 года. Рвём шаблоны, а не дедлайны, брифуем, подстраиваемся под любой сегмент и нишу.

Входим в топ-3 молодых дизайн-агентств по версии Рейтинга Рунета и в топ-10 агентств, кто работает с зарубежными компаниями. За пять лет сделали 600+ заказов, значит выучили 600 уроков, как нужно (и не нужно) делать.

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

К нам обратился Вадим Шишкин, сооснователь и идейный вдохновитель бюро ink. Задача — дизайн и разработка сайта-портфолио.

Предыдущий сайт был сделан на Tilda, поэтому его функционал был ограничен. Фотографии некорректно сжимались и плохо адаптировались под мобильный режим просмотра. Это мгновенно рушило визуал — плохой UX веб-конструктора не отдаёт профессионализмом.

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

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

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

После анализа отобрали решения, которые точно совпадали с запросом Вадима, и вынесли их в два раздела:

На основе референсов составили мудборд и разделили его на основные стилевые элементы и приёмы.

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

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

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

Содержание — основа, поэтому сделали упор на визуал проектов и информацию о них. Сверстали это с тезисной и конкретной подачей материала.

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

В мобильной версии сохранились функции сайта, вёрстка и общий визуал.

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

На главной странице три вида анимации: основная анимация, постраничная анимация для блока с проектами и анимация квиза. Это разделяет блоки по смыслам — интуитивно пользователь сразу понимает, что перед ним разные разделы с уникальной для них информацией.

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

Тот же стиль анимаций мы добавили и в мобильную версию сайта.

На общей странице проектов сделали упор на симметричную вёрстку. Ни одно изображение не перетягивает внимание. Пользователь может выбрать проект по собственным ощущениям от обложки.

На странице проекта показываем общие планы и дополняем их деталями, чтобы создать полное впечатление об интерьере.

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

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

На старом сайте изображения теряли качество. Фото и видео не адаптировались под размеры экранов, отображались некорректно, выбивались из вёрстки и не масштабировались.

Цель любого портфолио — произвести положительное впечатление на потенциального клиента, а в этом случае всё могло произойти наоборот. Некачественный UX (или даже CX) мог отталкивать клиентов.

Это шло в разрез с сегментом рынка, в котором работают ink. Премиум проекты стоят недёшево, а плохой дизайн снижает уровень доверия и понижает ценник. Мы предложили решение.

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

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

Высокие требования нас не напугали, и в итоге проекта мы:

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