Overall Width.............................
Gutter Width.............................

Grid-25%.............................
Grid-33%.............................
Grid-50%.............................
Grid-66%.............................
Grid-75%.............................
970px
38px

214px
298px
466px
634px
718px

214px wide

<p>Text</p>

On September 22, 2011, Facebook launched its fourth and largest f8 conference to date. As with previous years, the undertaking of such a production was expansive. The Communication Design team was again tasked with designing the identity for the conference as well as its interactive experiences. The event serves as a platform to inform and inspire developers through product announcements, demonstrations, and interactive experiences—showcasing the possibilities of Facebook.



<h2>Title</h2>
<p class="twocolumn small_type">Text</p>

It started with the Earth

The concept for this year's f8 centered around the humanizing aspects of the latest releases from Facebook. The need to speak about the global connections that Facebook enables as well as the depth of those connections was imperative. We drew inspiration from the visual and theoretical works of Buckminster Fuller and Stewart Brand as well is the beauty of platonic solids. Both men redefined how we thought about the world in relation to ourselves. They fostered ideas of connectedness through their work before the Internet was ever an idea. Our initial sketches addressed the concept of the Facebook graph and its shape. Like the vision of Earth that Brand championed, we wanted to give form to the connections that tell our collective story, allowing everyone to gain a broader understanding of what Facebook and each other.



<img src="image.jpg">
<span class="caption">Caption</span>

970px wide
Mark Zuckerberg speaking at f8

<div class="clearfix">
    <div class="grid-50 gutter-right">
        <img src="image.jpg">
    </div>
    <div class="grid-50">
        <img src="image.jpg">
    </div>
</div>
<div class="clearfix">
    <span class="grid-50 gutter-right caption">Caption</span>
    <span class="grid-50 caption">Caption</span>
</div>

466px wide
Andy Samberg impersonating Mark Keynote audience


<div class="clearfix">
    <div class="grid-33 gutter-right">
        <img src="image.png">
    </div>
    <div class="grid-33 gutter-right">
        <img src="image.png">
    </div>
    <div class="grid-33">
        <img src="image.png">
    </div>
</div>
<div class="clearfix">
    <span class="grid-33 gutter-right caption">Caption</span>
    <span class="grid-33 gutter-right caption">Caption</span>
    <span class="grid-33 caption">Caption</span>
</div>

298px wide
Berlin Austin Seattle


<div class="clearfix">
    <div class="grid-25 gutter-right">
        <img src="image.png">
    </div>
    <div class="grid-25 gutter-right">
        <img src="image.png">
    </div>
    <div class="grid-25 gutter-right">
        <img src="image.png">
    </div>
    <div class="grid-25">
        <img src="image.png">
    </div>
</div>
<div class="clearfix">
    <span class="grid-25 gutter-right caption">Caption</span>
    <span class="grid-25 gutter-right caption">Caption</span>
    <span class="grid-25 gutter-right caption">Caption</span>
    <span class="grid-25 caption">Caption</span>
</div>

214px wide
A+B Duty to Hack Mac Classic Finally


<div class="clearfix">
    <div class="grid-50 gutter-right">
        <div class="gutter-bottom">
            <img src="image.jpg">
        </div>
        <img src="image.jpg">
    </div>
    <div class="grid-50">
        <img src="image.jpg">
    </div>
</div>

466px wide


<div class="clearfix">
    <div class="grid-50 gutter-right">
        <img src="image.jpg">
    </div>
    <div class="grid-50">
        <div class="gutter-bottom">
            <img src="image.jpg">
        </div>
        <img src="image.jpg">
    </div>
</div>

466px wide


<div class="clearfix">
    <div class="grid-33 gutter-right">
        <img src="image.jpg">
    </div>
    <div class="grid-66">
        <img src="image.jpg">
    </div>
</div>
<div class="clearfix">
    <span class="grid-33 gutter-right caption">Caption</span>
    <span class="grid-66 caption">Caption</span>
</div>

298px wide / 634px wide
Caption Caption


<div class="clearfix">
    <div class="grid-66 gutter-right">
        <img src="image.jpg">
    </div>
    <div class="grid-33">
        <img src="image.jpg">
    </div>
</div>
<div class="clearfix">
    <span class="grid-66 gutter-right caption">Caption</span>
    <span class="grid-33 caption">Caption</span>
</div>

634px wide / 298px wide
Caption Caption


<div class="clearfix">
    <div class="grid-33 gutter-right">
        <div class="gutter-bottom">
            <img src="image.jpg">
        </div>
        <img src="image.jpg">
    </div>
    <div class="grid-66">
        <img src="image.jpg">
    </div>
</div>

298px wide / 634px wide


<div class="clearfix">
    <div class="grid-66 gutter-right">
        <img src="image.jpg">
    </div>
    <div class="grid-33">
        <div class="gutter-bottom">
            <img src="image.jpg">
        </div>
        <img src="image.jpg">
    </div>
</div>

634px wide / 298px wide


<div class="clearfix">
    <div class="grid-33 gutter-right">
        <img src="image.jpg">
    </div>
    <div class="grid-66">
        <div class="gutter-bottom">
            <img src="image.jpg">
        </div>
        <img src="image.jpg">
    </div>
</div>

298px wide / 634px wide


<div class="clearfix">
    <div class="grid-66 gutter-right">
        <div class="gutter-bottom">
            <img src="image.jpg">
        </div>
        <img src="image.jpg">
    </div>
    <div class="grid-33">
        <img src="image.jpg">
    </div>
</div>

634px wide / 298px wide


<div class="story small_type">
    <strong>Title</strong><br><br>
    Text
</div>

What was it like designing the print materials for President Obama's visit to Facebook last April?

We only had about a week and a half notice before he was coming. The first thing I thought was "Okay, Obama's coming and I gotta design a poster and somehow get him to sign it because when else will you ever have an opportunity to have the President sign something you designed?"

But I got sucked into doing a bunch of other stuff for the event on top of traveling and other project work, and it comes down to the night before the visit and I still hadn't designed or printed the posters. So, I go to dinner at our cafeteria and I had a few ideas but I knew they weren't good enough. I flipped open my laptop over dinner and worked on a concept, burned the film, and screen printed 50 posters.

Now it's about 10 o'clock and I'm cleaning up and I knew I wasn't going to get close to the President and I figured the only way it would get signed was if Mark [Zuckerberg] would ask him to do it. So, I snapped a photo with my phone and shot an email to him asking if he'd try and get him to sign it. I'm about to leave it on his desk and he writes back saying something like, "Yeah, it looks awesome. I'll try and get him to sign it."

As I'm stacking up the posters about to leave for the night, I realize I misspelled Barack Obama's name on the poster. I was pissed. What could I do? I went back and output new film, burned new screens, and printed an edition of 10 correct posters. Mark was able to get him to sign it and now it hangs in our offices, so that's pretty cool. The phrase "pain is temporary, film is forever" comes to mind with a project like this.

—Excerpt from Facebook's Ben Barry On How To Hack Your Job on 99U.


<iframe src="//player.vimeo.com/video/XXXXXXXX?portrait=0&color=ffffff" width="970" height="XXX" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<span class="caption">Caption</span>

Mark Zuckerberg speaking at f8

<div id="flexslider-1" class="flexslider">
    <ul class="slides">
        <li>
            <img src="image.jpg">
            <p class="flex-caption"><span>Caption</span></p>
        </li>
    </ul>
</div>
  • Cover close-up with clear foil and sticker

  • Opening the booklet: your friends and the event map

  • f8 booklet agenda

  • Time markers ran down all right pages

  • Section break

  • Things to do around the conference

  • Last page




<div id="flexslider-2" class="flexslider">
    <ul class="slides">
        <li><img src="image.jpg"></li>
    </ul>
</div>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#flexslider-2').flexslider({
            slideshow: false,
            keyboardNav: false
        });
    });
</script>



<div id="flexslider-3" class="flexslider dark">
    <ul class="slides">
        <li><img src="image.jpg"></li>
    </ul>
</div>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#flexslider-2').flexslider({
            slideshow: false,
            keyboardNav: false
        });
    });
</script>

<p class="details">
    <strong>Title</strong><br>
    <a href="#" class="reg_link" target="_blank">Text</a>
</p>

<p class="details">
    <strong>Title</strong><br>
    Text<em>&mdash;Text</em>
</p>

Credits
Ben Barry—Lettering
CMG:Landscape Architecture—Courtyard design
Paul Mayne—Photographer (main photo)



Work done while employed by <a href="http://www.facebook.com/design" class="reg_link" target="_blank">Facebook</a>.


Work done while employed by <a href="http://www.thedecoderring.com/" class="reg_link" target="_blank">The Decoder Ring</a>.
Work done while employed by Facebook.

Work done while employed by The Decoder Ring.


<a href="#" class="reg_link">Text</a>

<a href="#" class="reg_link small_type">Text</a>

<a href="#" class="reg_link small_caps">Text</a>