MANOR12

It’s time to mind your manor 🏠

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.

Key Feature

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.

The rundown

The why and how.

Feature

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.

mind-your-manor-entry-animation

Feature

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.

Manor12_1Maltman_29463_2b

Feature

Unique cursor and button effects.

While viewing on a desktop, the viewer’s mouse will actually be modified to a circle. We take this one step further by making the circle increase in size to indicate that the viewer can interact with the element they’ve moused over.

Manor12_1Maltman_29391

Feature

Animated Logo

MANOR12 has two truly beautiful logos. Their traditional “MANOR12,” and also a mini logo of the 12 inside of a box. We wanted to utilize both of these on the website to really add that spark. Check out the logo in the video below and what happens when the page is scrolled.

Manor12_1Maltman_29402

Feature

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.

Feature

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.

Feature

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.

Final Comments

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.

Want to see some more projects from us?

Want to have us create you something as awesome? Let us know.

Drop us a line