Fridge 2.0 mockups

Matthew Nuzum matthew.nuzum at canonical.com
Mon Jan 12 18:33:34 GMT 2009


On Sat, Jan 10, 2009 at 12:56 PM, Nick Ali <nali at ubuntu.com> wrote:
> Nicolas Deschildre has posted initial mockups of what the Fridge will
> hopefully look like soon:
> http://www.ndeschildre.net/2009/01/10/ubuntu-news-website-mockups/.
>
> Its still pretty early in the process. Any thoughts or feedback would
> be greatly appreciated.

An interesting layout, looks very nice. I like the fact that your blog
post highlights users and this layout targets each audience.

I think it will work out. I personally hate it when I ask for feedback
and only get general praise, so here's some simple things you can do
to make this particular layout look nicer. Please don't take these as
personal criticism and don't feel that all of these are required,
they're just my opinions/suggestions.

Easy:

 * Stick with just two fonts. Pick a heading font (that looks good at
large font sizes) and a body font (that looks good at small sizes).
I'd suggest using sans-serif for both (gives a more techy look). I'd
further suggest just using the same font faces specified on ubuntu.com
for consistency.

 * Simplify the graphics. The page looks a bit busy (but see below,
the other suggestions may resolve this)

Medium:

 * Get more consistent spacing between elements. This will help make
the top of the page less busy. Experiment with more spacing between
the items in the three boxes on the top of the page. There's a general
"crowded" feel about the theme

 * You've got a lot of inline styles. You're using the blueprint
library which does three things: Cross-browser css reset, grid layout,
awesome typography. Your inline styles are overriding line spacing and
font sizes in numerous places which defeats the purpose of using
blueprint. Also it makes it harder to get consistency across different
areas of the site. I'd suggest removing your inline styles and
replacing them with css classes, then creating rules for these
classes. I know what its like to create mockups, your tweaks kind of
build up. If you need help using blueprint ping me on IRC and I can
give you some pointers.

 * Visual alignment: From a coder's perspective I know that the
"Development status" box is vertically aligned with the content to the
left but it doesn't look aligned. This is exacerbated by the fact that
the heading in that box is not aligned with the headings to the left
of it. For an example of this problem, see this graphic:
http://people.ubuntu.com/~mnuzum/projects/layout-guide-helper.png The
top box represents an image. The drop shadow is part of the image but
visually the left edge of the image is the blue outline. Therefore the
image needs to be pushed to the left to cause it's visual left edge
(the blue line) to align with the green box below it.

Hard:

 * Top bar. Looks cramped. I'm not sure how to improve this, because I
like the concept, but it just doesn't quite look right. Maybe it's as
simple as putting some spacing around the elements and then making the
horizontal rule a lighter colour. I'm not sure if that will help but I
can't think of anywhere else to start.

You've done a good job with that grey box to capture the eye. It
really pulls you in. However I find the image in there a bit
unattractive. It would be easier for me (and possibly other people) to
look at the image critically if there was something more pretty there.
Grab a picture of a furry animal or grab the picture of Mark S at his
whiteboard from the New York Times article. Just a suggestion.
Something clean and uncluttered would be good.

-- 
Matthew Nuzum
newz2000 on freenode, skype, linkedin, identi.ca and twitter



More information about the Ubuntu-news-team mailing list