Библиотека LottieLottie library
Анимации для расширения к Tilda Publishing. Двадцать семь функций, четыре категории, формат Lottie ради веса и скорости загрузки.Animations for a Tilda Publishing browser extension. Twenty-seven features, four categories, Lottie format chosen for weight and load speed.
О проектеAbout project
Задача была рассказать людям про функции браузерного расширения, которые упрощают и ускоряют сборку сайтов на Tilda Publishing*The goal was to inform users about the extension features for the browser, which simplify and speed up the website building process on the Tilda Publishing platform*
*Самая популярная платформа в СНГ для сборки сайтов без кода.*The most popular platform in the CIS for creating websites without coding knowledge.
Страница расширенияWeb-page
ЗадачаChallenge
В расширении около 27 функций, они встраиваются прямо в интерфейс Tilda и добавляют новые возможности. Функции разной сложности и по-разному вмешиваются в элементы сайта во время сборки.The extension offers about 27 features that are integrated into the Tilda Publishing platform interface, adding new functionality. These features have various levels of complexity and interaction with website elements during development.
Все анимации должны были встать на главную страницу расширения, поэтому важно было не просадить скорость загрузки и не занять много места.All animations will be published on the extension's homepage, so it was important that they do not significantly affect the site loading speed and take up minimal space.
РешениеSolution
Анимация должна занимать мало места на страницеAnimation should take up little space on the website
Чтобы сэкономить место, я разложил анимации по четырём категориям, по той части платформы, на которую влияет функция. Человек видит только то, что может пригодиться под его задачу, а не все анимации разом.To save space on the website, I decided to categorize animations into 4 categories depending on which part of the platform they affect. Thus, the user only sees the features that may be useful to them according to their goals, rather than all animations at once.
Анимация должна быть понятнойAnimation should be understandable
Я собрал визуальный стиль из простых форм и фирменных цветов Nolim. Для каждой анимации написал сценарий с узнаваемыми элементами интерфейса Tilda, чтобы смысл функции считывался по знакомым деталям.To solve this task, I developed a visual style using simple shapes and the brand colors of the Nolim company. I created scenarios for each animation, considering recognizable elements of the Tilda Publishing platform interface, so that every user could understand the function's meaning by seeing familiar elements.
Анимация должна мало весить и не мешать загрузкеAnimation should weigh little and not affect the website loading speed
Чтобы уменьшить вес и влияние на загрузку, я делал анимации в формате Lottie. Он рендерится прямо на странице кодом.To minimize the weight of animations and their impact on the website loading speed, I decided to implement animations in the Lottie format, which allows rendering animations directly on the website using code.