SONNET SYMPHONY

Daily harmony of music,
culture, and storytelling

TIME
3 Weeks
TEAM
Personal Project
ROLE
Graphic, UI Design
MENTOR
Anton Reponen

About the Platform

Sonnet Symphony is a dynamic online platform that strikes the perfect chord between music and storytelling. Celebrating the world of music and entertainment, it delivers daily stories, in-depth reviews, and engaging interactive features alongside monthly long-read pieces that dive deep into the essence of sound and culture. From curated lists to exclusive interviews, it’s the ultimate destination for fans and professionals to stay connected to the ever-evolving music scene. Driven by a small but passionate team, Sonnet Symphony ensures readers are always in tune with the music that inspires them.
Sonnet Symphony is a music entertainment and publishing media website. I developed the branding and designed an intuitive user interface for their website to bring this unique fusion to life.

Look and Feel

For the look and feel of Sonnet Symphony, I drew inspiration from traditional print newspapers, adapting their structured layout into a clean and minimalist design. The color palette takes cues from the subdued tones of newspaper pages, with a refined beige-grey (#ECEBE7) as the base color, adding warmth and sophistication to the overall aesthetic.
To emphasize the vibrant nature of music and entertainment, I incorporated subtle graphic elements, such as sound waveforms, which evoke the rhythm and energy of the industry. The overall design direction is clean, orderly, and straightforward, ensuring a user-friendly experience that focuses on clarity and visual appeal.

The Voice of the Design

To emphasize the vibrant nature of music and entertainment, I incorporated subtle graphic elements, such as sound waveforms, which evoke the rhythm and energy of the industry. The overall design direction is clean, orderly, and straightforward, ensuring a user-friendly experience that focuses on clarity and visual appeal.

Feature Image Guidelines

Creating image rules for Sonnet Symphony focuses on two main principles in photography: Visual Hierarchy and Layout, and Image Composition. The visual hierarchy ensures that large feature images are strategically placed to attract attention, providing a clear focal point for each news post while maintaining an engaging layout. Image composition encourages thoughtful framing, balance, and the use of negative space to create a harmonious visual impact, ensuring that each image aligns with the content and overall design of the site.

Home Page

The homepage of Sonnet Symphony is crafted with an editorial-first approach, featuring a bold carousel of featured or latest album that immediately grabs attention with its fullscreen visuals and clean typography.

Scrolling reveals well-structured sections for trending stories, reviews, and curated content, all designed with generous white space and a minimalist aesthetic. This layout prioritizes clarity and ensures both text and imagery take center stage.

The footer maintains the minimalist theme with simple navigation and a clean subscription form, reflecting the publication's focus on delivering quality content in a seamless, user-friendly experience.

General Article Template

The article template I've designed features a hero section dominated by a large cover image, with the title and secondary information strategically placed to the left, slightly overlapping the image. This creates a sense of immersion.

The body copy is positioned on the right side, allowing for clear separation between the main content and supplementary elements like images, videos, or quotes. The use of swashes in the title, lead-in, and body text maintains a cohesive look and feel.

The template is rounded out by related content suggestions and a global footer, providing an engaging and visually striking layout that is both versatile and content-centric.

Long Read

The article template I've designed features a hero section dominated by a large cover image, with the title and secondary information strategically placed to the left, slightly overlapping the image. This creates a sense of immersion.

The body copy is positioned on the right side, allowing for clear separation between the main content and supplementary elements like images, videos, or quotes. The use of swashes in the title, lead-in, and body text maintains a cohesive look and feel.

The template is rounded out by related content suggestions and a global footer, providing an engaging and visually striking layout that is both versatile and content-centric.