Sorry

M+ no longer supports this web browser.

M+ 不再支持此網頁瀏覽器。

M+ 不再支持此网页浏览器。

11 Aug, 2021 / by William Smith

Web Design Is Visual Culture

Photograph showing two people in multi-coloured, skin-tight body suits standing serenely against a two-toned purple and blue background.

Anton & Irene, up to their antics. Photo: Anton & Irene

The brief was ambitious: conceptualise and design the digital home for a twenty-first-century museum of visual culture. The trilingual site would have to appeal to local audiences in Hong Kong and project the museum’s mission and values around the world. And most of the work would have to be done in the middle of a pandemic that halted travel and also made a strong virtual presence more important than ever for cultural institutions.

Irene Pereyra and Anton Repponen, who run the Brooklyn studio Anton & Irene, rose to the challenge of designing the M+ website. Their approach reflects months of conversations with M+ about our identity, programmes, and future needs, as well as the designers’ own first-hand experiences of Hong Kong visual culture. They had designed other museum sites previously, notably for the Metropolitan Museum of Art in New York, but they had never built such a distinctive digital home with as much creative flexibility.

The design extends the brand system developed by the Amsterdam-based agency Thonik. On the printed page, the digital screen, posters, city buses, and much more, M+ will be defined by a spectrum of distinctive colour bands. Anton & Irene set out to make that brand experience interactive by building a smooth, fluid site with modular elements that allow it to grow over time as museum programming develops. The process was a global collaboration: Anton & Irene worked with M+ between New York and Hong Kong as well as with Thonik in Amsterdam and website backend specialist Torchbox in the UK. Appropriately enough, they sat down over video conference to discuss the nuances of their design and how M+’s unique digital presence fits with an ever-evolving digital ecosystem.

Photograph showing a man and a woman sitting in an open studio space. The walls are white, and the beams and floors are timbre. The woman is dressed in a bright pink jumper and grey patterned leggings and holds a mask with distorted features up to her head. The man wears dark clothing and holds up a potted plant in one hand to conceal his face.

Anton Repponen and Irene Pereyra in their design studio. Photo: Anton & Irene

What do you want the visitor’s first impression of the site to be?

Irene: I would like their impression to be: ‘Wow, this doesn’t look like a museum website at all’. One of the main goals with this design was to create a site that would stand completely apart from all other museum websites in the world. If you put them all side-by-side, they look similar. M+ allowed us, as the designers of this website, to actually design something and not just copy what every other museum and institution is doing.

Anton: I want that first impression to be: ‘This is so Hong Kong’. The design is not Swiss; it’s not a white background with black text. I hope that people will feel the colourful, vibrant character of the city. The clash of colours is almost like the clash of the natural landscape with the city itself.

How did you transform the brand concept Thonik developed, often called a brand book, into a dynamic experience online?

Anton: When brand books are developed, the designers don’t usually consider digital as much. It’s always about print. When it comes to the screen, brand books usually contain some motion video or other basic examples. Our job is to maintain, and even amplify, brand identity. Interactive experiences are constantly changing and evolving. Pages are being added, things are moving. The screen is a live surface. Once we saw the guidelines from Thonik, with the spectrum of colours and the logic behind it, we were immediately inspired.

Illustration showing a colour wheel with three rings. The outer ring is shades of orange, pink, purple, blue, dark green, light green, and ochre. The inner ring shows lower contrast versions of the outer ring colours. The middle is grey.

The M+ visual identity created by Amsterdam-based agency Thonik uses a range of mid-tone colours, causing a 'visual tickle'

Irene: We knew the colours couldn’t be static. We didn’t want it to feel like the same three colours over and over again on every single page. On the homepage, we tried to make it feel like the colours are coming alive.

Screencap of M+ website featuring large M+ logo.

The M+ homepage

How does your design reflect your experience of Hong Kong?

Irene: The brand was very extensive, but it did not account for a lot of interactive elements. We needed to develop buttons and links and create a system to distinguish between clickable and non-clickable elements. For the clickable elements, we wanted to have simple, circular sticker-like buttons. We imagined making a wireframe of Hong Kong with all the neon signs and all the symbols stripped down to their essence. We were inspired by Hong Kong in an abstract way, to make the site feel fun, busy, and cluttered, but at the same time structured and organised.

The clash of colours is almost like the clash of the natural landscape with the city itself.

Anton Repponen

Anton: Designers love organising things and putting things into boxes. Once we are given colours to work with, the first thing we want to do is organise. But we were careful to stay away from colour coding anything.

If I take a picture from Kowloon of Hong Kong Island, there is a lot of colour, but it’s not like one area is in green, one is in orange. Sometimes the signs and advertisements clash and it almost feels uncomfortable. At the same time, the overall effect is supported by beautiful typography and it starts to make sense. The homepage for the M+ site is the most colourful thing we have on the website. It’s like the cover of a book, offering this flashing Hong Kong experience. There are also places where we tone it down; when filling out a form for a school visit request, you want to be able to focus, for example. The colourways on the site can feel almost chaotic, but there is always an underlying logic.

Photograph showing an aerial view of several city blocks. Through the centre, a six-lane road runs horizontally. The street is lined by six rectangular blocks of tightly packed with tall buildings; other blocks extend north and south. The effect is a grid-like composition.

Aerial view of Kowloon. Photo: Abstract Aerial Art via Getty Images

M+ is a new institution. The content on its website will grow rapidly when the museum opens to the public in late 2021. How have you accounted for that growth?

Irene: We wanted to create a site that M+ could maintain easily and that wouldn’t be a nightmare for future updates. We also wanted to make sure we could hit the deadline as efficiently as possible. We have a certain number of modular features on the site that we can assemble in a lot of different ways. We call them Lego blocks. These are the buttons, layouts, and interactions that can repeat. Some pages might only need one Lego block. Some might need three or five.

This modularity helps M+ because the site is easier to update. It helps the developers meet deadlines. And it also helps the user. Once a user is familiar with a certain pattern, they expect to see it again. It’s very annoying if a function works one way on one page but in a different way on another page. Users expect to be able to learn the design system in an ambient way. Every single feature on the site is repeated at least once, setting precedents for use that allow visitors to understand how to navigate.

Photograph showing a section of the exterior of a building. There is a triangular-shaped glass structure, beneath a podium level and a tower. The facade is lined with green, vertical rows of tile.

The M+ facade. Photo: © Virgile Simon Bertrand; Courtesy of Herzog & de Meuron

Accessibility is a core value at M+ that drives every aspect of content production. How were you thinking about accessibility in the design process, especially as part of User Experience (UX) development?

Irene: If you think about who could potentially visit the M+ website, the age range spans from like twelve to ninety. The audience includes people who speak Mandarin, people who speak Cantonese, people who speak English as a first, second, third, or fifth language. It’s people from Hong Kong; it’s people from all over the world. We knew that we had to account for an extremely wide audience of people from different backgrounds, of different ages, and with different abilities and degrees of digital literacy.

We were very careful about ensuring our design could meet or exceed Hong Kong accessibility guidelines. For example, white text on a colourful background was integral to the brand identity. But white text can be more challenging to read than black text on white. To ensure legibility, we decided to make the text quite large. We also thought about the mobile site. My mother is seventy-four years old, and she has a very hard time with a lot of mobile websites because everything is tiny. We deliberately created a jumbo site—everything is large on the desktop as well as on the mobile browser. We had quite a few discussions with M+ about how to condense content and make it as efficient as possible for this accessible design framework. Do we really need eight paragraphs to describe this thing? Because, if so, you’re going to be swiping for the next hour given the size of the text.

The physical museum was built to meet accessibility guidelines . . . It was very clear that our work on the website had to match their effort to make the physical space accessible.

Irene Pereyra

Accessibility is, of course, a major goal of UX design, but how the site is developed is also crucial. Ultimately, the way the code is written and structured will allow a screen reader to read the site out loud so that anyone with visual impairment—or anyone who prefers audio—can engage with the site. The developers were instrumental in achieving this.

The physical museum was built to meet accessibility guidelines. We spoke with the M+ visitor services team to understand how seriously they took their responsibility to welcome everyone of all abilities. It was very clear that our work on the website had to match their effort to make the physical space accessible. M+ simply would not have launched the site if they didn’t feel confident in its accessibility.

How does a website fit within a cultural institution’s overall digital presence?

Irene: In the past, a website would have been the only—or at least primary—place to get information online. That is obviously no longer the case. We were thinking not only about how the site fits within the museum’s social media and other digital platforms, but also about how it fits within the user’s digital ecosystem. The homepage is not necessarily going to be the starting point for most people when they come to the website. They’re searching for an artist, finding related M+ exhibition pages through Google, and going directly there. It is important that these side doors still convey a coherent feeling of M+.

Anton: On the social platforms we all use, we all have the same basic home. My Instagram interface looks exactly the same as Irene’s, which looks exactly like M+’s. Sure, the content is different, but the way people interact with it is the same. A website is different. It is the institution’s unique home. You set up the guidelines and you let users know how they can interact with you. This is the place where you want to stand out. M+ didn’t build a generic box for its physical home. They hired Herzog & de Meuron to build the museum because it had to be distinctive. The website is an extension of the institution’s character in the same way.

Photograph of a city skyline at daybreak, showing two sides of a harbour. On the near side is a cluster of grey, concrete buildings and a building shaped like an upside-down ‘T’. On the far side of the harbour is a cluster of tall buildings, behind which is a mountain range.

The M+ building, next to the WKCDA Tower and our Conservation and Storage Facility. Photo: © Virgile Simon Bertrand; Courtesy of Herzog & de Meuron

Many people might never visit M+ in person. They’re going to be browsing from Mumbai, Amsterdam, New York. We want to give them a home where they can explore the collection online and discover more about the museum’s activities. We want them to go to M+ Magazine and read all about the visual culture of Hong Kong. On the website, that information is all in one place and not scattered on Facebook and Medium, and here and there, and on some random blog with twenty-three different ads popping up. The website is curated by M+ and is an expression of its identity.

Photograph showing the interior of a design studio. The walls are white with timbre beams and floors. A long open bookcase extends along the left to left-centre of the frame. In the background are white desks with large computer monitors. A woman in a hoodie sits and works at one computer. Three people stand in the background near a row of windows talking.

Anton & Irene's Brooklyn-based studio. Photo: Anton & Irene

What are your favourite features of the site?

Anton: Usually when you go to a website, they try to impress you on the homepage, then the deeper you go it becomes boring. We wanted to make it so that as you go deeper, as you travel, you have an experience like the homepage.

Irene: For us—and hopefully for visitors—the first scroll on the homepage is delightful. The giant M+ logo minimises and subtly goes to the top left. The colours ambiently update as you swipe through. Even though we knew it was coming, it was very exciting when we first saw that initial scroll fully developed. It puts you in the right mood to experience this museum.

As told to William Smith (Head, Digital and Editorial Content). The above interview has been edited for clarity.

Anton & Irene is the Brooklyn-based design studio of Irene Pereyra and Anton Repponen.

M+ Members

  • Access to the M+ Lounge with your guests
  • Members-only exhibition viewing hours
  • Priority lanes to exhibitions, cinema, and events
  • Priority booking and member discounts
  • Free access to galleries, special exhibitions, and cinema screenings

... and much more

Loading