10. Planearás el estilo gráfico.

Escoger el estilo gráfico depende de lo que queremos ofrecer y el tipo de usuario que nos visita, para el aprendizaje resulta algo directo, claro y sencillo, para lo divertido necesita algo aleatorio, sorpresivo, ingenioso y cambiante por ejemplo.  Las imágenes altamente abstractas están muy lejos de ser representativas y llevan mensajes que debemos lograr que los usuarios asocien como por ejemplo los logotipos.

A veces es necesario combinar diferentes tipos de ilustraciones para lograr una mayor efectividad al mensaje.

9. Seleccionarás el recurso gráfico más adecuado.

Hay varios tipos de gráficos así mismo como formatos y por la cantidad de colores que presentan, podemos elegir entre una ilustración manual, un gráfico digital o una fotografía:

Ilustraciones

Las ilustraciones son elementos con opciones infinitas y se puede hacer a mano o en una herramienta de software. El mensaje que proyectan suelen ser más precisos que las fotografías porque podemos eliminar los detalles y las partes menos importantes, pero al final uno resulta más efectivo que otro dependiendo de las circunstancias, por ejemplo las fotografías suelen resultar mejor cuando hay que describir un acontecimiento o suceso.

Los gráficos pueden generar una mejor impresión que las palabras, ya sean simples líneas a complejas representaciones, la comprensión de materias complicadas a menudo puede perderse en un torrente de palabras pero quedan claras con ilustraciones explicativas auxiliadas por elementos verbales.

Una variante a destacar son los dibujos de líneas, que son interpretaciones de tonos sólidos y carece de tonos intermedios.

Fotografías

Las fotografías pueden venir a color, blanco y negro, escala de grises, en negativo, solarizado o sepia principalmente y suelen contener mucho más información que una ilustración. Como recurso gráfico son muy eficientes siempre y cuando vengan acompañados de un texto que explique el contexto ya que suelen contar con demasiadas posibilidades de interpretación dependiendo del tipo de usuario y de donde esté alojada. Las fotografías más atractivas son formales y tienen un buen encuadre.

8. Resaltarás las los botones

Un botón no solamente se distingue por su forma, posición o proporción, aún cuando le indiquemos al usuario de su función como tales. El lenguaje visual estándar nos indica que podemos darle una mayor fuerza de comunicación y función a un elemento clicable por medio de recursos gráficos como son:

Color: El color juega un papel muy importante para destacar un botón, pues el contraste es una de las características más importantes que necesita este elemento.  Un degradado que simula una dirección de luz real ayuda a darle volumen y hacerlo más atractivo.

Volumen: Un elemento con aspecto tridimensional, el cual sobresale de un fondo plano por medio de el color, brillo o por medio de biseles da un mensaje de que es algo presionable.

Sombra: Un recurso muy útil es añadirle sombra a un botón a fin de que parezca que flota en la superficie, sin embargo mal manejado puede hacerlo ver como un simple elemento de diseño.

Símbolo: Una señal como por ejemplo: una flecha en un círculo, nos avisa de que hay algo adelante, sin embargo puede que sea confundido con un letrero si no reforzamos su aspecto como botón.

Texto: El simple texto en un elemento geométrico que lo contrasta ya nos indica un mensaje pero al igual que con el símbolo necesita de un contexto o posición para ser reconocido como tal.

7. Destacarás la forma de los botones

Así como el hipertexto necesita destacar y enviar un mensaje de que es un elemento que al ser presionado nos llevará a otro sitio, los botones necesitan comunicar lo mismo. Si bien en el lenguaje común de la navegación estándar el hipertexto se encuentra subrayado, con otro color o invita a ser presionado, los botones deben destacar y ser reconocidos de inmediato por los usuarios como tales.

Cualquier gráfico que cuente con un enlace al ser presionado se convierte en un botón, sin embargo se distinguen conceptualmente de los mismos por su función y estrategia en la navegación.  Por lo que su forma debe ser lo más reconocible como algo clicable.  Entre más regular y proporcionado sea mas conserva su definición como tal, por ejemplo:

Por largo: Si mide más que su mismo alto a una proporción de hasta 4 veces menos aspecto tendrá de serlo, a menos de que se encuentre en un menú desplegable en “escalera” pues en conjunto todos vuelven a formar un cuadro más regular.

Por ancho o alto: Entre más delgado sea un botón más pierde su definición como tal, normalmente  no acostumbramos a utilizar botones de menos de un 50% de ancho que de largo.

Por posición: Un botón equilibrado se entiende más que  uno desequilibrado.

Por forma: Una figura geométrica que más se aproxime a un círculo, óvalo, cuadrado o rectángulo es más reconocible como botón que una irregular o deforme.

6. Diseñaras los fondos con mesura.

Casi siempre se nos antoja crear un fondo espectacular donde alojaremos el contenido general de un sitio Web pero aunque el fondo sea vistoso e interesante debemos evitar que provoque dificultades con la lectura o interferir con el resto del diseño.  Es mejor un fondo blanco que uno con imágenes estridentes o con animaciones intermitentes.

Los fondos con imágenes pequeñas en forma de mosaicos son mejor que uno grande, pues éstas últimas a veces tardan mucho en bajar y también porque el fondo de un dibujo suele ser difícil de leer a menos que el diseño esté muy estudiado. Lo que si resulta un error es usar un fondo con textura muy elaborado para después poner texto, lo mejor es optar por colores tenues o neutros, pues de no ser adecuado cansa la vista por su color o diseño.

5. Diseñarás con las imágenes.

Es importante plantearse como va a ser el diseño general del sitio Web para luego decidir cómo van a organizarse las imágenes dentro, así que si antes de empezar contamos con todo el material a incluir los resultados sin duda serán mejores. Una composición demasiado bien equilibrada, que no presenta nada fuera de lugar puede presentar una calidad admirable y sin embargo no despertar interés. Recordemos que las personas se sienten más atraídas por las imágenes irregulares que las regulares por lo que podemos dejar el color de fondo de la imagen igual o transparentar el fondo de la imagen.

Hay que evitar crear espacios atiborrados de material gráfico, así como demasiados adornos o barroco, entre más saturado menos atención le pondremos a los detalles. De ser posible hay que equilibrar los bloques de imagen con los de texto par obtener un peso visual.

Una opción para que los visitantes frecuente encuentren nuevos estímulos visuales es programar la página para que salga al azar imágenes alternas de características similares cada que sea visitado el sitio.

4. Organizarás el acomodo de cada imagen.

Si haces una mezcla de imágenes para algún listado procura de que se encuentren clasificados en grupos de semejanzas por calidad, estilo, tema u orden alfabético. La mejor manera de lograr un atractivo en tus páginas es colocar las imágenes en sitios estratégicos, verifica si tu audiencia prefiere que se inserten imágenes en el texto para descansar la lectura o si al contrario, interrumpe la lectura.

Como todo elemento Web, las imágenes también participan en la composición y diseño de un espacio, así mismo un gráfico se balancea visualmente con el bloque de texto y se equilibra con él.  Lo mismo sucede si es una imagen pequeña ante el bloque de texto siempre y cuando su color sea atractivo y más si su forma es irregular se puede equilibrar satisfactoriamente.

Una imagen mal colocada pierde poder, por ejemplo: abajo hacia la derecha puede resultar poco dominante ante otra que se encuentre arriba hacia la izquierda. Los gráficos que se coloquen por encima del título no deben de sobrepasar determinado tamaño y provoquen que el título no se vea.

3. Conocerás el correcto uso de los gráficos comparativos.

Las gráficas comparativas son muy apropiadas para describir de manera visual una cantidad, proporción o comparación de datos que de otra manera resultaría demasiado abstracta, además de hacer más amena la consulta de los mismos.

Existen muchos tipos de gráficos estadísticos que permiten que se asimile rápida y fácilmente muchos datos comparativos como columnas, barras cuadrangulares, cónicas o cilíndricas, líneas, anillos, áreas, circules o pasteles, dispersión, radial, superficie, superficies, burbujas, cotizaciones o gráficos que representan una cantidad.

Los de barra son apropiados para hacer comparaciones entre varios productos o entre características entre unidades individuales como países o precios.

Los de pastel son círculos completos que sirven para mostrar como se divide una cantidad en diferentes porciones, suelen ir cerrados o trozados.

Los de línea indican cómo fluctúa un valor dependiendo de los cambios de otros, se utiliza más comúnmente para mostrar como crece algo por cierto tiempo como tendencias o poblaciones. Los puntos se unen para formar una línea.

A pesar de su gran eficacia,  los gráficos estadísticos no llegan a reemplazar a las listas y tablas, que si bien son más difíciles de entender y comprender al mismo tiempo son la única manera de presentar muchos datos precisos en vez de aproximados.

Es mejor complementar los gráficos estadísticos con datos numéricos, en porcentajes o palabras que describan los detalles más importantes a mostrar, y hay que tratar de utilizar el menor número de filas y columnas para una mayor legibilidad.

2. Usarás la imagen para reforzar un mensaje.

Cuando colocamos una figura en el texto se pone en manifiesto que área hay que leer para obtener más información, esta penetración actúa como una señal para atraer al lector sobre el texto, si no hay una relación entonces se pierde el contexto y se convierte en puro adorno.

Si el texto empieza dentro de la foto para continuar fuera de la misma debes asegurarte de que no se interfieran, pues se trata de una buena técnica si tenemos un pie de imagen muy larga y establecemos un contacto directo entre la imagen y la foto.

Procura que los gráficos refuercen el mensaje del texto ya que “una imagen dice lo que mil palabras” por lo que se pueden dar múltiples interpretaciones si carece de contexto.  Tomemos e cuenta de que una imagen es redundante si tiene más información de la que se necesita, así que de ser necesario más vale editarla si este es el caso.

Para que la imagen tenga más importancia que el texto debes de ocupar un mayor espacio y colocarla más hacia la izquierda y arriba que las palabras o viceversa en caso contrario.

 

1. Comunicarás con tus imágenes.

Cada imagen provoca un sentimiento al espectador según el carácter simbólico de cada quién  así como también representan un equilibrio entre contenido e información, por lo que debemos utilizarlas de forma pertinente, no como simple ornamentación.

Entre más complejas sean las imágenes más aumentan el número de  interpretaciones, por lo que a veces es necesario explicar el concepto con el que se presentan pues no todas las personas obtienen el mismo mensaje o el mismo interés.

Pregúntate si hace falta llamar la atención hacia el mensaje por medio de figuras o basta con las palabras, esto nos ayuda para eliminar material que resulta superfluo.