Modern website for lead bottled water & beverages company in Turkmenistan
Archalyk was a demanding task for Z Design team and I. One of the biggest challenges was balancing the visual complexity of the GSAP animations and microinteractions with fast load times and smooth performance.
It was important to make sure the website was not only attractive but also functional and easy to navigate, regardless of the device or internet speed.
We had to create a modern website for a lead bottled water and beverages company in Turkmenistan. The project covered all stages of website development, from creating the initial concept to wireframing, designing in Figma, and coding the final site.
The website features 11 unique pages with animations and microinteractions, making it engaging and visually appealing. It’s fully responsive and includes 3D models (images) of the water and beverage products.
To design a visually stunning website that captures the
brand's essence
To develop a user-friendly and responsive site that works well
on all devices
To incorporate
GSAP animations
and microinteractions to enhance the user experience
To showcase the products using 3D models (images) to give a
realistic view
I started by checking out the websites of major water brands like Dasani, Evian, and Aquafina. To my surprise, most of them had basic and pretty boring designs.
They weren’t visually appealing, but they did help me figure out the common pages that Archalyk’s website needed to have.
I turned to platforms like Behance, Dribbble, and Pinterest for visual ideas. I found some great concepts and decided to go with bold typography and big images as the main theme for the site.
I also revisited my collection of favorite modern websites, like Cuberto, Deveb.co, and Minhpham.design, which further inspired the design direction.
As for design system, I focused on creating just the necessary tokens and components, like colors, gradients, buttons, and text, and then jumped right into the UI design process. As the project evolved, I added more to the design system as needed.
Image for each product is carefully crafted 3D model to convey tiny details of perfection.
I started by laying out the visual look and structure of the website using HTML and SCSS. Then, I added some basic functionality with JavaScript.
At the second stage, I enhanced the visuals with CSS effects and transitions. I also integrated GSAP for animations and improved the overall functionality, including on-scroll animations and form submissions. This stage brought the website to life with smooth interactions and dynamic content.
SCSS
JS
GSAP
The project resulted in a modern website with 11 unique pages, totaling 44 pages when added all products. Website is translated into English, Russian, and Turkmen languages.
It went live smoothly, and in the first month, website attracted over 500 visitors. Even more impressive, the company saw a 4.2% increase in international export volume after launch.