The Making of the New ROI·DNA Website

November 5, 2014
Paper Pteradactyl

When we started exploring ideas for our new website redesign, we were intrigued by some low-poly illustrations we had came across. Wanting to take it in our own direction, we began to explore the idea of “digital origami.” Origami straddles the line between flat and dimensional. It’s both creative and technical, and it’s fun – all of these things struck us as a perfect way to express ROI·DNA. So we decided to bring in an Oakland-based origami specialist named Ben Friesen. He showed us a few techniques, and talked to us about origami in general. We were hooked.

We also came across an Australian CG artist and illustrator named Jeremy Kool. His ability to show depth in the folds, and his interesting and compelling paper textures, aligned perfectly with how we envisioned our digital origami. So we brainstormed and came up with a “spirit animal” for each of the services we offer. Jeremy produced some amazing illustrations, which you can see in our services.dm-email-carrierpigeon

We put a lot of thought into the interaction of the site. We wanted to encourage exploration. So we decided on a variety of options ­– you can navigate with arrow keys, scrolling, clicking, or swiping – for total user control. The horizontal and vertical movement, combined with a programmatic scroll (where each scroll action initiates a full page scroll), give the site an “unfolding” quality to it.

As part of the website redesign, we gave each section it’s own distinct style. Our company story moves visually from left to right across a timeline. The updated case studies leave the programmatic scrolling behind, moving vertically through each project. Each case study is a narrative and visual story, tied together by a client-relevant theme.

ROI Website Redesign Screenshot

And then there’s the stop motion video.  When we began thinking about our homepage, we knew we wanted something high impact and memorable – something that introduces the origami theme, while communicating our core values. We knew that Ben Friesen, the origami specialist who had visited ROI·DNA, had done some stop motion work for several companies (which you can see here). We also knew we had the resources to produce a stop motion film completely in house.

So we began to explore content ideas. We had Ben do a few mockups of the ROI·DNA logo in origami at first.

image

Eventually we landed on the idea of two contrasting cranes: one, the old school crane, the first thing most people learn to fold. The other, a complex, detailed crane – an update of (and improvement on) the original. We commissioned Ben to build us a complex crane in ROI·DNA green.

On the day of the shoot, our team and Ben spent about 12 hours taking frame-by-frame stills of the story. We used Dragonframe software (used in the making of Tim Burton’s Frankenweenie).

About 30 hours of editing and color correcting later, and we were finished. You can check out the end result here.

Are you in need of a brand refresh that stands out? Get in touch. We’d be happy to help.

Hey There!

Thanks for reaching out.

Name
Job Title
Phone
Email
Company
What're you interested in?
Message

Thanks!
We'll be in touch shortly.

Until then, why not browse some of our work?

See our work