This is just another reason why i love Facebook. Here's how they worked the identity from their fourth biggest conference called the "f8". AWESOME ARTWORKS, AWESOME BRANDING, AWESOME DESIGN, thats all i have to say.
Enjoy!
f8 Conference—2011
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.
Mark Zuckerberg speaking at f8
Hack Central—the main hall of the event
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.
Identifying f8
The logo for f8 was developed in tandem with the initial deliverables. It needed to reference the graph and its new found depth, while also being clear and recognizable. Its form is perhaps the most strongly influenced by platonic solids and Buckminster Fuller's geodesic domes. The logo was amended in later iterations to include more freeform nodes to symbolize the graph's expansion and construction.
Logo progression
Processing
While working on f8 2010 we developed a rudimentary Processing script that allowed us to generate graph imagery. For 2011 we dusted it off and polished it up. With a some additional work we developed a robust tool that allowed us to rapidly iterate and develop graphics for a variety of applications. Because of the speed and flexibility it afforded us the entire graphic system for this years f8 was built using imagery generated with Processing.
Early Processing sketch
Beyond the “Like”
With the launch of the The Open Graph API, our actions represented on Facebook could now describe us in greater detail. What we did in real life could now be mapped through the graph. Just as the Open Graph was an extension of the previous Graph API, we wanted to provide greater articulation of the imagery we'd produced for the previous conference. The graph would be drawn with a depth and density reflecting greater possibilities and complexities. The graph could be mapped against the world, depicting connections throughout the globe or it could form pure, primary shapes, symbolizing an elemental nature to the connections we share. The graph was always shown “en medias res” as if being formed before your eyes. A split fountain color gradient was utilized for the background image to symbolize a transition taking place. This particular printing process mixes two colors on press as the piece is being printed. The process is slightly unpredictable and completely organic. For one particular poster, we even included a quote from a contemporary of Buckminster Fuller's to link the concept of connections with the good design. The quote, from design luminary Charles Eames, reads, “Eventually everything connects.”
Complete poster set
Complete postcard set
Three different shirt colors were used with three different graphics and split-fountain colorways were used to identify various support staff.
The Book is the Badge
The conference was robust enough to warrant its own small guidebook with an agenda, maps, and session descriptions. These neatly perfect-bound books doubled as identity badges for attendees through the inclusion of RFID tokens that granted them access to various experiences and break out sessions. We incorporated the graph into the cover through a clear foil that added texture without overpowering attendee names. Many detailed design decisions went into creating this booklet.
Angling the attendee name and information on the covers accounted for the natural rotation of the booklet while dangling on a lanyard—aiding in legibility. The cover was also designed upside-down, accounting for how an attendee would actually read the booklet (lifting it up from around one's neck). Color-coded breakout sessions and a timetable running on all right pages served for quick navigation. A few spreads were used to breakup sections of information, allowing us to inject more expressive moments into the booklet.
Building on the previous year's design, we opted to integrate the badge and the booklet while giving the attendee more choice over the combination of these elements. We designed the RFID tag to tear off, allowing attendees to swipe only the card without needing to dangle one's neck out to badge into event experiences (more on those later).
Any book designer will confess that the end papers are one of the most enjoyable parts of a book to design. Conceptually, we felt that containing the content of the conference around real people—friends—would have great impact and help attendees contemplate deeper connections. Each attendee's booklet had a grid of his/her friends on the inside front and back covers. The booklet concluded with another page of friends across from a phrase that carries a considerable amount of weight within the halls of Facebook: “What would you do if you weren't afraid?”
f8 booklet/badge set with various stickers for access and identification
Removable personalized RFID card
More Connections, More Meaning
One of the highlighted ideas at the f8 keynote was the concept of telling the story of our lives as represented through data. Nicholas Felton, best known for his personalized annual reports, was referenced in the keynote; his 2010 annual report was reprinted specifically for the conference. We took this inspiration to heart when rebuilding the data wall for f8, adding more real time information to the screen to create an infographic snapshot of the conference. From the 80-foot long wall, viewers watched photos being posted from all eight of our photo booths, status updates from our f8 ticker, friend connections from around the globe, an updating schedule of breakout sessions, and a map plotting where f8 visitors were from based on various data points—all displayed in real time. One of the largest portions of the wall was the comparative dataset that displayed the “Likes” of f8 attendees juxtaposed against those of Facebook users in San Francisco and all Facebook users worldwide. In an Eamesian “Powers of Ten” manner, this dataset gave context to the information being displayed.
The data wall
Working with Obscura Digital, a local experience design studio, we built “Connections,” a small arena that graphed real time connections between participants. Using the RFID card that came attached to their name badge, participants could tap into the experience and be recognized within the arena. Real time connections would then be drawn based on people's data on Facebook. The action within the arena was projected onto a large screen behind the experience for those outside to see. The ability to visualize connections in real time and observe how they changed based on surroundings to others garnered great attention from the attendees.
Connections experience
Processing, Expanded
The cavernous space of the Concourse Exhibition Center was the setting for f8. At 125,000 square feet, it was enormous, and we knew the task of directing participants around the space would be paramount. As well as making it as easy as possible for people to find their way around the venue, we also wanted the signage and stage settings to relate to the other materials produced. The visual attitude of f8 was meant to reference the hack culture within Facebook, which was articulated via exposed structures and materials like metal and wood. Wayfinding signage throughout the venue was printed on 1/2" pressboard and either built into standing sandwich boards or displayed in metal holders (constructed in Facebook's Analog Research Lab). Events were color-coded on maps and in the particular breakout sessions through gelled lighting and colored seating. This coding related to the venue map and agenda for easy reference.
Concourse event space
Event signage
From the vinyl graphics on the front of the concourse to the laser-cut mobile logo and Processing lattice in the foyer, we strove for immediate impact upon entering the venue. Like the printed graphics throughout f8, the lattice was also designed using Processing and then laser-cut from large sheets of frosted acrylic. We created tiling panels of this latticework to brand breakout stages. A colored canvas backdrop with light graphic elements was also included in stage designs to frame the presentation area for speakers.
Breakout session stage
Last year's sawhorse glass tables were functional pieces of artwork that gave people a place to rest, work and eat. We reprinted some of our favorites from last year and enlisted a new group of illustrators to create additional tables; their beautiful work added a bit of whimsy and visual contrast to the setting. The themes represented in the tables all referenced friends and connections, each one articulated in a particular illustrator's unique aesthetic.
We held our after party in the same venue as f8, transforming it from a presentation space to a party hall in an hour. Our guest performers were the electronic duo Crystal Castles, whose raw spirit and energetic beat were a great complement to the conference's programing. No concert would be complete without a gig poster, of course, so we silk-screened a limited run of posters on top of mark-ready from the event's posters and cards, recycling what would otherwise have been thrown away. They were available as people exited the venue, marking the end of an epic day.
Afterparty concert posters for Crystal Castles
Process
Just incase you didn't think this project entry was long enough here are a few photos from behind the scenes.
Work done while employed by Facebook.
Andy Samberg impersonating MarkKeynote audience
Hack Central—the main hall of the event
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.
Unused sketchesRegistration website
Identifying f8
The logo for f8 was developed in tandem with the initial deliverables. It needed to reference the graph and its new found depth, while also being clear and recognizable. Its form is perhaps the most strongly influenced by platonic solids and Buckminster Fuller's geodesic domes. The logo was amended in later iterations to include more freeform nodes to symbolize the graph's expansion and construction.
Processing
While working on f8 2010 we developed a rudimentary Processing script that allowed us to generate graph imagery. For 2011 we dusted it off and polished it up. With a some additional work we developed a robust tool that allowed us to rapidly iterate and develop graphics for a variety of applications. Because of the speed and flexibility it afforded us the entire graphic system for this years f8 was built using imagery generated with Processing.
Beyond the “Like”
With the launch of the The Open Graph API, our actions represented on Facebook could now describe us in greater detail. What we did in real life could now be mapped through the graph. Just as the Open Graph was an extension of the previous Graph API, we wanted to provide greater articulation of the imagery we'd produced for the previous conference. The graph would be drawn with a depth and density reflecting greater possibilities and complexities. The graph could be mapped against the world, depicting connections throughout the globe or it could form pure, primary shapes, symbolizing an elemental nature to the connections we share. The graph was always shown “en medias res” as if being formed before your eyes. A split fountain color gradient was utilized for the background image to symbolize a transition taking place. This particular printing process mixes two colors on press as the piece is being printed. The process is slightly unpredictable and completely organic. For one particular poster, we even included a quote from a contemporary of Buckminster Fuller's to link the concept of connections with the good design. The quote, from design luminary Charles Eames, reads, “Eventually everything connects.”
Three different shirt colors were used with three different graphics and split-fountain colorways were used to identify various support staff.
The Book is the Badge
The conference was robust enough to warrant its own small guidebook with an agenda, maps, and session descriptions. These neatly perfect-bound books doubled as identity badges for attendees through the inclusion of RFID tokens that granted them access to various experiences and break out sessions. We incorporated the graph into the cover through a clear foil that added texture without overpowering attendee names. Many detailed design decisions went into creating this booklet.
Angling the attendee name and information on the covers accounted for the natural rotation of the booklet while dangling on a lanyard—aiding in legibility. The cover was also designed upside-down, accounting for how an attendee would actually read the booklet (lifting it up from around one's neck). Color-coded breakout sessions and a timetable running on all right pages served for quick navigation. A few spreads were used to breakup sections of information, allowing us to inject more expressive moments into the booklet.
Building on the previous year's design, we opted to integrate the badge and the booklet while giving the attendee more choice over the combination of these elements. We designed the RFID tag to tear off, allowing attendees to swipe only the card without needing to dangle one's neck out to badge into event experiences (more on those later).
Any book designer will confess that the end papers are one of the most enjoyable parts of a book to design. Conceptually, we felt that containing the content of the conference around real people—friends—would have great impact and help attendees contemplate deeper connections. Each attendee's booklet had a grid of his/her friends on the inside front and back covers. The booklet concluded with another page of friends across from a phrase that carries a considerable amount of weight within the halls of Facebook: “What would you do if you weren't afraid?”
More Connections, More Meaning
One of the highlighted ideas at the f8 keynote was the concept of telling the story of our lives as represented through data. Nicholas Felton, best known for his personalized annual reports, was referenced in the keynote; his 2010 annual report was reprinted specifically for the conference. We took this inspiration to heart when rebuilding the data wall for f8, adding more real time information to the screen to create an infographic snapshot of the conference. From the 80-foot long wall, viewers watched photos being posted from all eight of our photo booths, status updates from our f8 ticker, friend connections from around the globe, an updating schedule of breakout sessions, and a map plotting where f8 visitors were from based on various data points—all displayed in real time. One of the largest portions of the wall was the comparative dataset that displayed the “Likes” of f8 attendees juxtaposed against those of Facebook users in San Francisco and all Facebook users worldwide. In an Eamesian “Powers of Ten” manner, this dataset gave context to the information being displayed.
The data wall
Working with Obscura Digital, a local experience design studio, we built “Connections,” a small arena that graphed real time connections between participants. Using the RFID card that came attached to their name badge, participants could tap into the experience and be recognized within the arena. Real time connections would then be drawn based on people's data on Facebook. The action within the arena was projected onto a large screen behind the experience for those outside to see. The ability to visualize connections in real time and observe how they changed based on surroundings to others garnered great attention from the attendees.
Connections experience
Processing, Expanded
The cavernous space of the Concourse Exhibition Center was the setting for f8. At 125,000 square feet, it was enormous, and we knew the task of directing participants around the space would be paramount. As well as making it as easy as possible for people to find their way around the venue, we also wanted the signage and stage settings to relate to the other materials produced. The visual attitude of f8 was meant to reference the hack culture within Facebook, which was articulated via exposed structures and materials like metal and wood. Wayfinding signage throughout the venue was printed on 1/2" pressboard and either built into standing sandwich boards or displayed in metal holders (constructed in Facebook's Analog Research Lab). Events were color-coded on maps and in the particular breakout sessions through gelled lighting and colored seating. This coding related to the venue map and agenda for easy reference.
From the vinyl graphics on the front of the concourse to the laser-cut mobile logo and Processing lattice in the foyer, we strove for immediate impact upon entering the venue. Like the printed graphics throughout f8, the lattice was also designed using Processing and then laser-cut from large sheets of frosted acrylic. We created tiling panels of this latticework to brand breakout stages. A colored canvas backdrop with light graphic elements was also included in stage designs to frame the presentation area for speakers.
Last year's sawhorse glass tables were functional pieces of artwork that gave people a place to rest, work and eat. We reprinted some of our favorites from last year and enlisted a new group of illustrators to create additional tables; their beautiful work added a bit of whimsy and visual contrast to the setting. The themes represented in the tables all referenced friends and connections, each one articulated in a particular illustrator's unique aesthetic.
We held our after party in the same venue as f8, transforming it from a presentation space to a party hall in an hour. Our guest performers were the electronic duo Crystal Castles, whose raw spirit and energetic beat were a great complement to the conference's programing. No concert would be complete without a gig poster, of course, so we silk-screened a limited run of posters on top of mark-ready from the event's posters and cards, recycling what would otherwise have been thrown away. They were available as people exited the venue, marking the end of an epic day.
Process
Just incase you didn't think this project entry was long enough here are a few photos from behind the scenes.
Credits
Ben Barry—Art direction, design, project management, design strategy
Tim Belonax—Designer extraordinaire (wouldn't have been possible without him)
Jenean Campos—Event project management
Jessica Sittig—Design strategy & project management
Kate Jhaveri & Dave Linsalata—Content & event schedule
Kathleen Loughlin—f8 Presence & mobile guide project management
Brynn Holland—Video wall project management
Aryeh Selekman—Engineering support
Ian Jennings, Jackson Gabbard, & Bobby Goodlatte—Registration page implementation
Matt Trainer—Managed registration
Grant Davis—Setup and ran the video wall, and built several visualizations for it
Obscura Digital—Built Connections Experience
Wayne Fan & Austin Bales—Built most of the visualizations on the video wall
Oscar Printing—Printed booklets and posters
Digital Pre-Press International—Signage and table printing, breakout stage / lattice production
OptsIdeas—Event Logistics
Steve Maller—Event photography
Peter Jordan & Skip Bronkie—Event video
Ben Barry—Art direction, design, project management, design strategy
Tim Belonax—Designer extraordinaire (wouldn't have been possible without him)
Jenean Campos—Event project management
Jessica Sittig—Design strategy & project management
Kate Jhaveri & Dave Linsalata—Content & event schedule
Kathleen Loughlin—f8 Presence & mobile guide project management
Brynn Holland—Video wall project management
Aryeh Selekman—Engineering support
Ian Jennings, Jackson Gabbard, & Bobby Goodlatte—Registration page implementation
Matt Trainer—Managed registration
Grant Davis—Setup and ran the video wall, and built several visualizations for it
Obscura Digital—Built Connections Experience
Wayne Fan & Austin Bales—Built most of the visualizations on the video wall
Oscar Printing—Printed booklets and posters
Digital Pre-Press International—Signage and table printing, breakout stage / lattice production
OptsIdeas—Event Logistics
Steve Maller—Event photography
Peter Jordan & Skip Bronkie—Event video
Work done while employed by Facebook.
No hay comentarios:
Publicar un comentario