Metrum Ensemble

Client: Metrum Ensemble Tech stack: Figma, AodbeXD, GoogleForms, WordPress (Php, JavaScript, HTML, CSS)
I created this project for a Hungarian chamber music group that performs classical music, both modern and traditional. The goal was to design a unique and elegantly simple website that could showcase their contemporary music to a global audience. The project encompassed the creation of a visual identity, including a custom typeface used consistently across the website, and the development of a multi-page website integrated various media elements such as images, text, and videos. I began the project with an initial wireframe aligned with the client's needs and conducted user testing to gather invaluable feedback. The user interface (UI/UX) design was refined after several rounds of testing. I also managed the website development using WordPress (CMS) and created a fully customized unique template through coding and programming work.
. Metrum Ensemble Site →

The main element of the design is the logo. The logo is randomly cut along the 5 horizontal lines of a musical staff, resulting in at least 12 variations that alternate randomly.

The project included the development and design of thw webisre.

Homepage:
Features an introduction, upcoming concerts, and latest news.

A page that leads to various projects of the group.
The site also features buttons that visually represent its content, providing an easy-to-understand and content-reducing approach.

Mobile first design.

Wireframe:
As a first step, I created low-fidelity wireframes to define the site’s structure. These served as a foundation for discussions with the client and developers, ensuring that UX, accessibility, and a clear user flow were prioritized from the very beginning

The page features a series of accordions to organize high-density content and improve layout clarity. When an accordion is selected, it expands to reveal the text while the associated image transitions from grayscale to full color.

Typography Design System Guidelines:
Comprehensive type scale featuring the 'Brickstone' font. The system defines usage guidelines for headings, body text, and button components, with integrated design tokens.

Color System:
I used a black-and-white palette, contrast-testing every shade against WCAG standards. By mapping these to design tokens, I ensured the UI stayed accessible and consistent throughout the entire build.

Component Library:
I built a set of reusable components to keep the site consistent. This includes accordion states, project cards, and buttons with defined hover and active behaviors. I also designed the navigation system for both desktop and mobile to ensure a smooth transition between devices.