Сайт IT-компанії на Laravel
Головні завдання проєкту
Українська ІТ-компанія 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 подарували нам унікальний досвід та творчий розвиток.
Комментарии