So it’s been a while, a month really, since I’ve given you an update on the Fedora website redesign. Well, in the past month Fedora design ninja Jef van Schendel and I have been cranking out mockups and Sijis Aviles has been doing an awesome job making the mockups a reality and getting things into staging and building things out. So we’ve got quite a few things to go over here.
One piece of feedback we heard from several of you about the last mockup for the front page of fedoraproject.org looked a little too professional. “This looks like it’s trying to sell me something,” one of my colleagues told me about it recently, “this doesn’t primarily say community or freedom to me at all first glance.”
Well, crap. Freedom & friends are two main values of Fedora. If folks don’t get a feeling about community and freedom from looking at our website, we’ve got issues. How did this happen?
Well, when designing the first mockup and even when iterating through the header designs, I was reviewing many application websites for general formatting & conventions for some inspiration and to make sure that our website didn’t violate any conventions that would confuse users. If our website follows patterns users have experience with at other software-related websites that involve downloads, then they’ll probably be able to have a smoother experience since they’ll have to expend less active brain power on figuring out what the website is for and what they are meant to be doing with it. It was through this quick & unscientific survey that I figured out wording for the navbar items – I chose words I saw that were the most frequently used – “Download,” “Help,” etc.
I think this influence probably ended up giving a bit too commercial of a flavor to the resulting mockup. Whoopsie!
How to fix it?
Well, let’s take a quick peek at the “too commercial” mockup:
“How to fix this, how to fix this?” I stewed. First I tried to figure out, what might have given it the commercial flavor? I asked a couple of the folks who felt it was commercial, and they just couldn’t put their finger on it. So I poured over it and figured out a few things:
- While there are people on the page, the product itself stands out much more loudly than anything else.
- The color palette is mostly grey, and the main background color is white. Very conservative.
- There isn’t a single header on the page referring to community – the words “community,” “forum,” “people” are just not in the large and prominent headers on the page.
“All right, this is fixable,” I thought to myself, looking at the list of mistakes. Not many people featured prominently on the page? Add some. The color palette is conservative and grey? Make it more colorful! No prominent community-centric keywords? Add them! Not too hard, right? So here’s what we did:
- The main navbar is now a bright Fedora blue, buh-bye grey!
- The screenshot is backed by a colorful illustration rather than a plain dark grey gradient.
- One of the first things I see on the page is the photo of Tatica and Pedrito – the darkness of their clothing contrasts with the much lighter & brighter colors around them, I think making them stand out right away.
- The headers for the page are backed by a pale blue, and the media quotes under the banner are backed by a pale yellow. More color!
- “Community” has been added to the navbar and falls towards the center of the screen, much more prominent than the word was in the previous mockup.
So this is the course-correction to attempt to mistakes of the previous mockup, hopefully making for a mockup that better reflects Fedora’s values of freedom & community. The initial feedback we’ve gotten on it has been positive; what do you think, does it work?
But wait, there’s more!
Once Sijis, Jef, and I finally settled on this mockup being something we could live with, Jef and I went ahead and started fleshing out more of the screens needed. Jef took on the “Community” page (which will be roughly equivalent to today’s join.fedoraproject.org). I fleshed out the features page and also filled our recently-updated download pages into the new template. Let’s take a look!
For each of the five major feature areas (Collaboration, Entertainment & Media, Creativity, Office/Productivity, and Desktop Basics,) I wanted to highlight a major feature of the desktop or a killer app in that category. You know, there are cool features in Fedora that a lot of long-time Fedora users aren’t even aware of. Let’s let them shine, right?
This mockup fleshes a couple of the six sections out. One piece of feedback I’ve gotten so far is that the text is just too long, “too long, didn’t read.” So it’ll definitely need to be tightened up a bit more.
One thing I think would be really sexy is to add a “download now!” button for folks already running Fedora. The kickass new Fedora PackageDB web application has this feature, so maybe it’s possible! Anyway, the mockup:
Download Pages Mockup
This mockup really isn’t anything remarkable; it’s just the recently-updated http://get.fedoraproject.org design in the new template. The mockup below is for the first page. There’s also other download mockups and they show the detailed options view and the download splash in the new template as well.
Community Page Mockup
Jef did a kick-ass job on this mockup, and he worked very closely with Sijis and me as he iterated on the design, posting revisions in IRC and discussing them with us real-time, then making changes based on our discussion and posting another iteration (so on and so forth.) He also picked the right color for it – magenta is the Fedora “friends” color. The green on the features page will probably have to be changed to “features orange” and the orange on the downloads page to “First green.” One cool component to this design is the idea of a watermark-style Flickr group/tag gallery behind the much larger, masked photo of Fedora community members. Jef also integrated the Fedora microblog feed, and made our current join graphics look a whole lot nicer!
Other mentionable items
fedoraproject.org redesign in staging
Sijis set up a staging environment for the redesign at http://stg.fedoraproject.org. Right now it has the base template with HTML & CSS Sijis and I worked on, but none of the new design meat I’ve showcased above… we’re working on it! (If you’re interested in helping… pop into #fedora-websites on irc.freenode.net and let’s talk!) So watch our staging environment; as we check in content it’ll appear within an hour or so of checkin.
Download splash system
We’ve got free and open souce fonts Comfortaa and Cantarell embedded in the page, so you’ll note all the mockups use Cantarell as the base font – and the feedback we’ve gotten on the use of Cantarell thus far, by the way, has been overwhelmingly positive.
And yet even more…
Where the action is at
If you want to jump in on this project or just learn more about it:
- Our project page on the wiki is a great place to start.
- Pull up a virtual chair in #fedora-websites on irc.freenode.org and poke me (mizmo), Sijis (sijis), or Jef (Schendje) and chat us up!