True Grey Website
Project Overview
True Grey is a luxury, lifestyle e-commerce platform designed to deliver a premium digital experience centered on men’s fashion and accessories. The brand offers a curated selection of jewelry, eyewear, and underwear, emphasizing quality and refined design. The platform features an interactive quiz that personalizes product recommendations, guiding users toward curated combinations tailored to their individual style and preferences. The project was halted by the client due to financial obstacles in production.
The Problem
True Grey addresses the lack of streamlined, luxury-focused shopping experiences tailored specifically to men. Many male consumers face overwhelming choices, inconsistent styling guidance, and limited personalization when shopping online. The platform simplifies decision-making by combining curated products with intelligent style recommendations.
Problems it solves:
Overwhelm from too many product options without clear styling direction
Lack of personalized guidance in men’s luxury fashion
Difficulty coordinating complementary accessories and essentials
Generic shopping experiences that don’t feel premium or curated
The development of True Grey was informed by research into established fashion e-commerce platforms, particularly the visual identity and elevated aesthetic of the Balmain Paris website and the streamlined usability and product structure of Zara. From Balmain, the project draws inspiration in its use of bold typography, high-contrast visuals, and a luxury-forward presentation. From Zara, it adopts clear product categorization, efficient navigation patterns, and a user-friendly shopping flow.
A key differentiating feature of True Grey is the implementation of a persistent sidebar navigation menu rather than a traditional top navigation bar. This design choice improves accessibility and usability by allowing users to seamlessly browse categories, access the style quiz, and navigate between product collections without disrupting the visual hierarchy of the page. The sidebar structure also reinforces the brand’s modern, editorial feel while creating a more immersive and intuitive browsing experience.
Creative Direction & Design Principles
The creative direction of the True Grey web page, with its moving and animated elements, leans heavily into immersive, dynamic storytelling through interaction. By incorporating motion, the page feels alive rather than static, giving users a sense that the interface is responsive and organic. These animations serve multiple purposes:
Depth and Immersion – Subtle movements, parallax effects, and animated elements create layers that mimic real-world dynamics, making the page feel more spatial and engaging.
Guided Attention – Moving elements naturally draw the eye, helping highlight key content or calls to action without heavy-handed prompts.
Playfulness and Personality – Animations can give the brand a distinctive voice, whether it’s through micro-interactions (like hovering effects) or more pronounced, almost narrative-driven motions.
Fluid Experience – By integrating consistent motion and transitions, users experience a smoother, more intuitive journey across the page, which encourages exploration and retention.
Overall, the creative direction emphasizes an interactive, visually rich, and tactile digital environment, where movement isn’t just decorative—it enhances usability, storytelling, and emotional connection with the brand.
This website was first made in HTML, CSS, JS, with other JS frameworks, then moved to WordPress.