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 -- websites mailing list websites@xxxxxxxxxxxxxxxxxxxxxxx https://admin.fedoraproject.org/mailman/listinfo/websites
