кейси
Дизайн-кейс: як отримати Awwwards за онлайн-музей
На прикладі сайту про ретро-автобуси
22 Лютий, 2019

Діджітал-агенція Hexagon не вперше працює з компанією Lux Express Estonia – лідером ринку автобусних перевезень Естонії. Але якщо раніше агентство працювало над створенням платформи, яка продає транзитні послуги, цього разу перед командою стояло інше завдання – редизайн сайту Timeless, а фактично створення онлайн-музею ретро-автобусів.

Про те, з якими викликами зіткнулися дизайнери і які рішення допомогли втілити «музейну атмосферу» на сайті, розповідає команда Hexagon.

Timeless

У 2018 році сайт Timeless.ee удостоївся звання Site of the Day від Awwwards, а також отримав ще кілька престижних нагород у сфері дизайну. Серед них CSS Design Awards, а також номінації в українських Ukrainian Design: The Very Best Of, ADCUA Awards і KAKADU Awards.

Ось так сайт Timeless виглядав до редизайну:

Традиційно ми почали з визначення цілей сайту. Головна мета – зручна бронь автобуса з будь-якої сторінки. Але крім неї перед нами також стояло завдання збільшити час перебування на сайті. Для цього ми використовували головну перевагу нашого продукту – естетичний і візуально привабливий контент. Змістили акцент користувача на чисту красу ретро-автобуса, а не тільки на нього як на екзотичний засіб для пересування. Це дозволило нам впоратись із завданням. Середній показник проведеного часу на сайті – 1:57.

Виклик №1: Експонати

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

Timeless сказали: «Так! Оскільки автобуси – головний експонат «музею», в їх фото ми вклали максимум зусиль: створили легкі тіні, відретушували світло вікон, відблиски на корпусі, зняли віддзеркалення вулиць з колісних дисків. Після цього автобуси стали схожі на 3D-моделі».

Setra S80

Setra S6

Виклик №2: Як не нудьгувати в музеї

Головним викликом для нас було подати інформацію на сайті так, щоб користувачі хотіли читати історію кожного автобуса. Для цього ми подбали про те, щоб контенту було не надто багато. Зовсім не хотілось навантажувати користувача, а також приділили особливу увагу верстці тексту і фотографій.

Після цього взаємодія з кожною сторінкою автобуса стала набагато приємнішою, ніж на старому сайті. Крім того, для зручної навігації по сайту, ми зробили автоматичне перемикання між моделями автобусів знизу кожної сторінки, як автоплей в YouTube.

Виклик №3: Не винаходити колесо

Любителі ретро-автобусів добре знають назви брендів та моделей, тому на першому екрані важливо було підкреслити не тільки їх зовнішній вигляд, а й назви.

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

Перед цим ми перепробували багато ефектів і технологій, пробували змінити верстальника, щоб зробити більш сучасні і технологічні ефекти переходу між фотографіями автобусів через технологію Canvas. Після кількох варіантів, як це буває, повернулися до найпершого. Це мінімалістичний і простий fade in – fade out ефект переходів, який підкреслює красу контенту і не відволікає від нього.

Виклик №4: Анімація і «живі» сторінки

А тут трохи нудної технічної інформації для девелоперів. На головній сторінці ми використовували плагін jQuery Slick. У нього відкритий код, це дозволяє вносити правки і кастомізувати функціональність. У підсумку на головній у нас 3 слайдера, які працюють одночасно. Кожен з них має власний ефект руху, який ми покращували за допомогою стилізації і бібліотеки jQuery.

Для того, щоб зробити сторінки «живими», ми використовували TweenMax, який дозволяє синхронізувати рух елементів інтерфейсу з поведінкою користувача.

Основні ефекти внутрішніх сторінок зроблені за допомогою CSS3 animation / transition.

Наприклад, процес завантаження в назві автобуса, ефект появи елементів при завантаженні-покиданні сторінки, ефект появи при скролі.

Виклик №5: «Рухома» етикетка

Після заповнення контентом сторінок ми зіткнулися з тим, що у нас занадто багато знаків у тексті. Це призвело до появи порожнього простору біля зображень. Ми додали Parallax effect, щоб зображення могли супроводжувати текст. Тепер при скролі, коли текст вище зображення, воно рухається разом з ним до наступного блоку контенту.

Інструменти

Для реалізації фронтенд-сторони ми використовували HTML5, SASS, CSS3. А більшість функцій сайту були розроблені на Javascript і його бібліотеці jQuery.

Унікальність дизайну сторінок і анімації елементів інтерфейсу передбачали використання і прописування великої кількості рядків скрипту і побудову складної HTML структури. Тому для оптимізації роботи сайту ми використовували Gulp – інструмент збору веб-додатків.

Фронтенд-інструменти

HTML5, SASS, CSS3, Javascript and Jquery library, Gulp, TweenMax

Технології бекенда

Yii2 framework

Архітектура сервера

Nginx

У нас є ще дещо для вас