Сайт IT-компании на Laravel
Главные задачи проекта
Украинская IТ-компания Softwarium, специализирующаяся на разработке программного обеспечения, обратилась к нам за созданием быстрого сайта с индивидуальным дизайном и удобной панелью управления. При этом разработка корпоративного сайта IT-компании должна была осуществляться без компромиссов в виде CMS, шаблонов и готовых решений.
Спойлер: и мы это сделали. Так сказать, от нашей IТ-компании вашей IТ-компании.
Индивидуальный UI/UX дизайн
До нашей встречи Softwarium уже имел свой сайт на платформе Wix, но его дизайнерские и технологические решения успели устареть:
Первыми к делу приступили дизайнеры и создали современный дизайн страниц по всем UI/UX правилам: от визуального анализа и разработки концепции до адаптации макетов под стационарные и мобильные устройства:
Мы обновили стилистику и сохранили фирменные цвета, структуру и контент сайта-предшественника. В итоге у нас получился лаконичный и элегантный продукт в фирменном цвете Royal Blue, аккуратно балансирующий между деловитостью и легкостью, словно намекая пользователю, что его ожидает надёжное и простое сотрудничество:
Анимация на сайте выполняет практическую функцию: даёт отклик на ховеры и клики, не отвлекая пользователей от знакомства с контентом.
Особое внимание мы уделили функциональной стороне UX и сделали блоки сайта суперинформативными. Теперь их можно легко компоновать между собой и разными страницами прямо из админ-панели. Но об этом немного позже.
Адаптация
Сайт отлично смотрится на компьютерах, ноутбуках, планшетах и мобильных устройствах. Поскольку смартфоны и планшеты имеют сенсорное управление, все ховер-анимации «срабатывают» не при наведении курсора мышки, а при клике на кнопку или другой элемент интерфейса.
Вёрстка на мощных фреймворках Vue.js и Nuxt.js
В разработке интерфейса мы применили сразу два реактивных JavaScript-фреймворка — Vue.js и Nuxt.js, с помощью которых оживили множество блоков и типов страниц.
Интересные фишки блога
В разделе сайта «Блог» мы подключили полезную функцию «Поделиться», которая позволяет легко отправлять полезные статьи сайта на почту, в социальные сети и мессенджеры. Причём это можно сделать не только на странице с отдельной статьёй, но и в самом каталоге статей:
Благодаря библиотеке vue-in-viewport-mixin на каждой странице раздела удобно отслеживать позицию скролла и переключаться между пунктами в меню отдельной статьи:
Одной из самых интересных задач стала реализация формы на страницах блога, которая предлагает читателю оставить свой комментарий. Как только пользователь вписывает в форму своё имя и фамилию, инициалы тут же выводятся на аватарке. Пользователи могут не просто писать комментарии, но и оживить текст при помощи эмодзи и GIF-изображений. Это стало возможным благодаря Vue-библиотеке v-emoji-picker, а вот GIF-picker пришлось создавать самостоятельно, так как библиотеку под Vue до нас ещё не придумали:
Контактная форма
Под контакты на сайте выделена отдельная страница, содержащая форму для заявок. Здесь мы использовали библиотеку vue-phone-number-input, которая предлагает выбрать страну из выпадающего вертикального списка и проверяет мобильный номер на корректность:
При ховере на адреса филиалов компании карта меняет свой внешний вид:
Динамический URL-адрес
URL (Uniform Resource Locator) — это адрес сайтов и файлов, загруженных в интернет и отображающийся в строке браузера.
Мы сделали URL-адреса страниц сайта Softwarium динамическими. Это значит, что если клиент изменит заголовок любой статьи, ему не понадобится самостоятельно править название адреса страницы, так как он изменится автоматически следом за новым заголовком.
Фича проекта — конструктор страниц в админке
Бекенд сайта реализован на PHP-фреймворке Laravel 9, благодаря которому мы получили суперпроизводительный и мощный сайт. Но это ещё не всё. Важнейшей фичей проекта стал уникальный конструктор страниц в рамках заданной дизайн-концепции. Это значит, что наш клиент может создавать страницы, меню и статьи блога без помощи программистов буквально за считанные минуты. Для этого дизайнеры и разработчики заготовили огромное количество блоков, которые можно наполнять контентом, редактировать и размещать в любом порядке. А при желании и вовсе переделать сайт на абсолютно другую тематику.
Добавление блока на страницу:
Возможность менять блоки местами:
Список страниц:
Страница настроек меню:
По просьбе клиента мы реализовали кастомизацию кнопок в каждом блоке сайта, и при желании клиент сможет поменять даже текст и цвет кнопок в состоянии наведения и нажатия:
Сайт на Laravel в данном случае представляет собой не только удобный конструктор, но и своего рода CRM-систему, так как заявки со всех форм приходят в админку:
SEO-дружественность сайта
Оптимизировать сайт под SEO значит не просто сделать его доступным для поисковых систем, но и выделить среди множества других сайтов-конкурентов. Для этого мы настроили все необходимые параметры: метатеги, микроразметку, альтернативные подписи к картинкам, а также файлы robots.txt (стандарт исключений для роботов) и sitemap, помогающий поисковым системам находить, сканировать и индексировать страницы на сайте.
Супербыстрая загрузка страниц
Сложная структура сайта и разнообразие его контента не помешали нам добиться без преувеличения быстрой загрузкой страниц. Мы достигли такого эффекта с помощью прогрессивных фреймворков: JavaScript-фреймворки Nuxt.js и Vue.js на стороне клиента, и PHP-фреймворк Laravel — на стороне сервера. Такой подход позволяет сделать процесс разработки гибким и устранить излишнюю избыточность и медлительность, которой так «страдают» готовые CMS-системы типа WordPress.
Интеграция клиентской и серверной части сайта происходит по API (Application Programming Interface) — технологии, которая позволяет одной программе обмениваться данными с другой.
Результаты сотрудничества
Нетривиальные и местами непростые задачи от компании Softwarium мы встретили с энтузиазмом и справились с ними на все 100%. Так, мы сделали всё возможное, чтобы насыщенный 20-летний опыт Softwarium уютно уместился на страницах нового, стильного и современного сайта IT-компании, и при этом отличался высокой скоростью, производительностью и мощностью. Нам удалось реализовать уникальный в своем роде конструктор страниц прямо в админ-панели сайта, который позволит клиенту играть с блоками и создавать новые страницы без кода.
Вне всякого сомнения, сотрудничество с IT-компанией Softwarium в целом и кейс по разработке корпоративного сайта IT-компании на Laravel+vue.js подарили нам уникальный опыт и творческое развитие.
