Rebranding of Oxegen, an iconic old Irish music festival.
I graduated from the Interaction Design masters programme at Harbour Space University in Barcelona shortly after my sister Orla was selected as one of five artists to exhibit her work at the RHA gallery in Dublin, a exhibition held annually for recently graduated artists. This huge achievement and a great opportunity for Orla to gain some publicity in the early stages of her career. She needed a website so that visitors to the exhibition could easily revisit her work and check out the other projects she’s working on. So, that’s where I stepped in.
Visit Orla’s site.
I graduated from the Interaction Design masters programme at Harbour Space University in Barcelona shortly after my sister Orla was selected as one of five artists to exhibit her work at the RHA gallery in Dublin, a exhibition held annually for recently graduated artists. This was a huge achievement and a great opportunity for Orla to gain some publicity in the early stages of her career. She needed a website so that visitors to the exhibition could easily revisit her work and check out the other projects she’s working on. So, that’s where I stepped in.
I knew that the design of the framework could be kept simple once we organised Orla’s artwork into categories. I also felt that, by keeping it simple, there would be more opportunity to do something a little different. Together, Orla and I divided all the content she wanted to publish into 9 categories that we were both happy made sense.
I decided to let each of the 9 categories have their own page. 8 of the 9 categories were showcasing Orla’s work, the other was content that fitted neatly into an About page. There was very little written content, I was mostly working with great assets of images of Orla’s artwork.
So, I placed the navigation to all pages in the centre of each page, and arranged the content of each page in interesting compositions on a vertical scroll. It’s simple, but unusual. By making the font small and subtle, it could sit in the middle without taking the focus off the images surrounding it. The navigation awkwardly sitting in the middle of the page creates the tension in the experience that I was aiming for. Larger images have to scroll through it which contributes to the “kitschiness” without spoiling the user experience.
The artworks on 2 of the pages had titles, and belonged to a certain series of works. This information needed to be available to the user, so on each page I included a toggle switch allowing users to show the artworks’ details, but in a way that also covered part of the picture to encourage them to scroll through the experience without the works details, focusing on the images themselves. I also decided to keep the toggle switch on the pages for artwork without details. Read on find out why...
It was important that the typeface that I chose for the central navigation was small so that it didn’t take too much focus from the more important visual assets. We went with Nuvo Mono Pro. Upon close inspection, this mono typeface has a friendly roundedness which I felt suited Orla’s character. Going for a sans-serif felt too safe and trendy. Going for a serif felt out of place. I liked the awkward spacing between the letters in this mono typeface because it contributes to the tension in the design. Besides being used for the central navigation, it’s used for all body text any other details or information besides headings.
There are very few headings featured in any of the pages on this site, but where they do feature, I wanted them to communicate a confidence and to be trustworthy. This is important because, although it is pretty and playful, Orla’s artwork addresses very serious issues. So we decided on Futura PT Condensed. This beautiful font not only achieves the bold look we were going for, but as a condensed font it also reflects the kind of hand-lettering that Orla always uses in her analog projects. I also used Futura PT Condensed to create a simple logo with Orla’s name which features large in the centre of the homepage.
%20(1).jpeg)
.jpeg)
.png)
Let’s start with colour. Because Orla’s artwork and character are so colourful, I wanted the elements of the site to be colourful too. It was difficult to find a colour scheme that didn’t clash and compete with the vibrant colours of the visual assets. Ultimately, it was Eduardo Paolozzi’s uncomfortable use of tones of pink and green that I observed at Barcelona’s Macba museum that inspired the colour pallet for this project. The chosen green is very deep and is primarily used on such small text that, depending on the background, it might be perceived as black. But again, it’s the expression of tension that it makes when juxtaposed with the pink that we’re hoping to achieve.
Now, let’s talk about texture. As is evident from her choices to work with so many different mediums, texture is an important part of Orla’s work. You can feel the tactile connection she has with her materials, and I wanted to somehow capture that in a digital format. So, in addition to the use of pink and green for content, I applied a paper texture to an off-white colour for the background of all pages on the site. I also applied a light paint-like texture to the boxes which overlayed images to contain the work’s details.
There were 2 main qualities of the frameworks that determined the grid that I ultimately decided to build on. The first quality is the central navigation, which I wanted to occupy one column in the grid. So I needed an odd number of columns in order for there to be one in the middle. The second quality is the composition of the images of Orla’s artworks on the majority of the pages. I wanted these compositions to be interesting, to leave plenty of breathing space between images, and to feel a little random in the arrangement while also following some structure. So I built on an 11 column grid. This is typically an awkward number of columns to build on because it’s prime; it doesn’t divide evenly by other numbers. In this case, however, it worked well by creating a between balance without the use of much symmetry.
So, I’m happy with the design in terms of simplicity, functionality and aesthetic, but it’s missing that extra flavour of Orla’s personality that I also wanted it to reflect. It’s time to introduce more Orla to the design. My idea was to have Orla doddle directly onto the website, to let her annotate and decorate each page. One concern was that too much decoration would distract from the website’s other content, but I also didn’t want to apply constraints to Orla when she was doodling by asking her to not to go too crazy. I just wanted her to have fun, not to think about it, whatever happens happens. So I decided that there should be a way to switch the decorations on and off.
I mentioned earlier that I’ve decided to keep the “more info” toggle switch on all pages, even though there are only 2 out of 10 pages that require it (see the section about the framework). Here was the perfect opportunity. I decided to use the same switch, and where there was no additional information about the content, the switch would turn from “more information” to “more decorations”. Keeping the switch on the remaining pages also creates more consistency in the framework throughout the site and the sites visitors are treated with the charming surprise of Orla’s playful decorations. This is definitely my favourite part of the design as it’s the ingredient that makes the site uniquely Orla’s.
In order to meet the target of publishing before her work was exhibited in RHA gallery in Dublin on November 24th, I decided to build the site using Readymag. Readymag is a brilliant web building tool. It’s dynamic and intuitive to use, and I could build fast. It has it’s limitations, but it was the perfect tool to use considering the simplicity of the site’s structure. Readymag also has a higher limit on image size uploads than my alternative Webflow; an appreciated feature for this particular project which is so dependent on imagery. Of course, there were unanticipated challenges along the way, but the site was built and tested on time for the exhibitions opening. Success!
This was the first project worked on after completing my masters in Interaction design in Barcelona. Honestly, I don’t think I could have asked for a better start. Designing a website for an artist is the dream project in so many ways. Straight off the bat, you’re working with great assets and you’re presented with the exciting challenge of capturing the character of the artist. Now, add into the mix that the client was also my sister. This gave me a little more breathing room to make the many inevitable mistakes that needed to be made on my first project. There were technical lessons that needed to be learned the hard way, and it was more comfortable to be able to learn those lessons with Orla rather than someone I’m not already familiar with. Some lessons were as simple as knowing how to prepare your image assets and when to choose PNG or JPEG. The biggest mistake I made was not prioritising a mobile version of the site. Lesson learned.
The other dreamlike aspect of this project was working with Orla. She was super organised and proactive with preparing assets and content. She was optimistic and enthusiastic throughout the process. She shared my desire to get things done right and efficiently, making it clear when she liked something and telling me directly when she didn’t, no time wasted. It was a pleasure working together and I hope we’ll get a chance to put our heads together on another project again soon.
.png)
