23/05/2024 12:23 AM

Themonet-ART

Adorn your Feelings

Yeti Pictures | Communication Arts

3 min read

[ad_1]

Responses by Kommigraphics.

Background: The all-new Yeti Pictures website reflects the quality of the Athens-based animation studio and its specialization in motion design. The core tenet of the studio—blending time with striking imagery—formed our cornerstone to creatively explore and produce its new website.

Over the years, Tony Zagoraios and his team have proven the quality of their services through their artistic concern, consistently delivering second-to-none results on projects they take on. To achieve a unique website and enable Yeti to present and promote its work, we closely studied all the material that the website needed to contain. The broad diversity of the company’s portfolio drove the specifications needed for the site’s design and programming.

Yeti’s clientele comprises production companies, gaming companies, corporate institutions, and TV channels. To name a few, Amazon, Dell, Google, Microsoft, National Geographic, Netflix, Nike, Nissan and Paramount Pictures are clients that have already worked with Yeti.

Larger picture: The new Yeti website is a renewal of the company’s international profile and positioning. It can now be a point of reference for clients to see the studio’s work, show its broad diversity, and be used as an inspiration tool.

Design core: As we had to strengthen the basic concept of “blending time with striking imagery,” we had to pay a lot of attention to the critical animation style guides as well as microanimations of the site through WebGL code, attributing the expertise of the company in an unexpected way per page that best fits its content.

On the homepage, we created an organic parallax environment where one image is intertwined with the other. At the same time, small previews of projects appear on hover state, while on each refresh, the projects change position, randomly making the homepage a hybrid environment.

Favorite details: One of the hero pages of the website is that of the selected project, which has many different specifications that should be studied in detail. We had to come up with a solution of how to manage the custom video player, the transitions between sections, as well as the operation of the page in different browsers, operating systems and ratios of mobile devices. Furthermore, we had to foresee all the limitations of browsers regarding the location of the navigation bar, the autoplay of the videos, the audio management and even the website’s scroll.

Challenges: Keeping an immersive experience across platforms from desktop to mobile since the website’s content varies in ratios and image formats. We designed all mobile screens from scratch for a smooth, user-friendly experience by altering the design flow per section and adding features throughout the mobile experience.

Navigation structure: On such a website, we had to analyze and propose fully justified UI elements and typography to bring out the creative but otherwise technocratic character of the company. The scope was to create a trendsetting identity—since the company itself does not follow a specific visual language system—and add different features and configurations of the pages to achieve the best user experience, mainly on mobile versions.

Special features: Animated hovers on all projects. Sticky categories indication on header while scrolling through the portfolio page. Auto sound off while scrolling on the selected project page. Gradient vignettes in the bottom part of each video to make the navigation items visible to the visitor, no matter the content.

Technology: The back end is a WordPress, PHP-based site with Laravel and Blade templating. The front end features ES6 JavaScript, three.js, WebGL custom shaders, GSAP animations and single-page application emulation with barba.js. The custom WebGL shaders were used in addition to DOM-to-WebGL techniques to provide a fluid user experience.

Browse Projects

Click on an image to view more from each project

[ad_2]

Source link

themonetpaintings.org | Newsphere by AF themes.