Deconstrukt #8: Coulee Creative’s Fab New Portfolio

Humans are naturally drawn to smiling faces and that's how the landing page of Coulee’s fabulous new portfolio site greets us, thanks to a cameo appearance by Jared Chelf, Coulee Creative’s Co-founder.

The positive vibes continue thanks to the soft blue hue and some lively interactivity. Moving the mouse around brings instant reward via subtle animation and when hovering the uniquely centered menu, more energy is injected into the page by changing to a nicely matched soft orange color. A nice beginning.

The centered menu is worthy of more critical attention because it immediately presents a point of difference in Coulee’s new site. Placing the menu here provides two clear options for the user. Scrolling is now a secondary backup option as the user is more likely to click a big friendly circle in the center of the screen. The word "friendly" seems to be the leading key word of the brief so far.

Designers might like the ease of simply scrolling away and may do so out of “programmed curiosity” but real users are here for specific content and will likely prefer the up-front option of rapidly getting to where they want to go. It’s an interesting UX strategy that deserves respect for it’s boldness and originality.

We choose the menu option and are happy to see more creative originality as we are greeted with a full-page interactive navigation system that provides a contemporary take on the golden days of Flash. A well complimented soft orange color has taken over and increased the visual energy while at the same time a minimalist aesthetic reduces the brain-load. A nice juxtaposition and a noteworthy UX idea.

A quick scroll and we opt for the about page simply because it is the first choice. Of course this is not by accident. Placing the about page first informs the user that Coulee’s main competitive difference is their people and this is where their brand story really begins to unfold.

A parallax infused hummingbird and soft-yet-high-impact graphic with a play button appears. A typical video-phobic response makes us finally hit the mouse wheel to see what’s what and our scroll withdrawal is met with one of the best about page layouts we have seen in some time.

All our favorite friends have come out to play. Parallax, great color palette, wonderful typography, talented illustrations… if the whole site consisted of just this page, it likely would have still won WOTD without the rest of the delicious stuff baked in. The page is topped off with a dash of horizontal scroll animation at the bottom of the page to complete the digital feast.

No need for a “back to top” button, the Coulee crew have elected to provide the next chapter in their story via a brainy hybrid button that leads to the “Our Work” page. As if our mouths weren’t watering enough, we are now hit with an upgraded version of the navigation page. It features a divine sub-navigation that would make the lead designers at both Ikea and Disney sit up and take notes.

We scroll to see the projects that Coulee are most proud of and each is accompanied by a stylized black & white 3D image. Simple yet so effective it should be a mandatory addition to the curriculum at every UX design school. At this point the client is more than happy and is probably going for the contact button but wait… there’s more!

The project details page displays another smart multi-layered approach by Coulee. These pages are the business end of the site and are laid out more simply so the content outshines the flair. Whether it was intentional or not this is a cool way to structure a site. Like the Pied Piper, Coulee lead the way into their site with candy then gently back off and throw some tasty and nutritious roast vegetables onto our plate. More UX 101 appears in the footer of these pages with a mighty call to action.

Outcome:

Coulee Creative’s new site is a digital banquet of creativity, originality, art, design and UX. It’s more eclectic than most sites of today but this only serves to separate them from the pack. Their story comes bursting to life through color, animation and smart choices. All in all it’s a multilayered production that effortlessly hides an incredible amount of thought. A tasty outcome indeed.

Tech:

Javascript - ES6 (es6 is the "future" version of javascript, transpiled to regular javascript using babel.js)