Project Description

This project is a design challenge focused on creating a landing page that effectively promotes and presents a musical EP. The goal was to create an immersive, atmospheric design that balances both form and function while maintaining strong UI/UX principles. The design centers around "The 4 Horsemen" EP by Tribe Nova, featuring a dark, apocalyptic theme.

The Brief #2

Design a landing page with clear consideration for the main focus (music EP), incorporating essential landing page elements like call-to-actions and content clarity. The design should effectively communicate the product while maintaining user engagement and accessibility.

Target Platform

The design was implemented as a responsive mobile-first approach, with three different mobile viewport variations that maintain consistency while adapting to different screen sizes.

Functional Design Decisions

What problem am I trying to solve with my design?

• Creating an immersive first impression of the EP's concept

• Providing clear access to streaming platforms

• Communicating the EP's theme and track listing effectively

• Balancing atmospheric design with functional usability

• How does my design address the user's needs and pain points?

• Prominent "Dive into the EP" CTA button

• Clear track listing with thematic naming

• Visible streaming platform availability

• High contrast text for readability

Visual Hierarchy and Layout:

• Centered, vertical layout optimized for mobile viewing

• Full moon as anchor point drawing initial attention

• Title as secondary focal point

• CTA button positioned for easy thumb reach

• Description and track listing in clear reading order

Colour Palette, Fonts, and Visual Elements:

• Monochromatic black and white scheme with orange accent

• Handwritten-style font for title creating artistic appeal

• Clean sans-serif for body text ensuring readability

• Atmospheric imagery (moon, silhouettes) reinforcing theme

Key Interactions:

• CTA button for immediate EP access

• Streaming platform links

• Responsive design elements

• Potential for hover states and animations (to be implemented)

Technical Design Decisions

Layout:

• Single-column mobile-first design

• Careful spacing between elements

• Strategic placement of visual elements

Visual Hierarchy:

• Large title treatment

• Prominent CTA button in contrasting colour

• Clear separation of content sections

• Atmospheric background elements

Additional Considerations

Accessibility:

• Sufficient text sizing

• Clear button states

• Alt text implementation needed

• High contrast text against dark background

Branding:

• Consistent dark theme

• Apocalyptic/tribal aesthetic

• Custom typography for title

• Cohesive visual language

Mobile Optimization:

• Touch-friendly button sizing

• Responsive text scaling

• Optimized image loading

• Thumb-zone consideration for interactions

Final Designs

The final designs include a desktop, tablet, and mobile design

Conclusion

The design successfully creates an immersive landing page that effectively promotes the EP while maintaining usability and accessibility standards. It achieves its primary goals of creating atmosphere while providing clear paths to action for users.

Feedback

Please feel free to add any feedback, critique, or opinions on the design that I can use going forward. 😁

Contacts

Email: [email protected]

check out my other work: iktleshaba.netlify.app