new design: request for comments
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
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@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.
On Thu 16 Aug 2012 07:44:29 PM CEST, Yaniv Kaul wrote:
Looks ten times better than current site!
Thanks! I'm glad you like it!
- My 1366x768 laptop display cannot keep up with the length and width of the page.
This mockup is a static PNG (which happens to be 1020×1192). I'll make sure the actual page adapts to different resolutions. (It will definitely work fine on your resolution without horizontal scrolling.)
- 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)
I'm open for discussing the wording. However, I chose the names for the navigation for a few reasons: 1) People are strongly conditioned to look for the word "download". It's an very important keyword to have on every software-related site. I added "use" there as well, as a place to give quick start information as well as possible uses — the latter of which would link to the documentation. (Use = getting started information.) 2) Community is a commonly used word among developers, so it's used in the mockup for similar reasons. (It's not as strong as a word as download is, however, but it does have a extremely close association with FOSS projects.) The section will contain information about the community involvement, governance, mailing lists, and information on how to join IRC. Documentation is a top-level section, as: • we have quite a lot of documentation already • it provides a quick link for those who want to do something more with the oVirt instance they have set up • it is primarily focused on end-user documentation, not developer documentation (hence the develop area) As for your other suggestions: • Interact may mean interacting with the oVirt software, the oVirt community, or even oVirt.org itself (as if the site would be a hosted service, for example). It's a bit ambiguous, and the navigation should strive to be very clear places to navigate to. • "Contribute" might work instead of "develop". Summary: I chose the sections, words, and even the order for the navigation with purpose. Your suggestion of "contribute" could be a replacement for "develop", but it would require further thought (and perhaps some discussion). Thanks for your feedback! Garrett
On 17/08/12 11:29, Garrett LeSage wrote:
On Thu 16 Aug 2012 07:44:29 PM CEST, Yaniv Kaul wrote:
Looks ten times better than current site!
Thanks! I'm glad you like it!
I also find this much better than what we have today. Adding more comments in context.
- My 1366x768 laptop display cannot keep up with the length and width of the page.
This mockup is a static PNG (which happens to be 1020×1192). I'll make sure the actual page adapts to different resolutions.
(It will definitely work fine on your resolution without horizontal scrolling.)
- 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)
I'm open for discussing the wording.
However, I chose the names for the navigation for a few reasons:
1) People are strongly conditioned to look for the word "download". It's an very important keyword to have on every software-related site. I added "use" there as well, as a place to give quick start information as well as possible uses — the latter of which would link to the documentation. (Use = getting started information.)
+1 for using download. The download is something users are looking for but I think we don't need to add 'Use' there as well. the quick start information can be a link under documentation and even if we add a link to that next in the download page I think it does not have to be reflected in the main navigation link.
2) Community is a commonly used word among developers, so it's used in the mockup for similar reasons. (It's not as strong as a word as download is, however, but it does have a extremely close association with FOSS projects.) The section will contain information about the community involvement, governance, mailing lists, and information on how to join IRC.
Documentation is a top-level section, as: • we have quite a lot of documentation already • it provides a quick link for those who want to do something more with the oVirt instance they have set up • it is primarily focused on end-user documentation, not developer documentation (hence the develop area)
As for your other suggestions: • Interact may mean interacting with the oVirt software, the oVirt community, or even oVirt.org itself (as if the site would be a hosted service, for example). It's a bit ambiguous, and the navigation should strive to be very clear places to navigate to. • "Contribute" might work instead of "develop".
How about 'Developers' ? Contribute is not clear as we consider many forms of participation to be contributions, like reporting on bugs and responding to mails on the lists etc.
Summary: I chose the sections, words, and even the order for the navigation with purpose. Your suggestion of "contribute" could be a replacement for "develop", but it would require further thought (and perhaps some discussion).
Thanks for your feedback!
Garrett _______________________________________________ Infra mailing list Infra@ovirt.org http://lists.ovirt.org/mailman/listinfo/infra
----- Original Message -----
From: "Garrett LeSage" <garrett@redhat.com> To: infra@ovirt.org, board@ovirt.org Sent: Thursday, August 16, 2012 8:17:10 PM Subject: new design: request for comments
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.)
really liked the colors, looks much better the today.
= 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 _______________________________________________ Infra mailing list Infra@ovirt.org http://lists.ovirt.org/mailman/listinfo/infra
Adding the arch list (for those who do not keep track of infra and not registered to board list) On 16/08/12 20:17, 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 _______________________________________________ Infra mailing list Infra@ovirt.org http://lists.ovirt.org/mailman/listinfo/infra
----- Original Message -----
Adding the arch list (for those who do not keep track of infra and not registered to board list)
On 16/08/12 20:17, 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.
I think putting the "search box" in the bottom of the page makes it harder to find & notice. Usually search is amongst the topmost and/or central elements in the site, as it makes it much easier for people to navigate across the site & locate the information they want.
-=-=-
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 _______________________________________________ Infra mailing list Infra@ovirt.org http://lists.ovirt.org/mailman/listinfo/infra
_______________________________________________ Arch mailing list Arch@ovirt.org http://lists.ovirt.org/mailman/listinfo/arch
On 08/19/2012 10:18 AM, Mike Kolesnik wrote:
I think putting the "search box" in the bottom of the page makes it harder to find & notice. Usually search is amongst the topmost and/or central elements in the site, as it makes it much easier for people to navigate across the site & locate the information they want.
I made a deliberate decision to downplay the importance of search on the mockup for the front page for these reasons: • Someone should be able to easily find the correct content without having to resort to search. • Right now, the form only searches WordPress, which is not very useful. Searching the contents of the is a great thing, however. Solutions for improving search: 1) Combined WordPress + MediaWiki search results. (If it's not easily possible [1], we could consider _only_ searching MediaWiki, perhaps.) 2) Highlight search in the documentation area. Basically, when someone clicks on documentation, it has the most common and useful documentation grouped on the page, and above that, a big search entry (which is prefocused, so one could simply type and hit enter, when visiting ovirt.org/documentation). [1] There are several plugins for integrating the two, but they all seem to focus on embedding, adding comments, or using a single sign-in (which could still be useful for us). I'm currently working on a designs for the sections, and will be including a large search at the top of the documentation page to make sure searching is more prominent. Hopefully this will address your concern. Thanks for your feedback! Garrett
On 08/20/2012 11:12 AM, Garrett LeSage wrote:
On 08/19/2012 10:18 AM, Mike Kolesnik wrote:
I think putting the "search box" in the bottom of the page makes it harder to find & notice. Usually search is amongst the topmost and/or central elements in the site, as it makes it much easier for people to navigate across the site & locate the information they want.
I made a deliberate decision to downplay the importance of search on the mockup for the front page for these reasons: • Someone should be able to easily find the correct content without having to resort to search. • Right now, the form only searches WordPress, which is not very useful. Searching the contents of the is a great thing, however.
Solutions for improving search: 1) Combined WordPress + MediaWiki search results. (If it's not easily possible [1], we could consider _only_ searching MediaWiki, perhaps.) 2) Highlight search in the documentation area. Basically, when someone clicks on documentation, it has the most common and useful documentation grouped on the page, and above that, a big search entry (which is prefocused, so one could simply type and hit enter, when visiting ovirt.org/documentation).
3) Use google search for the entire ovirt.org domain? Thanks Robert
[1] There are several plugins for integrating the two, but they all seem to focus on embedding, adding comments, or using a single sign-in (which could still be useful for us).
I'm currently working on a designs for the sections, and will be including a large search at the top of the documentation page to make sure searching is more prominent. Hopefully this will address your concern.
Thanks for your feedback!
Garrett _______________________________________________ Infra mailing list Infra@ovirt.org http://lists.ovirt.org/mailman/listinfo/infra
-- Thanks Robert Middleswarth @rmiddle (twitter/Freenode IRC) @RobertM (OFTC IRC)
----- Original Message -----
Adding the arch list (for those who do not keep track of infra and not registered to board list)
On 16/08/12 20:17, 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)
I think the home page is overcrowded with text. It makes me feel like I am reading a blog or some sort of PDF . Adding to this is the monotonicity of using only the green color.. I think if we take as example Fedora or Gnome sites, you can see they look more colorful and less intimidating (less text in-your-face and the text is down the page, where whoever is really interested in it can read it). Of course we're not talking about a desktop shell site here, but I think more graphics would make it more pleasant to look at. Also I would add some screenshots/screencasts (maybe even a section where more can be viewed) since it really helps visualize what the product is and what it does.
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 _______________________________________________ Infra mailing list Infra@ovirt.org http://lists.ovirt.org/mailman/listinfo/infra
_______________________________________________ Arch mailing list Arch@ovirt.org http://lists.ovirt.org/mailman/listinfo/arch
participants (6)
-
Eyal Edri -
Garrett LeSage -
Livnat Peer -
Mike Kolesnik -
Robert Middleswarth -
Yaniv Kaul