Loading ...

Responses by Ilya Kulbachny, founder and creative director, Cosmos Studio.

Background: The main goal of this website was to represent Umami Ware, a new company that does data science, artificial intelligence, and software engineering. These are new people for a new age, and we wanted to show it through special and impressive design. And, of course, we wanted to impress potential clients to leave their request through the nice-looking “Umami Bot.”

Umami Ware’s audience are people who are interested in new technologies, product owners, chief technical officers of big corporations and investors.

Design core: The main feature of this site is its style, which shows up in its navigation, transitions, scrolling sections and animations. For example, the preloader—oh God, we had a lot of problems with it—looks innovative and immersive. This emotional response that people feel when opening the website is ‘Wow! What’s going on?’ But the feeling is sustained as users scroll, play with the website and bot, and read and watch the content. We wanted to make each part very special and unique.

Favorite details: Personally, I like our Umami Bot and the confetti, which appears after you’ve filled in all the inputs and sent a message.

Challenges: Coding, front end and back end. Because of the unusual structure of the site, it caused a lot of problems with coding, adaptive layout for mobile and tablets, and also super-wide screens and optimization. But we did it! Fortunately, we had really cool partners at Umami and were given a lot of time to experiment. The core of this site took several months, and then from there, we had to continue with optimization, making additional sections and improving things, among other tasks.

Divergent paths: If we started this site from scratch again, I would make it clearer, faster and with another code structure. I’ve learned from this that you need to discuss all of the project’s aspects and details with a team and partners.

Navigation structure: The project was designed as one page to tell a well-designed, technical story—but as it happens, the project is scaling, and in the future we’ll have to implement some new ideas for the navigation. We used an unusual burger menu with floating items in a split marquee as the main navigation element. However, when you hover over them, it highlights with color and the floating stops, focusing your attention on a selected item.

Technology: On the front end, we used TweenMax, PixiJS, jQuery, SmoothScroll and TouchSwipe. On the back end, we used Wordpress and Gutenberg.

Anything else? We’ve created a really good project that I’m proud of. I want to say thank you to my whole team!

umami-ware.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In