FMFW

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

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

У макеті (front end розробці) ми дотримуємося відносних розмірів, таких як rem, em і %. Це дозволяє досягти максимальної адаптивності, мінімального обсягу коду. Значення в пікселях використовується лише для фіксованих значень, які не повинні змінюватися залежно від розміру екрана, наприклад розмір рамки або заокруглення кутів. Виходячи з принципів, викладених вище, ми використовуємо гумову сітку з 18-и стовпчиків без фіксованого контейнера. Відступ між колонками дорівнює 1 рем

Такого ж принципу ми дотримуємося і зі шрифтами. Базовий розмір шрифту дорівнює 1 rem = 16px. Це шрифт розміром 2,5 rem = 40 пікселів. На основі цього ми можемо збільшувати/зменшувати шрифти на всьому сайті, просто змінюючи значення rem. Наприклад, на ноутбуках 1rem вже дорівнює 13px, це означає, що той самий шрифт розміром 2,5rem вже має розмір 32,5px. Це дозволяє практично позбутися від адаптації шрифтів, зменшити обсяг коду та спростити подальшу підтримку.

Шрифти:

Кольори:

Ми використали горизонтальні лінії, округлі і прямі форми, а також галочки з ліній

Використання набору суцільних і пунктирних кривих ліній для розділення фону

На всьому сайті використовується анімаційне накладення шуму

Реалізація Bull / Bear і Envelope:

Анімація бика/ведмедя та конверта реалізована за допомогою техніки «послідовність зображень на полотні», що означає почергове відображення картинок (рамок) всередині елемента полотна. Ця технологія була обрана тому, що на даний момент тільки браузер chrome підтримує відео з альфа-каналом (прозорий фон).

Реалізація анімованої планети:

Планета реалізована на бібліотеці WebGL three.js і плагіні three-globe