musingT

Back from beautiful Whistler, where we held the 2010 Mozilla Summit – an exciting action-packed week of amazing demos, sessions, and more.  The Summit is the largest gathering of leadership across the project, of key contributors and passionate Mozillians from all corners of the globe.  It’s a rare occasion to have everyone in one place, a biennial reunion of massive proportions to celebrate our collective achievements and plan ahead for the future.  It’s truly an inspiring event, and I’ve been so fortunate to have had the opportunity to participate in two of them.  This year was by far the largest, with over 600 attendees and 60 countries represented.  To help set the right tone, I worked on creating the official Summit poster and visual identity:

The first step in the design process was defining a mood board and creative brief to capture the desired look and feel.  Then, we needed to find the right illustrator to bring it all together.  As we browsed various sites for inspiration (like Society6), we came across the work of Peskimo, a design team based in the UK that had a unique illustration style and a portfolio that matched what we were looking for.  Over the few short weeks that followed, we worked on establishing the right design concept and iterated fast towards our deadline.  The final artwork turned out absolutely awesome, and served as the core design theme that shaped the entire experience design of the Summit.  Huge thanks to David and Jodie of Peskimo, the talented illustrators behind this original artwork.

A few words on the concept and art direction:

For the illustration style, we wanted to produce something different than past Mozilla artwork – stepping away from the retro-futuristic/sci-fi types of imagery that we tend to rely on, to create something appropriately bold, yet more organic.  With that in mind, we took inspiration from the natural setting of Whistler to create a serene and green landscape.  We established a softer/earthy palette as the foundation, with warmer/more vibrant accent colors to echo our brand and instill a sense of energy into the scene.  A lot of thought went into the details of this poster, from the individual character designs to the arrangement of, and meaning behind, various elements.  Although not terribly obvious, the green bolted path sweeping across the canvas is an abstract representation of the wild spirit of the web, harnessed and guided forward by the community as they march towards the future.

Designing the parade of characters was among the biggest challenges.  How do you capture the notion of a global community in a way that people can relate to… without getting lost in the pixels or leaving something out?  To do this, we focused on communicating the broader concept of diversity in a fun way, by creating a sea of whimsical characters (monsters, critters, etc) of different shapes, colors, and sizes to echo our own diverse community.  Everything from the color of their eyes and freckled cheeks, to the various accessories they’re wearing was tweaked and iterated on until it felt right.  The result was a cast of unique and lovable characters:

The attention to detail extends all the way to the back of the scene.  Let your eyes wander deep into this parade, and you might even catch a few hidden easter eggs:  The Firefox Robot and The Red Dino, woven in as a little nod to our past.  Can you find them?  If not, peek here.

A few words on the experience design:

Once the poster was finalized, we handed off the assets to Black & White, an agency we enlisted to manage the design experience of the Summit.  With individual elements carefully extracted, the artwork was extended across a variety of goods to brand every aspect of the event.  From standard badges, to an array of colorful t-shirts, to decorative cut-outs guiding your way around the hotel, to giant prints draping the keynote hall, and much more… we held nothing back.  The final surprise was unveiled on the last night when we were greeted by three featured characters at the top of Blackcomb mountain where we danced the night away.  Special thanks to the brave souls who stepped into those costumes and brought them to life.  What a memorable evening, and what an amazing Summit!  Hope everyone enjoyed these little critters as much as I did.

So, where do these Mozillian characters go from here?  A lot of people have expressed interest in having the source files made available to the community so that they can remix and use them for various other projects.  Although I’m thrilled to hear that the illustrations were a big hit, we unfortunately won’t be able to release them into the wild.  The poster was created as a special artwork specific to this year’s Summit only.  Even materials like the t-shirts that you received were limited edition prints for the Summit and will not be available anywhere else.  Consider them rare memorabilia encapsulating your 2010 Summit experience.  We do however have desktop backgrounds, here. Enjoy!

As part of our larger plans to strengthen the communication channels with our community, we’ve created the Firefox Engagement Hub on mozilla.com, highlighting our top 4 social media channels: Facebook, Twitter, Youtube, and Flickr.  This is a fairly simple/static page right now (a beta if you will) which we’ll be evolving into a more robust engagement space in the near future – including an awesome Twitter visualization, and much more.  This is an exciting step towards providing a better window into our social media presence, and surfacing ways to stay connected with all that’s going on in the world of Firefox.

With respect to the design direction:  Yes, those butterflies are swimming underwater!  The background illustration (created by the Delicious Design League) is a metaphoric representation of Firefox and concepts of community and collaboration.  Coral reefs are beautifully diverse and complex habitats, teaming with colonies of fish and an array of other organisms who all rely on each other to thrive.  The coral reef itself is not only alive, but also serves to protect and support the larger ecosystem.  The social butterflies, each with a unique design painted on their wings, further echo the notion of diversity and personalization.  Thanks to Monique Johnson, we also created a custom icon set by re-illustrating the individual logos for a more hand-made feel that matched the rest of the site’s design style.

Twitter is an important source of information for millions of people, and it has also become one of the top communication channels that we use at Mozilla to engage with our community.  The Firefox Twitter account is growing faster than ever before, and a search on the #firefox hashtag alone will summon a lively stream of tweets from around the globe.  But that’s only a thin slice of all the action taking place.  To really appreciate the scale and scope of Firefox activity within the Twitter universe, you need to analyze the data through an entirely different lens.

To achieve this, I’m working on creating a Twitter visualization that captures the unique and multi-dimentional nature of our community, their conversations, and the energy that flows through their tweets.  As you know, there are some incredibly complex and mesmerizing data visualizations out there… my goal is to create a similarly stunning Twitter visualization that is also built on open web technology.  As Morgamic kindly put it, we’d like to make this a “crazy utilization of the open web”.

I’m personally really excited about this project… we’re always looking for new tools to engage with our users and to celebrate our community, and I think a cool visualization of our Twitter activity will help encourage that.  But to take this to the next level and kick-start the ideation process, I need your help.

How would you like to see our Twitter community visualized?  What kinds of information or data types would you want to capture?  To help guide your thinking and provide some inspiration, I’ve collected a set of the most creative Twitter visualizations from around the web.  I also distilled these down to what I thought were key elements that made for a great visualization, and therefore required specs for what our visualization should be:

* Approachable: Captures meaningful data that’s relatively easy to digest by just about anyone.
* Beautiful: Presents the information through an artistic lens, and is generous in its use of color.
* Dynamic: Displays activity in real-time, conveying a constant state of movement through animated elements.
* Interactive: Allows users to play with design elements, and filter/search through the data with relevant tags.
* Unique: Takes inspiration from, but does not closely mimic, what has already been created.

With all that in mind, I’d love to hear your thoughts, feedback, and ideas around a potential design concept for our Twitter visualization.  Please leave a comment and share your thoughts.  I’m looking forward to hearing from you!

Firefox 3.5 is finally here! And what better way to celebrate the launch than with the brand new 3.5 t-shirt. We had a lot of fun last year with an open call for designs that led us to the official Firefox 3 shirt.  But this time around, we tried something different.  Inspired by the concept of a tag cloud, we turned to the community for help in coming up with a collection of words that best described Firefox.  We then used these words to create a stylized typographic visualization of what Firefox 3.5 is all about – highlighting some of the key features and goodness that’s baked into the browser.

The final design is not only awesome (and among my favorites), but also a unique addition to our t-shirt archive, which continues to grow as it captures snapshots in Mozilla’s history.  Special thanks to Monique Johnson, for lending her artistic talents to us once again and creating this beautiful word cloud.

The new Firefox 3.5 t-shirts are now available in the Mozilla Stores, professionally modeled and photographed by members of our very own team.  You can also download this design in different sizes as a desktop wallpaper.  Enjoy!

** Paris, Toronto, MV, Tokyo and China offices…looking good!  Silverorange has joined the fun, too.

Last month I hosted a Creative Workshop to help mobilize the 3.5 community launch team. The slides and video have been archived for your reference.  As you know, creative arts and graphic design are extremely powerful forms of communication.  Often times they are more effective than words alone, and can even break down language barriers to reach a larger audience.

With that in mind, we’re fortunate to have such a passionate community and creative energy around the Firefox brand – which over time, has resulted in some pretty amazing stuff.  From beautifully painted buses in India, to Firefox cookies, cakes, and my personal favorite…a Firefox pillow!  And lets not forget the 2000+ t-shirt design submissions from last year’s contest.

It’s time to tap into your creative skills again, and help promote the launch of 3.5.  A great way to do that is by creating new designs for the Community Store.  Here’s a quick summary of the guidelines to get you started:

• You may choose from a variety of SVG software or raster-based tools – Including Adobe suites and free/open-source alternatives like Inkspace and GIMP.
• Be as creative and abstract as you wish!  Take inspiration from broader concepts like community and open-source, or specific features of Firefox 3.5, like open video, speed, security, and more.
• If using the Firefox logo, please follow the style guidelines and trademark policies.
• Remove any element that you don’t want printed, including the background color layer.
• Save your final file in high resolution transparent PNG format.
• Upload your designs.  Make sure to provide your name for attribution and add descriptive tags.
• Designs are displayed in a public gallery and can be customized on different shirt styles for purchase.

If t-shirts don’t get you excited, feel free to express your creativity in other ways.  But whether it’s stitching, baking, singing, or planting a Firefox topiary (hint)… make sure to show it off by posting to Flickr or Youtube, using the tags “FX35″ & “Spread Firefox”.  We’re looking forward to seeing what you come up with!

Also, if you’re interested in learning more about design initiatives at Mozilla (like the Creative Collective), or our creative process… be sure to read John’s (and my) blog for the details.  You can also join the design mailing list, or follow our tweets for updates.

Just yesterday I wrote about some of the ways we’re going to encourage participation within the Creative Collective, and one of them was through the concept of badges (which are digital icons awarded to members for their contributions).  Below are the first set of designs from Airbag Industries, along with a preview of how these achievements would be stamped on your portfolio.  The designs take inspiration from the simplistic feel of various video games, and the color palette of the Creative Collective logo for a striking yet playful result.  We’re really excited about these and think that they’ll be a great way to add more fun (and social capital) to the overall experience.  My personal favorite is “Pixel Charmer”.  What do you think?

(View the full-size version on Flickr.)

According to a recent study published in the journal of Applied Cognitive Psychology, doodling may actually help improve your memory.  The basic premise is that doodling serves as a simple secondary task, a slight distraction to prevent your mind from wandering off into daydreams, while reserving the bulk of your mental resources for the primary task.  This means that you have a higher level of concentration and can retain more information than you would otherwise.  I found this article particularly interesting because growing up, I always littered the margins of my textbooks, notebooks, and any other paper product that lay near by, with an array of doodled art.  Sketching in general has always been a therapeutic process for me, and apparently it’s also good for my brain.

One of the most prolific doodlers I know, is actually our very own John Slater.  If you’ve ever sat with him through a conference call, a meeting, or even casual conversation, you might notice that he sheds pages of  doodles while giving you his undivided attention.   Aside from observing his artistic talent and unbound creativity, I’ve always been rather intrigued by the concepts that he sketches.  Personally, I sense a recurring theme of “heads”.  A rich futuristic universe of unique characters and obscure shapes that both inspire and raise concerns at the same time.  If you see any of these mysterious doodles laying around, I suggest you save them as they may be worth a lot one day.

Have you noticed that the Community Store’s favicon is animated?  I made it using Favicon.cc, a web-based paint application and image converter that lets you create custom icons for your website.  It’s one of the better, and more feature-rich generators I’ve found online – with a variety of editing tools that are easy and fun to use.  You can even publish your work under an open license and share it with others.  The Store’s favicon is simple in design.  It takes cues from the site’s visual theme and is animated across 93 frames, pixel by pixel:

Personally, I find animated icons to be really cool, and befitting of a creative space like the Community Store. But you don’t see too many of them out there and that’s because most are considered to be distracting, if not plain annoying. Just imagine trying to read an article while something is flickering in your periphery.  Or if you’re like me and have an average of 20 tabs open per session, then imagine each of those carrying an animated icon dancing for your attention.  So, although small and neatly tucked away in your chrome, they definitely have the potential to become disruptive.

But depending on the nature of your website, and if it’s done tastefully, I actually think an animated favicon can add a unique flair and help set you apart.  What’s important is making the animation simple and subtle.  Try to have smooth transitions between each frame and avoid endless loop cycles.  Tease the user with a short sequence, and let them hit refresh if they want to see it again.  These were all the considerations we took into account when creating the Store’s favicon.

I admit, I’ve become somewhat fascinated (maybe a little obsessed) with favicons ever since I worked on this, and it’s partly because I’ve always been a fan of art in miniature sizes.  It’s just amazing how much detail can be communicated in a tiny 16×16 pixel box!  And if you don’t share this enthusiasm with me yet, one look at the most inspiring repository of favicons and you’ll surely be hooked.

Back in September, we started the process of creating an official logo to represent SUMO and its ongoing mission as  a community-powered support channel.  The top 4 candidates were presented for your vote, and with careful consideration of everyone’s feedback we identified option C to be the strongest design direction.  This was a hand/globe icon symbolizing the nurturing aspects of SUMO – a place where people come for answers and support from all points of view and experience.

The SUMO identity system has several components. These include the primary logos which are for general use (like the SUMO blog), and SUMO signatures that incorporate “open source support” as a supplemental tag line communicating the broader scope of the project.  As you can see, the circular shape of the logo was a natural fit for the “O” in SUMO.  So we also created a more stylized version of the mark for promotional needs like t-shirts and posters.

The new logo is an exciting part of SUMO’s evolution and will serve as a unifying brand element for its community.  It’s taken us a while to get here, but we’re not quite done yet.  As you may know, one of my (and John’s) top priorities is to build up the visual design community and encourage more participation in  every step of our design process.  So with that in mind,  we’ve created a framework where your designs may also become a part of the SUMO logo.  The identity system simply wouldn’t be complete without another layer of community involvement – and I’ll be sharing more information on what that means very soon!

Thanks again to: Will Yarbrough and the Rubber Design team for all their help on this project.  John and David, for their creative input and endless support.  Catherine Brady for her wise legal counsel.  And everyone else who contributed their thoughts and helped us create this awesome logo.

Last week the localization team deployed a set of customizable web tools as part of an ongoing effort to provide better resources to our communities.  The toolkit includes templates for community websites, wikis, blogs, and forums that have all been skinned with a brand new Mozilla Community Theme.  This will not only help communities establish their web presence more easily, but it also sets a consistent and professional look across the different community sites that choose to adopt it.

The theme was designed with full flexibility in mind.  We wanted to make sure that communities can modify the templates freely and create websites that fit their unique needs.  It was also important for the theme to feel “Mozillian” and clearly indicate a connection with the Mozilla Project while still being independent from official web properties like Mozilla.com or Mozilla.org.  Finding the right balance between this Mozillian influence and community freedom was definitely a challenge.  We needed to capture the appropriate brand elements of Mozilla and present them in a way that wouldn’t get diluted with customization.

The solution included a new logo to serve as the unifying visual identity for all community efforts within the Mozilla ecosystem.  As an alternative, the header bars also offer a combination of Mozilla and community branding.  These can be deployed separately from the theme and used as a common link between community sites.

For the rest of the page, we looked at the content structure of existing websites to make sure the theme accommodates all the expected functionality and supports the more complex, dense websites that larger communities have.  We tested various layouts and documented our progress along the way, incorporating your feedback into the final design.  Here is a mock-up of the theme as applied to a simple website:

What you see of course, is just one example.  The color scheme, masthead, layout grid, and virtually anything else…can all be changed.  Gandalf has set up a customization tool that begins to demonstrate the full range of this flexibility, and will be providing more details on implementation through his blog.  You can also dig through the source code and upstream your own modifications.

I think the resulting theme looks absolutely awesome (especially the logo) and I’m really excited to finally see these published.  I know that both Seth and Gandalf have been working on this project for a very long time, and I enjoyed working with them in leading the creative direction of the themes.  I also wanted to thank Tim Hogan, Stephanie Bankhead, Amit Patel, and Jessica Foster from The Royal Order design team who helped us create the visual theme.