UXIS design team’s brand website
Intro
We met the founder of UXIS through a Webflow education initiative, where we immediately discovered that we share common professional values and approaches. When the time came for UXIS to update their website, the choice of a development partner was obvious – our studio had earned their trust to bring this ambitious project to life. The company’s previous website no longer reflected the company’s growing scale and vision.
With a deep design expertise, the client created their own visual concept. They delivered a meticulously crafted Figma layout, complemented by detailed documentation outlining technical requirements, interactive elements, and a special focus on animation scripts.
THE WINNING FORMULA: The key to flawless execution was a highly detailed brief. When a client clearly defines expectations and provides specific references, it builds a solid foundation for bringing even the boldest ideas to life accurately and efficiently. The project was allocated a three-month timeline for development, and we enthusiastically got to work
Core tasks:
Webflow
animation
Services:
Webflow Development
Tools & technologies:
Figma, Photosop, Webflow, Javascript, GSAP, Split, Lenis, jQuery
The task
The client made the following requirements to us:
- Multi-page brand project. Create a large-scale brand website with the smoothness and interactivity of a single-page application, ensuring seamless user experience.
- Advanced animation. A key requirement of the project was an exquisite animation. Every interface element needed to be brought to life with carefully thought-out crafted motion and interaction scenarios.
- Elegant preloader. Design a multi-step preloader that turns the loading process into a visually exciting journey.
- Seamless page transitions. Enhance cross-page transitions with elegant section title animations to boost navigation experience and add a unique charm.
- Sound effects. Integrate customizable sound effects for a richer experience, allowing users to toggle sounds on/off with their preferences saved during the viewing session
- Lottie & svg Implementation. Emphasize Lottie and SVG animations to add dynamism and modernity while perfectly blending with the website’s overall aesthetic concept.
An example of the customer's approach to the technical brief
The Solution
Project architecture
We started with a meticulous project architecture design. First off, we defined a tech stack for building all functional modules and classes naming methodology. The, we developed a comprehensive style guide covering all service classes for headers, text blocks, buttons, and images. After that, we implemented base and secondary colors through CSS variables. Finally, we defined the layout type as “rubber” (flexible) with adaptation across devices.
Project’s style guide
The Core Challenge
Implementing SVG grids
The core challenge was integrating unique SVG grids into each page layout, maintaining perfect structure at all screen sizes. We ensured absolute accuracy in rendering block boundaries and integrated smooth grid animations during scrolling.
Grid animation throughout the website
Interesting tasks
Imitation SPA
We applied Single Page Application (SPA) principles to the navigation elements. Every interface element, including hover effects, followed a smooth, SPA-style logic and visual aesthetics.
Animated scripts
Every interactive element received its own animation script, developed in close collaboration with the UXIS team. We focused on the smallest details and fine-tuned animation duration, easings, triggers, and sensitivity – even when it required significant rework and complicating the layout to ensure a perfect result.
Complex multi-step preloader
Scaling a minimized version of the main page became the preloader’s distinct feature. To this end, instead of simply scaling the entire page — which could degrade performance — we designed its optimized "mini" version with active clickable elements, which smoothly expanded into the full version after loading.
Interesting tasks
Page transitions
Transitions between pages were made not only elegant but also preserved navigational clarity, clearly displaying landing page names at every point of moving around the website.
Sound effects
We implemented carefully curated sound effects for clicks, hovers, and page transitions, enhancing the website’s atmosphere without distracting the user from the content. Custom sound settings were saved across viewing session.
Lottie and svg animation
We paid special attention to custom animations. Each Lottie file was individually crafted (including a unique audio switch) and merged seamlessly with SVG grids to achieve smooth, harmonious motion.
428,940
Content pixels across all website
65,230
Pixels the longest single page
Oh, that was fascinating
Highlight
One of the most complex aspects in the UXIS case was the masterful integration of SVG grids and Lottie animations across project pages. Achieving this level of visual harmony took exceptional precision and countless hours of meticulous work. Every line and every element were perfectly synchronized, creating a single visual symphony.
As even the slightest deviation could disrupt the entire aesthetic, the precision while aligning graphic elements and their animation scenarios was outstanding. The end result? An exquisite visual ensemble where each element naturally complements the overall beautiful composition.
Project workspace
Project completion
A perfect example of synergy between a client and execution team
The project took 4 months to complete instead of the planned 3 months, due to increased scope of work and higher quality requirements. Is became a perfect example of synergy between a client and the execution team, where constant dialogue and mutual involvement led to the creation of a truly outstanding product.
The result of our cooperation wasn’t just a modern website, but a holistic digital product that fully reflects client’s values. A pleasant confirmation of our success was that our collaboration evolved into an ongoing partnership.
Curious about how deadlines affect project outcomes? Read our article:: “Web Project Timelines: How Clients and Contractors Affect Deadlines.”
Customer feedback
Incredible work! Our website is just WOW!
I want to share my experience of working with Ambi on developing our website on Webflow. To be honest, we were just delighted with the result and got exactly what we’d dreamed of.
Our project turned out to be an asterisk task for the developers*, because we had a non-standard vehicle and requirements such as: interface sounds on the website, unique animations of transitions between pages and projects, animations of lines that reproduce different schemes of our UX approaches. We were afraid that all this would not be possible on Webflow, but the Ambi team realized all these points even better than we expected
Special thanks to Artem for his positive attitude and professional communication.
Our website doesn’t just look stylish — it has this WOW factor that we were hoping for.
If you’re looking for a team to make your website stand out, I highly recommend Ambi. We are impressed, satisfied, and ready to recommend them to anyone who wants a high-quality and visually stunning website!
