garciamedia.com

In rethinking the García 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 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

Designing a variable identity system

With input from my colleagues, I created the new visual identity for García Media. As used on the website, the identity system features multiple color palettes inspired by notable past projects. The type palette centers on Ideal Sans, a warm but robust sans, and complements it with the serif Mercury Display/Text and touches of the condensed Tungsten.

García Media logos
García Media business cards