garciamedia.com

Visit the website at garciamedia.com and the “dossier.”

In rethinking our own website, we focused on two goals: creating a contemporary and vibrant showcase for our work and daily blog posts, and practicing what we preach with a mobile-first responsive website. I led design and development for the new website, building out most of the HTML and CSS. CEO and founder Mario García provided creative direction, and I worked closely with our art director Constantin Eberle on the visuals and with developer Christopher Kennedy on integrating the ExpressionEngine CMS.

The new website launched in April 2014. I was flattered that Ethan Marcotte, whose book on responsive web design was one of my key reference points, tweeted his approval:

Leading design and development on a responsive website for García Media

I began with research on our current site—a user survey, stakeholder interviews, reviewing and analyzing our metrics. Next, I created wireframes for the main page types and started building them out in code with Bootstrap.

homepage mobile wireframe
homepage desktop wireframe

Constantin and I passed InDesign mobile and desktop mock-ups back and forth until we were satisfied with the visual direction. I then created the CSS to add the look and feel to the wireframe.

Paris Match color palette
Romania Libera color palette
O Povo color palette
final website mobile
final website desktop

I also designed, edited, and built a new responsive “dossier” or portfolio, explaining García Media’s philosophy and highlighting key projects.

The García Media dossier