Mozilla.com Site Redesign Update
It’s been awhile since I blogged about the Mozilla.com site redesign, so it feels like time for an update on our recent progress. In order to provide some context, I’ll also take a step back and give a little background about the process and how we’ve approached this project.
First, why redesign Mozilla.com?
* To support the Firefox 3 release…we did the same for the launch of versions 1.5 and 2.0.
* To provide new and improved content about both Firefox and Mozilla.
* To make sure the site continues to evolve and improve along with our organization, our expanding userbase and the Mozilla Project as a whole.
The process so far:
* September 2007: We began soliciting internal suggestions for design agencies.
* October 2007: We sent RFPs (requests for proposals) to six agencies that seemed like good potential fits.
* November 2007: Based on their design abilities, understanding of our brand and history of working on sites with heavy community involvement, we selected the Royal Order and immediately began giving them massive amounts of background info about Mozilla.
* December 2007: The Royal Order created a detailed information architecture plan and did some initial design exploration.
* January 2008: Worked with the Royal Order to refine the design direction; they began designing the site in earnest.
Design background:
The overall design goal is that the site should embody Mozilla’s unique nature, while still being very usable, informative, etc (read more about our design objectives). Having said that, it’s also important that the design not overshadow the key content goals of driving Firefox downloads and educating people about Mozilla. Plus, the site also needs to be easily localized, highly accessible and compliant with Web standards.
After sifting through people’s reactions to the initial design explorations, Paul and I realized that, although the basic layouts were quite solid, they were still lacking a main visual element that met the above design goals. Specifically, we decided that using photography as the main element would make it too difficult to fully represent the global scope of Mozilla, so we and the Royal Order began to focus on illustration options instead.
With regard to illustration style, we wanted hand-created elements rather than slick, vector art in order to represent the fact that Mozilla software is created by a community of people around the world rather being than a faceless corporate entity. The Royal Order recommended an illustration studio called the Delicious Design League, whose style really complemented this concept, and things began to come together.
Our somewhat ambitious goal for the illustrations was that they should abstractly reflect the good things about the Web itself…things like connectivity, collaboration, creativity, etc. That’s certainly not an easy task, but the designers and illustrators have come up with several different concepts – all based around metaphors for networks – that support this really well. The final site will incorporate a few of these, one of which is shown below.
This mockup of the homepage will still receive a few more tweaks before it’s all said and done, but it’s a good sneak peak of what’s to come. As noted earlier, the illustration of the tree is meant to suggest the power and possibility of the Web, as well as the way Mozilla works. And the various handmade elements, such as the pencil-drawn lines and background shadings are all meant to evoke the grassroots, people-powered nature of Mozilla itself.
What next?
The design work is still in progress, and we’re busy creating some cool new content like a detailed Firefox features page. From there, we move on to development with our friends at silverorange (who have been closely involved in the entire process), localization (for more on this, definitely check out Pascal’s recent post on the subject) and QA – all with the goal having the site ready for the upcoming Firefox 3 launch.
There’s still lots more work to be done, and I’ll have plenty more to say about the design and the specifics of the new site later. In the meantime, thanks for reading, and stay tuned for more!
February 22nd, 2008 at 7:41 pm
What…No robots in the design!?
February 22nd, 2008 at 9:43 pm
Forget Robots, that design needs some ice cream in it!
February 22nd, 2008 at 11:13 pm
“You got your robot in my ice cream!”
“And you got your ice cream in my robot!”
“Reeses’ robot icecream cups… The two great tastes that go great together.”
February 23rd, 2008 at 1:30 am
I think the tree metaphor is too obscure — I certainly didn’t get the intended connection. I’m not sure about the balloons in context either, and the big one could do with more whitespace beside the description text.
To me, overall the balloons (and to a lesser but still significant extent the textured background) detract from the boldness of the Firefox description text and the download button. At first glace, it’s confusing to the eye, probably because of the geometric nature of the design.
I love the simple nature of the article titles, and the buttons on the right — the pencil is a nice touch — and generally the footer, although I’d make the column heading a bolder, contrasting colour; since the footer section is already significantly defined by the background change, I don’t think coloured headings would detract from the main content. I’d reintroduce colour on the Mozilla dino as a nice cap off for the bottom of the page.
The blue texture falloff underneath the “What’s happening at Mozilla” heading is either a little too low, or a little too harsh. Raising it would help soften the contrast between the background and the top edge of the Thunderbird button too, and would give the heading some white space for balance.
Hope this feedback helps and I didn’t step on anyone’s toes
February 23rd, 2008 at 3:14 am
Wow, that’s really pretty! And I believe it’s functional too!
It feels fresh while carrying on some of the design elements from the current site. Well done!
It was a good decision to ditch all the four previous suggestions.
February 23rd, 2008 at 6:35 am
[...] like it. What about you? Leave your comments here or on John’s post. These icons link to social bookmarking sites where readers can share and discover new web [...]
February 23rd, 2008 at 6:35 am
[...] like it. What about you? Leave your comments here or on John’s post. These icons link to social bookmarking sites where readers can share and discover new web [...]
February 23rd, 2008 at 9:41 am
I don’t know about you guys. But that must be one of the best web designs I have ever seen.
Seriously, who can resist pressing that delicious green button?
February 23rd, 2008 at 3:20 pm
I’m loving this design! The serif font makes a really nice union with the whole nature theme, I think.
The gray footer doesn’t rub on me the right way, though. It looks too drab, gray, and out-of-place, imo. I’d at least make it a shade of brown to match the tree up top. Overally, though, I’m liking the design.
February 23rd, 2008 at 7:41 pm
Interesting. I preferred the layouts of the other pages to this one. The others felt to me like something was going on, like there was something to do on the page, and on my 13.3″ widescreen (which is increasingly popular) it was easier to tell there would be more stuff to see if I scrolled around.
I’m worried about the giant header where the only thing going on is the download button. Not having the page full size I can’t tell you if it would take up my entire screen with no hint of more content to come.
While I like the art and appreciate the concept behind it, I don’t think it conveys what it’s intended to about community. This one feels more, trendy and arthouse. I’d expect it to be the top of a blog. Which isn’t to say I don’t like it. I’m just saying it doesn’t leave me with the feeling it’s supposed to. I’d love to see the others though. Ultimately I’m going to have to agree that it’s confusing, especially the balloons. I guess for me it’s flat. The tree concept could be really cool if it went further down the page and was integrated somehow with the other elements.
I actually think the “world wide wonderful” concept comes closest to what you’re trying to convey. Yes the people are creepy, but that’s not because of the concept, that’s because of the photography and processing. I wouldn’t abandon the photography concept so much as stop trying to make it so “real.”
I could have sworn I said this on the first concepts post but I actually really like the “people” theme. With some polish and using navy instead of black it could be really great for something like sfx or another community focused page.
Anyway, my point in all that is, for me the concept has swung too far the other way and isn’t incorporating the good ideas from the original 4. Of course that could all change through the upcoming work, or maybe even one of the other illustrations is totally different.
February 24th, 2008 at 9:58 am
I love it………………..
it screams evolution
February 26th, 2008 at 3:40 pm
I agree that the mockup is a complete failure, I like the current site, it’s really clean, nice colors and layouts and just rocks, why replace it with this over-hypothesized trash?
March 2nd, 2008 at 6:35 am
The navigation bar is WAY WAY too fat..
So, fix that and maybe move the download button closer to the Firefox log and you got a nice layout.
March 3rd, 2008 at 4:57 am
[...] Buradan devam » http://www.intothefuzz.com/2008/02/22/mozillacom-site-resign-update/ [...]
April 18th, 2008 at 10:48 am
[...] group of us has been working on the Mozilla.com redesign for a few months now, and I’m happy to report that it’s definitely on track to launch [...]
April 18th, 2008 at 1:20 pm
The balloons are too much “Fedora”. But otherwise, good concept.
April 22nd, 2008 at 2:50 pm
[...] As you can see, the new design is heavily influenced by the design of the soon-to-arrive new Mozilla.com skin. [...]
June 14th, 2008 at 3:46 am
I have been using Firefox for a long time. Your layout
and multiple toolbar system is great. I am a Scorsman,
born in Glasgow, http://www.flickr.com/ and the rest
is in flickr.uk. I am fluent in Portuguese and have five
childen. So far, I have invited my sister-in-law in Portugal, but I think I can invite three of my kids to commit themselves,
(send them an invitation,
and I will be questioned. I will back your message.
June 14th, 2008 at 3:57 am
Ok, John Slater, I spend 10 hours a day on my computer,
and from now, until release day, I am at your command.
English.uk, and Portuguese.br, your word will be my
orders, Iain Ritchie
March 12th, 2009 at 7:23 pm
[...] อ่านได้จากบล็อก Into the Fuzz ซึ่งเป็นบล็อกของคนใน Mozilla [...]
October 24th, 2009 at 1:36 pm
[...] Me gusta. ¿Cuál es tu opinión? Deja tus comentarios aquí o en el blog de John [en]. [...]
July 16th, 2010 at 12:15 am
While I like the art and appreciate the concept behind it, I don’t think it conveys what it’s intended to about community. This one feels more, trendy and arthouse. I’d expect it to be the top of a blog. Which isn’t to say I don’t like it. I’m just saying it doesn’t leave me with the feeling it’s supposed to. I’d love to see the others though. Ultimately I’m going to have to agree that it’s confusing, especially the balloons. I guess for me it’s flat.