We have a new website!

iphone-mockup-white_small

Even though our old site of 10 years had aged well, we were excited to start fresh. Since 2005 there have been many web advancements, and we wanted to to use the new features from HTML5 and other technologies. We also wanted to take the time to get it right.

We focused on mobile, of course, and paid special attention to our visuals and interactivity. Designing and developing your own website can be one of the hardest projects, but we are so proud to share our efforts and our goals along the way.

 

 

 

Mobile First – We’ve seen our mobile audience steadily grow over the last few years, so the new site had to be mobile friendly. The mobile-first approach was to ensure a top-notch experience on a smart phone or tablet. Go ahead, try for yourself. It looks and feels just like a native app.

 

Ease of Navigation – Don’t you hate it when you go to a site and you can’t quickly find what you’re looking for? Us too. So, we decided on a single scrolling site with floating navigation. Click or scroll – it doesn’t matter – you can’t NOT find what you’re looking for. Simple is always better.

nav

 

Big Visuals – Experience tells us the best route is to use a little, to say a lot. Instead of littering the site with words, our primary design focus was to use bold color, big visuals, and just enough text to clarify our message. The visuals start with the “project” section and get bigger when you click on one of the examples. Then they carry over to the “about” panel with our company headshots (which we took, by the way). Lastly, you come to a time-lapse view of the Seattle skyline, taken from our home in the Queen Ann neighborhood. We’re proud to be a Seattle company, which is why this visual was the best to end our site.

 

Show Our Personality – It’s difficult to demonstrate an agency’s personality without falling into cliché, so we focused on simplicity and the elegance of small details, such as animations. The arrow at the top of the page sets the tone. When clicked, the navigation icons expand-out and the page scrolls to show our work. From there, the animation includes a playful hover state that follows your mouse as you move between projects. This animation is synced to your movements because it’s important for you, the visitor, to control your journey. It’s these micro interactions that create the whole of someone’s online experience. Since not everything can be expressed in images and animations, we did include some written content describing the company and outlining the services we provide. It’s accessed from two inconspicuous red tabs on the left and right of the “about” panel. Clicking one of the red arrows will display the content, which can then be easily collapsed. At the bottom, our “inquire” button animates right below the linked map. Selecting it opens a sparse form with minimal data-entry fields. If necessary fields aren’t completed, it gives an perturbed little shake. Context cues like this are used in everyday life and share more information, without putting-off the user, than a plain error message. It’s almost like taking common body language and incorporating it into the online experience.


 

Backed by the Ply CMS – Our clients will attest, the Ply CMS makes managing a website a breeze. We wanted to push the envelope a bit, and see if a dynamic, responsive site could be easily developed on our platform. Yup, not a problem. We tackled dynamic image selection and scaling, conforming to a strict grid, and used relative font sizing based the user’s window size. It’s pretty awesome. From the front-end photography, motion graphics and design, to the back-end code, we created a scalable, streamlined site without extraneous features. And that’s what we are all about here: handcrafted experiences made in a simple way.

Posted by on June 23, 2015 with no comments yet

Leave a comment