Self-Initiated Web Design Studies
WEB PRACTICE
A collection of self-initiated web projects exploring visual direction, conversion structure and the translation of Figma interfaces into responsive browser experiences.
Designing different paths toward action
Web Practice brings together two self-initiated website concepts developed around fictional commercial briefs.
Each project explores a different relationship between visual identity and conversion. Rick W. uses photography, credibility and restrained interaction to lead potential clients toward booking. Zen Yoga uses clarity, repetition and accessible course information to guide users toward an online wellness programme.
I created both concepts, defined their content structures and designed the complete interfaces in Figma, then built the responsive front-end for both projects.
- Year
- 2024 – 2026
- Type
- Web Design, UI, Landing Pages
- Role
- Concept, Content Strategy, UX Structure, UI Design, Art Direction
- Tools
- Figma, HTML, CSS, JavaScript
Development: Front-End Implementation
Rick W.
An image-led portfolio built around credibility and booking.
Rick W. is a fictional commercial-photography portfolio designed to transform visual interest into a clear booking journey.
The homepage introduces the photographer, establishes experience and trust, presents services, supports credibility through testimonials and leads the user toward a direct booking action.
The final visual system uses a near-black background, graphite surfaces and restrained gold accents. Editorial typography gives the interface personality, while subtle interaction supports exploration without competing with the photography.
Image First
Photography remains the dominant visual element.
Progressive Trust
The structure moves from introduction to credibility, services, proof and booking.
Subtle Interaction
Animated statistics, scroll-aware navigation, lightbox viewing and responsive behaviour support the experience.
From decoration to restraint
The first version relied on blue geometric framing, large star ratings and denser, more decorative compositions. The final direction keeps the same content structure but replaces that with a restrained black, graphite and muted-gold system.
Zen Yoga
A calm, conversion-focused landing page for an online yoga platform.
Zen Yoga is a fictional wellness-platform concept built around clarity, accessibility and a gradual path toward course selection.
The homepage introduces the platform, explains the available practices, presents the learning process, highlights courses and pricing, and closes with a direct invitation to begin.
The visual system combines a soft green palette, organic image shapes, spacious typography and repeated calls to action. The goal was to create a commercial interface that feels calm without becoming passive or visually vague.
Clear Structure
The page moves from introduction and services to courses, pricing and action.
Accessible Tone
Simple language and repeated orientation reduce friction for first-time users.
Consistent Visual Rhythm
Green surfaces, organic cropping and modular content sections create continuity across the page.
One process, different commercial contexts
Both projects follow a similar workflow: a fictional brief, content architecture, interface design in Figma and a responsive front-end implementation.
Their visual strategies, however, respond to different needs.
Rick W. depends on personality, visual credibility and premium restraint. Zen Yoga depends on clarity, repetition and a softer sense of accessibility.
Together, the projects function as a record of web-design practice rather than as large standalone case studies.
Rick W.
Personality
Trust
Portfolio
Booking
Zen Yoga
Clarity
Guidance
Course Structure
Enrollment
Closing statement
These projects were created as focused exercises in translating art direction and content strategy into complete responsive web experiences.
The design, structure and visual direction were developed in Figma, then built out as a responsive front-end.