Казус
Modify Agency
Корпоративен уебсайт за дигитална маркетинг агенция с множество custom frame-by-frame SVG анимации, двуезичен интерфейс и mobile-first responsive дизайн върху смела неоново-зелена и лилава цветова палитра.
За Modify Agency
Modify Agency е дигитална маркетинг агенция от Бургас, България, която предлага цялостни дигитални решения - от социални мрежи и платени реклами до видео продукция, дизайн и уеб разработка. Агенцията се отличава с отличителна визуална идентичност, базирана на символа на гъска и метафората за "ятото в полет" като израз на екипна работа.
Дизайнът на сайта е изработен от дизайнерския екип на Modify Agency. Ние реализирахме техническата имплементация, анимациите и цялостната уеб разработка.
Снимките по-долу са статични екранни изображения. За да видите реалните анимации, hover ефектите и интерактивните елементи, разгледайте реалния сайт.
Какво включва сайтът
Снимки от сайта
Hero секция
Неоново-зелен slogan "fly high, dive deep!" с 31-кадрова SVG анимация на летяща гъска и purple градиенти.
Дизайнерска визия
Цветова палитра
Neon Green (#A5FF00) за акценти, Purple градиенти (#6700FF - #C900FF) и черен фон за модерен, смел вид.
Типография
Sofia Sans за заглавия (extrabold, 80-200px в hero), Montserrat за номерация и акценти.
Визуален език
Символиката на “ятото” като метафора за екипна работа, декоративни звезди и gradient елементи.
Предизвикателството: Уникален бранд в дигиталния свят
Modify Agency имаха ясна визия за своя бранд, която трябваше да бъде пренесена в уеб пространството:
Сложни custom анимации
Клиентът искаше множество frame-by-frame SVG анимации - от 31-кадрова анимация на летяща гъска до интерактивни hover анимации за всяка секция. Това изискваше прецизна оптимизация за плавно изпълнение.
Двуезичен интерфейс
Сайтът трябваше да работи пълноценно на български и английски език, с превключване без презареждане и коректно SEO за двата езика.
Различни layouts за mobile и desktop
Дизайнът предвиждаше коренно различни визуализации за мобилни устройства и desktop - не просто responsive, а изцяло различни компоненти и взаимодействия.
Нашият подход: Next.js с Framer Motion
Избрахме технологичен стек, който позволява максимална гъвкавост за анимации и производителност:
Frame-by-frame SVG анимации
Разработихме система за frame-by-frame анимации с SVG файлове. Hero анимацията на гъската включва 31 отделни кадъра с плавен преход на 100ms между тях. На desktop анимацията се активира при hover, а на mobile работи непрекъснато.
Framer Motion за интерактивност
Използвахме Framer Motion за accordion анимациите на услугите (1200ms smooth transition), hover ефектите на принципите и expand анимациите на картите. Всяка анимация е оптимизирана за различно поведение на mobile (tap) и desktop (hover).
Оптимизирана производителност
Въпреки множеството анимации, сайтът зарежда бързо благодарение на dynamic imports за below-the-fold компоненти, preloading на критични ресурси, lazy loading на изображения и custom font loading с font-display: swap.
Двуезична архитектура
Имплементирахме пълен двуезичен интерфейс с Next.js App Router - превключване между български и английски без презареждане на страницата, с коректни hreflang тагове и отделни meta описания за всеки език.
Технологичен стек
Резултат от Google PageSpeed Insights
Въпреки множеството custom SVG анимации и интерактивни елементи, сайтът постига отлични резултати в Google PageSpeed Insights.
Google PageSpeed Insights е безплатен инструмент на Google, който измерва скоростта и качеството на уебсайтове. Резултат над 90 се счита за отличен.
Резултатът: Уникален уебсайт с характер
Modify Agency получиха уебсайт, който перфектно отразява техния бранд характер - смел, креативен и запомнящ се. Неоново-зелената и лилава цветова палитра върху тъмен фон, комбинирана с множеството custom анимации, създава незабравимо потребителско изживяване.