Rebranding the <form> function() & .class web design conference

--

The <form> function() & .class conference has sported many looks in its 7 years of existence, but these past few months have been a transition into a new brand system that we hope to use for years to come. In order to understand how we got there, we’re going back in time to see how this grassroots event for web designers, by web designers has evolved.

The name as brand

FFC alludes to the 3 elements of a website—<form> from HTML, function() from JavaScript, .class from CSS—and the 3 concepts central to the craft (form, function, and continuous learning).

We started by brainstorming a name that conveyed what the conference would cover: <form> function() & .class. Plus, even as inline text, the incorporation of symbols used in coding websites immediately sets it apart.

(Downside? Some sites don’t escape the < > properly, and other sites don’t allow symbols in their page titles.)

2008: the first logo

The first FFC logo was created in 2008 by Marco Palinar and Rico Sta. Cruz. It’s bright and elegant, with a splash of 8-bit in it.

2009–2014: conceptual branding

Every year we launched very specific branding that went beyond the visuals, from the conference theme, to the music we played, to the swag our participants brought home. As we organized each new conference, we built micro-experiences we felt would delight and benefit our participants.

One of things we had fun with was the name tags. In 2009, we used different web browsers; in 2011 we had mobile phones on mini programme booklets; in 2012 we did the Facebook timeline of that era; in 2013 we used actual diskettes; in 2014 we created superhero trading cards. We’ve also done custom certificates, lanyards, stickers, notebooks, stamps, and of course, t-shirts.

FFC conference swag throughout the years

2015

The latest rebrand started in 2015, led by then Design & Tech committee head, Aceler Chua.

The new logo introduced a couple of new ideas. More than what looks like “FFC” from the symbol, it also represents the wireframe of a typical website: a header, two small content blocks, and a larger one.

Echoing the expected behavior of websites today, the FFC logo is also responsive, whose narrow version we use for our smaller gatherings called MiniFFC.

As if that isn’t cool enough, the new brand uses Inovato, a custom typeface also designed by Aceler.

FFC6 banner featuring our theme, “evil design”, and our speakers: Angela Chua, Rachel Nabors, James Cabrera, Angela Obias, Brad Frost, Holger Bartel.

2016

After a roller coaster ride of exciting conference themes, we went into the 7th FFC wanting a stable, versatile system we could use long-term.

Inspired by the Russian constructivist movement, the updated brand features bold hues, a typography-driven aesthetic, and a reintroduction of the symbols that have accompanied our conference name since the beginning.

The brand guide also specifies that representative HTML tags (such as H1 for headings, P for paragraphs, and so forth) be displayed at the edges of text—another nod to the craft of web design.

The Inovato fonts were updated, and are now accompanied by Acumin Pro.

The logo was realigned so that it looks more balanced. When placed in the corner, it is also reminiscent of stamps created by East Asian artisans.

(this particular image may or may not have been inspired by Instagram’s rebrand)

Et voila!

Design is a never ending process, a good design today doesn’t mean it’s still good for tomorrow, so accept the fact the you’re going to work on some redesigns in the future. Just enjoy the process, make less complaints, you’ll find yourself learning and improving in the middle of the work. — Aceler Chua

Form Function & Class is a non-profit, volunteer-run conference on web design by the Philippine Web Designers Organization, to be held on October 22–23, 2016. Get your tickets now!

Want to learn more about what we do? Check out The PWDO Story So Far.

Words by Sophia Lucero.

--

--

Philippine Web Designers Organization
Philippine Web Designers Organization

Volunteer nonprofit that organizes #webdesign & #frontend conferences, meetups, workshops, & other initiatives for the community 💙💛❤️ pwdo.org