Задача — за 2 месяца разработать крутой сайт на двух языках, чтобы в будущем редактировать его без разработчика
DA Construction — архитектурное бюро на Бали, отмеченное многими наградами за свои виллы. Владельцу этого бюро нужен был сайт, который достойно представит компанию, проекты и команду.
Клиент сразу предупредил, что будет очень требователен к дизайну, но меня это не пугало.
Получив в распоряжение только логотип, я превратил его в большой и структурный сайт на двух языках, который легко редактировать без привлечения разработчика.
Я двигался по дизайн процессу из четырех шагов, который позволил сделать этот проект без правок
До просчета
Еще до выставления счета я согласовал с клиентом дизайн направление.
На созвоне я показал 3 разных дизайн концепции на примере сайтов с дизайн-наградами. Мы остановились на премиум концепции с черным фоном и тонкими шрифтами.
После просчета
Какие дизайн решения у конкурентов?
Чтобы узнать это, я детально проанализировал 10 конкурентов, разобрал структуру их сайтов, стиль, объем текстов, количество анимаций. Важно, я всегда делаю анализ без ИИ.
Это позволило мне строить свои решения на реальном рынке, а не на фантазиях из головы.
Структура сайта
Дальше — структура всех страниц сайта. Под нее копирайтер написал тексты, и после этого я сделал прототип.
Цвета и шрифты я подключаю на последних этапах, чтобы, согласовывая тексты, не отвлекаться на украшательства.
Шрифты, цвета, анимации
Согласовав прототип, я собираю финальные шрифты, сетку, цвета в дизайн систему и презентую ее в Loom или на созвоне.
Для дизайна архитектурного бюро я остановился на легких линиях по сетке сайта, которые пиксель в пиксель примыкают к текстовым блокам и изображениям на сайте.
Линии подчеркивают внимание к деталям и визуально собирают пустое пространство, но не отвлекают от проектов. А еще они вызывают ассоциации с планом нового проекта в архитектуре.
Линии я решил сделать в ярком цвете Cyan, чтобы сделать контрастный цвет для ссылок и акцентов, где это будет необходимо.
Каждый этап работы я презентую на созвоне или записываю видео Loom, где аргументирую свои решения.
Дизайн и верстка
Когда все предварительные шаги согласованы, дизайн и верстка проходят легко и непринужденно.
За полтора месяца я сверстал, адаптировал и перевел 30 страниц сайта, постепенно согласовывая их с клиентом.
Сначала 3 экрана главной.
Затем всю главную.
Типовые страницы.
Все страницы проектов.
Мультиязычность.
Универсальная страница проекта
Чтобы в будущем команда клиента смогла добавлять на сайт новые проекты, я создал множество блоков, из которых можно составить любую страницу.
Можно как угодно изменять порядок блоков и добавлять новые из комплекта, но все равно страница проекта будет смотреться целостно.
Награды
Кейс выиграл награду Tilda Featured
Смотреть еще
