Ubuntu news website mockups
At last UDS, Nick Ali and I felt that really, some real news website was needed, and I won’t go again through the rationale (see this post). The matter was discussed (see blueprint page), and summary of the session can be found here. (Nick, could you link it on the blueprint page?)
I’ve started working on this, and reached the first step: basic templates, so that people can realizes what we have in mind, and getting feedback.
(You can click on the templates to have the real HTML page)
What are the differences I would see with the current Fridge?
- Obviously a new theme. (Theme creation is not my best area, so I’ll be happy to receive suggestions!)
- Highlighted stories will be chosen: some news are more important than others. Henri Bergius proposed me a voting system on my last post, but I don’t think it good: there may be not popular news needing attention (e.g. a call for testing).
- 3 target audience, so 3 main sections : “World” targeted at the average user, “LoCos” targeted as LoCos members and people interested in it, “Development” targeted at people with technical knowlegde, developers, contributors. You can look at the stories title to get an idea. (Disregard the images in the developer section screenshot, I was too lazy to change them)
- Multi lingual support: thanks to Drupal, it would be possible to have interfaces to translate stories into others languages. Stories displayed in front page of the website in others languages could also be changed, according to available translated stories.
- A new name for the Fridge. Well, I’d like it. A more obvious name. Even “Ubuntu news” would make it. A poll I made returned 25% of people not even aware of the Fridge!
- Anyone will be allowed to post stories directly on the website. They will then be reviewed by the staff before being posted.
- All blog posts from the planet will be automatically imported unposted. Staff may post them, or use them as quotes for stories.
- Comment support. Finally. With Launchpad support, so we can display your picture and such.
- Video and flash support. Finally. Especially for all these nices videos sitting in an apache directory listing on videos.ubuntu.com!!!
- Inter website navigation bar: the little bar at the top. That’s the thing I’d like to see on every Ubuntu website, even LoCos ones. See for example in Brainstorm. Without it, how can the huge number of nice Ubuntu websites, like the Ubuntu Hall of Fame, be accessed if not linked prominentely?? The menu scheme would be stored somewhere, and websites would regularly fetch it. This top bar would be available in form of plugins for the major CMS.
Now, if I got time, next step will be to change this template according to feedback, and implement the basic functionality on a Drupal instance.
Comments
Comment from nixternal
Time: January 10, 2009, 7:40 pm
Look great! Would this be the new look for fridge.ubuntu.com? I know we talked about this at UDS, but I can’t remember the details. I really like this though!
Comment from MadsRH
Time: January 10, 2009, 8:10 pm
Look amazing! Looking forward to this 
Comment from Nathan Handler
Time: January 10, 2009, 8:13 pm
The mockups look very nice. However, one of the main things I use the Fridge for is the calendar of events. On the mockup front page, you have a box for upcoming events. This is fine for events that are going to take place soon, but it does not do anything to help people trying to find out when the next meeting for a certain team is, or for someone trying to see what events are on a certain day. One thing you could consider would be having a mini calendar that allows users to click on a certain day to have a tiny popup window appear with that day’s events. I realize that this still won’t help the user who is trying to find the next meeting for a certain team, but it is a start. You could also use the calendar in addition to the upcoming events box. But either way, the new Fridge mockup looks like it will be a lot better in many ways than the current fridge. Keep up the good work.
Comment from nand
Time: January 10, 2009, 8:24 pm
@nixternal: yeah, that would replace the current fridge.
@Nathan: That’s some good ideas. I’d let the box on the front page as small, but I would provide the features you’re proposing on a separate page.
Comment from EvilDead
Time: January 10, 2009, 8:51 pm
I would be really interested in seeing this development section. I’ve been using planet Ubuntu for such things, but the information I’m interested in is too often burried in non-technical posts.
Comment from Jonatan
Time: January 10, 2009, 10:30 pm
Hi!
I found this post by accident browsing trough Planet Ubuntu. You said that you wanted some feedback at you mockups for the Ubuntu News website, but instead of writing a way to long comment I took the liberty of creating a mockup myself. 
This is an initial mock, there is still *much* to be done but it should still give you a general idea of the look I’m striving for.
You can find the mockup here:
http://files.ettention.se/ubuntu-news/mock.png
Cheers!
Comment from Paul Kishimoto
Time: January 10, 2009, 10:49 pm
Drupal FTW.
Comment from pleia2
Time: January 11, 2009, 12:53 am
Love the big Submit News button! And ability to submit on-site. Having to click on “About” and read through to figure out how to submit news is my biggest complaint about the current fridge setup.
Comment from emmajane
Time: January 11, 2009, 4:31 am
Awesome start!! Please feel free to ping me if you want help converting the mock up to a Drupal theme. I’ve got more than a little bit of experience with themes and I’m happy to help out.
Comment from James Westby
Time: January 11, 2009, 4:48 am
Hey Nicolas,
Great to see this moving forward.
I’d encourage you to stick up a branch on launchpad as soon as you have
anything to show in terms of code. I’d like to try and help where I can.
Thanks,
James
Comment from Thanos
Time: January 11, 2009, 11:18 am
@Jonatan
Your mock-up looks fantastic! It has a fresh and modern look compared to the tired ubuntu.com theme, but that could also be a problem, because the themes across the ubuntu sites would not be uniform. But if the later is not an issue, I would go with your mock-up. And without the rounded corners, its also easier to implement
Comment from Anonymous
Time: January 11, 2009, 11:21 am
Switch the places of the large gray box (”new awesome fan”) and the two smaller blocks above (”French LoCo”, “Jorge Castro”). It’s typical for the most important data to appear largest and at the top with a graphic, with smaller headlines underneath. As it is the layout sends mixed visual cues, and the eye doesn’t know immediately where to begin.
Incidentally, this input field suffers the same problem. I just hit submit before the doing the captcha because the captcha was below the button, and looked so out of place stylistically that I phased it out as an ad. Visual ordering is 90% of usability.
Comment from nand
Time: January 11, 2009, 11:51 am
@Jonathan: Nice! I like the overall background theme! But as thanos pointed out, it wouldn’t be really coherent with some others ubuntu websites, so I’m not sure yet what to do… Do you happen to have the HTML source, or was it just a Gimp/Photoshot mockup?
@emmajane: Thanks for your offer! I’ll need to finalize these mockups first.
@james: sure, once the mockups are in good shape and integrated into a Drupal theme, I’ll put that somewhere.
@Anonymous: Yeah, the captcha thing is not really well placed! Concerning the theme, yeah, I thought about it, I though putting the main big box at the top made the theme looks like … too conventional, not original. So I tried to switch. It is still not decided!
Comment from Jonatan
Time: January 11, 2009, 2:42 pm
I know that the design differences might be a problem, but the colour scheme and logo is pretty much the same as any other Ubuntu site. And with a (common?) top navigation, I think that it’d be hard to get lost.
Besides, I think that it’s time to brake free from these generic Ubuntu themes and give each Ubuntu site some individuality. The white on brown, round cornered design with-to-little-spacing needs to go.
Lately there’s a lot of talk about giving the Ubuntu desktop a new fresher look, while the design of the official Ubuntu sites isn’t getting much attention. I think that’s sad, because the official websites often is the first thing a new Ubuntu user encounters. Badly designed websites risks to scare off potential users, and will hurt the Ubuntu name in the long term.
Comment from Jonatan
Time: January 11, 2009, 2:48 pm
@nand: I almost forgot, the design is just a Photoshop mock, but when the time comes I can code it if needed. I have several years of web development experience, and a good knowledge of progressive enhancement and accessibility.
Comment from Mathias
Time: January 11, 2009, 3:59 pm
I like “Fridge” as name for Ubuntu’s news site and wouldn’t recommend to change it to “Ubuntu News” or something similar (EVERYONE else names ones news portal this way).
How about “Indaba - From the Ubuntu world”: http://isizulu.net/?indaba
But I’d prefer “Fridge”!
Comment from johnc4510
Time: January 11, 2009, 10:14 pm
1. Love your layouts, especially the first one with the red buttons
2. This is something we really need to update as the current Fridge layout and Drupal are outdated with no way to upgrade.
3. The calendar of events needs to be a separate page with a link on the main page. As an editor of the UWN and the Fridge, I can’t tell you how much we need this feature. Currently we are managing 2 calendars to try to keep everything straight.
4. This idea is something Nick and I have been discussing for some time now and I hope it gets implemented soon.
Thanks for your work on this, it’s really appreciated!!
Comment from Dave Lyon
Time: January 19, 2009, 2:40 am
They look nice- really, as long as you make the html as clean as possible, it should be easy to refine the CSS over time. I would side with keeping it similar to the official site look, but maybe make an iterative change to give it it’s own personality.
One suggestion- which may be pointless based on your plans for the homepage. Try not to appeal to your three audiences on the front page. It will just make it that less appealing to all three. Instead, make the home page the jump off place solely for your ‘world audience’- the average people that won’t have any idea where else they should go. The LoCos and Dev people should be smart enough to know they have to go somewhere special. This way, average users won’t come and quickly close the browser window from technical jargon overload.
As to the name I think something like:
The Fridge
Ubuntu News (small subtitle)
would be the best option- you get a personality, but also an easy explanation.
Comment from nand
Time: January 19, 2009, 9:30 am
@Dave: interesting though about the audience… But not easy to find out a layout! And don’t worry about HTML, I made it all inline-CSS for the sake of speed
Comment from kenbw2
Time: January 19, 2009, 3:10 pm
Flash? On a FOSS project?
Comment from nand
Time: January 19, 2009, 3:41 pm
@kenbw2: Oh, come on. Is there a popular widely-deployed open-source video-player plugin? No. Do we want to lessen the user experience to satisfy FOSS purists? No. I’m just being pragmatic here.
If a viable FOSS solution were to come into play, I would of course switch.
Comment from Jonatan
Time: January 23, 2009, 10:56 pm
I’ve been working on refining my mock a little bit, expect a new version relatively soon.
I still think that stuffing an entire news site into the “default” Ubuntu theme is a bad idea. The design works quite well for the current site, but a news site has entirely different (design) needs than a generic blog. I’ll try to make use of some more “Ubuntu design elements”, but round corners doesn’t automatically mean pretty.
The problem, as I see it, is that the proposed mock-up gets to crowded - to many things are grasping for the users attention. Another, even bigger issue is that it’s hard to make out the different parts of the page. Where does the header end and the main content start? Which one of all the lists is the main navigation? What information is actually relevant for me?
I’ve tried to solve these issues in my mock by adding much more “white” space, and separating the different parts of the page in a much clearer way (especially by moving out the header from the page body). I’m not satisfied with my current mock thou, the colours and typo doesn’t feel right, and there’s still this issue of focus. The sidebar is taking to much attention away from the main content.
One last thing. Are you *really serious* about the inline-CSS, or do you plan to tidy things up before launch? I’m sticking with David here, keep the html clean!
Comment from Vadim P.
Time: January 10, 2009, 6:38 pm
Great stuff, hope to see this live soon.