Roger Ebert

Roger Ebert: 4 Stars

The process of rebuilding Roger Ebert’s website began long before Table XI asked me to join the stellar team they had assembled. The group had been hard at work for months rethinking the experience of Roger’s then-current website and how to present, organize and browse decades worth of content. I was honored to be on board and got right to work visualizing the new direction.

I started by converting the initial work developed by Fuzzy Math into functional wireframes. This was an important first step. It allowed the development team early access to front end files they could build against. More importantly, it gave us a site that lived in the browser. We were able to use these wireframes to start testing the initial structural assumptions, identify areas that needed additional thought and work through content interactions on every device we could get our hands on.

Browser view for the review browsing screens
http://rogerebert.com/reviews
Tablet view for the review browsing screens
Phone view for the review browsing screens

With wireframes in place, I was able to shift my attention to the presentation layer of the site. Roger Ebert’s main draw was his elegance with words. The design was approached from a content-first point of view, making sure that each entry remained readable and felt comfortable on the page. Hard work was put into defining and separating main from supporting content. Above all else, I wanted to ensure that nothing on the page distracted from the joy of reading the steady stream of reviews and blog posts that kept fans returning to the site. The result was a simple, light and tasteful backdrop where the words are the stars.

Homepage Detail
http://rogerebert.com/
Review Detail
http://rogerebert.com/reviews/to-the-wonder-2013

Building a rock solid responsive foundation was a major component of the project. Again, the content guided the way. In every view, I handcrafted the breakpoints according to the needs of the page and kept the changes as subtle and meaningful as possible. Once again, I wanted the experience of reading the site to be seamless regardless of the device the reader was using. Every major iteration required review and refinement of the responsive layer of the site — a layer that was still being refined the day of launch.

Channel Detail
http://rogerebert.com/channels

It’s hard to write this without acknowledging Roger’s death and noting that he did not get to see the site load on his own domain. But it’s wonderful knowing that this person whom I’ve looked to as an inspiration in overcoming my own fear of writing gave the site a hearty thumbs up.

Collaborators

Strategy, Development, and Project Management
Table XI
UX
Fuzzy Math
Branding
Lacoste Design
Branding
Pitch Design Union