Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Сайт IT-компанії на Laravel

Головні завдання проєкту

Українська ІТ-компанія Softwarium, що спеціалізується на розробці програмного забезпечення, звернулася до нас за створенням швидкого сайту з індивідуальним дизайном та зручною панеллю управління. При цьому розробка корпоративного сайту IT-компанії мала здійснюватися без компромісів у вигляді CMS, шаблонів та готових рішень.

Спойлер: і ми це зробили. Так би мовити, від нашої IT-компанії вашої IT-компанії.

Індивідуальний 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, завдяки якому ми отримали суперпродуктивний та потужний сайт. Але це ще не все. Найважливішою фічею проєкту став унікальний конструктор сторінок у рамках заданої дизайн-концепції. Це означає, що наш клієнт може створювати сторінки, меню та статті блогу без допомоги програмістів буквально за лічені хвилини. Для цього дизайнери та розробники заготовили величезну кількість блоків, які можна наповнювати контентом, редагувати та розміщувати у будь-якому порядку. А за бажання взагалі переробити сайт на абсолютно іншу тематику.

Додавання блоку на сторінку:

Banner

Можливість міняти блоки місцями:

Banner

Список сторінок:

Banner

Сторінка налаштувань меню:

Banner
На прохання клієнта ми реалізували кастомізацію кнопок у кожному блоці сайту, і за бажання клієнт зможе поміняти навіть текст і колір кнопок у стані наведення та натискання:
Banner

Сайт на Laravel в цьому випадку є не тільки зручним конструктором, але й свого роду CRM-системою, оскільки заявки з усіх форм приходять до адмінки:

Banner

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 подарували нам унікальний досвід та творчий розвиток.

Комментарии

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Ми зробимо справді швидкий, потужний та безпечний корпоративний сайт без відмовок та компромісів.

Ми вміємо це доведено досвідом десятків великих проектів на «дорослих» технологіях, без компромісних CMS та шаблонів. Напишіть нам, щоб прорахувати вартість та терміни для Вашого конкретного випадку вже сьогодні.

Над проєктом працювали

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x