Создание сайта Playgrounds.com
Клиент
Наш постоянный клиент, Николас Бридлав, основатель крупного производителя игровых площадок и оборудования, владелец нескольких онлайн-магазинов по продаже своей продукции. Сайты, в свою очередь, созданы и поддерживаются тоже нами. Как и система внутреннего документооборота для компании.
Суть работы
Перед нами была поставлена цель создать современный, функциональный сайт для дочерней компании — подразделения, занимающегося проверкой и обслуживанием игровых площадок. Сайт, как всегда, должен быть адаптивным, оснащен несколькими онлайн-калькуляторами, и должен привлекать целевую аудиторию — общественные организации, коммерческие структуры и прочих желающих.
Как мы это делали
Перед началом работы над сайтом, нами был выполнен дизайн логотипа для компании. Согласно пожеланиям клиент, логотип выполнен в строгих тонах — синий, черный. Добавлен символ — силуэт ребенка с поднятой рукой в синем круге между слов Play и Grounds.
Прототипирование и веб-дизайн в Figma
Далее, мы создали прототипы и дизайн каждой целевой страницы в программе Figma. Figma позволяет в режиме реального времени создавать, комментировать, корректировать как прототипы, так и полноценные веб-дизайны для десктопа, адаптивных версий сайтов, приложений и т.д. Снабдив наши прототипы, а затем и дизайны всех страниц интерактивными элементами, мы позволили клиенту в онлайн режиме отслеживать разработку дизайна и будущего функционала.
В дизайне страниц мы использовали как стоковые так и индивидуальные иллюстрации — инфографику и уникальные иконки. Главная страница выполнена в современном стиле — лэндинг страницы, с насыщенными графикой и небольшим количеством текста блоками. Цель этой страницы — ознакомить пользователя со всеми аспектами услуг компании и мягко подвести его к необходимости заказать услуги проверки и обслуживания игрового оборудования, заполнив форму и начав диалог с менеджерами компании.
Верстка дизайна в Tailwind CSS
Затем мы сверстали готовый и утвержденный дизайн (в который в последующем вносились некоторые несущественные правки), используя производительный и модный ныне Tailwind CSS . Это целый фреймворк, делающий процесс верстки дизайна в HTML шаблон таким легким, удобным и быстродейственным как это только возможно в современном мире. А на выходе — максимально облегченный HTML+CSS шаблон, готовый как к установке в чистом виде, так и к переносу на любую известную cms систему.
Создание сайта на базе Laravel/React
Разработку бекенда, темы и всего функционала сайта мы решили сделать на перспективной платформе Laravel. Это сделало сайт просто молниеносным, несмотря на насыщенность графики и красочность иллюстраций. Теперь пользователь не будет ждать даже и секунды загрузки как полновесной десктоп версии так и мобильной версии этого прекрасного сайта.
Итог
У нас получился симпатичный, привлекательный сайт, который нравится и нам и нашему клиенту, а главное — пользователям и потенциальным клиентам. Загляденье!
Команда разработчиков
Константин Давыдов — дизайн, адаптивное фронтенд-кодирование HTML / CSS / JS
Сергей Толстик – React/Laravel бэкенд — программирование и оптимизация
Кристина Кузьменко — управление проектом
Юрий Давыдов — юридическая поддержка
Со всей нашей командой можно познакомиться здесь.
Технологии
Adobe Photoshop CC, Adobe Illustrator CC, Figma
HTML5 / CSS3 / Javascript, Tailwind CSS
PHP / MySQL, React/Laravel