MANOR12

Background

MANOR12 is an award winning interior decoration company. They have been featured in numerous magazines and publications, including HGTV. MANOR12 provides personalized guidance for homeowners who are ready for a change.

Project

We were tasked with creating a fully custom WordPress website, one that would focus on the photography to tell a story. It needed to be clean, modern, and showcase all of MANOR12’s talents.

It’s all about the photography

We knew from the very beginning that we wanted the website to focus solely on product photography. Being too busy or cluttered would detract from what makes MANOR12 so special – their ability to design and stage rooms.

However, you can’t just throw a few pictures on a page and hope it looks good. It takes planning, and a lot of creativity. By adding a really neat effect, we call it the looking glass effect, we were able to make each and every photo feel like it was alive, and as if you were peering into a world of wonder and intrigue. Whenever the user scrolls through the page, the images will actually reveal more of themselves, almost like a looking glass peering into the photo.

We didn’t make it so more of the image just… appears. That would be too easy! Not to mention, not as visually stunning. Instead, the photo slides through a mask, giving the user a sort of spotlight on the image, and based on how much they scroll, the spotlight moves.

Initial animation

When a user first visits MANOR12’s homepage, they will be greeted with a series of thought provoking questions. A circle will grow over a few seconds. As the circle becomes more complete, different sentences will animate in and out. Once the animation completes, a full page image will fly down from the top of the screen. This will be followed by the top page navigation, and the “catch phrase”.

This animation creates intrigue, and helps to get the viewer into the right mindset. A website should guide a viewer along a journey, and this is a great way to get them on the right track.

The looking glass effect

When a viewer scrolls through the page, more of the image will come into frame, but not in the traditional manner. Instead, the user is given a window into the image. See the video below to see this effect in action.

Pop-up gallery, to really focus on the photography

We implemented the ability for the viewers to click on images and see them in a focused mode. This really drives home the idea that the photos are what the viewer is meant to spend their time and attention on.

Page transitions

When a viewer traverses the website, we wanted the pages to transition beyond just going to white like a traditional website. Instead, we wanted to unify the page transition design with the same functionality as MANOR12’s navigation menu dropdown. This required us to make the entire website just one page (and a whole bunch of neat server and client side code) but the end result was worth it. Check it out below.

Speaking of the navigation…

A good user experience is everything. Before we even begin coding or designing the page, we sit down and determine how we want the user to traverse the site. Do we want them to see the most important links or click a hamburger menu, or both? Do we want to entice the user to scroll down, or focus on a specific piece of content? For MANOR12, we wanted to make sure that a user could always find their way around the site. To do this, we created a sticky hamburger menu, along with a search icon. Check out how we utilized these in the video below.

Results

MANOR12 now has a website that is truly unique. From the subtle animations to the sliding photo effect, we love this project so much, and MANOR12’s viewers do as well. This project was an amazing project to be working on. We appreciate MANOR12 giving us the opportunity to work on this project and help create a standout product.

Could you be next?

We are always looking for more forward thinking clients. Making this project was a labour of love, and it took a lot of communication between us and MANOR12 to get everything just right. If you want your business to have a website that’s just as kickass, let us know! We would love to see how we can help.