[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Some more possible tweaks to the appearance of the website
From: |
Paul Morris |
Subject: |
Some more possible tweaks to the appearance of the website |
Date: |
Wed, 18 Feb 2015 01:43:16 -0500 |
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.
- Some more possible tweaks to the appearance of the website,
Paul Morris <=