Yesterday I finally launched the new layout and structure of the homepage of Research Center of Oriental Vinci (FI), a school of martial arts and Taoist disciplines. The initial idea was to maintain good or bad the colors of the earlier, because it identifies the school. In fact, the black text on orange background in my original had problems reading. The challenge then was to transform the final effect of the site while keeping the general parameters, and I think I succeeded. First I studied the color theme to use throughout the site design, using Kuler (Adobe of a web app very helpful in developing the "chromatic", to use the terminology of Johannes Itten) where I created an agreement in 5 colors, keeping the original orange (just a little 'brighter). Here are the colors chosen
:
Watching them all together, is known as the blue-green Central is the most "profound" for everyone, followed by dark red and green, and finally from orange and red are the most brilliant, towering above all others.
Having decided on a three-column layout, in light of the above consideration I decided to use orange for the background of the main column, to make it soar over the other, and the dark red ones on the sides. I used orange text on black background, white text on the side columns: this juxtaposition also gives due importance to the side columns, which are clearly visible and obvious, but leaves its supremacy in the middle where the main content. 
The blue-green, by its nature, lends itself well as the background color of the generic page. For
link instead, you can use the reds to the main text and the orange and green for the side columns. The blue-green, by its nature, lends itself well as the background color of the generic page. For To increase the readability of the text, was sufficient to apply a little common sense typeface: Times New Roman is not really comfortable on the web, and I changed with a
Georgia, which is one of the most elegant and versatile typeface for the lyrics online. 
For the size, here is the declaration of the CSS property font: # main {font: .875 em Georgia, Palatino, serif;} On a default size of 100% (corresponding generally to 16px) , set a size of 0.875em corresponds to having a character on-screen equivalent in size to 14px. Main
this old article on A List Apart
can be useful.
The last trick to radically improve the readability of text on the site (which are often fed and very thorough) was the fundamental division into paragraphs. In my opinion this device is required on the web, where we are not publishing texts but rather
hypertext, and where the player very hard to read a whole page from top to bottom (as it would with a book he purchased). 
For this kind of reading the visual
For this kind of reading the visual handles are key, and split a text with white lines of detachment is very restful to the eye. Besides this, also use the bold terms and expressions characteristic greatly simplifies the orientation of the reader.
| # right {font: .75 em geneva, helvetica, verdana, sans-serif;} | with an equivalent size of 12px. The Georgia I kept it to the championships and some other particular item. | Finally, the main headings (h1 and h2) I used the Trajan | , wonderful character that I introduced as standard in design for the Research Center. Designed by Carol Twombly for Adobe in 1989, it was triggered by the alphabetic signs of Trajan's Column in Rome, and has an elegance and clarity really unusual and is only available in upper case (normal and bold) and is particularly well for titles that stand on top of the page. | |
Subscribe to:
Post Comments (Atom)
|
0 comments:
Post a Comment