Some more possible tweaks to the appearance of the website

[Paul Morris]

Hi all,  

I have some more changes to propose for the website.  You can see two mock-ups 
at the links below (just remove the spaces in the URLs).  One uses the current 
green color for the background, and in the other I tried out a blue background 
which offers more contrast.

3. current green background color:
http://clairnote.org  /lilypond-web-demo3/

4. blue background color:
http://clairnote.org  /lilypond-web-demo4/

Below is a list of the main changes.  Let me know what you think and if you 
like one version better than the other.  

Cheers, 
-Paul


SITE BACKGROUND

- The background color that fades in at the top left corner also fades in at 
the top right.  This complements the horizontally centered site design and 
provides greater symmetry (especially noticeable on wider monitors where the 
background color falls more outside of the main content area than behind it).

- Rather than the background color fading to pure white and the boxes that 
contain the site’s content having a slightly off-white background (as on the 
current site), the background fades to off-white and the content boxes are pure 
white.  This way the  foreground/content is slightly brighter than the 
background, which helps the eye focus on the content.

HOME PAGE

- Simplified by removing two graphical elements — the “squiggle” and the “What 
is LilyPond?” green bar that fades out horizontally — both of which are unlike 
any other visual elements on the site and so they don’t “tie in” well with the 
overall design.  (IMHO they don’t add much and actually distract from the nice 
big image with the lily and music notation.  They both had pure white 
backgrounds, so that’s why I’m proposing this change to go with the background 
changes.)

- The summary text is larger.

- For each news item the horizontal dividing line comes before the title, 
rather than after it, which makes it easier to tell them apart.  (See also the 
introduction/examples page, which uses the same css class for some reason.)

OTHER PAGES

- The boxes containing the site content have slightly rounded corners to match 
the rounded corners of the navigation bar, for greater visual consistency.

- The spacing of the headers on these boxes is adjusted slightly so the words 
are more vertically centered.