Діджітал-агенція 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

Громадська організація «Агенти крові» проводить другий сезон благодійної акції «Кров Чарівна» задля привернення уваги людей до проблеми нестачі донорської крові взимку. Акція триває з початку грудня 2021 року до кінця лютого 2022. Протягом цього періоду професійні фотографи знімають портрети усіх донорів крові в столичному Інституті Амосова та в Одеській станції переливання крові. Хоча фотопроєкт стартував у 2020 році, першу айдентику він отримав тільки цьогоріч. Розробкою єдиного візуального стилю займалася креативна агенція ANGRY agency.

Команда ANGRY agency спільно з «Агентами крові» розповіли, як працювали над айдентикою найдобрішої акції цієї зими.

Бриф

Олена Балбек, засновниця ГО «Агенти крові»:

У суспільстві прослідковується неприязне ставлення до донорства, сповнене міфів та упереджень. Щоб змінити наратив у позитивний бік, необхідно пропонувати нові метафори та образи про донорство. Фотопроєкт «Кров Чарівна» розвіює міфи про самопочуття після донації, спростовує стереотипи про людей, які долучаються до донорства, а також будує нові образи.

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

Логотип

Інна Алімова, артдиректорка ANGRY agency:

Під час створення логотипу ми керувалися двома принцами. По-перше, лого мало бути пов’язане з новорічною магічністю. По-друге, логотип має бути шрифтовим і символічним водночас.

У першому варіанті логотипу ми перетворили тире на магічну паличку. Так ми підкреслили ідею магічного впливу кожної донації.

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

Інші елементи візуальної стилістики

Оскільки «Кров Чарівна» привертає увагу до спаду донацій взимку, супровідним елементом айдентики стала атрибутика новорічних свят. Вона поєднується з уже наявними елементами візуального стилю — гемаконом, краплею, серцем. Загалом, ми намагалися зробити айдентику магічною, але стриманою та лаконічною, щоб не загубити основну ідею акції — донорство крові.

Шрифти 

Шрифти ми залишили такі ж, які «Агенти крові» використовують в інших проєктах, зокрема і в Art Donation. Такий підхід допомагає зберегти певну цілісність візуального стилю. Однакові шрифти і на логотипі «Агентів крові», і в інших різних проєктах ніби об’єднують всі ініціативи благодійників під одним впізнаваним брендом «Агенти крові».

Кольори

Через те, що акція «Кров чарівна» відбувається вдруге, з минулого року вже з’явилася певна асоціація з подією — і це фіолетовий глітер. Тому в кольоровій палітрі ми залишили фіолетовий колір як основний. Супутніми кольорами стали відтінки рожевого, блакитного та синього. Ці відтінки нагадують про зиму, свята та переливання кольорів глітеру.

Комплексне рішення 

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

Перші результати

Олена Балбек, засновниця ГО «Агенти крові»:

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

Ще кілька слів про рішення, які обрали ANGRY. По-перше, вони за межами моди, тобто будуть актуальними довгі роки. По-друге, приємно, що ми так точно влучили у Pantone 2022 року. Вибір Pantone вкотре підтвердив, чарівність — актуальна тема для багатьох.