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. 🙂
Too professional?
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.
The reveal
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!
Features Mockup
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
Another cool development Sijis made was a functioning download splash system! This was a feature we had to drop in the http://get.fedoraproject.org redesign for Fedora 13 because there wasn’t enough time to implement. Sijis figured out a way to do it with Javascript, making it a much lighter and impactful feature – way to go! While there’s still some issues to be worked out as I understand from IRC today, you can try it out now by clicking on a download link at http://get.fedoraproject.org.
Embedded fonts!
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…
But it will have to wait for another blog post. We’ve got some really amazing updates on the fedoracommunity.org project, including some super-slick jQuery-based javascript from new Fedora design team member Marc Stewart!
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!
I would have called it "too corporate" instead of "too commercial" and I think you addressed well the issue, the grassy field background is awesome.
Still, the "features" headers are a bit too "in the face", they are big, plain and in un-matching colors, maybe we can add some texture to them (especially the pink/magenta "Community" is touching my eye in a bad way).
Great work. Love the bubble blowing girl in the footer!
However, in your place I'd have the legal department check the "Circle of Friends"-icon on the features page. Even though there are some differences, it still immediately reminds me of Ubuntu.
I think the biggest issue (apart from the grey + white color scheme – what about a light blue default background?) for me is your use of stock photography for people. The "yarr" image looks noticably different (and more community) than the "be safe" image.
Ah good point! We definitely intend to replace the stock for the final release.
This looks really nice 🙂
Just one worry though, is Fedora really only going to provide CD/DVD images? My laptop doesn't even have a CD drive, it'd be really handy to be able to download images I could just dd to a usb drive (replace dd with generic Linux/Windows UI tool if necessary). I notice a lot of other distros are doing this…
I know there are tools to do this for Fedora CD images, but they never work reliably in my experience, and it'd be nice to just download the image without having to run some extra, unsupported process before getting it on a USB stick.
dd will work just fine and is supported for the last 3 releases or so.
I love those mockups !!! <3 really good job!!!!
I love this new design, seriously rocks 🙂
It's really cool!!!
I thought previous one was good, but this one is better. When are we going to see it alive? Or shall we wait the next iteration?
I'm curious how much coolness is too much. Keep on rocking!
This site looks a lot more inviting than the previous version. NIcely done.
It still strikes me as primarily a marketing site. In some ways, the quality of the graphic design is almost too good.
In order for it to seem collaborative, the landing page should not be scripted by us, but should prominently show content from the community: blog posts or project updates or something. The first impression should be "Hey, there is something going on here."
If our goal is participation, someone should be invited to participate right from the get go. Make the landing page speak to Caroline first and foremost, with easy ways for the others to get to the rest of the content. If only to
Mind you, I am talking tweaks, not a major redesign. I think you almost have it. I'm thinking something more like: A place for Caroline to type in a question and a list of some recent questions and answers right there on the front page. THink breaking the ice at a party.
LOOOOL I will demand you!!!! you're using my photos!!!!! ohhh dear god…
Anyway, is a great work that will let us not only have a supreme website, but also a more friendly resource to stay in touch.
Awesome mo!
I like the rotated logo to emphasize the four points ("What makes Fedora great"), but I think the rotation for the third and fourth should be reversed. It is nice and symmetrical as it is, but to me it appears like it should look like a dial, and the current positioning does not support that. Switching the third and fourth shapes would also lend itself to being animated for future use (e.g. the installer, placement on other sites, etc).
I agree about arranging the logo "petals" more symmetrically. That was the thing that popped out at me, so I made a mockup of what I find to be a more visually pleasing order:
http://www.flickr.com/photos/mknepher/4955008026/
Marin, i like your mockups, but… I feel the front page mockup suffers from too-much-info. I get the feeling I'm looking at a busy magazine spread.
I think some of the best front pages are ones that :
1) get you interested in the project
2) then get you going to where you need to (support, download, etc)
I think http://www.opensuse.org/ does a good job of this.
I'm just a random reader and lurker from Planet Fedora, and I just wanted to post and say how completely awesome those website mock-ups look.
I think the text does need some tightening up. Two sentences maximum for a lot of those sections would do better; one would be ideal, with a bolded phrase over it stating the core from the sentence.
Anyway, awesome work.
For me the main problem is that the live CD is the only download displayed prominently.
In my opinion a proper install media should be the default option, while the live CD can still be there, but not alone and not more prominently than the default.
Also a link to a complete download menu should be immediately below and well visible, in order to empower the people who wants something else to easily get it.
If you think of it, computer people aside, most people in a restaurant really wants to know what's in the menu before they order. And they're not even scared by the many options… 😉
But here on Fedora the menu is dumbed down to the point that it's annoying instead of useful. And the access to the real thing is hidden away and a bit cryptic.
I think the live CD is not a good default, because it is not a complete, nor proper fedora experience. To be blunt, it is slow and incomplete compared to an install from any other media.
A live CD may be good for many things, but I believe that someone who wants to install the latest fedora, should be given an easy and *prominent* access to a fully functional install. Not to a somehow mutilated edition.
The live CD is also a sub optimal install system, it doesn't leverage all of the anaconda capabilities and it leaves you with an incomplete fedora experience even once you have installed it on the hard disk. It is also generally slower than any HD install
An option to "complete this fedora install" at first boot may help, but still I'd vote for a proper install media as the default. To save bits, even a "network install image" would still offer a better experience better than the livecd.
Please note that there are reviews of fedora13 aorund, that deem it incomplete and jump to the wrong conclusions, just because they followed the website "slight" hint, installed the livecd and consequently missed some critical features that make fedora great.
Also note that already inside these comments you find proof that finding any downloads other than the live CD is not that immediate.
On all the rest, dear Máirín, awesome work!
Hello Mairin !
I'm sorry but I really prefer the previous version of the website mock-up. Much more sober. What makes me feel strange about this mock-up are the colors of the home page. I don't really understand why you chose yellow as a background color. Why yellow ?
Moreover, I really don't like the nature background on the top. On the same way for thinking, what makes you think Fedora has any link to nature ? Why not a town picture or an abstract drawing or painting ? I just would like to understand your choice, because I can't link both yellow and nature to fedora.
Finally, I agree that there is a lot of text on the feature screen. The others are well balanced. I really like the idea to take the color of the Foundations inside each page. Nice work!
Nature is a neutral decoration that make a majority of the people to feel good. And is an useful reminder to all of us geeks that we should go out more.
The yellow was probably used to make the text on it stand-out better.
Mairin,
I am not an active fedora user, but from time to time I always check your website. What you do with fedora design is very excellent. The mock-up? ……….IT IS JUST GORGEOUS!!
I am a technical person and not very good with design, but you do great.
Thanks for making fedora beautiful
hendro
These are a really great designs, and I thnk there is a possibility to chain up Fedora RPMDB and ressurect Fedora Daily – and put out to our pages. Also I think it's time to publish to the events QR codes – so everybody could get proper info on mobile, or even could insert to their event to shedule – or get an reminder. I could also imagene that ambassadors could receive similar page, with events, meeting times, ambassador map, etc. By the way, for each bigger group, like Famsco, or Fesco where includes the Feature Wrangler will need later or soon such love…..
Mockups look great, kudos to all 🙂 It seems there's no direct link to torrents on the download page… (this raised many complaints when F13 came out). It be available through the "More download options…", right?
[…] mainly after I saw Mairín’s the redesign of our Fedora pages, then I could tell it would be cool to integrate next to the dates of our events, meetings – […]
I love the Features and the Download layouts. Great job!
I would remove the «Learn more» links though as there are too many of them in a row. 🙂
Your designs are amazing!! I'm jealous! I wouldn't change anything.. great job!
[…] website redesign has gone live! It’s a gorgeous, user-friendly look — congrats to her, the design team, […]
really awsome. like this.
eh, btw fedora website using CMS or custom script?
No CMS. We're using Genshi templating.