Con estética no nos referimos sólo, a lo bello, según el concepto clásico, sino al orden, al equilibrio, a la comprensión de mensaje que queremos transmitir con nuestro diseño.
Lo cierto, es que la mayoría interpreta que el diseño es hacer que nuestras páginas sean visualmente bellas o atractivas, 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
- Color (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 nos vale).A la hora de trabajar con nuestros textos podemos separar en dos grupos, títulos y cuerpos de texto o contenidos.
1*Títulos:
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
Diseño web
Diseño web
Diseño web
Diseño web
2*Contenidos:
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:
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.
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, neutralidad 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 profundidad. 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
f
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 recomendaría que visitemos muchas web´s de calidad, y analicemos cómo están estructuradas, 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.Claridad:
Todos hemos oído decir que el texto 'respire', es el concepto que que se utiliza para expresar que la 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, haciendolo confuso para la lectura. La otra imagen en cambio, se lee perfectamente.
La Composición
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 Armani, la cual usa eficientemente el espacio entre líneas, y posiciona las imágenes por tamaño y relevancia.
WEB DE ARMANI
- En esta captura podemos ver como Armani ha utilizado una gran imagen para mostrar un nuevo producto, y luego tiene otras con un tamaño menor para complementar tanto estética como funcionalmente la web.
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 cuando ve una web que es sólo texto.
Conclusión
Como ya dijimos antes, el diseño gráfico es algo que tarda muchos años en aprenderse, pero con un poco de esfuerzo podremos diseñar webs de calidad antes de lo que habíamos imaginado, avanzando a grandes pasos, a pesar de no contar con ninguna experiencia ni conocimientos previos.Veremos como mientras practicamos y realizamos los ejercicios paulatinamente iremos experimentando progresos, hasta que un día revisemos los primeros trabajos y notaremos gran diferencia en conceptos que hemos asimilado sin casi darnos cuenta.
