Fundamentos básicos del diseño web

Son las tantas de la madrugada, sigues sentado en calzoncillos delante de tu ordenador

viendo páginas web, decides meterte un rato en http://www.worstoftheweb.com, y ver
qué atrocidades se han cometido este mes... el resultado es más horrible del que
esperabas (p. ej. http://www.porkjerky.com/ esta web parece mentira pero esta hecha en
el 2004). ¿Realmente cuesta tanto hacer algo bueno visualmente?
Generalmente la gente piensa que por tener buen gusto vistiendo o decorando su
impoluta casa, puede diseñar con soltura. ¡Pues no! El arte del diseño gráfico/web
precisa de años de estudio y práctica, es imprescindible el dominio de la tipografía, las
simetrías, espaciados, y un sinfín de cosas que la gente ignora conscientemente, pero
que agradecen visualmente como no se imaginan.
Lo cierto, es que la mayoría interpreta que el diseño es hacer que nuestras páginas sean
visualmente bonitas, pero con eso no basta, nosotros como diseñadores debemos
transmitir una idea y un sentimiento al navegante, y que todo esto se produzca de una
manera clara y concisa. Para transmitir estos sentimientos deberemos usar
correctamente las técnicas siguientes:
 Tipografía
 Teoría del color
 Espaciado y composición

TIPOGRAFÍA

Empezaremos hablando básicamente sobre la tipografía en internet, la cual tiene sus

propias reglas, aunque como en el diseño gráfico la regla principal es que todo sea
legible, es algo así como la regla de oro de las tipografías (si no se puede leer no mola).
A la hora de trabajar con nuestros textos podemos separar en dos grupos, títulos y
cuerpos de texto o mensajes.
Para los primeros necesitaremos letras generalmente gruesas y detalladas. Es muy
recomendable que las tipografías escogidas para los títulos concuerden perfectamente
con el diseño de la página y también tendremos que tratar su color con mucho cuidado,
ya que el color en los títulos expresa mucho, pero esto lo veremos más adelante

Para los segundos deberemos usar tipografías "Lisas" (Arial, Verdana), nunca con
"Serifa" (Times). Aquí tenéis una imagen de ejemplo:

en papel. Las tipografías Lisas son mucho más legibles en un monitor porque al ser más
rectas, son más factibles de dibujar por el monitor, en cambio las tipografías con Serifa
tienen muchos más detalles y a tamaños pequeños se hace poco legible en una pantalla,
que no

También debido a la tecnología Flash principalmente (si es que somos raritos) surgieron
las Pixel Fonts, unas tipografías especialmente diseñadas para que éstas se viesen bien a
un determinado punto, ya que "caían" justo en el píxel del monitor. Éstas fuentes han
tenido mucho éxito y son muy recomendables usarlas en Flash, ya que hacen los textos
muy legibles y no se ven borrosas las letras.

TEORÍA DEL COLOR

Aunque parezca mentira, los colores de los objetos nos transmiten emociones muy
fuertes, pese a que, generalmente no nos demos cuenta de ello. Los hospitales carecen
de color rojo, pues éste es asociado a la sangre, y en las oficinas suele predominar el
blanco que denota orden y pulcritud (en las BOFH Room predomina el color verde
placa base).
¿Acaso os imagináis trabajando en unas oficinas de color rojo? Sería demasiado
estresante, pues es un color de un fuerte impacto visual y que tiene mucha fuerza y
energía. Esto son claros ejemplos de como en la actualidad estamos usando los colores
para nuestro beneficio, para trabajar mejor, para estar más tranquilos, etc.
Algunas de las cosas más importantes que debemos saber del color son:
 El color y su expansión
 Armonía y contraste
 Significado del color

El color y su expansión

Probablemente alguna vez os hayáis preguntado por qué la mayoría de las páginas web
que hay en internet tienen un fondo claro y no negro. De hecho, las páginas que tienen
un fondo negro suelen quedar peor. Esto se debe al carácter expansivo de los colores, no
se verá igual un texto sobre fondo negro que blanco:

El texto sobre fondo blanco es más legible y por lo tanto el lector debe forzar menos la
vista, sintiéndose agradecido. Esto también lo podemos ver en colores claros y oscuros,
no es algo que suceda únicamente en blanco y negro.
En estos dos dibujos parece que el de la izquierda tienda a expandirse y a hacerse más
grande, todo lo contrario que en el de la derecha. Eso es debido a que el color oscuro
comprime la figura del medio. Estas técnicas las usaremos cuando queramos que una
parte de nuestra web quede cerrada o abierta.

Armonía y contraste

Armonía: Crear una gama de colores para nuestra web que este compuesta por colores
de la misma gama o tono. Por ejemplo, CLab es una web con colores armónicos, ya que
usa el mismo color y diferentes tonalidades del mismo.

Contraste: Combinar diferentes colores para crear una gama como, por ejemplo, claros y
oscuros, cálidos y fríos, etc.

Es obvio que en esta imagen cada casilla nos está expresando una idea diferente.

Significado del color

Esta es una de las cosas que más me apasionan del color, su significado. ¿Pero cómo un
color puede significar algo? Pues sí, aunque estos significados varían un poco según las
culturas, ya que por tradición es posible que el amarillo signifique mala suerte en
algunas partes y en otros no. Ésta es una recopilación de diferentes significados
extraídos de algunas páginas web.
Blanco .
Se halla en el extremo de la gama de los grises.. Es un color latente por su capacidad de
potenciar los otros colores vecinos. El blanco puede expresar paz, soleado, feliz, activo,
puro e inocente. El blanco es el fondo universal de la comunicación gráfica.

Negro .
Al igual que el blanco, también se encuentra en el extremo de la gama de grises. Es el
símbolo del silencio, del misterio y, en ocasiones, puede significar impuro y maligno.
Confiere nobleza y elegancia, sobre todo cuando es brillante.
Gris .
Simboliza la indecisión y la ausencia de energía, expresa duda y melancolía.
Los colores metálicos tienen una imagen lustrosa, adoptando las cualidades de los
metales que representan. Dan impresión de frialdad metálica, pero también dan
sensación de brillantez, lujo, elegancia, por su asociación con los metales preciosos.

Amarillo
Es el color más luminoso, más cálido, ardiente y expansivo. Es el color del sol, de la luz
y del oro, y como tal es violento, intenso y agudo. Suelen interpretarse como animados,
joviales, excitantes, afectivos e impulsivos. No es recomendable usarlo como color
principal de nuestra página, pues tiene demasiada fuerza y tiende a cansar al visitante.

Naranja
Posee fuerza activa, radiante y expansiva. Tiene un carácter acogedor, cálido,
estimulante y una cualidad dinámica muy positiva y energética.

Rojo .
Significa la vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del
fuego. Está ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía;
es exultante y agresivo.  El rojo es el símbolo de la pasión ardiente y desbordada, de la
sexualidad y el erotismo.

Azul .
Es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable.
La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres,
propios del verde. Expresa armonía, amistad, fidelidad, serenidad, sosiego... y posee la
virtud de crear la ilusión óptica de retroceder. Este color se asocia con el cielo, el mar y
el aire. El azul claro puede sugerir optimismo. Cuanto más se clarifica más pierde
atracción y se vuelve indiferente y vacío. Cuanto más se oscurece más atrae hacia el
infinito.

Violeta .
Es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y
podría representar también la introversión. En sus tonos más claros se vuelve un poco
triste, en los más oscuros representa grandeza.

Verde .
Es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el
color de la calma indiferente: no transmite alegría, tristeza o pasión. Cuando algo
reverdece suscita la esperanza de una vida renovada.

Marrón .
Es un color masculino, severo, confortable. Es evocador del ambiente local otoñal y da
la impresión de gravedad y equilibrio. Es el color realista, tal vez porque es el color de
la tierra que pisamos.
 

ESPACIADO Y COMPOSICIÓN
Llegados a este punto yo suelo recomendar que visiten muchos websites de calidad, y se
fijen cómo han montado la web, porqué han utilizado ese color ahí y no otro, cómo han
espaciado sus textos, etc... pero aún así hay algunas cosas que suelen ser básicas y
veremos aquí.

Deja que tu texto 'respire'

No se si es un término correcto decir que el texto 'respire', pero es la expresión que

utilizo cuando quiero que mi web sea legible. En estas dos imágenes de aquí abajo
podemos ver como una tiene el texto muy pegado a la imagen y su interlíneado es muy
bajo para el tamaño de letra escogido, haciéndolo confuso para la lectura. La otra
imagen en cambio, se lee perfectamente.

   
Este es un buen ejemplo de cómo hacer que nuestros textos no se vean compactados.
También es importante saber que el espaciado entre líneas suele ser un 20% superior al
tamaño de la letra, por ejemplo, para un tamaño de letra de 10 puntos pondremos 12
puntos de interlineado.

Colocando nuestros elementos

La posición de nuestros elementos en la pantalla es uno de los puntos más importantes a

la hora de hacer nuestro diseño, pues no es lo mismo colocar una imagen arriba que
abajo, con un texto al lado o sin el, que sea una imagen grande o pequeña y así infinidad
de detalles que dotarán a nuestra página de personalidad.
Un buen ejemplo de cómo componer una web con imágenes y texto adecuadamente
puede ser la página principal de Macromedia la cual usa eficientemente el espacio entre
líneas, y posiciona las imágenes por tamaño y relevancia.
En esta captura podemos ver como Macromedia ha utilizado una gran imagen para
mostrar un nuevo producto, y luego tiene pequeñas imagenes para embellecer y dotar de
detalles las partes con más texto.
Es importante colocar pequeñas imágenes cerca del texto, las cuales tendrán dos
funciones Primero que el usuario tenga una información visual sobre lo que va a leer,
atrayendo la atención del visitante hacia donde queremos, y segundo, hacer más
atractiva la página, pues, todo el mundo se hecha para atrás (normalmente cerrando la
página y maldiciendo varias veces) cuando ve una web que es sólo texto.

Qué nos dejamos en el tintero

Bueno, pues realmente muchas cosas, pero qué esperabas?? Como ya dije antes el
diseño gráfico es algo que tarda muchos años en aprenderse, pero con un poco de
esfuerzo podrás realizar bonitas webs en un par de años sin tener ningún tipo de idea en
lo referente al diseño. Verás como mientras vas practicando irás mejorando
paulatinamente y el día menos pensado visitarás una antigua web tuya con el
consiguiente susto y pensarás... ¿Pero cómo pude hacer algo taaan cutre?
Referencias:
http://www.newsartesvisuales.com
http://www.desenredate.com
http://www.weblogicnet.com/

Tutoriales relacionados

 Conectar Flex, PHP, MySQL y WebORB para novatos

 Tutorial de posicionamiento y layout en CSS
 Editando imágenes en Dreamweaver
 Creación de un lightsaber (Sable de luz) en Flash MX 2004
 Tipos de imágenes para internet