new design: request for comments

Thu Aug 16 17:44:29 UTC 2012

On 08/16/2012 08:17 PM, Garrett LeSage wrote:
> Hello all,
>
> Warning: This email is long, but important.
>
> I've been working on a new website design for oVirt, and gave folks a 
> preview during yesterday's weekly status IRC meeting.
>
> The website mockup is at:
> http://people.redhat.com/glesage/oVirt/website/mockup-1/
> (This is simply a static PNG exported from Inkscape, wrapped in a very 
> simple HTML page. Therefore, don't expect it to scale with your 
> browser, have selectable text, etc.)
>
> The mockup has many different sections and updates, and I will explain 
> each change, as well as the thought process that went into each, below.
>
> There are two main things to remember about this design:
> 1) It's a bunch of individual changes that work together.
> 2) It's a work in progress.
>
> Also, the mockup was designed with our target audience in mind: 
> administrators (setting up and running the software), enthusiasts (who 
> may run instances at home), and programmers (tinkering with and 
> contributing back to the project), all with experience using Linux or 
> some form of UNIX. It is also important to note that our audience is 
> specifically _not_ casual desktop users (although they could benefit 
> from someone setting up and maintaining oVirt for them).
>
> I'm eager to hear feedback on any and all changes, and work with you 
> to refine everything.
>
> When you do provide feedback, and want to discuss more than one point, 
> please limit each email to one aspect of the site at a time. If you'd 
> like to talk about the logo and the site structure, for instance, 
> please send one email specifically talking about the logo, and then 
> another discussing the structure. This should make conversations 
> easier for everyone to follow and make it easier for me to track 
> requested updates. Thanks!
>
>
> == Detailed changes ==
>
> = Logo =
>
> The oVirt logo is actually quite similar. I altered the "o" glyph, to 
> make it more aesthetically pleasing.
>
> Comparison graphic between current and new (in simple greyscale, to 
> make it easy to see the difference):
> http://people.redhat.com/glesage/oVirt/logo/ovirt-logo-proposed.png
>
>
> = Color =
>
> oVirt.org, right now, uses a green color throughout the site. The 
> oVirt administration UI also features green in its header. As a 
> result, I've pulled in that green and used it as the primary accent 
> color for the new site design.
>
> (It also has the advantage that it is not blue, which is overused for 
> iconography, on the Internet, and for software in general.)
>
>
> = Style =
>
> Based on the typeface of our logo and our highlight color, our new 
> style reflects simplicity, openness, vibrancy, and elegance.
>
> We can make this style work for both the WordPress and Wiki parts of 
> the site.
>
>
> = Site structure =
>
> A revised site structure is hinted at in the front page mockup. You 
> can see this reflected in the top navigation. I did some overall 
> categorization, strongly influenced by Dave Neary's pre-existing work 
> on the topic.
>
> You can see a proposed sitemap here:
> http://people.redhat.com/glesage/oVirt/website/ovirt-sitemap.txt
>
> This is a general grouping of types of content, not necessarily a view 
> of the top-level page, or of sub-pages. In some cases, these items 
> would be sub-level pages, in others, they would be part of the 
> navigation page.
>
> The documentation page would highlight the best documentation 
> available, regardless of format - e.g. wiki, blog posts, etc. - and 
> also have a prominent link to the wiki. Other sub-pages may also link 
> to the wiki, if there is pertinent information (such as live docs for 
> developers, linked to from the develop section).
>
>
> = Tagline =
>
> This is a short, catchy phrase to indicate what the project is all 
> about. Since the target of oVirt is running on a server, most likely 
> in a datacenter, and it's open source, I figured we should make this 
> prominent.
>
> Usually taglines are simple and direct, and often have some sort of 
> play on words. "Open your virtual datacenter" can be interpreted in a 
> few ways:
> 1) You can use oVirt to start (open up) a datacenter with virtualization
> 2) Take your existing datacenter and virtualize it
> 3) Use oVirt as an open source solution to manage your datacenter
>
>
> = Supporting lead-in text =
>
> It's important to start with some powerful explanatory text to state 
> the overall goal of the project. Usually, this ranges from a phrase to 
> around a sentence or two.
>
> I wanted to express the purpose of the oVirt software in a very 
> high-level view, as a hook to get people interested to read more.
>
>
> = Call to action =
>
> "Start using oVirt now »" is a call-to-action button. After the simple 
> text explaining what oVirt is, it's important to provide an obvious 
> next step.
>
> After clicking the button, it would take the viewer to another page 
> where it provides a quick and simple way to start using oVirt. 
> Naturally, one would have to download oVirt to use it, so it should be 
> super-easy to do on this page. The page should also start a simple 
> step-by-step guide on getting oVirt working on one's own system(s).
>
> I'm thinking that this may be, perhaps, simply a link to the "Download 
> & Use" section. Yes, it's in the navigation, but it does provide a 
> very important and clear next step, which helps with a natural-feeling 
> progression for an interested viewer of oVirt.org.
>
> (BTW: If the simple guide is too complex, then we need to work at 
> further simplifying the process of setting up oVirt. It's important to 
> try to lower the barrier to entry. Part of this is making sure that 
> oVirt can run on one machine as well, and possibly booting from live 
> USB media for first-time evaluation purposes.)
>
>
> = Front-page sections =
>
> Most of text on the mockup is, in some way, based on content from the 
> current oVirt.org website — it's just edited a bit.
>
> While most everyone appreciates a clean aesthetic, our primary target 
> group *also* likes to get to the point and see the information right 
> up front. The mockup of the front page that I'm presenting is based on 
> this concept.
>
> In addition to being an overview of the project and the software it 
> produces, it also makes it really easy to explore from the content 
> areas to relevant other parts of the website. By bringing the 
> top-level navigation into the context of the overviews, we make it 
> easier for someone to jump to other sections, instead of having to 
> scroll back up to rely on the navigation.
>
> The order of the front-page sections is important too. A goal with 
> this design was to:
> 1) Introduce people to oVirt, with a simple explanation
> 2) Let people know right upfront that it's an active project (release 
> blurb)
> 3) Detail some of the most important features
> 4) Make it clear that it's a community project
> 5) Provide timely news & a way to easily get more info
> 6) Publish information on upcoming oVirt-related events (currently, in 
> the
> mockup, there's filler text for the time being)
>
> Items #5 & #6 should both have a way to subscribe so that someone 
> could access this information without visiting oVirt.org. Twitter 
> solves the news component for us; we have to make sure the calendar is 
> able to be subscribed to as well.
>
>
> -=-=-
>
> Thanks for reading all of this! I'm looking forward to all 
> conversations, especially if it's constructive (regardless of a 
> positive, negative, or neutral slant).
>
> Garrett
> _______________________________________________
> Board mailing list
> Board at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/board

Looks ten times better than current site!
- My 1366x768 laptop display cannot keep up with the length and width of 
the page.
- I'm not sure what is the different between the 'use' and 
'documentation', and community and develop - they are tightly together. 
How about 'Use' - 'Interact' - 'Contribute' : use (which will encompass 
download and documentation), Contribute (for develop) and Interact (for 
community)
Y.