Creating a Web Experience for Muros
Designing a website is much different than designing for print because your audience is not only viewing it, but interacting with it. It’s this experience that makes a website design much more than aesthetics.
Similarly, our client Muros is an art activation agency based in Chicago that brings artists and brands from all over the world together to create experiences through art–outdoor murals, live art experiences, sculptures and installations. It’s these art experiences that they wanted their website to encapsulate. They wanted to create an online experience, not just something you look at.
Getting Started.
They came to us with established core brand elements–a logo, fonts, and colors. Overall these elements had a very simplistic theme. Their logo consists of their name in simple, black type. The font is clean and modern, with rounded, all lower-cased letters, and the color palette is made up of only three colors: black, white and bright pink.
It’s the simplicity of these brand elements that set the foundation for our designs. Playing off of the roundness of their logo and brand font, we incorporated circles and rounded shapes throughout. We kept things simple and clean–using black and white as the primary colors and minimized the pink to small pops of color to really draw the eye to links and calls-to-action. This minimal use of color allowed their vibrant project imagery to really shine and tell their story.
Creating an Experience.
Their existing site was also simple, but probably a little too much so. It incorporated a large brand video, which was a great start–but beyond that it wasn’t doing a great job of showcasing their amazing projects or the extent of their capabilities. And, it certainly wasn’t the experience they were looking for.
Muros works with some amazing clients and networks with some very talented artists, so we wanted to build out their project pages and really bring them to life. We included a highlight reel at the top of each project page to capture the user’s attention from the start. We then created a collage-style layout of large-scale project imagery to showcase more of the details. The collage-style layout gave the page more of an artistic feel as opposed to a typical slider or image gallery.
To build upon that, we layered in scrolling animation for added movement and fun hover effects when navigating between projects to surprise and delight the user, as well as create a user-friendly experience which is key. The idea of adding animations is great, but something we are always mindful of is to ensure the animations actually enhance the user experience, rather than hurt it, or distract from any intended action.
Other ways we used animation to enhance the user experience:
- A scrolling collage of images across the top of the about and capabilities pages.
This broke away from the typical, large static hero image and allowed them to showcase more imagery, as well as bring more movement to the page.
- An image carousel that visually explains their process.
The images animate as you scroll, enlarging the image you are on and shrinking the other images–putting more focus on the step in the process that is highlighted.
- A scrolling animation on the contact page.
This starts with one large image and zooms out as you scroll to a collage of several images–adding a cool interactive element and a visual break between two forms.
Large, beautiful imagery and video combined with these fun animations to create the online experience muros was looking for.
Always Evolving.
We were more than thrilled with the opportunity to partner with Muros and bring their vision to life. We love seeing the projects they continue to curate and the art experiences they share with the world. But, we never consider our work done. We are constantly looking for ways to innovate, improve and evolve.
Stay tuned for a few new sections we’re adding for them. And, if you haven’t checked them out yet–we highly recommend it!
