Web design, fundamentals

They are so in the morning, you're still sitting in his underpants in front of your computer viewing
web pages, you decide http://www.worstoftheweb.com put you in a while and see what atrocities
have been committed this month ... the result is more horrible than you expected (eg.
http://www.porkjerky.com/ this website but can not believe this made in 2004). Does it really so hard
to do something good visually?

Usually people think that having good taste dressing or decorating your house spotless, can be
designed with ease. But no! The art of graphic design / web requires years of study and practice, it
is essential to the mastery of typography, symmetries, spaced, and a myriad of things that people
do not know consciously, but they appreciate not imagine visually.

The truth is that most plays that the design is to make our pages to be visually attractive, but that is
not enough, we as designers must communicate an idea and a feeling for navigators, and that all
this takes place in a clear and concise. To convey these feelings we correctly use the following
techniques:

• Typography
• Color Theory
• Spacing and composition
TYPOGRAPHY
Start by talking mainly about typography on the internet, which has its own rules, but in graphic
design as the main rule is that everything is legible, is like the golden rule of the fonts (if you can not
read no mola ).

When working with our texts can be separated into two groups, and bodies of text titles or
messages.

For the first letters generally need thick and detailed. It is highly recommended that the font chosen
for the title match perfectly with the design of the page and we will also treat your color carefully,
because the color in very explicit titles, but this will be shown later

For the latter we use font "Smooth" (Arial, Verdana), never with "Serif" (Times). Here is a sample
image:

Smooth fonts are more readable on a monitor because being straighter, are more likely to draw on
the monitor, by contrast with Serif fonts have many more details and small sizes is not readable on
a screen, not on paper .

Also, because Flash technology primarily (if we are weird) emerged Pixel Fonts, some fonts
specially designed so that they are well might see a certain point, as "fell" right in the pixel monitor.
These sources have been very successful and are highly recommended using them in Flash, since
the texts are very readable and not the letters are blurred.

COLOR THEORY
Amazingly, the colors of the objects give us very strong emotions, even though, generally we do not
realize it. Hospitals lack of red, as this is associated with blood, and offices often predominantly
white denoting order and cleanliness (in the Room BOFH predominantly green motherboard).

Did you imagine working in an office red? It would be too stressful, it is a color of a strong visual
impact and has great strength and energy. These are clear examples of how we are currently using
colors for our benefit, to work better, to be more relaxed, and so on.

Some of the most important things that we know of color are:

• The color and its expansion

• Harmony and contrast
• The meaning of color
The color and its expansion
Ye probably ever wondered why most websites on the internet there are a light background instead
of black. In fact, the pages that have a black background often get worse. This is due to the
expansive nature of the colors, will not be like a text on a black background white:

 
The text on white background is more readable and therefore the reader must force unless the
hearing, feeling grateful. This also can be seen in light and dark colors, it's not something that
happens only in black and white.
 
In these two pictures appear to the left tends to expand and get bigger, just the opposite than in the
right. That's because the dark color compresses the middle figure. These techniques we will use
when we want that part of our website is closed or open.

Harmony and contrast

Harmony: Creating a range of colors on our website that consists of colors in the same range or
tone. For example, a web Clab harmonic colors, as it uses the same color and different shades of it.

Contrast: Combine different colors to create a range such as light and dark, hot and cold, and so
on.

It is obvious that each box in this picture we are expressing a different idea.

Color Meaning
This is one of the things I'm passionate about color, meaning. But how a color may mean
something? Yes, although these meanings vary somewhat across cultures, since by tradition it is
possible that yellow signifies bad luck in some places and not others. This is a compilation of
different meanings drawn from some websites.

White.
It is at the end of the range of grays .. Color is a latent capacity to enhance the other colors
neighbors. The target can express peace, sunny, happy, active, pure and innocent. White is the
universal background of graphic communication.

Black.
Like White, also located at the end of the range of grays. It is the symbol of silence and mystery
and, sometimes, it can mean unclean and evil. Conferred nobility and elegance, especially when it's
brilliant.

Gray.
It symbolizes the indecision and lack of energy, expressed doubt and melancholy.
The metallic colors are lustrous image, adopting the qualities of metals, they represent. Give an
impression of cold metal, but also give a sense of brilliance, luxury, elegance, by its association with
the precious metals.

Yellow
The color is brighter, warmer, warm and expansive. Is the color of sun, light and gold, and as such
is violent, intense and sharp. Usually interpreted as a lively, jovial, exciting, emotional and
impulsive. We do not recommend using it as a main color of our site, because it has too strong and
tends to tire the visitor.

Orange
It has active force, radiant and expansive. It has a cozy, warm, stimulating and a very positive and
dynamic quality of energy.

Red.
It means vitality, is the color of blood, passion, brute force and fire. It is linked to the principle of life,
expresses the sensuality, virility, energy, is jubilant and aggressive. Red is the symbol of the ardent
and overflowing passion, sexuality and eroticism.

Blue.
It is the symbol of the depth. Intangible and cold, raises a favorable attitude. The feeling of
peacefulness that causes other than blue is calm or resting ground, taken from the green. Express
harmony, friendship, loyalty, serenity, peace ... and has the virtue of creating the illusion of going
backwards. This color is associated with heaven, sea and air. The blue may suggest optimism. The
more lost attraction is further clarified and becomes indifferent and empty. The most attracts the
darker toward infinity.

Violet.
It is the color of temperance, of lucidity and reflection. It's mystical, melancholy, and could also
represent introversion. In its lighter tones becomes a bit sad, in the darkest represents greatness.

Green.
It is the calm and soothing color. It evokes the vegetation, the freshness and nature. It is the color of
calm indifference: not convey happiness, sadness or passion. When something reverdece raised
hopes of renewed life.

Brown.
Color is a male, severe, comfortable. Local environment is reminiscent of autumn and gives the
impression of gravity and balance. Color is realistic, perhaps because it is the color of the earth we
tread.

 
Space and composition
At this point I usually recommend to visit as many websites, and establish how they mounted the
web, why they used that color there and not another, how they have spaced their texts, etc ... but
still there are some things that are often basic and see here.

Let your text 'breathe'

If not a correct term to say that the text 'breathe', but is the expression I use when I want my
website to be readable. In these two images below we can see how a text is very close to the image
and the spacing is very low for the chosen font size, making it confusing to read. The other image
instead, it reads perfectly.

   
This is a good example of how to make our texts are not compacted. It is also important to know
that the line spacing is usually 20% higher than the font size, for example, a font size of 10 points
will get 12 points of leading.

Putting our elements

The position of our elements in the display is one of the most important in making our design, it is
not the same place an image above to below, with or without text beside it, which is a large picture
or and countless small details that will provide our web personalities.

A good example of how to compose a web site with pictures and text properly can be the homepage
of Macromedia which efficiently uses the space between the lines, and positions the image for size
and relevance.

In this capture we can see how Macromedia has used a large image to display a new product, and
then have small pictures to beautify and give details of parties with more text.

It is important to place small images next to the text, which will have two functions First, that the
user has a visual information about what is going to read, drawing the attention of the visitor to
where we want, and second, to sweeten the page, then all the world was made back (usually by
closing the page and cursing several times) when you view a site that is just text.

What we let into the ink

Well, actually many things, but did you expect? As I said before the graphic design is something
that takes many years to learn, but with a little effort you can make pretty sites in a couple of years
without having any idea regarding the design. You see as long as you practice you will gradually
improving and when you least expect yours will visit an ancient site with the resulting fear and
think ... But how I could do something sooo tacky?