Galina Aviltseva Designer

UI Design

Figma

2020

Concept

Intro

Shakemix sells taste, and taste sells through photography. The problem with photo-led landing pages is that text placed over an image becomes unreadable the moment the image changes. I split the first screen vertically instead: the photograph owns the right half at full bleed, the content column owns the left. The hero image can rotate through four drinks and the headline never loses contrast.

‍

Visual direction

A single red accent against near-black and white. Red is reserved for three things only — the logo, one highlighted word in the headline, and the section label Hot Mixes — while every action button stays near-black. That inversion is deliberate: on a page this colourful, a red button would disappear into the fruit.

‍

Design decisions

Split-screen hero. Photography at full bleed on one side, a stable content column on the other. Text contrast is guaranteed regardless of which of the four hero images is showing.
Two carousels, two different controls. The hero uses a vertical progress indicator on the left edge with a 1/4 counter; the review cards use arrows and deliberate right-edge overflow, so a partially visible card signals "there's more" without an extra label. Two rotating elements on one screen normally read as chaos — separating their control patterns keeps them legible as distinct.
Reviews placed over the photograph, not below it. Star ratings and prices sit as floating cards on the image panel, which puts social proof and price on the first screen instead of a scroll away.
Product cards built for scanning. Thumbnail, name, price — fixed layout, price always in the same position, so three items compare at a glance.
Language switcher rotated into the left margin. RU/EN sits vertically along the edge: permanently available, taking no space in the top navigation.

‍

Shakemix

Intro

Visual direction

‍

Design decisions

Get in touch

Thank you!