Neuroplastic Creative's profile

Yoga Spirit Landing Page - Concept and Design

Yoga Spirit Landing Page

This is a showcase of the conception of a landing page for a site offering online yoga classes. This was done for a Designlab assignment.

It features initial and late-stage wireframes, testing of different typefaces, exploration of various colour palettes, a style tile, and the final development-ready mockup. Each stage went through multiple iterations.

The first step taken was to define the goals, layout, branding, and potential visual components of the landing page on paper.

A site promoting services such as:

- Online lessons
- Private lessons
- Public class schedule
Landing Page Components

1. Logotype
2. Headline/slogan
3. Summary of features
4. Placement of images (FPO)
5. Learn more/download button

- Home
- About
- Corporate
- Urban retreat
- Contact

- Blue
- Transparency
- Purple
- Sky blue
- Relaxed feeling
Sketching and Wireframing

Further refinement of the layout on paper before starting on the wireframe.

Initial wireframe. The typeface of the heading in the initial wireframe was rejected due to readability issues.

The first wireframe tests the typefaces Amatica SC for the headings and Karla for the body text.

The second wireframe tests the typefaces Pacifico for the headings and Raleway for the body text.
Layout Exploration

Simplifying the layout following mentor feedback.

The typeface Dancing Script was used for the headings, with Karla in the body text. The column on the right-hand side was discarded for several reasons: it would cause problems with responding to viewport size, the positioning and size of elements resembled ads at a glance, and it contained nonessential or filler information which distracts the user from the main content.
Colour Palette

Adobe Color CC was used to create palettes to explore potential colour schemes for the landing page, using free stock photography of yoga studios from Pexels and StockSnap.
Style Tile

Taking various colour palettes as inspiration, I chose a calm blue and energetic green as gender non-normative colours to avoid the stereotype of yoga being "for women" or purely intended for relaxation.
Final Product

The final mockup.
Yoga Spirit Landing Page - Concept and Design

Yoga Spirit Landing Page - Concept and Design

This project shows the design process involved in creating a mockup of a landing page for a site offering online yoga classes. Includes wireframe Read More