[libvirt] [PATCH 00/17] Redo website layout and branding

Thu Nov 3 15:25:55 UTC 2016

On Thu, Nov 03, 2016 at 03:56:00PM +0100, Martin Kletzander wrote:
> On Mon, Oct 31, 2016 at 12:41:41PM +0000, Daniel P. Berrange wrote:
> > The current libvirt website design dates from 2008 and
> > has not changed significantly since. Compared to
> > contemporary open source project websites it looks
> > pretty dated and cluttered.
> > 
> 
> I like the idea of updating the page.  However I'm out of
> HTML/CSS/etc. stuff for a while, so I don't feel like doing technical
> review of the series.  On the other hand it doesn't have to be perfect
> from the technical POV, so I think that unless there is something
> someone disagrees with, it's just about the design.

Yeah, I'm not really looking for HTML/CSS review - content typos,
layout problems, etc are more useful feedback.

> > This series incrementally changes the website to have
> > a completely new layout and branding.
> > 
> > Since the original adobe illustrator files are long
> > since lost, this series introduces a newly created
> > variant of the libvirt logo with Inkscape as an SVG
> > file.
> > 
> 
> This is a pity.  But well, we can update the logo as well, why not.
> [warning: subjective opinions follow, don't take them personally]
> 
> I don't like the new logo.  Just a few things would make me feel better
> about it.  a) if the "virtualization api" didn't make it ten times wider
> because it's not a logo anymore, it's more like a banner now.  b) was
> that logo made small and then increased in size?  The dark tone of "lib"
> together with the blurriness of it makes my eyes hurt.  It's nice that
> it is in SVG, but I believe making it closer to the libvirtLogo.png [1]
> (even when keeping it crooked/tilted) would be way nicer to look at.

Ok, so when talking about the "logo" I consider that to be just
the bare "tin" with no words. That basic logo form is then used
to the form the basis of various graphics. The front page banner
image is the logo combined with the text.  The libvirtLogo.png
that you mention is an alternative formatting. Both are right,
they are just tailored for different usage scenarios, depending
on whether the usage prefers a wide format image, or a square
format image. The front page and top nav bar both call for the
banner style logo graphic, but we can still have square format
logos elsewhere if needed.

I included the SVG as the final patch, so that it is easy for
us to create different graphics from the same base logo.

The bluriness is caused by inkscape anti-aliasing the font when
exporting the SVG to PNG. I'll see if I can find any inkscape
options to reduce this anti-aliasing, or perhaps try a different
tool for the PNG export.

> > The libvirt logo used a specific font with angled tops
> > to letters like "l", "b" and "t" - this is the "Overpass"
> > font, made available by Red Hat under an open source
> > font license. The re-branding makes use of webfont
> > support so that we can use this font across the entire
> > libvirt website for a consistent look.
> > 
> 
> This is good.  I didn't like the font and particularly the inconsistency
> in font types in the old website.  But looking at the front page, the
> font sizes for the three content boxes are different and I feel like
> that's way bigger inconsistency.  The black text in "Introduction" is
> probably the same size as the green-ish link text in the other two, but
> the lines are so thin that even hinting and auto-aliasing doesn't help
> smoothing it out (on my display, maybe it's better on different ones).

Do you have Hi-DPI screen ?

Yes, the black text in intro is the same font size as the green
text in the others.

I'm using the OverpassLight font for the non-heading text.

If you want to see what it looks like with regualar Overpass
font see here:

  https://berrange.fedorapeople.org/libvirt-new-website-heavy/

I had a slight preference towards OverpassLight, but perhaps
the regular Overpass looks better on a wider range of screens,
particularly Hi-DPI screens perhaps.

I'm pretty ambivalent on this.

> > The bigger change is in the layout, with the huge
> > left hand sitemap nav bar being removed to give more
> > space to the main content. The front page now directly
> > links to the key pages that were shown to be highly
> > visited in the apache web logs. Most of the rest of
> > the links are now available from the "docs.html" page
> > linked from "Learn" in the top nav bar.
> > 
> 
> More space for the main content is nice, but using the whole width is
> not something you can see very often.  I believe it's because it's way
> nicer to looking at, especially when you have short paragraphs that
> would otherwise span the whole width of the page just to be two lines
> long.  That's the case after this series.
> 
> Also the table on downloads page is nice, but other tables don't follow
> the same pattern.  Plus they are on the side as well, e.g. acl.html [2]

Yes, I did not try to exhaustively update all the pages. I'm only
touching the front page, downloads and a couple of other pages.

There's certainly scope for doing more cleanup across other existing
pages to follow suit. This series is already rather large though,
so I prefer to leave that to follow later.

> > Another key change is that the download page now
> > covers all language bindings, test suites, docs
> > released by the project, not merely the core C
> > library.
> > 
> > Finally a new page "contribute.html" is added as the
> > source of information useful to people wishing to get
> > involved in the libvirt project.
> > 
> > View the new site here
> > 
> > https://berrange.fedorapeople.org/libvirt-new-website/
> > 
> 
> s/betworks/networks/ in docs/index.html.in and docs/docs.html.in.  That
> copy-paste made me thinking whether we can re-use some of the content,
> but there's probably not much, you would've noticed that.
> 
> Final thoughts: the things I mentioned above don't mean that I don't
> like it.  I do, it's just that if we're trying to make it better, I feel
> like we can do it even better than that.  For making lots of the content
> look better space- and consistency-wise, we could maybe use some
> patternfly/bootstrap even when it will be just for (mostly) static
> site.  At least it looks like the cool kids do that nowadays ;)  Anyway,
> that's the whole brain dump I had regarding this.  Hopefully others will
> also push/pull some ideas around so we have a forward-moving discussion.

Regards,
Daniel
-- 
|: http://berrange.com      -o-    http://www.flickr.com/photos/dberrange/ :|
|: http://libvirt.org              -o-             http://virt-manager.org :|
|: http://entangle-photo.org       -o-    http://search.cpan.org/~danberr/ :|