Проекты Коттеджей
Для строительства тихого уголка за городом необходим проект, который должен максимально удобно подстроиться под ваши условия. Чтобы выбрать такой проект, порой нужно приложить немало усилий, но только не в нашем случае. Основная задумка проекта — создать удобную и понятную площадку для покупки проекта. У клиента для этого были хорошие связи с большим количеством подрядчиков строителей, а также базой архитектурных чертежей.
Проекты Коттеджей — один из самых любимых проектов.
Задача
Создать удобный интерфейс для целевой аудитории 23 – 55 лет, который позволит определиться с выбором проекта для строительства и его покупки.
Для первой версии сайта страницу регистрации и личный кабинет решили отложить на потом, а до этого обкатать интерфейс и повысить его юзабиллити в будущем. Необходимо было сделать три версии: десктопную, мобильную и для планшета.
Решение
Учитывая, что проект был только на уровне идеи, никакой айдентики у него не было, поэтому вместе с интерфейсом нужно было нарисовать логотип. Идей было несколько, но остановился я на таком варианте:
Логотип прост в исполнении. Под него можно рисовать большое количество иллюстраций и тизеров в line-art стиле. Также знак может быть легко трансформирован в разные формы строений:
Логотип принят, поехали далее. У клиента уже были разработанные «варфреймы» для десктопной версии такого вида. До этапа дизайна варфреймы пришлось переделать и утвердить. Получилось их много — 27 монтажных областей в иллюстраторе. В голове я уже отчетливо видел будущую визуальную часть сайта, но на этом этапе фокус упал на типографику и расположение блоков, так как мелочи прорабатывать будем потом.
После утверждения варфреймов началась работа над дизайном главной страницы под десктопы.
Главная цель — помочь пользователю с выбором проекта.
Для это существует помощник и вспомогательные статьи. Если остаются вопросы, всегда можно задать их онлайн-консультанту. Кроме стандартной фильтрации, которая присутствует практически на каждой странице, на главной размещен блок с указанными блоками:
Важно правильно показать карточки проектов, потому что это ключевой контент. Как в раскрытом, так и в развернутом виде. После нескольких иттераций получаем главную, которую отправляем клиенту и он ее утверждает
На внутренних страницах самой сложной и объемной оказалась открытая карточка проекта. В ней располагается множество информации, которую я решил структурировать табами, под основной информацией
Одной из приятных деталей для пользователя является отображение примерной стоимости строительства. На мой взгляд, это гораздо важнее стоимости чертежей, так как люди планируют определенную сумму для строительства, и тут сразу становится понятно, «влезаешь» ты в бюджет, или нет.
Вкладки проекта
По-умолчанию открывается вкладка «Планы и фасады», который поможет определиться с визуальной составляющей проекта. Фотографии с разных ракурсов, а также план здания.
Здесь также указана более подробная информация о стоимости строительства: цены на материалы и услуги. Но эта информация является не окончательной и лишь приблизительной.
Пользователь может в любой момент отправить запрос на расчет сметы строительства строителям, чтобы точно знать сумму, которую придется вкладывать в свой дом.
Оформление проекта
Учитывая, что личного кабинета нет и авторизация на сайте отсуствует, у пользователя есть два сценария покупки проекта:
Для страниц статей были отрисованы 6 тизеров для каждлой из категорий. Рисовать их было одно удовольствие, так как весь проект рисовался мною под ключ и иллюстрации как никакие другие подошли сюда один к одному:
Проекты Коттеджей — открытый сайт для своих пользователей, поэтому страница контактов получилась немаленькой:
Всего в десктоп версии проекта получилось 57 экранов. Проект не мал даже для первой версии, поэтому «Cuts» проекта получились очень объемными. Кроме файла «Cuts» мною было написано сопроводительное письмо front-end разработчику.
По завершению основной веб-верии сайта я собрал все иконки проекта в один файл и получилась вот такая сборка:
Мобильная версия сайта:
Изначально была договоренность с клиентом, что в младших версиях сайта будут отстуствовать некоторые компоненты: сравнение проектов, помощник выбора проекта. Несмотря на урезанность мобильной версии, экранов получилось тоже большое количество — 49 штук. И вот некоторые из них:
На мобильной версии я старался сосредоточиться на удобстве распознования и считывания основных данных на экране. Каждый из них был отдельно проверен на пятом айфоне.
Версия сайта для планшетов:
Заключающей стадией была адаптация проекта под планшеты, где особых трудностей не возникло за исключением пары экранов, где всю информацию пришлось разделять на две части:
Бонус и заключение
Спустя пару месяцев я сделал клиенту визитные карточки на основе гайдлайнов и графики проекта:
Проект получился очень масштабным, если посчитать «Cuts», экраны десктопа, мобильную версию и планшеты, то на выхлопе у меня вышло 166 экранов. Несмотря на большое количество работы, работа мне пришлась по вкусу.
Надеюсь, что с таким проектом я хоть немного помог пользователям сохранить нервов при использовании продукта и не доставлять им лишних вопросов в использовании и подбора проектов для своего дома.
Спасибо за внимание!
Проекты-коттеджей.рф
