For our latest production, the Ultimate Choice website, we were intent on designing an experience that would move beyond the usual brochure sites standard for local home repair companies. And when Nohra from told us we could be creative as we wanted, we were also resolved on having a bit of fun in the process. We think we’ve hit the nail on the head by creating a site that was both a blast for us to build and visually enjoyable—a long, single page with an illustrated house and landscape as a frame to Nohra’s craftsmanship.
Our first goal was to redefine the visual language of Ultimate Choice (the only item we couldn’t touch was the new logo). Below is this is the original website.
The fun for us starts in the sky, at the entrance of the site. As you scroll down the page, an airplane flies across your browser window, pulling behind it a banner with Ultimate Choice’s motto. As you scroll back up, the plane retreats back to its starting position. Similarly, the clouds in the sky around the house also move up or down as you scroll, as does the reflection of a tree on the windows down through the house’s several stories. Finally, once you’ve reached the bottom of the page, Nohra and his van roll into view.
Another CSS tool we made heavy use of is called z-index. This allowed us to layer pieces of the site one on top of the other, creating the illustrations’s depth. Z-index creates 3-dimensional space along the z-axis. If the x-axis runs left-to-right, the y-axis runs top-to-bottom, you can think of the z-axis as running from the screen out toward you. You can see this most clearly at the base of the house, where the fence is running behind the house, a pair of trees sit in front of the window, and another pair of trees are behind the fence in the back yard. If you time your scrolling just right, you can also get a cloud to sit itself behind those trees in the back yard.
While all of this was fun for us to build and makes for an engaging and unique experience, the real focus of the site is Nohra’s craftsmanship. Examples of this are front and center in the page’s three slide shows: one highlighting detail and craft, another gallery highlighting all the great work he does, and a third filled with testimonials from happy clients.