Diseño de interfaces web

El color atrae la atención

El color tiene el poder de transmitir sensaciones. Es sabido que los rojos, amarillos y naranjas resultan estimulantes e inclusive irritantes, mientras que los verdes y los azules brindan una sensación de tranquilidad y sosiego.

Las propiedades de los colores (luminosidad, valor, temperatura y saturación), hacen que haya muchas variedades de colores y, por ende, muchas posibilidades de combinación.
El contraste entre elementos con diferencias en la luminosidad de los colores, puede verse muy claramente en la combinación del color blanco con el negro, ya que estos son los extremos de la luminosidad. El contraste por luminosidad es uno de los más empleados en el diseño de páginas web, fundamentalmente para destacar los textos sobre el fondo en el que se colocan. En la siguiente figura, podremos apreciar combinación de colores cuya diferencia radica en la luminosidad.

Cuando el contraste se produce entre colores complementarios, las diferencias son muy nítidas, aunque las diferencias que se producen son extremas, lo que hace que debamos emplear este tipo de contraste de color con sumo cuidado, porque se pueden producir estridencias que pueden dar problemas estéticos importantes al diseño en su conjunto.

Los colores se pueden usar en diferentes situaciones dependiendo de lo que queramos trasmitir.

Blanco: Es un color que representa frescura y limpieza, y al menos de que el contenido del sitio diga lo contrario, al utilizarlo expresaremos orden.
Negro: es un color poderoso y misterioso que incluso puede tener connotaciones negativas en ciertas culturas, pero que en la actualidad es muy utilizado en sitios que quieren dar sobriedad, manejando un tono elegante y que indica profesionalidad.
Rojo: El rojo generalmente esta relacionado con la pasión, pero se le puede dar otros usos ya se si se le da la tonalidad adecuada puede indicar peligro, urgencia y capta inmediatamente la atención del usuario.
Azul: Por su parte el azul es un color que representa estabilidad, sus tonalidades claras generalmente expresan creatividad, mientras que sus oscuros indican una presencia más fuerte pero sin dejar la tranquilidad.
Amarillo: El amarillo es un color más cálido, puede significar energía y juventud, ya que por lo general se le considera un color alegre y nos brinda la sensación de energía sin caer en el estrés o el peligro. Es decir, este color puede ser utilizado para recrear la sensación de positivismo.
Verde: Finalmente se encuentra el verde, un color que quizás no es tan utilizado como debería y que puede llegar a expresar seguridad, pero que generalmente se vincula con la naturaleza.

Contraste para administrar la atención

Se llama contraste a las diferencias que existen entre dos elementos relacionados y es uno de los principios de diseño web.
Una forma sencilla de destacar los elementos entre sí, es el empleo de variaciones en el contorno. Las formas irregulares o abstractas atraen más la atención visual que las figuras sencillas y geométricas.
Como decíamos, el contraste en color es otra de las posibilidades de contrastar objetos es a través del empleo de diferentes colores. Este tipo de contraste, bien empleado, da muy buenos resultados, pero también puede dar lugar a resultados desagradables si no se emplea con buen criterio.
La combinación de colores en diferentes elementos en una web no solo tiene la finalidad de embellecer el conjunto, sino que además posibilita destacar elementos. La combinación de elementos con colores fríos y cálidos es la forma más corriente de lograr el mencionado destaque.

El espacio en blanco para relacionar

El espacio en blanco es uno de los componentes de todo diseño gráfico y diseño web, con la misma importancia desde el punto de vista del diseño en su conjunto que el que tienen los textos, las imágenes y los videos.
Es común que quienes quieren tener una página web, piensen en economizar el espacio con que cuentan, colocando una gran cantidad de información en ella. Esto hace que se piense en el espacio en blanco como un desperdicio, por lo que muchas veces se rellenan los mismos o se minimizan. Como consecuencia de ello, la acumulación de información hace que la mayor parte de estos contenidos pierdan su visibilidad y sean difíciles de ver en un primer golpe de vista, algo que resulta muy importante teniendo en cuenta que los usuarios de las páginas web emplean muy poco tiempo en la localización de objetos.

Tipografía aplicada al diseño web

Las páginas web tienen como finalidad principal transmitir uno o varios mensajes al usuario de internet, para lo que debe emplear elementos adecuados para lograr este objetivo. Las imágenes y el texto son los elementos más empleados para la mencionada transmisión de ideas, aunque con la aplicación de nuevas tecnologías adquieren cada vez más fuerza otros tipos de elementos, como los sonidos y los videos. Se debe tener en cuenta que los navegadores y sistemas operativos soportan tipos de letras diferentes, por lo que será necesario establecer un tipo de letras y algunos suplentes.

Otro aspecto que influye en la legibilidad del texto en una página web es el uso de mayúsculas. Hay diseñadores web, generalmente novatos, que tienden a usar las mayúsculas como recurso para enfatizar textos en las páginas web. Para palabras sueltas es un recurso respetable, pero para frases o párrafos enteros, más que enfatizar dificulta la lectura por lo que el efecto se pierde.

Otros consejos

También para dar impacto sobre lo que el usuario esta leyendo o esta posicionado podemos hacer que la pagina cambia cuando pasa el ratón por encima de algo como cambiar el color de un botón antes de pulsarlo.
Más no significa mejor, esto es clave a la hora de hacer un diseño, puesto a querer ponerlo todo en un mismo lugar creara un caos y una gran cantidad de contenido innecesario.
Disminuir el ruido visual: La cantidad de ruido visual en una interfaz tiene un gran impacto en la complejidad percibida por el usuario, mantener el ruido visual al mínimo hará que una interfaz parezca más fácil y sencilla de usar. Las dos herramientas principales para reducir dicho ruido visual, son los espacios en blanco y el contraste.
Reutiliza elementos: La reutilización de elementos para diferentes propósitos tiene dos ventajas, la primera es que se requiere menor tiempo de desarrollo y la segunda es que se logra una interfaz de usuario más consistente mejorando la experiencia de la persona que va a utilizar el sitio.