adsense

XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología.

El diseño gráfico en la web

El diseño gráfico es una disciplina que abarca muchos soportes creativos.
En este artículo vamos a centrarnos en la web. El diseño gráfico aplicado a la web.
Seguramente los conceptos que comentaremos compartan ciertas similitudes con el diseño publicitario, el diseño editorial, etc...

Empezaremos hablando de la tipografía.

La tipografía es el arte a la hora de elegir y usar ciertos tipos de fuentes para los textos, los números o los símbolos.

Los parámetros clave son la fuente, el tamaño de la fuente, y el espacio entre líneas. Además podemos usar el color, la negrita, la cursiva entre otras cosas.

Existe una clasificación histórica de las fuentes:

La fuente egipcia (serif), que es más apropiada para marketing o promoción.

La fuente transicional (serif), que es más apropiada para textos académicos o legales.

 La fuente geométrica (sans-serif), que es más apropiada para ciencia o arquitectura.

La fuente humanística (serif), que es más apropiada para periodismo o historia.

La fuente humanística (sans-serif), que es más apropiada para educación o finanzas.

La fuente transicional (sans-serif), va perfecta para tecnología o transportes.


Y otra clasificación es en función de los "serifs", que son los pequeños trazos rectos que tienen algunas fuentes en sus terminaciones verticales. Las fuentes de tipo "serif" son cómodas para la lectura de textos, por eso se utilizan habitualmente en libros, periódicos y revistas.

En general no se recomienda mezclar varios tipos de fuentes, aunque en ciertas ocasiones es una buena idea de diseño combinar dos tipos de fuentes de la misma clasificación: Serif y Sans Serif.

Por ejemplo podríamos combinar un titular con Serif, y el subencabezado con Sans-serif.
Una podría ser Times News Roman y la otra una Helvetica porque son ambas transicionales y encajan bien.

Para fijar el tamaño de la fuente del contenido general podemos poner un tamaño de 16px, y el encabezado habría que ajustarlo a un 300%.

El resto de titulares deberían estar entre medio de esos dos valores.
Por ejemplo:
el subencabezado a 150%
el menu de navegacion a 100%
y el autor a un 75%

El espacio entre lineas no debe ser muy elevado porque implica que el ojo tiene que hacer más movimientos para poder leer un texto. Por otro lado un texto muy junto provoca un efecto de apiñamiento que también dificulta la lectura.

Para establecer una medida correcta podemos poner un valor de 1.5.

La longitud de las palabras en una linea también es importante.
Un texto muy corto o muy largo no es ideal. Lo ideal es 50-70 carácteres por linea, esto se puede controlar en CSS con el atributo: max-width.

Hay que evitar palabras huérfanas en los textos, o líneas solas en parágrafos ya que dificultan la lectura también.

Los Colores

En la teoría del color tenemos dos modelos:

CMYK, que tiene cyan, magenta, amarillo, y estos juntos harían el negro.

RGB que tiene rojo, verde, azul, y todos ellos formarían el blanco.

El modelo RGB se basa en la reflexión de la luz, y el CMYK en la absorción de la luz.

Los humanos vemos el color en términos de matiz, saturación, y intensidad de luz.
El matiz va de 0 grados (rojo) a 360, la saturación va de 0 a 100% y intensidad de luz también.

La luz al 50% es el color mas vibrante posible, si añadimos luz, vamos hacia blanco, y si quitamos vamos hacia negro.

El modelo HSL se puede representar como un cilindro tridimensional.
El matiz se mueve en la tapa circular del cilindro, la saturación se mide desde el centro del cilindro hasta toda la longitud del radio, de 0 a 100. Y la intensidad de luz va del 0 desde el negro hasta la altura del cilindro máxima que es el blanco.
Se suele representar con un circulo y un barra lateral la lado para indicar la luminosidad.

Un esquema de color es un conjunto de 4 o 5 colores para formar una guía de estilos de la web.
Primero se suele escoger un color base, sabiendo que cada color nos muestra varias emociones, y a partir de ese se generan los otros.

Un esquema monocromático es el que usa el mismo matiz para toda la gama y solo varía la intensidad de luz y la saturación.

Un esquema análogo aumenta poco a poco el matiz en toda la secuencia de colores, pero no difiere más de 40 grados del color base.

Un esquema complementario usa un matiz y su opuesto (180 grados) variando la intensidad de luz y el brillo.

Habitualmente los colores se clasifican en:

cálidos: rojo, naranja y amarillo
fríos: verde, azul, lila.

Cada color implica ciertas emociones, históricamente son:

el rojo es un color de excitación, pasión, calor.
el naranja es calidez y vitalidad
el amarillo es optimismo y creatividad
el verde es serenidad o salud
el azul es seguridad, verdad, estabilidad
el lila es espiritualidad, inteligencia, riqueza
el rosa es juventud
el marrón implica durabilidad, o clase
el negro implica poder, drama
el blanco simboliza simplicidad y claridad

Aunque todo esto no es algo fijo y depende de la cultura, y de las tendencias.

La composición

Habitualmente nuestra cultura lee de izquierda a derecha y de arriba a abajo, así pues ese será el esquema general de la web.
Posicionaremos nuestro logo o marca en la parte superior izquierda de la pantalla.

En el caso de los menús de navegación, se pueden ubicar horizontalmente o verticalmente, en la parte superior, o en la parte izquierda.
Después el contenido principal se ubicará debajo del menú superior, o a la derecha del menú lateral.

El contenido secundario, debería ser más pequeño y ubicado en el lateral. Ahí tiene cabida el contenido extra, anuncios, etc... Aunque también se podría poner debajo del contenido principal en forma de bloques verticales.

Una cosa importante es ubicar bien la direccionalidad que nos sugieren las personas o objetos en las fotos. Si ponemos imágenes de personas, su postura tiene que hacernos mirar al contenido, no a fuera de la pagina.

Y por ultimo debajo de todo ubicaremos el pie de página, donde el usuario puede encontrar enlaces directos a ciertas páginas de la web.

Se suele organizar los elementos en una rejilla de filas y columnas. Habitualmente se ubica el contenido por un bloque de 12 columnas, 2 bloques de 6 columnas, 3 bloques de 4 columnas, 4 bloques de 3 columnas, etc...
Esto nos encaja con el diseño web utilizando Bootstrap. Pincha aquí para acceder al artículo sobre Bootstrap.

También es importante dejar suficiente espacio en blanco entre elementos de la página para no dar la sensación de abarrotado y ofrecer comodidad al usuario a la hora de consumir el contenido.





Valora este artículo del blog:
Imágenes vectoriales con SVG
El mejor truco de marketing para vender iPhones
 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Viernes, 20 Octubre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha