Назад
BeeWell

ui/ux design / front-end / back-end / woocommerce

Вперед
brand.me

ui/ux design / front-end / back-end / wordpress

we.design

ui/ux design / front-end / back-end / wordpress

Веб-сайт для студії графічного дизайну, з великою кількістю анімації та ефектів, з власним унікальним конструктором сторінок, що дає можливість для кожного кейсу створювати неповторний лейаут.

Відвідати сайт

Завдання

 

— Створити сучасний багатомовний веб-сайт з привабливим та ефектним дизайном

— Створити конструктор сторінок сайту з наперед визначених модулів

— Інтегрувати сайт з CRM-системою та іншими third party сервісами

 

 

Результат

 

— головна сторінка сайту виділяється серед інших поекранним прогортуванням (fullscreen scrolling) секцій сайту, окрім останньої

— intro-секція головної сторінки фоново анімована css-ефектом польоту між зірками (starfield), а заголовок сторінки складається з анімованого слогану we.think – we.dream – we.design, кожна фраза якого плавно змінюється наступною

— секція послуг на головній також анімована – при наведенні на векторну іконку, вона починає плавно змінюватись

— для кейсів та послуг створено рекомендовані лейаути сторінок, яких дизайнери студії можуть або дотримуватись, або змінити на власний розсуд, і це не вплине негативно на візуальний вигляд цих сторінок

— обкладинки проектів можуть бути як статичними, так і бути gif-анімацією, відеофайлом, зображенням на кольоровому чи графічному фоні з css-ефектом паралаксу з обертанням (parallax hover tilt)

— підвантаження проектів, пагінація, зміна категорій, надсилання форм та багато іншого здійснено з допомогою технології AJAX (без перевантаження сторінки)

— здійснено оптимізацію програмного коду та запитів до сервера і бази даних, базові налаштування сервера (в тому числі кешування на стороні сервера), проведено повну інтеграцію сайту з third party сервісами

Деталі сайту пропрацьовані до дрібниць: усі функціональні елементи виділяються ефектами при взаємодії з ними, як наприклад: іконка скролінгу, кнопки та посилання при наведенні, іконка та пункти меню та багато іншого.

Застосовані технології

 

— HTML 5

— CSS 3

— JavaScript

— jQuery, jQuery UI

— Bootstrap

— AJAX

— WordPress (для управління контентом)

— Bitrix24 REST API

— Google Maps JavaScript API