Site Redesign – November 2010

I thought I’d write up some background on the current Splat Collision Industries site, the recent update, some thoughts about the interaction and visual design, as well as details about the CSS3 animations and transitions that are a key part of the experience.

Previously, the design featured css3 transitions of -webkit-transforms that were managed with javascript – The idea was to transform basic markup into a highly dynamic experience, where clicking each section would reveal the contents, tucking away the previous section in the row below.  An algorithm kept the row of section boxes in line below the main content area.  Visitors could quickly get a sense of the content in nice screen-sized chunks, to minimize cognitive overload, and have fun exploring each section, viewing the animation reels and design work as they were revealed by each section click.

Before the redesign

Before Redesign

Check out the archived design here

I wanted to revisit the code recently since I was getting many visitors who weren’t using a webkit-based browser, and they weren’t seeing the CSS3 transitions.  Since the animation was a key part of the user experience, I wanted to add javascript animation effects as a fallback.  However, the code was a bit messy to maintain and add to, since it relied so heavily on -webkit-transform, and I had a hard time getting the same effect with js effects.  ”Time to start from scratch”, I told myself.

Firing up my rails app and jumping into an Edit Room session, I quickly sketched out a grid-based layout and prototyped the new way I would display and transition between layouts. For my site, I knew I could fit what I wanted to display in 5 main sections, and the grid gave me a natural starting point of 1 column width for each minimized section, and a 4 column width x 3 column height for the currently selected section.  I added header and footer rows to frame the main region, both 8×1 grid units.

Grid Layout One

First Grid Layout

Being able to quickly prototype designs in an interactive tool that uses native web elements was key for this one-day redesign.  From my initial vision the night before, to being able to have a layout template to work from before leaving the house in the morning was an great experience.

Final Grid Layout

Grid Layout with Final Section Expanded

Starting out with the basic stylesheet layout, I grabbed my Grid.js library from Edit Room, which leverages the incredible Rapahel.js library to draw a document grid on the page.  I was able to drop my library into this design unchanged, and have a background grid both as a layout reference as well as a design element.  This allowed me to quickly narrow down the CSS to get a solid pixel-perfect layout, and start adding the animation and user interaction.

Knowing that I needed to support both CSS3 transitions and javascript animations as a fallback from the start led me to simplify the interactive scripting for this iteration.  It helped that the design only needed to animate the width of each box, and let the natural browser layout take care of the rest.  For browsers that support animated CSS3 transitions, I simply add a class name to the selected element, which changes the width and since the transition property is set to “width”, the browser animates the box automatically.  When the browser doesn’t support the transitions, I use a script.aculo.us morph effect as the fallback.  I made sure to use “translate3d” instead of “translate” to tap into hardware acceleration on iPhones and iPads, as well as desktop browsers that support it. Some basic logic around collapsing non-selected sections and special cases for clicking on design thumbnails and video poster frames, and the basic scripting was done.

Working on the visual design, I kept the colorful vibe of the original design, making detailed use of CSS3 gradients with rgba color values – that way I got the bright colorful look I was after without overwhelming the body type, which was set in black.  I was careful to control the header size of minimized columns with javascript, so that the eye focuses on the expanded section first, then naturally explores the page.  A helpful highlighted directive to “Touch the boxes to learn more” also invites further exploration, and the copy makes sense on mobile as well as desktop.  The mobile stylesheet reformats this directive to point down instead of right, to fit the single column mobile layout.  I made sure to make the footer elements follow the main document grid as well.

More about the consideration for mobile users – when observing the user interaction events in javascript, I made sure to use “touchstart” instead of “click” for a much snappier response to touches, where appropriate.  However I took care to not over-use this trick, as observing “touchstart” on the gallery image closing event would close the image immediately if the user tries to pinch and zoom in on the larger image, which of course would be a common use case in a design portfolio.  Here’s a sample of that code:

var evtName = 'click'; // default event to observe if (Prototype.Browser.MobileSafari) { evtName = 'touchstart'; } // no wait, this will be faster! $('column_group').observe(evtName, this.columnClick.bind(this)); // just one event observer on the parent

Once everything was put together, I added a few final touches, such as observing arrow keys and mousewheel scrolling to flip through the sections.  I like to add fun elements of discovery to my designs, to keep it playful.  Also added cascading 3d flip animations of each page box on load for a build of the page elements.

SCI After Redesign

After Redesign

The final design was quite fun and satisfying to put together, and I think it shows one glimpse of the future of building websites, where interactive motion graphics complements but does not overwhelm the visual design and content.  This entire redesign was completed in one day.  The basic page markup was only changed slightly from the previous design, but the javascript and CSS are all-new.

This entry was posted in CSS3, Edit Room, Grid Systems, Interaction Design. Bookmark the permalink.

Comments are closed.