Как делать сложные проекты на low-code: сайт европейской инвестиционной строительной компании от AFFINAGE
Гибкая админка на стеке Nuxt+Strapi, прототипы в Miro и ценный опыт международного сотрудничества.
Рассказываем, как команда AFFINAGE разработала гибко настраиваемый сайт с административной панелью на low-code для DKG Development и почему выбрала именно связь Nuxt+Strapi. Делимся особенностями греческого менталитета и опытом международного сотрудничества.
DKG Development — европейская инвестиционная строительная компания, штаб которой располагается в Афинах, Греция. Специализируются на реализации строительных проектов. Сотрудничают с международными компаниями, фондами и частными партнерами: расширяют базы объектов и оформляют частные инвестиции.
Команде AFFINAGE нужно было разработать гибко настраиваемый репутационный сайт и запустить его к важной отраслевой конференции, в которой участвовал заказчик.
Основные задачи:
1. Спроектировать и разработать стильный и современный сайт с нуля.
2. Настроить административную панель на low-code технологиях:
- дать возможность редактировать текстовый и визуальный контент;
- размещать модели объектов в высоком разрешении;
- модерировать и редактировать все три языковые версии, представленные на сайте;
3. Сделать сайт адаптивным.
Проектирование
Мы нестандартно подошли к проектированию и сделали прототип сайта в Miro. Заказчику было привычнее наблюдать за процессом и оставлять к нему комментарии именно в этой программе. Так в Miro оказались старая и новая архитектуры сайта, а также майнд-карта — в ней мы собрали системные связи между целым и его частями, так как процедуры и информация от клиента были в хаотичном состоянии.
За основу взяли структуру старого сайта компании, доработали логику и добавили необходимые блоки. Также расписали компоненты и структурную вложенность, определили, где какие разделы должны быть, и как они между собой взаимодействуют.
Дизайн
Разработка дизайна шла в два этапа: текстовый и визуальный. На первом этапе макеты для сайта разрабатывались на основе текстового контента с ориентацией на проектируемые элементы дизайна. Специальные фоны и видеоролики рендерились отдельно по проекту нашего арт-директора. На втором этапе дизайн доработали с учетом требований к визуальному контенту.
Мы подготовили специальный макет для визуализации, который позволил заказчику разместить на сайте свои рендеры в высоком разрешении.
Разработка административной панели на low-code
Мы внедрили административную панель, с которой может работать любой пользователь, даже без навыков программирования. При этом риск ошибки при редактировании контента практически нулевой благодаря понятной системе: для каждого шага мы придумали понятные описания, подсказки и настроили систему ограничений, которая не пропускает ничего «лишнего» и не ломает верстку.
Связь Nuxt+Strapi позволила сделать проект максимально удобным для редактирования абсолютно любого контента. Разработка на других фреймворках заняла бы гораздо больше времени и по итогу могла не дать необходимого набора опций для управления, получиться не такой гибкой. Нам, кроме того, было важно успеть подготовить полноценный сайт к определенной дате. Весь текстовый контент доступен для редактирования индивидуально в каждой из имеющихся языковых версий. Любые изменения моментально выводятся на фронтовую часть, что в дальнейшем позволит заказчику легко модифицировать и модерировать сайт.
В административной панели есть локали — это региональные настройки, которые влияют на язык интерфейса. Из них выводятся данные в зависимости от выбранной языковой версии. При переключении языка на фронтенд-части Nuxt отправляет запрос в базу данных и сам определяет, из какой именно локали нужно выводить данные.
Любой объект на сайте можно не только перевести, но и активировать, то есть выбрать выводимые объекты для разных языковых зон. Это сделано для того, чтобы управлять всеми типами локалей. Например, если не опубликовать английскую версию какого-либо объекта, то для клиента, который выбрал на сайте английский язык, этот объект просто не будет существовать. При этом на русской и греческой версии сайта объект будет отображаться.
Основные страницы сайта и их особенности
Главная страница
Главная включает в себя все необходимые для арендаторов и покупателей недвижимости функции. На первом экране есть фильтр с возможностью быстрого поиска подходящего объекта по его цели (аренда или покупка), типу и расположению. Ниже есть информация о DKG Development, услуги, которые предоставляет компания, и блок с лучшими проектами.
Чтобы разместить всю необходимую информацию и не перегрузить пользователя, мы решили сделать большой поэкранный скролл. Все наполнение страницы и сайта в целом загружено в самом высоком разрешении, что требовало особого подхода к верстке.
На первом экране находится видео, которое останавливается при наведении курсора на блок с фильтром и продолжается с того же места, на котором остановилось, если курсор убрать. Так пользователь может сфокусироваться на заполнении фильтров и не отвлекаться на мелькающем фоне. По просьбе клиента добавили эффект облаков: он отлично сочетается с дизайном, дает воздушность и «оживляет» рендеры.
Мы учли особые пожелания по управлению и пользовательскому опыту и продублировали для слайдеров управление еще с клавиатуры, чтобы сайт был более удобным и супер функциональным. Для переключения картинок достаточно нажимать соответствующие клавиши, пробел открывает картинку в модальном окне для подробного просмотра, Escape закрывает. Такой функционал привычен для зарубежного UX и хорошо знаком аудитории DKG.
О компании
На страницу «О компании» добавили сложный элемент и расположили несколько вертикальных скроллов внутри одного вертикального скролла.
Основной скролл включает в себя пункты с миссиями, доводами и целями компании, и последние два реализованы дополнительными вертикальными скроллами по списку утверждений.
Продумали два варианта взаимодействия: «наведение курсора мыши на десктопе» и «свайп на планшетах/мобилках». Событие скролла при наведенном курсоре мыши на блоки с данной функциональностью перехватывается, и пользователь скроллит контент внутри блока. Перехват свайпа происходит похожим образом: если пользователь свайпает область блока с такой функциональностью, происходит прокрутка контента внутри данного блока, а не всей страницы. В блоках со скроллом размещена полезная информация, которая «задерживает» на сайте. Используя такое решение, мы ориентировались на позитивный UX: пользователи не любят листать лишние тысячи пикселей контента, которые им неинтересны.
В качестве дизайнерского решения добавили бегущую строку с глитч-эффектом — он активируется при наведении курсора. Такое решение перекликается с видео на главной, где тоже есть глитч.
Объекты недвижимости
В этом блоке собраны все объекты, которые представляет компания для покупки и аренды: апартаменты, студии, офисы и многое другое. Все объекты можно отфильтровать по расположению, ценам и другим параметрам.
Наша команда разместила карточки объектов недвижимости и сделала их смещение по отношению друг к другу. Это разработано на модуле CSS Flexbox, который предназначен для создания гибких макетов. С помощью такой технологии можно очень просто и гибко расставить элементы, распределить доступное пространство между ними и выровнять любым способом.
В блок «Объекты» добавили сложный фильтр объектов с двойной вложенностью по типу объекта. Система связей позволяет выбрать любое сочетание элементов, кроме фильтра ID. В этом фильтре идет поиск конкретного объекта по идентификатору, который заложен в базе компании. Есть дополнительные фильтры, позволяющие максимально конкретизировать запрос, например, количество комнат в объекте и год ремонта.
Справа от карточек объектов расположено меню по типу недвижимости с актуальной информацией по количеству объектов определенного типа. Слева — дополнительная сортировка объектов по цене, площади, отношению цены к площади.
Карточка объекта
В карточке каждого объекта находится индивидуальный набор фотографий, прокруткой которых также можно управлять клавиатурой. В описании объекта можно найти подробную информацию о расположении и дизайне, а также об инвестиционных возможностях и доходе от сдачи помещения в аренду. Помимо этого, в карточке каждого объекта есть следующие данные:
- список удобств;
- список расстояний до ключевых заведений, например, аэропорт, школа, университет, автобусная остановка, аптека;
- виды, например, на город, на горы;
- расположение.
Можно скачать презентацию объекта и план этажей, посмотреть видео об объекте или ознакомиться с похожими предложениями.
Весь текст на сайте переведен на три языка: русский, английский и греческий.
Итоги
Новый сайт компании DKG Development получился очень технологичным. Заказчик может менять любой текст, вносить любые изображения, включая фоновые, и выкладывать их в высоком разрешении, не волнуясь, что в какой-то момент сайт «ляжет»и откажется работать.