Initial Inspiration

To me, and quite likely to most of you out there, a subject such as a space station can drum up lots of imagery.  We’re bombarded with Sci-Fi constantly and we get to see lots of space vessels and stations in all the glowy, shiny bits of Star Trek, Star Wars and Battlestar Galactica moving picture shows.  Now those are all excellent sources for inspiration, but my mind decided to travel into the deep recesses of my brain to two excellent sources from my childhood – Calvin and Hobbes’ Spaceman Spiff and Space Quest 3: The Pirates of Pestulon.

With Spaceman Spiff, we have an example of space vehicle design at its simplest, and in my mind, the perfect look for a ship in the logo.  It’s a classic UFO saucer style, full glass dome and all.  I have the entire Calvin and Hobbes collection in hardcover and I couldn’t let this opportunity to draw inspiration from my favorite childhood comic pass me by.  DEATH TO NAGOONS!  Done.

Now when thinking about the design of the space station itself, my mind went straight to Monolith Burger from Space Quest 3.  I spent many an hour trying to land Astro Chicken on the pads in the arcade mini-game found within its pressurized walls.  The interstellar diner is apparently now firmly etched within my brain.  This game still holds steady as one of my top five games of all time.  The Two Guys from Andromeda were geniuses and it was a sad day when Ken and Roberta Williams handed over the reigns of Sierra.  But I digress.  Achievement unlocked: Space station inspiration. On to the sketches.

A Few Quick Sketches

Having gathered my sketching markers and moleskin, I began sketching out some station designs.  As much fun as it is to use a Wacom Cintiq, nothing beats sketching in a moleskin with a graphic pen. There is no undo and if you make a mistake, most times you can turn that mistake into a new feature you hadn’t planned.  Happy accidents.

Final Logo Design

In the end, I’m happy with how the logo turned out.  It took 5 hours total once I started illustrating it with vector.  I kept the palette the same as the Add-ons logo and went with more of a brass look to the station instead of a standard greenish-grey “space metal” look.  If you look closely, the inhabitants of the station are wee Mozillians that are either planning for Browser Wars or forming a song list for the inevitable Karaoke marathon that occurs in every space station.  Be prepared for their next move.

Yes, that’s right, the Mozilla Creative Collective is up and running and we want you to join!  Why you say?  Well, did you know that there are achievement badges and design challenges?  Did you know you can create your own gallery for others to view and comment on?  Did you know you can do all of this for the low, low price of FREE?  That’s right folks. It’s your one-stop-shop for flexing your creative muscle and showing the Mozilla community your mad, mad skills.

Did I mention achievement badges?

…

About the Mozilla Creative Collective

The Creative Collective is a community of artists and designers inspired by the Mozilla ideals of openness, innovation and participation.

We believe in the power of well-made and widely distributed art, and want to make it possible for artists to cover the web with designs inspired by Mozilla and the principles we stand for. We also want to showcase the talents of our members by giving them the opportunity to share their work with a global audience.

To do this, we’ve created an online social environment where designers and non-designers alike can connect and collaborate in a positive, communal manner. Where things go from here is up to you, but we’re looking forward to seeing what happens!

With the launch of Firefox 3.5 today, I’m excited to post an all new wallpaper to commemorate the event!

Within the web today, a browsing transformation is underway.  We’re seeing constant advancement from the static browsing Middle Ages of old and the ushering in of a new Modern Era of openness, speed and security.

Taking advantage of all the glorious advancements this new era has to offer has never been easier with the newly relased Firefox 3.5!

To add to the excitement, when a person decides to upgrade to the speediest, safest and most advanced Firefox yet, it is best to update your desktop wallpaper to show your love for the browser.  Why not download a freshly baked Firefox 3.5 wallpaper?  Our wallpaper is rich in pixels and has 100% of your daily visual intake of Firefox fun.

A big shout out to the team of Alex Faaborg, Jennifer Boriss, Alexander Limi and John Slater for the idea and feedback!

Now, go get one now!

(Update: Now get this wallpaper as a Firefox Persona skin!)

download the widescreen version

download the fullscreen version

Awesomebar

• list appears with bookmarked sites marked to the right
• close button in upper right to exit the awesomebar overlay
• search toolbar on the bottom

Dark on light awesomebar

Light on dark awesomebar

Alerts

• left endcap becomes highlighted and glyph appears indicating alert
• once endcap is pressed, arrow points to opened alert information beneath awesomebar

• main browser scoots off to the left and becomes faded as its priority lowers
• browser tools icon becomes pressed and links across to a pressed prefereneces icon
• top area lists the sections within preferences
• sections flow vertically, with toggles on some, other bars open for more options on touch

and a dropdown selector example:

Initial Page Load

This state of the browser would be visible when you are viewing a page and not at the top.

• browser name to the left is visible
• device system icons to the right are visible

Page with Address Bar

This state would be when the page is scrolled to the top.

• system bar elements fade to 50% as they become lower priority
• address bar becomes visible
• bookmarks button becomes visible

Page with Right Side Control Strip

As the user slides the page to the left, the control strip appears on the right.

• address bar remains visible
• control strip houses, in order, “add to bookmarks”, “back”, “forward”, “page tools”, and “browser tools”.
• website area is offset fro the strip with a shadow, making the site look as if it is sitting above the controls.

Page with Left Side Tab Bar

As the user slides the page to the right, the tab bar appears on the left.

• page thumbnails appear vertically
• thumbnails have a close button in the upper left
• two buttons appear at the bottom – the first to “open a new tab”, the second to “open a tab from your desktop (utilizing weave)”

Jesse James Garrett, co-founder and President of Adaptive Path, showcased a video done by AP highlighting what they think a future browser should include/look like.  The codename is “Aurora” and the video will be published to the Mozilla Labs website later on this week.

For more information, look to the Mozilla Labs site in the future.  My Personas fox mask logo is highlighted there!

http://labs.mozilla.com/

Mike showcased a new video/audio capability turned on in the build last night that allows end-users to embed video, cross platform, without flash… Includes closed-captioning and even video/image on-the-fly reflections!

After a presentation on where Mozilla is expanding into Mobile (Codenamed Fennec which I am currently skinning), Chris Beard walked through all the active projects within Mozilla Labs, including Personas, the skinning addon for Firefox that I helped him with, creating skins and the brand identity.

Firefox, to the power of 3.

An excellent session talking about giving the power to the users to market the browser in their own way.

I’ll be showing my latest version of Kit to the group and will be creating wallpaper for the site!

There were some excellent concepts for the future of web browsing – very minimalistic UI that fades away upon highlighting the web content, interesting takes on the history and bookmarks (a coverflow kind of navigation) and also an interesting little widget overlay control scheme that can be summoned when needed. (no, not like Clippy in Word. A little fox crying “I see you want to go back a page…” would be far too annoying)

During the session, I was stealing notes for the UI I’m designing for Mozilla Mobile… ssshh.