-
Durante las siguientes lecciones, me gustaría introducirles al diseño gráfico
-
y a un conjunto de estrategias para ayudarte a comunicar visualmente con mayor eficiencia
-
Para empezar, demos una mirada a este ejemplo:
-
Un poco de texto no diferenciado
-
¿Qué debería de ser capaz de hacer tipográficamente para mejorarlo y cómo decidimos si lo hicmos bien?
-
Una de las cosas que podemos hacer es introducir algún espacio en blanco en el diseño;
-
y tal como Robert Bringhurst escribió, con espacio en blanco,
-
"Algún espacio debe ser ancho para lo que otro espacio debe ser mayor,
-
y algún espacio debe ser vaciado para que otro espacio pueda ser rellenado."
-
Por lo tanto, vaciemos algunos espacios y rellenemos algunos otros.
-
Y lo que podrá ver aquí es que añadiendo pequeñas zonas en blanco podremos reducir el diseño
-
de manera que aquellas partes más destacables queden agrupadas y se diferencien unas de otras.
-
Pero apuesto a que podemos hacer más.
-
Entonces, que más seríamos capaces de hacer aquí?
-
Exploremos la variación del uso de tipografías y en el contraste del tamaño para dar sensación de jerarquía
-
y como Edward Tufte lo describió, la información consiste en diferencias que hacen la diferencia.
-
Así que aquí hemos hecho algo añadiendo alguna escala y algún peso -
-
ya sabe, esta puede o no puede ser la invitación mejor diseñada del mundo, pero le da sentido
-
del tipo de mejora que puede obtener añadiendo variaciones tipográficas a su diseño.
-
Por supuesto usted no desea verse desbordado, pero me gusta mucho este ejercicio.
-
Yo lo saqué del libro de Jenifer Tidwell «Designing Interfaces»
-
el cual recomiendo enormemente y les traigo para mostrarlo en este vídeo.
-
Tengo dos copias pero lo recomiendo tan menudo
-
las tengo prestadas ahora mismo, así que tendrá que buscarlo.
-
A menudo, un buen diseño gráfico - como una buena actuación o unas buenas lentes -
-
pasa desapercibido porque el contenido llega claramente y sin ningún tipo de obstrucción.
-
Por supuesto, algunas veces nos damos cuenta de un buen diseño y una buena actuación
-
por su gusto o por su habilidad para comunicar una cierta idea.
-
Pero esto es diferente con un mal diseño y una mala actuación.
-
De un mal diseño nos damos cuenta cuando nos tropezamos con él.
-
Como nos ocurre cuando unas lentes están sucias, rayadas o no tienen la graduación correcta,
-
tenemos que echar un vistazo para que las cosas tengan sentido; y no siempre conscientemente -
-
algunas veces están ligeramente mal - será subsconscientemente, pero todavía seguimos entrecerrando los ojos
-
y, por lo tanto, gran parte del diseño se trata de hacer que la información que importa nos llegue con claridad.
-
Y para hacer esto, creo que hay 3 objetivos principales de una gran cantidad de diseños gráficos.
-
El primero de estos objetivos es guiar a las persona para transmitir la estructura, la importancia relativa y las relaciones.
-
El segundo objetivo consiste en configurar la fase de interacción para atraer a la gente,
-
ayudarla a orientarse y proporcionarles mecanismos para que profundicen.
-
Y el tercero es utilizar el diseño gráfico para expresar el mensaje de la información -
-
para darle algún significado y estilo y dar vida al contenido.
-
Piense en esto, me gustaría mostrar cuatro páginas de inicio de diferentes sitios web.
-
Esta es la del New York Times.
-
Google.
-
Craigslist.
-
y la de Webby Awards.
-
Y pienso que en todos los casos, cada una de ellas es realmente efectiva en el uso de herramientas de diseño gráfico,
-
algunas más obvias que otras.
-
Vamos a examinarlas otra vez. Esta vez voy a difuminar cada página
-
para destacar más la jerarquía y para restar importancia al texto actual.
-
Aquí tenemos el New York Times. Puede ver
-
que toda la jerarquía de la página es bastante clara.
-
Puede verse la cabecera,
-
la foto interesante para atraerte, una serie de noticias,
-
la navegación a la izquierda y otra navegación en la parte superior.
-
Aquí está la página de inicio de Google difuminada y el propio difuminado le dice algo sobre la prominencia:
-
Simplemente con un pequeño difuminado, la destacada barra de búsqueda y de navegación
-
desaparece en el fondo al igual que el resto de esa barra de navegación.
-
Pero esto está bien porque cuando la mayoría de la gente ve la pantalla probablemente tengan una buena idea de lo que tienen que hacer.
-
En un sentido, la parte más importante a destacar de la barra superior de navegación
-
es indicar la posibilidad de hacer click en otras etiquetas para obtener otras cosas.
-
Por otro lado, a pesar del difuminado el logo de Google se sigue leyendo alto y claro.
-
El minimalismo de esta página tan famosa hace que una web complicada parezca muy manejable.
-
Y combinado con ello, los colores primarios ayudan a enfatizar la facilidad de todo ello.
-
Como muestra de trivialidad, aquí está la página original de Google
-
de cuando Larry Page y Sergey Brin eran estudiantes de doctorado en la Universidad de Stanford.
-
Construyeron su primer disco duro con estas piezas de lego,
-
y esto bastante seguro de que los colores del logo de Google vienen de ahí
-
o fueron inspirados por esos legos.
-
Aquí está la página de inicio de Craigslist.
-
Mucha gente pensará que estoy loco creyendo que es un buen diseño gráfico.
-
Después de todo, parece que estuviera hecho en 1996
-
y, de hecho, es posible que así fuera, excepto por unas pequeñas actualizaciones en el contenido.
-
Otra razón por la que la gente suele criticar a Craigslist es que
-
hay gran cantidad de abreviaciones y otras cosas en ella
-
que, por lo general, pueden hacerlo poco elegante o torpe o diseñado sólo para expertos.
-
Pero muchos de los usuarios de Craigslist son usuarios recurrentes, y lo que ves aquí es
-
que en la versión difuminada hay una gran cantidad de información bien jerarquizada que se transmite.
-
Otra vez más, podemos ver el título arriba en la esquina superior izquierda.
-
Podemos ver el calendario.
-
Podemos ver cómo la administración está totalmente separada en la parte izquierda.
-
y en el centro podemos ver una serie de grupos de contenido categorizado
-
y una navegación diferente en el lado derecho -
-
En la versión no difuminada podemos ver que es para ciudades.
-
Veamos ahora la página de Webbie Awards.
-
Al igual que todas estas cuatro páginas se puede ver cómo se utiliza muy poco el color pero de forma muy eficiente.
-
La mayoría de la página está en blanco y negro.
-
Las piezas principales en color están en la parte inferior izquierda -
-
hay un bloque de texto rojo, que te invita a visualizar los últimos Webbie Awards.
-
Y en la parte superior izquierda, podemos ver un poco más de color para las redes sociales que enlazan con el sitio web
-
y, otra vez, vemos un elemento de navegación muy importante en la parte izquierda,
-
el título en la parte superior izquierda, la cabecera en el centro, y el contenido bajo él,
-
y luego tenemos una nueva navegación por la parte superior.
-
Cuando piense en ello, todas estas cuatro páginas
-
que incluyen algunos de los sitios web más visitados de la web, están usando herramientas gráficas muy simples
-
para ser capaces de transmitir la organización y la jerarquía y donde dirigir su mirada en la página.
-
Utilizan tipografías, utilizan plantillas, y utilizan colores.
-
Y todo ello están en herramientas muy simples y sencillas.
-
Lo que constantemente me asombra es el poder que está disponible con esas herramientas.
-
Juntándolo todo permite guiar, marcar el ritmo y aportar el mensaje del que hablábamos al principio.
-
y todo ello ayuda a la gente a leer, navegar y dar sentido al mundo de la información.
-
Hay un tablero de juego, un compañero que se anuncia con el eslogan,
-
"Un minuto para aprender, una vida entera para dominar."
-
Y eso aplica totalmente al diseño gráfico.
-
Puede empezar a hacer uso de estos principios inmediatamente, y con suerte estos vídeos pueden ayudarle a empezar.
