I’m going to talk to you about a website!  The Mozilla Labs website, now with a fresh new coat of paint! *throws up arms in rejoicing fashion*  Today, we’ve launched the new theme for the Mozilla Labs site and our project pages.  Wider articles, bigger pictures, in-your-face headlines, it has it all.  Need to know what the author of an article looks like?  We’ve got that too!  And diagonal lines… did I mention diagonal lines?  We’re swimming in them.

Please head on over and look around.  We’ll be evolving the site further in the weeks and months ahead, adding newer navigation and expanded project descriptions, so stay tuned.  Please feel free to give me your feedback and if you find anything that may need fixing, please don’t hesitate to contact us.

There’s one more thing…

For those of you who now demand nothing but diagonal line artwork, I have created a fresh new Persona to usher in the launch.  Feel free to gird your browser with the Mozilla Labs Refresh persona, now live at getpersonas.com – http://www.getpersonas.com/en-US/persona/87345 !

Enjoy!

About Drumbeat

Mozilla Drumbeat is global community of people creating tools that enable internet users to understand, participate and take control of their online lives. Drumbeat provides an opportunity for these people to share project ideas — and finds contributors, funds and advice to help the most promising projects succeed. Mozilla also directly leads a number of Drumbeat projects of its own. https://wiki.mozilla.org/drumbeat

About Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. http://getfirebug.com/

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!

When it comes to creating Personas for Firefox, most people don’t realize a wee little fun fact about the creation process.  If you create a few different frames at the proper dimensions for both the header and the footer, you can piece them together as an aPNG (the example Persona below has a description that says animated GIF, which will work locally for testing, but only aPNGs are accepted at getpersonas.com).  A handy add-on to use for the process is aPNG Edit, found at addons.mozilla.org.

Test out your creation using the “Custom Persona” preference, make sure it looks good to go, submit it to getpersonas.com, and congratulations – you’ve just made an animated skin for your browser!

To see one in action, pop on over to my gallery and see the animated cloud example I recently posted. It is a quick little example, so feel free to better me and make some amazing (stick to the subtle side, no insane blinking please) background animations for Firefox!

I await your creative responses!

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

and your clicks for free.

Last Friday I decided to have a go at teaching myself After Effects.  I’ve been wanting to test the waters of motion graphics for a while and decided to take the plunge.  A few hours later I had the startings of a fun intro video I’ve been wanting to create for some time now.  It’s no where near complete as I want to inject whimsy and merriment to a higher degree, but it’s a start.

Exporting the video to Quicktime, it weighed in at a hefty 250Mb at 1280 x 720.  Ouch.

So what did I do?  I gave the OGG format a whirl.  An open video standard with dead simple <video> code bits to slap ‘er into a page?  Sure!  Sign me up.

The result was the 1280 x 720 250Mb Quicktime turning into a 1280 x 720 1.5 Mb OGG file.  Now I don’t know about you, but that seems pretty fantastic to me.

Here is the result for your viewing pleasure (Firefox 3.5 beta required to view).

Enjoy!

note: I’m sure my lack of knowledge about video codecs and compression may be showing in regards to the file sizes, but hey, I’m just starting out in the moving picture scene.

Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space.  Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there.  Not only are we talking resolution differences, but the screen DPI can change from device to device as well.

So after resizing and re-slicing the Fennec UI for the second time, I quickly realized that this could be a full-time job for a team of designers depending on the list of handsets Fennec will be appearing on.

Hold the phone…  whats this?  Firefox 3.5 enables a new slew of fun CSS3 design styles eh? Rounded edges eh?  Embedded fonts eh?

* gears turning, monkeys typing, hamsters running *

What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents?  As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo?  After a few initial tests, the answer to both of those questions was a very solid “yes”.  A solid “friggin’ right” if in Cape Breton.

DISCLAIMER: These design tests are done to see how close we can get CSS to replicate rasterized images. The elements you will see here may or may not appear in any Fennec builds.

Toggles and Options

The first challenge was creating “on/off” toggles for the preferences pane within Fennec.  Doing some quick research into what could be done with CSS3 in Firefox 3.5, the ultimate arsenal was discovered: the -moz-border-radius, -moz-border-color, @font-face, and opacity styles.

Glorious CSS3 comes to the mobile UI rescue!

As you can see, the resulting UI is super crisp.  There are zero graphics involved in any of these toggles.  Here is an example of the code for the first “on/off” set:

.toggleONleft {
font-family: ‘DroidSans-Bold’;
text-transform:uppercase;
padding: 0px 8px 0px 12px;
-moz-border-radius-topleft: 0.5em;
-moz-border-radius-bottomleft: 0.5em;
-webkit-border-top-left-radius: 0.5em;
-webkit-border-bottom-left-radius: 0.5em;
border-top: 4px solid #aaa;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #ccc;
-moz-border-top-colors:#aaa #bbb #ccc #ddd;
-moz-border-left-colors:#aaa #bbb #ccc #ddd;
-moz-border-bottom-colors:#aaa #bbb #ccc #ddd;
-moz-border-right-colors:#aaa #bbb #ccc #ddd;
background-color: #ddd;
display: inline;
}

.toggleOFFright {
font-family: ‘DroidSans-Bold’;
text-transform:uppercase;
color:#414141;
padding: 0px 12px 0px 8px;
-moz-border-radius-topright: 0.5em;
-moz-border-radius-bottomright: 0.5em;
-webkit-border-top-right-radius: 0.5em;
-webkit-border-bottom-right-radius: 0.5em;
border-top: 4px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #aaa;
-moz-border-top-colors:#aaa #fff #fff #fff;
-moz-border-right-colors:#aaa #dedede #efefef #fafafa;
-moz-border-left-colors:#aaa #dedede #efefef #fafafa;
-moz-border-bottom-colors:#aaa #dedede #efefef #fafafa;
background-color: #fff;
display: inline;
}

Dark Toggles

The dark toggles really give off a 3D effect

Dark toggles were very simple to create now that the above CSS was already written.  It was just a matter of setting the fill colors, border radius, and gradient border colors.  Resizing these for different resolutions takes minutes of hex color and margin/padding tweaks!  That’s it.

Buttons

The only graphical element of the buttons is now the center glyph!

Next was the challenge of seeing how close we could get to matching the mockups I created a while back.  Turns out, pretty close indeed.  Having to use an image for only the glyph in the middle makes button creation much, much easier.

.button {
padding: 8px 4px;
font-family: ‘DroidSans-Bold’;
color:#fff;
width: 24px;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-top: 4px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #aaa;
-moz-border-top-colors:#3b3b3b #6d6d6d #535353 #494949;
-moz-border-right-colors:#2d2d2d #484848 #484848 #414141;
-moz-border-left-colors:#2d2d2d #484848 #484848 #414141;
-moz-border-bottom-colors:#111111 #484848 #484848 #414141;
background: #414141 url(’buttonBg.png’) repeat-x top center;
display: inline;
}

.buttonDisabled {
padding: 8px 4px;
font-family: ‘DroidSans-Bold’;
color:#999;
width: 24px;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-top: 4px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #aaa;
-moz-border-top-colors:#3b3b3b #6d6d6d #535353 #494949;
-moz-border-right-colors:#3b3b3b #484848 #484848 #414141;
-moz-border-left-colors:#3b3b3b #484848 #484848 #414141;
-moz-border-bottom-colors:#2d2d2d #484848 #484848 #414141;
background: #414141 url(’buttonBg.png’) repeat-x top center;
display: inline;
}

.buttonPressed {
padding: 4px 0px;
font-family: ‘DroidSans-Bold’;
color:#fff;
width: 24px;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-top: 8px solid #ccc;
border-left: 8px solid #ccc;
border-right: 8px solid #ccc;
border-bottom: 9px solid #aaa;
-moz-border-top-colors:#323232 #111111 #111111 #1f1f1f #272727 #2a2a2a #2c2c2c #2d2d2d;
-moz-border-right-colors:#323232 #111111 #1f1f1f #272727 #292929 #2a2a2a #2c2c2c #2d2d2d;
-moz-border-left-colors:#323232 #111111 #1f1f1f #272727 #292929 #2a2a2a #2c2c2c #2d2d2d;
-moz-border-bottom-colors:#515151 #111111 #1f1f1f #272727 #292929 #2a2a2a #2c2c2c #2d2d2d;
background-color: #2d2d2d;
display: inline;
}

Address Bar

The focus moving forward will be the address bar.  Copy and pasting code used in the above elements, playing around with padding and border radius, a fairly close representation can be made.  An example of the first pass:

I've started recreating the address bar using only CSS3 and glyphs

Now that I’ve shown you all of these examples (I’ve used images here so everyone can see the results), go check out everything on the demo pages.  For some added fun, zoom in and out within Firefox to see the UI scale!

DISCLAIMER (again): None of the elements on the demo page are interactive as this is just a CSS test for visual design only.

These are all design challenges that Firefox 3.5 has enabled me to solve.  I’m very excited to see what designers can create using all the new CSS3 styles and feel free to examine the screen.css file on the demo page to nab the code previewed here.

Go design happy and give it a whirl, but remember, you need the latest Firefox to join in on the fun!

Fresh from the oven New Tab goodness

The main inspiration for this visual look comes from the netError styling already found within Firefox.  Using the rounded edge boxes on the light grey background, we utilize an already established look within the browser, thus bringing the About:Tab feature that much closer to a “native” feel.  The look is very lightweight and may be tweaked further, but its intent is to not overwhelm – it serves its function cleanly with Firefox native graphics.  A consistent palette will be set for all elements and we will ensure that browser integration is solid.

Aza mentions that “By using a horizontal thumbnail clipped from the top of a page, we are capturing the site’s logo and masthead — the most visually distinctive aspect of a web page. By default only the top two visited sites get a visual treatment (to remove visual clutter), but more can be turned on by clicking the little edit icon. We’ve gone to a two-column format to better use the available space. If you have an extra wide monitor, you may get more columns.”

A wee preferences pane to customize the default new tab function!

The visited site modules also use the rounded box look and can be dragged and edited using the UI elements within.  In the mockup, the height of these modules remains constant to create a clean grid structure to the tab – the content being justified vertically within.  We’ll play around a bit more to see if there are other options on how to structure these modules.

Also in the mockup (see fig. 2), when a clipboard action comes into play, the columns will bump down and the action will appear in a white box for your interaction.  Depending on the number of actions available and screen size, this may dictate the number of visited sites seen within the columns.

Finally, in the bottom right corner of the tab, we see the prefs icon which allows you to set your default newly created tabs to be either blank, the about:tab feature, or your homepage.  The look and feel for this overlay was also taken from current stylings within Firefox.

As always, these designs are shared for your feedback.  Please leave any constructive comments you may have on any of the elements within these mockups.

Let us know what you think!

The initial designs were created using strong glyphs on subtle embedded touch areas as the main control scheme for the theme.  The purpose of the glyphs were to act as easily identifiable symbols that could stand out on a mobile screen through the use of high contrast white on a darker background.  Reaction to the first pass was that the background greys were much too light and they should be revisited to bump the readability of the glyphs.  Additional feedback spoke on the lack of color within the theme, another area that was added to the list of things to investigate.  As the pixel man on the job, I wanted to bring a finer level of pixel detail to the UI, so I threw that on the to-do pile as well.

Lets get started showing where we’ve made it to thus far.  To be clear, the work showcased in this post is all a work-in-progress and may not reflect the UI seen in future Fennec builds.

Button Look n’ Feel

The first thing I wanted to do was take a step back and revisit how the buttons were created.  Instead of beginning in Illustrator, I decided to get the right level of pixel fidelity, I’d work exclusively in Photoshop.  Thanks to the glory of layer styles, the entire look and feel is now set in style sets that can be copied and applied to any UI shape needed.  Quick and painless when you’re dealing with so many resolutions in the mobile world.

The newer style is much more clickable and thanks to the darker background, the glyphs really pop on the almost rubber-like button tops.  Each glyph is softly outlined with a darker stroke to give it that extra bit of pop also.

Now, let’s look at a few more examples.

Bookmarks

With the new style comes the addition of color to some of the revised glyphs. The bookmarks buttons have been updated as shown in the example below:

As you can see, when a page is bookmarked, the star now fills in with a frosted yellow.  The small star within the bookmarks panel button also fills in if the page you are currently on has already been bookmarked.  Subtle colors,  adding a bit of variety but not too overpowering so that it becomes distracting.

Endcaps

Next we visit the endcaps within the location bar.

In the first pass of the Fennec UI, the endcaps were very rounded, similar to the encaps in Firefox on Mac.  While the style is very nice, on mobile you need as many pixels as you can get when it comes to UI, and having extra pixels taken up by flashy unneeded graphics can limit your on-screen real estate, sometimes making things pretty much unreadable.

Realizing this, we decided to test the waters on a few different designs:

The first is basically the same as Fennec Alpha 1, except that the inner edge of the cap is now squared.  The second set also uses the squared interior edge, but also squares up the outer edge a bit more as well.  The third set has rounded edges for both inner and outer, but is not as extreme in its radius as the original caps.

Based on some mockup testing, we’re leaning towards the second set of endcaps, a nice mix of rounded outer edges and flush inner edges, giving us some much needed pixels in return.

Now that we have a set to focus on, lets take a look at how it could be applied.

Awesomebar

The awesomebar was the next visual overhaul we thought we’d have a crack at.  With our newly minted endcaps, I started chipping away at the design to see what could be revealed.  The result is a much cleaner and clearer awesomebar as seen here:

You will be able to swipe the bottom search bar across with your finger.

Sharp contrasts, cleaner graphics, a touch sliding search bar at the bottom, all make for a much better experience.  This look n’ feel starts to show off where we’d like to go with the UI for Fennec throughout the browser – using this high contrast menu system for all the preference/setting/addon panels.  Let us know what you think – we’re pretty happy with where this is going.

Past and Present

So, lets step back and take a look at where we’re coming from, and where we are at the moment:

(note: the above screens do not represent an actual state of the browser in which all toolbars can be accessed at once.)

As you can see, things are starting to get a little crisper, and we’re also introducing glyphs from the bigger brother Firefox (see back and forward buttons) for further consistency.  The “before” image on the left is actually a further revision to the initial UI as you can see the grey is darker than the initial screens.

As always, please give any and all feedback on these work-in-progress designs.  This is an open process and nothing you see here is set in stone.  If you’d like to share thoughts or concerns with us on anything previewed here, please do!  It’s your browser – help us shape it and make it look great!