Blue Flower - Brief

This project focused on designing and developing a multilingual promotional webpage for Blue Flowers, a music album by singer and illustrator Marjan Farsad. The site introduces users to the album’s themes, shares the artist’s biography, offers access to song lyrics, and encourages engagement through listening and purchase options.

The visual and functional design aimed to reflect the emotional and poetic tone of the album, while remaining accessible to both English and Farsi-speaking audiences.

‍

Blue Flowers - Problem

The artist’s original fanbase spans across Iranian and international audiences, but there was no existing digital experience that honored the bilingual nature of her listeners.

The challenge was to:

• Create a fully bilingual site that visually and typographically supports both English (LTR) and Persian (RTL) without compromising layout or mood
• Present the album as a complete interactive experience, not just a static page
• Maintain the poetic essence of Marjan’s music and lyrics in a modern digital form
• Offer smooth access to streaming, purchasing, and artist information in both languages

‍

Blue Flower - Solution

A fully responsive, bilingual webpage was designed with a language toggle system powered by JavaScript. The layout dynamically adjusts to support both English and Farsi while preserving readability, elegance, and emotional impact.

The user journey was built around:

• Visual immersion (moody color palette, poetic typography)
• Album interaction (audio player, tracklist)
• Engagement (call-to-action buttons, newsletter sign-up)

‍

Design Elements

‍

‍

• Color Palette: Deep navy, amber, and neutral tones to evoke melancholy, nostalgia, and warmth
• Typography:
  • English: Serif and hand-lettered style for intimacy
  • Farsi: Culturally aligned typefaces with careful RTL formatting
• Layout:
  • Hero section with album promotion and CTAs
  • Centered album player and tracklist
  • Lyrics, biography, and footer callouts with form integration
• Interactions:
  • Smooth fade transitions
  • Language toggle with immediate content updates
  • Responsive grid and modular sections for mobile/tablet adaptation

‍

‍

‍

‍ Development Details

• Multilingual Support:
  • Custom JavaScript toggles full-page content between English and Farsi
  • RTL support with conditional CSS layout adjustments
• Audio Integration:
  • Native HTML5 audio player embedded per track
  • Album playlist navigation panel
• Content Organization:
  • Lyrics embedded directly within the layout
  • Custom forms for email sign-up
• Responsive Behavior:
  • Fluid scaling and font adjustments for all breakpoints
  • Touch-friendly elements and button sizes optimized for mobile

‍

Outcome

The Blue Flowers webpage became a visually rich, culturally sensitive digital experience that appeals to a global fanbase. It effectively:

• Promotes the album with both emotional tone and practical tools
• Allows seamless language switching without disrupting the layout
• Presents lyrics as part of the experience, not just text
• Increases potential engagement with sign-ups and streaming links

‍

Reflection

This project pushed me to think deeply about cultural accessibility, typographic nuance, and the emotion behind a user experience. Designing for Farsi required careful layout strategy and empathy for non-English readers.

It also taught me how to balance artistic voice with clean functionality, and how visual storytelling can become an extension of music in the digital space.

‍