#StopWarInUkraine Save the children
ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
05 Collect

Ukrainian Power: Showcase of Ukrainian creative agencies

Article by Lazarev. in Web Design -

The full-scale war against Ukraine takes away a lot: lives, peace, comfort, and resources. But it can't take away our drive to resist and rebuild Ukraine's economy for the win. Ukrainian Power is the project that unites the country's best creative forces that were left with little to no local clients. And now, to stay afloat, they are forced to fully enter the global market.

Our mission was to help Ukrainian creative teams to make a smooth transition into the global industry. As well as to call international businesses to either partner with Ukrainian talent or to get ready to compete with it. The message may strike as provocative and even a bit aggressive. But it perfectly conveys how determined creatives are to work at 202% to keep their teams, provide for their families, and simply survive.

Ukrainian Power
Ukrainian Power - Directory
Ukrainian Power
Ukrainian Power - Creative Market


With this idea at the core, we launched a digital directory of Ukrainian agencies of various specializations for foreign businesses to choose from. It exclusively includes talent that proved their expertise and won international awards.

"The website shows the international community what Ukrainian creatives go through and offers partnerships as a way to help Ukraine. We included 30+ Ukrainian agencies that can now have regular income from abroad"

— Kyrylo Lazarev, CEO of Lazarev.agency

Design

Creative directory

The website welcomes visitors with a catalog of Ukrainian agencies. The dynamic layout of companies is entirely random — we did it to create equal conditions for each of them. To enhance the site experience, we added team previews and filters for a quick search.

Ukrainian Power
Ukrainian Power - International

When exploring a particular agency, the user goes to its page and can discover all the necessary information. Our focus on interactivity and engagement allows each talent to tell its story with maximum dynamics and minimum words. We added a hover effect showcasing agencies' show reels and highlights. The same goes with their awards to create some playful vibes.

Ukrainian Power
Ukrainian Power - Directory
Ukrainian Power
Ukrainian Power - Agency Directory

Ukrainian reality and creative potential

To build emotional connection with the audience on the About page, we went for visual design paired with the content flow. Red accents in a headline and text blocks express emotional pressure. Videos with war footage address Ukrainians' reality and their motivation to work for survival. 

Having passed this block, people stop at a choice point — to work with Ukrainian agencies and make them valuable assets or to compete. We made animated circles with 3D elements for interaction plus a tiny detail — a blurred hover effect to emphasize the website's primary purpose — partnership.

Ukrainian Power - About
Ukrainian Power - About Page
Ukrainian Power FAQ
Ukrainian Power - Agency Clients

The final block changes the scene with flair for opportunities and an open business setting. The green color takes off emotional stress and emphasizes partnership advantages. We also designed eye-catching blocks displaying numbers that spell Ukrainian expertise and reliability better than words. 

FAQ Page

The page provides users with the answers to questions they might have about our project. We also wanted to motivate other Ukrainian agencies to join the initiative, so we added a Google form for them to apply.

Ukrainian Power FAQ
Ukrainian Power FAQs

Cross-device accessibility

We made sure to fine-tune users' search experience and deliver the content regardless of the device. So people can explore the website in their comfort via smartphones, tablets, and desktops.

Ukrainian Power - About
Ukrainian Power - Mobile

Technologies

CMS/Hosting

Webflow 

We developed the website in our go-to — the Webflow no-code tool. To create the desired effects, we took advantage of the platform's opportunities, combined with other technologies like JavaScript code and other libraries on the list below.

Libraries

CMS Filter by Finsweet

Finsweet multi-filtration helped us create a no-code filter system so that users could select agencies by preferred categories.

Player JS by Vimeo

We used it for the entire video content on the website. In addition, the library helped us implement Vimeo video launch with a click and hover.

Swiper js

As smartphone screens may not fit all the filter categories, unlike desktop ones, we added swiper. It allowed us to provide users with a trouble-free experience when using filters on a website's mobile version.

Body Scroll Lock

We used this library for scroll lock when opening the burger menu and pop-ups on the site.

Model-Viewer

This one came in handy to render interactive 3D models on hover with a few lines of HTML code.

Tablet & Mobile

Since tablet and mobile devices do not have cursors, there was no need to add hover effects on them. Plus, numerous videos created a significant load on devices, so we decided to remove all video content and replace it with images instead.


About

Lazarev.agency is a Ukraine-based team of UX strategists, UI/UX, Product & Motion designers, and business analysts working closely to build user experience for early-stage startups and well-known companies.

IAMIDEA is a creative communication agency from Ukraine that focuses on creative business solutions, efficiency and quality of ideas implementation.