Создание сайта Playgrounds.com

Клиент

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

Суть работы

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

Как мы это делали

Перед началом работы над сайтом, нами был выполнен дизайн логотипа для компании. Согласно пожеланиям клиент, логотип выполнен в строгих тонах — синий, черный. Добавлен символ — силуэт ребенка с поднятой рукой в синем круге между слов Play и Grounds.

Прототипирование и веб-дизайн в Figma

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

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

Верстка дизайна в Tailwind CSS

Затем мы сверстали готовый и утвержденный дизайн (в который в последующем вносились некоторые несущественные правки), используя производительный и модный ныне  Tailwind CSS . Это целый фреймворк, делающий процесс верстки дизайна в HTML шаблон таким легким, удобным и быстродейственным как это только возможно в современном мире. А на выходе — максимально облегченный HTML+CSS шаблон, готовый как к установке в чистом виде, так и к переносу на любую известную cms систему.

Создание сайта на базе Laravel/React

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

Итог

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