guadalupe pérez pita guadalupe pérez pita

← back to projects

Website design with The Music Gallery

Screenshot of the landing homepage of The Music Gallery's website, set against a purple background. The design features a rich interface, set in a black and white palette with purple accents. The page uses an unconventional layout that staggers a central photo of a musician at the drums with two other overlapping images, creating a layered visual effect. Below the main navigation bar runs a marquee strip containing a welcoming statement about The Music Gallery's commitment to exploration. The design invites visitors to delve into a curated experience, with a sidebar calling attention to further engagement options such as 'Login', 'Tickets', and 'Memberships'.

The Music Gallery, a globally acclaimed center for creative music established in 1976 in Toronto, is a sanctuary for the exploration and amplification of diverse narratives and sounds.

I had the privilege of collaborating with my team at And Also Too and web developer Jean-Philippe Ung to re-design The Music Gallery’s identity and website.

The new site showcases a vast archive of The Music Gallery’s past and current programming, along with rich historical media. It includes events, journal articles, videos, music recordings, a live stage site, a members’ area, poster artwork, and more.

Our goal was to recreate the ambience of live concerts, the thrill of rifling through vinyl in vintage shops, and the deep dive into music journals. To this end, the design emphasizes The Music Gallery’s iconic concert photography, infused with neon glows, unconventional page layouts, interactive galleries, and a tactile “paper” feel.

with

The Music Gallery

 

And Also Too

Una Lee (art direction)

Zahra Agjee (studio coordination)

 

Jean-Philippe Ung (web development)

services

  • UX
  • Web Design
Screenshot of the landing homepage of The Music Gallery's website, set against a purple background. The design features a rich interface, set in a black and white palette with purple accents. The page uses an unconventional layout that staggers a central photo of a musician at the drums with two other overlapping images, creating a layered visual effect. Below the main navigation bar runs a marquee strip containing a welcoming statement about The Music Gallery's commitment to exploration. The design invites visitors to delve into a curated experience, with a sidebar calling attention to further engagement options such as 'Login', 'Tickets', and 'Memberships'.
Screenshot of the events feed on The Music Gallery's homepage, set against a purple background. At the top, the section is labeled "Coming Up" in striking black font, adjacent to an "All Events" button. Below, three distinct event cards are displayed in a staggered formation, each highlighted by vibrant, neon artwork cover. Each event card contains the event title, date and time, and a gradient-glow button that reads ‘Open’. The cards’ arrangement creates an engaging sense of movement, inviting visitors to explore more.
Screenshot of The Music Gallery's 'Community Safety' page. It features a banner with the page heading in bold, white text against a black background. Below the header, there are quick access links to The Music Gallery’s COVID policy, Community Agreements, and Feedback section. The page prominently displays a candid image from Pauline Oliveros' ‘Deep Listening’ sessions, a group of people embracing each other in a circle.
Image of two smartphones set against a purple background. Each displays different calls to action on The Music Gallery’s homepage. The left phone shows a black FAQ section with the heading "Have a question?" and a prompt to read the FAQ. Above sits a photo of a musician playing the flute on stage. The right phone highlights the call to action "Support Our Work", with a message explaining donations help create opportunities for artists. Above sits a photo of Bear Witness singing into a microphone. Both screens feature a similar color scheme with purple accents and neon glows, aligning with the website's overall design.
Screenshot of the 'Current Season' landing page of The Music Gallery's website. The season's date (2021-2023) is prominently displayed in bold white text against a rich black background. Beneath this header, an abstract artwork flows across the page, with organic, wave-like forms in a kaleidoscope of neon pinks, greens, purples, and blues. This digital tapestry creates a sense of rhythmic movement, reminiscent of music waves.
Image of two smartphones set against a purple background. Each displays different calls to action on The Music Gallery’s homepage. The left phone features a section titled "Dive Deeper" with text inviting viewers to explore media highlights since 1976, set above a photo of a Lido Pimienta performing on stage. The right phone shows the "Coming Up" events section with a stylized orange and black graphic for an event called AWAKE, featuring Joseph Shabason, Emissive, and Lucy Cameron. Below the graphic, the event details are listed, and a purple glowing button invites users to 'Open' for more details. Both screens maintain the site's consistent use of dark backgrounds with white and neon purple accents.
Screenshot of The Music Gallery's journal article page 'History Series: Trichy & Suba Sankaran'. The title is presented in white bold letters against the site's dark background and black navigation bar. To the right, the article features a prominent photograph of musician Trichy Sankaran in traditional Indian attire, exuding calm and contemplation. Information about the article, including the publishing date, the category 'Interview', and the publisher's name, David Dacks, is displayed on a right sidebar.

Interactive effects

Interactive effects on the site incorporate a flipping motion on staggered photos and calls to action, evoking the experience of browsing through records in a shop.

Screenshot of The Music Gallery's 'Community Safety' page. It features a banner with the page heading in bold, white text against a black background. Below the header, there are quick access links to The Music Gallery’s COVID policy, Community Agreements, and Feedback section. The page prominently displays a candid image from Pauline Oliveros' ‘Deep Listening’ sessions, a group of people embracing each other in a circle.
Screenshot of the events feed on The Music Gallery's homepage, set against a purple background. At the top, the section is labeled "Coming Up" in striking black font, adjacent to an "All Events" button. Below, three distinct event cards are displayed in a staggered formation, each highlighted by vibrant, neon artwork cover. Each event card contains the event title, date and time, and a gradient-glow button that reads ‘Open’. The cards’ arrangement creates an engaging sense of movement, inviting visitors to explore more.

Staggered, unconventional layouts

Staggered, unconventional layouts mirror The Music Gallery’s dedication to disrupting music conventions.

Neon glows

Neon glows accentuate interactive elements throughout the site, inviting visitors to explore further.

Image of two smartphones set against a purple background. Each displays different calls to action on The Music Gallery’s homepage. The left phone shows a black FAQ section with the heading "Have a question?" and a prompt to read the FAQ. Above sits a photo of a musician playing the flute on stage. The right phone highlights the call to action "Support Our Work", with a message explaining donations help create opportunities for artists. Above sits a photo of Bear Witness singing into a microphone. Both screens feature a similar color scheme with purple accents and neon glows, aligning with the website's overall design.

Keep exploring

On the Aids Community Care Montreal website's landing page, a full-screen image presents two people of color smiling and holding plates at a community event. The navigation bar above displays calming neutrals with accents of active reds, framing the content in a way that emphasizes the significance of community support and health advocacy.

Identity and website design with Aids Community Care Montreal
Image of a program piece for The Music Gallery from 2017. It features a program guide cover and an open spread against a vibrant yellow background. The guide cover features a striking design, with "THE MUSIC GALLERY" written in bold, capitalized letters on the center of the page. The artwork is composed of a bright pink, psychedelic pattern that drips downward from a monochromatic striped background. The open spread next to the guide cover displays a black and white photograph of Chino Amobi from NON Records, in a cityscape. The facing page has text and images, including a dynamic photo of a saxophonist, related to the event "INTERRO".

Program guide design with The Music Gallery