{"id":6481,"date":"2012-04-09T14:46:23","date_gmt":"2012-04-09T21:46:23","guid":{"rendered":"\/?p=6481"},"modified":"2013-06-13T16:41:42","modified_gmt":"2013-06-13T23:41:42","slug":"ultimate-choice","status":"publish","type":"post","link":"https:\/\/needmoredesigns.com\/ultimate-choice\/","title":{"rendered":"Needmore Designs for Ultimate Choice"},"content":{"rendered":"

\"\"<\/a><\/p>\n

For our latest production, the Ultimate Choice website<\/a>, 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\u00a0a site that was both a blast for us to build and visually enjoyable\u2014a long, single page with an illustrated house and landscape as a frame to Nohra\u2019s craftsmanship.<\/p>\n

<\/p>\n

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<\/strong>.<\/p>\n

\"\"<\/p>\n

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\u2019s 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\u2019s several stories. Finally, once you\u2019ve reached the bottom of the page, Nohra and his van roll into view.<\/p>\n

All of this movement is directly tied to how far down the page you\u2019ve scrolled. Using javascript, we can watch for where the page has been scrolled to and change values on those elements accordingly. For instance, if you look closely, you\u2019ll see the clouds are each moving at different speeds. We can control this by using a percentage of the distance the window\u2019s been scrolled for the distance a cloud has travelled. A smaller percentage means a slower cloud, and vice versa.<\/p>\n

\"\"<\/p>\n

Another\u00a0CSS\u00a0tool 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\u2019s 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.<\/p>\n

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\u2019s craftsmanship. Examples of this are front and center in the page\u2019s 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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.…<\/p>\n","protected":false},"author":3,"featured_media":6483,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[62],"acf":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/needmoredesigns.com\/wp-content\/uploads\/2012\/04\/UltimateChoice1.jpg","_links":{"self":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/6481"}],"collection":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/comments?post=6481"}],"version-history":[{"count":0,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/6481\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media\/6483"}],"wp:attachment":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media?parent=6481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/categories?post=6481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/tags?post=6481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}