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

Редизайн трех сайтов для 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

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

Ruward использует технологию "cookie" – сохранение на компьютере пользователя небольших текстовых файлов. Также мы используем на сайте сервис Яндекс.Метрика. Эта информация не позволит идентифицировать вас, однако может помочь нам улучшить работу нашего сайта. Если вы не согласны, чтобы мы использовали данные технологии, вы должны соответствующим образом установить настройки вашего браузера или не использовать наш сайт.

Согласен