Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации

Редизайн трех сайтов для LEGENDA Intelligent Development

15 декабря ‘21

Заказчик: LEGENDA Intelligent Development

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

Агентство-исполнитель кейса

CRT ex Creative

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

1. Вводная задача от заказчика, проблематика, цели

Все пользователи любят красивые и понятные сайты. И чем красивее и понятнее сайт - тем выше вероятность того, что посетитель не уйдет с вашего ресурса, правильно поймет всю информацию и станет вашим клиентом. Для упрощения работы над этой задачей можно и нужно использовать UI-Kit. Хотим рассказать о своем опыте на примере кейса по редизайну сайтов известного девелопера LEGENDA Intelligent Development.

Перед началом работ перед нами стояли следующие задачи:

1) редизайн предыдущих страниц по ТЗ заказчика, настройка юзабилити и фронта.

2) оптимизация работы всех составляющих сайта

3) создание интеграции с API заказчика.

4) создание и настройка виджетов, с помощью которых заказчик сможет самостоятельно создавать новые страницы сайтов.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Вся “внутренняя” составляющая сайта была выполнена на NodeJS, PostgreSQL, NestJS, TypeORM. Это позволило создать хорошую интеграцию с API заказчика. После того, как backend часть была закончена, мы провели два этапа тестирования – e2e и Unit, при помощи Jest. А затем перешли к самому важному в любом редизайне – фронтенду.

Нам хотелось сделать красивый и удобный сайт. Для этого в самом начале работы мы разработали полноценный UI-Kit. Он включал в себя элементы для всех трех сайтов, над которыми нам предстояло работать. В качестве основы были взяты React, NextJS и SCSS, являющиеся сегодня стандартом быстрой и качественной разработки SSR приложений. Было решено не использовать Redux, а вместо него взять React-Query, так как полноценный стор сайтам был не нужен.

Следующим шагом стало выполнение требования заказчика о том, чтобы каждая страница состояла из отдельных виджетов. Это удобно для дальнейшей работы по наполнению сайта, ведь при наличии разных виджетов, страницы можно собирать из них самостоятельно, как конструктор. В это же время шел процесс разработки административной части сайта. Для того чтобы быстро и качественно разработать административную панель, был выбран CSS-фреймворк Material-UI, который позволил в кратчайшие сроки реализовать собственную админ панель и использовать ее между тремя сайтами.

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

3. Результаты сотрудничества

Работы по проекту для LEGENDA Intelligent Development позволили реализовать такие интересные решения, как создание полноценного UI-Kit, работа с CSS-фреймворк Material-UI для подготовки административной панели, работа с виджетами и декораторами.

4. Заключение

С визуальной точки зрения – редизайн сайтов для LEGENDA Intelligent Development. получился лаконичным, функциональным и современным. Мы уверены, что все выбранные стилевые решения помогают отразить главный принцип нашего заказчика – формирование трендов, которые становятся нормой рынка недвижимости.

С технической точки зрения – интересна архитектура созданных виджетов (более 65). А также наличие отдельных пакетов (UI-Kit, административная панель, различные сервисы и shared-пакеты), которые позволяют использовать виджеты и другие компоненты сайта бесконечно и между разными страницами сайта. Таким образом, мы выполнили главный запрос заказчика - создать для него инструмент, при помощи которого он сможет самостоятельно создавать страницы из виджетов.

Агентство-исполнитель кейса

CRT ex Creative

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