Project Mockup Horizontal

Yoga Poses Website

Visual Design Motion Design
Role
Visual Designer
Timeline
November 2025 - December 2025
Deliverables
Visual System · Design Rationale & Documentation · High Fidelity Web Prototype · Illustrator Vectors
Purpose

A collection of yoga poses and flows that draws attention to the shapes that are being made in each pose.

This project is designed for yogis, beginners, teachers, and anyone curious about the balance and expression found in each pose.

01. Design Progression

Project Timeline

This timeline highlights the project’s evolution through multiple rounds of design exploration, critique, and refinement.

01
Phase 01 • Ideation

Concept Ideation & Visual Exploration

Considered three different collection proposals, including Latin American dishes, yoga poses, and types of plants. Visually, the yoga poses offered the most compelling opportunity to explore the shapes, forms, and balance.

Final Polish UI
02
Phase 02 • Design Exploration

Asset Development

Explored different visual elements, including filled and outlined silhouettes, line art, color variations, and overlapping forms. Selected the filled silhouette with line art on top because it best balanced simplicity with enough detail to clearly communicate each pose.

Final Polish UI

Wireframe Exploration

Developed four different approaches to organizing the yoga collection, focusing on structure, layout, and information architecture.

Final Polish UI
03
Phase 03 • Prototype

Illustrator Vectors

Finalized the 30 item image assets yoga poses and the corresponding element content ready to plug them into the  Interface wireframes,

View Content ↗
Final Polish UI

High Fidelity Prototype

Iterated on Flow 1 and Flow 4 further, evaluating how each approach organized and presented the yoga collection.

Chose to advance with Flow 4 because it created a clearer visual hierarchy and more intuitive user experience. Its structured layouts emphasized the yoga poses, reduced cognitive load, improved navigation through high-contrast buttons, and made information easier to digest.

Final Polish UI
04
Phase 04 • Refine

Refined Flow

Improved spacing and layout consistency, simplified navigation, and consolidated content into more intuitive scrollable pages. Enhanced the collection with completed flows, pose detail pages, and slower animations that reflect the calm and steady nature of yoga.

Final Polish UI
05
Phase 05 • Delivery

Final Polish

After conducting usability testing with three participants, I refined the navigation interactions to improve timing and overall flow.

Final Polish UI
02. Visual System

Visual System

Typography

Final Polish UI

Color Palette

Final Polish UI
03. Interactive Demo

Final Prototype

Prototype Link  ↗

Created a video showcasing the yoga collection, highlighting navigation through the Home, Yoga Poses, Flows, and About pages.

Next Case Study

ETM Logo

© 2026 Yesenia Peregrina