Как делать сложные проекты на low-code: сайт европейской инвестиционной строительной компании от AFFINAGE

Гибкая админка на стеке Nuxt+Strapi, прототипы в Miro и ценный опыт международного сотрудничества.

Как делать сложные проекты на low-code: сайт европейской инвестиционной строительной компании от AFFINAGE

Рассказываем, как команда AFFINAGE разработала гибко настраиваемый сайт с административной панелью на low-code для DKG Development и почему выбрала именно связь Nuxt+Strapi. Делимся особенностями греческого менталитета и опытом международного сотрудничества.

DKG Development — европейская инвестиционная строительная компания, штаб которой располагается в Афинах, Греция. Специализируются на реализации строительных проектов. Сотрудничают с международными компаниями, фондами и частными партнерами: расширяют базы объектов и оформляют частные инвестиции.

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

Основные задачи:

1. Спроектировать и разработать стильный и современный сайт с нуля.

2. Настроить административную панель на low-code технологиях:

  • дать возможность редактировать текстовый и визуальный контент;
  • размещать модели объектов в высоком разрешении;
  • модерировать и редактировать все три языковые версии, представленные на сайте;

3. Сделать сайт адаптивным.

Проектирование

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

За основу взяли структуру старого сайта компании, доработали логику и добавили необходимые блоки. Также расписали компоненты и структурную вложенность, определили, где какие разделы должны быть, и как они между собой взаимодействуют.

Проектирование делали в Miro по просьбе заказчика. На доске были старая и новая архитектуры сайта, а также майнд-карта
Проектирование делали в Miro по просьбе заказчика. На доске были старая и новая архитектуры сайта, а также майнд-карта

Дизайн

Разработка дизайна шла в два этапа: текстовый и визуальный. На первом этапе макеты для сайта разрабатывались на основе текстового контента с ориентацией на проектируемые элементы дизайна. Специальные фоны и видеоролики рендерились отдельно по проекту нашего арт-директора. На втором этапе дизайн доработали с учетом требований к визуальному контенту.

Так готовили макеты под визуализацию: изначально были блоки и текст, потом подстраивались рендеры
Так готовили макеты под визуализацию: изначально были блоки и текст, потом подстраивались рендеры

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

Разработка административной панели на low-code

Мы внедрили административную панель, с которой может работать любой пользователь, даже без навыков программирования. При этом риск ошибки при редактировании контента практически нулевой благодаря понятной системе: для каждого шага мы придумали понятные описания, подсказки и настроили систему ограничений, которая не пропускает ничего «лишнего» и не ломает верстку.

Связь Nuxt+Strapi позволила сделать проект максимально удобным для редактирования абсолютно любого контента. Разработка на других фреймворках заняла бы гораздо больше времени и по итогу могла не дать необходимого набора опций для управления, получиться не такой гибкой. Нам, кроме того, было важно успеть подготовить полноценный сайт к определенной дате. Весь текстовый контент доступен для редактирования индивидуально в каждой из имеющихся языковых версий. Любые изменения моментально выводятся на фронтовую часть, что в дальнейшем позволит заказчику легко модифицировать и модерировать сайт.

Игорь Яковлев, CEO AFFINAGE

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

Любой объект на сайте можно не только перевести, но и активировать, то есть выбрать выводимые объекты для разных языковых зон. Это сделано для того, чтобы управлять всеми типами локалей. Например, если не опубликовать английскую версию какого-либо объекта, то для клиента, который выбрал на сайте английский язык, этот объект просто не будет существовать. При этом на русской и греческой версии сайта объект будет отображаться.

Основные страницы сайта и их особенности

Главная страница

Главная включает в себя все необходимые для арендаторов и покупателей недвижимости функции. На первом экране есть фильтр с возможностью быстрого поиска подходящего объекта по его цели (аренда или покупка), типу и расположению. Ниже есть информация о DKG Development, услуги, которые предоставляет компания, и блок с лучшими проектами.

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

Показываем большой поэкранный скролл главной страницы

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

Елизавета Казанцева, арт-директор AFFINAGE

На третьем экране сделали слайдер с автоматическим форматом прокрутки фотографий. Картинки плавно перетекают одна в другую, а управление прокруткой работает не только при использовании мышки, но и с клавиатуры.

Мы учли особые пожелания по управлению и пользовательскому опыту и продублировали для слайдеров управление еще с клавиатуры, чтобы сайт был более удобным и супер функциональным. Для переключения картинок достаточно нажимать соответствующие клавиши, пробел открывает картинку в модальном окне для подробного просмотра, Escape закрывает. Такой функционал привычен для зарубежного UX и хорошо знаком аудитории DKG.

Марго Соловых, менеджер AFFINAGE

О компании

На страницу «О компании» добавили сложный элемент и расположили несколько вертикальных скроллов внутри одного вертикального скролла.

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

Продумали два варианта взаимодействия: «наведение курсора мыши на десктопе» и «свайп на планшетах/мобилках». Событие скролла при наведенном курсоре мыши на блоки с данной функциональностью перехватывается, и пользователь скроллит контент внутри блока. Перехват свайпа происходит похожим образом: если пользователь свайпает область блока с такой функциональностью, происходит прокрутка контента внутри данного блока, а не всей страницы. В блоках со скроллом размещена полезная информация, которая «задерживает» на сайте. Используя такое решение, мы ориентировались на позитивный UX: пользователи не любят листать лишние тысячи пикселей контента, которые им неинтересны.

Илья Коняхин, Frontend-разработчик AFFINAGE

Элементы на странице «О компании»: глитч-эффект с бегущей строкой и скролл с ценностями компании

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

Елизавета Казанцева, арт-директор AFFINAGE

Объекты недвижимости

В этом блоке собраны все объекты, которые представляет компания для покупки и аренды: апартаменты, студии, офисы и многое другое. Все объекты можно отфильтровать по расположению, ценам и другим параметрам.

Наша команда разместила карточки объектов недвижимости и сделала их смещение по отношению друг к другу. Это разработано на модуле CSS Flexbox, который предназначен для создания гибких макетов. С помощью такой технологии можно очень просто и гибко расставить элементы, распределить доступное пространство между ними и выровнять любым способом.

Сделали нешаблонную сетку и сместили карточки объектов недвижимости по отношению друг к другу.
Сделали нешаблонную сетку и сместили карточки объектов недвижимости по отношению друг к другу.

В блок «Объекты» добавили сложный фильтр объектов с двойной вложенностью по типу объекта. Система связей позволяет выбрать любое сочетание элементов, кроме фильтра ID. В этом фильтре идет поиск конкретного объекта по идентификатору, который заложен в базе компании. Есть дополнительные фильтры, позволяющие максимально конкретизировать запрос, например, количество комнат в объекте и год ремонта.

Илья Коняхин, Frontend-разработчик AFFINAGE

Справа от карточек объектов расположено меню по типу недвижимости с актуальной информацией по количеству объектов определенного типа. Слева — дополнительная сортировка объектов по цене, площади, отношению цены к площади.

Карточка объекта

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

  • список удобств;
  • список расстояний до ключевых заведений, например, аэропорт, школа, университет, автобусная остановка, аптека;
  • виды, например, на город, на горы;
  • расположение.

Можно скачать презентацию объекта и план этажей, посмотреть видео об объекте или ознакомиться с похожими предложениями.

Весь текст на сайте переведен на три языка: русский, английский и греческий.

Итоги

Новый сайт компании DKG Development получился очень технологичным. Заказчик может менять любой текст, вносить любые изображения, включая фоновые, и выкладывать их в высоком разрешении, не волнуясь, что в какой-то момент сайт «ляжет»и откажется работать.

11
Начать дискуссию