www.fpo Redesign Mockup Thread

Sat Jul 31 03:43:38 UTC 2010

Hi Jef!

Woohoo *great* email! Let me respond to some of the comments that
pertain to design decisions I ended up making just so the rationale is
out there. If we decide the rationale is too weak or something else
makes better sense, let's change course on what I did.

On Fri, 2010-07-30 at 23:05 +0200, Jef van Schendel wrote:
> * The slideshow grey
> 
> I think the mockups are a little too much on the grey side. Where's
> our awesome Fedora Blue?
> 
> http://schendje.fedorapeople.org/fpo/fpoBlue.png
> http://schendje.fedorapeople.org/fpo/fpoBlue.svg
> 
> In this mockup I've tried out some different backgrounds. Having the
> F13 wallpaper as a background is a little crowded though, and of
> course we'd have to change it with every release.

So let me give the rationale for all the grey and white. The reason I
did the mockups primarily with the grey and white is so the Fedora blue
would pop a lot more. E.g., one of the things I really wanted to pop on
the page is that download button - we want to drive people to give
Fedora a try by downloading it, and we also know from the website survey
last year that downloading Fedora is a key driver of website traffic
around release time.

In the set of header mockups I blogged yesterday, you can see where I
undermined this myself by making the main nav bar Fedora blue. Now the
download button has much less pop:

http://mairin.wordpress.com/2010/07/29/some-www-fpo-header-mockups/

This is a problem stickster and I faced last year when we first worked
on front page mockups together on an overhead projector. I wanted that
download button to pop, but because the early mockups had lots of strong
blue, blue wasn't working for the download button. I tried orange as
it's a complementary color for blue, but... ehhhh....

http://duffy.fedorapeople.org/temp/woot/page1.png

Yellow might be a better match with our blue, but making bright yellow
buttons on a screen is problematic because it's such a bright color it
makes the label hard to read. Make the yellow dark enough to be pleasant
to look at and you find yourself with a puke mustard color - maybe more
practical but not attractive :)

The making the page super grey/white neutral to make the blue pop was my
compromise. But maybe it makes the page too lifeness / not blue enough.
If the slideshow automagically changes, maybe there is less harm in
detracting from the download button's pop if only one or two of the
slides is blue. (And the mockups you did, Jef, are gorgeous. I like the
3rd and 4th best!) 

It may be worth actually going through the sample banners I did in grey
and trying to build a nice color system around them, and then do mockups
of the full front page with each of those mockups in place so we can
evaluate the effect on the page as a whole. Ian has put together a nice
color system for Fedora's brand based on the four foundations graphic
colors, so we could try those as a start:

https://fedoraproject.org/wiki/User:Ianweller/Brand_guidelines_%28draft%
29#Colors

I can focus on this next week but Jef you are more than welcome to help.
We could divy them up or I could make a rough cut and you could fill in
the polish.

> * The slideshow buttons
> 
> IMO they're a bit too... bulky? I think we only need either the
> buttons or the arrows, both is a bit overkill. I've made the buttons a
> bit simpler. By highlighting the current one, visitors can see which
> one they're currently viewing. The other 3 of course provide a way to
> move to the other slides.
> 
> http://schendje.fedorapeople.org/fpo/fpoSlides.png
> http://schendje.fedorapeople.org/fpo/fpoSlides.svg

I totally agree; I have to admit I half-assed them in the mockups I did.
Yours are much more thoughtfully put-together, Jef, and I really like
how you've focused on simplification.

I think I like the looks of the circular slide-by-slide navigation
element the best but I'm worried it'll be hard for folks to understand.
I actually like the lower right version with the arrows centered
vertically the best; it feels the most natural to me. Probably because
it looks the way a book is read; the square and circular slide nav bars
I think require more abstract brain neurons to fire. :)

Anyway should we go ahead and update the mockups to use those arrows?
How do we want to handle the arrow coloring if the background on a given
slide blends in too much? Switch between black and white depending on
the background? (Would be more complicated to code and maintain he
slideshow that way but of course not impossible) Maybe we give them a
bezel or cut little notches out of the banner to see the white
background on the web page behind it, and always have black or blue
arrows?

> * Screenshot
> 
> Having a screenshot is always good, but screenshots of OS's aren't
> exactly the most exciting pieces of art. Can we make it a little
> prettier? Here is something like what I've got in mind...
> 
> http://schendje.fedorapeople.org/fpo/fpoScreenshot.png
> http://schendje.fedorapeople.org/fpo/fpoScreenshot.svg
> 
> A simple gradient or reflection (or even a light glow? way too cheesy
> imo) can add a lot to the presentation. Also, I think we need all
> those windows in the screenshot to show what you can do with Fedora,
> right? Personally I think the "empty" screenshot looks better, but I'm
> biased since I'm in love with F13's wallpaper. I understand if
> Marketing wants to have more windows open in the shot. :)

Oh those are gorgeous - much much nicer. One thing I noted in the
feedback I got on the mockup blog post so far is a couple people
commented that they liked the big / zoomed-in versions of the screenshot
- in mockups #2 and #3 you see how it's EXTREME CLOSEUP?

http://mairin.wordpress.com/2010/07/29/some-www-fpo-header-mockups/

But the challenge with that is picking an interesting area of the
screenshot to highlight and keep it clear we're talking about an
operating system here. If you think of the screenshot's purpose as to
visually show to people what Fedora actually is, though, maybe there's
other routes we could take other than a screenshot. How about a photo of
a group of folks gathered around a laptop with Fedora's wallpaper
prominently displayed on it? You can do the same effect with such a
photo but:

- it becomes less cluttered because there isn't so much stuff on the
screen

- it's potentially more informative of what Fedora is than a plain
wallpaper shot because of the context of folks gathered around a laptop

Okay all that being said, I really like the lower right screenshot you
did with just the clean desktop and clear F13 rocket wallpaper. Visually
it's the least complicated + most stunning.

> * The grey gradient all the way at the top
> 
> I'm just wondering why it's there. Could you shed some light on this, Máirín? :)

I know Sijis doesn't like it from the fedoracommunity.org mockups, we
talked about it before. :) I pulled it out of some of them and then I
went back to it - I think I'm irrationally enamored with it, but if it's
gotta go, it's gotta go. 

I think I figured out why I like it though - note I'm a Firefox user and
I know we all aren't and that's cool. But the transition between a white
webpage and the UI tabs in Firefox is pretty stark, right? But when you
add that slight off-white/grey gradient at the top fading into white
towards the page, it makes that transition from the UI tabs to the
actual web page a bit smoother and it kind of makes the page look more -
official? Authoritative? I can't really explain.

But that's where it's coming from. Maybe it's pointless. What do you
think?

> Aaaanyways, these are just little things I wanted to point out right
> away. I'll have a closer look at the layout and other stuff when I
> have time this week.
> 
> Hope this provides something useful! By all means, discuss these to shreds! :)

Thank you for kicking off such a great discussion! This is super
useful :)

~m