Сайт 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 подарили нам уникальный опыт и творческое развитие.
Головні завдання проєкту
Українська ІТ-компанія Softwarium, що спеціалізується на розробці програмного забезпечення, звернулася до нас за створенням швидкого сайту з індивідуальним дизайном та зручною панеллю управління. При цьому розробка корпоративного сайту IT-компанії мала здійснюватися без компромісів у вигляді CMS, шаблонів та готових рішень.
Спойлер: і ми це зробили. Так би мовити, від нашої IT-компанії вашій IT-компанії.
Індивідуальний UI/UX дизайн
Ми оновили стилістику та зберегли фірмові кольори, структуру та контент сайту-попередника. У результаті у нас вийшов лаконічний і елегантний продукт у фірмовому кольорі Royal Blue, що акуратно балансує між діловитістю і легкістю, наче натякаючи користувачеві, що на нього чекає надійна і проста співпраця:
Особливу увагу ми приділили функціональній стороні UX та зробили блоки сайту суперінформативними. Тепер їх можна легко компонувати між собою та різними сторінками прямо з адмінпанелі. Але про це трохи згодом.
Адаптивність
Сайт має чудовий вигляд на комп’ютерах, ноутбуках, планшетах та мобільних пристроях. Оскільки смартфони та планшети мають сенсорне керування, всі ховер-анімації «спрацьовують» не при наведенні курсора мишки, а при натисканні на кнопку або інший елемент інтерфейсу.
Верстка на потужних фреймворках 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 подарували нам унікальний досвід та творчий розвиток.
Комментарии