Diseño para no diseñadores


Actualizado 22-11-16
Esta breve guía de diseño para no diseñadores es un artículo original de Daniel Higginbotham, traducido con su permiso. Lo he enviado un par de veces para personas que necesitaban alguna ayuda con sus diseños, pero llegó un momento en que necesitaba tenerlo en español. Por esto me puse en contacto con su autor, que amablemente permitió esta traducción que ahora puedes leer.

 

post_dispersium_diseño Si eres como la mayoría de la gente, quizá te sientes como un niño cuando se trata de diseño visual. En ocasiones tienes la idea de lo que quieres, pero lo no sabes como desarrollarla y llevarla a cabo. Esta guía te ayudará a comunicarse a conciencia. Mostrando cómo crear diseños que resulten fáciles de entender y atractivos.

post_diseño Además de como herramienta, espero que esta guía te inspire. Una de mis frases favoritas es: “Abro los ojos y veo el paraíso.” ¡Qué gran regalo es la visión! ¡Qué increíble manera de conectarse con el mundo que nos rodea y con los demás! Tengo la esperanza de que esta guía te permita comunicar con más creatividad y mayor control.

1.-¿Qué es un Diseño limpio?

Echa un vistazo a los dos carteles de abajo. ¿Cuál es más atractivo? ¿Cuál se ve más limpio?

Cartel de escuela de aikidocartel de escuela de aikido, mejoras de diseño
Si el de la derecha te ha parecido más limpio, entonces – ¡Genial! He conseguido trasmitir lo que quería. Pero, ¿qué significa “verse más limpio”?

1.1.- Diseños limpios: Reducir el esfuerzo necesario para encontrar información

Aquello que estés creando -un folleto, un curriculum vitae, una página web, una invitación a una fiesta- tiene como objetivo básico transmitir la información que le interesa a tu audiencia, y debe ayudar a tu audiencia a responder preguntas como “¿Es este documento el que estoy buscando? ” y “¿Qué explica el cuadro de texto?” y “¿Obtengo lo que esperaba? Por ejemplo, el cartel de Aikido ayuda a responder: “¿Sobre qué esta informando?” y “¿Cuándo es?” y “¿Dónde está?”.

Las dos versiones del folleto proporcionan la misma información. El de la derecha, sin embargo, hace que sea más fácil para el espectador encontrar la información.

Luego, ese folleto está limpio, ya que ayuda a la gente a encontrar y consumir la información que contiene con menos esfuerzo consciente. Sus cualidades visuales están diseñadas para que permitan, al pensamiento visual del cerebro, hacer suposiciones correctas sobre cómo se organizan los diferentes bloques de contenido, y lo que es relevante.

Esto es deseable porque el pensamiento visual es mucho más rápido que el pensamiento lógico consciente que se desarrolla paso a paso. Por ejemplo, si quiere entender las principales ideas del texto de los folletos de Aikido, tardarías mucho más tiempo y sería más tedioso utilizar el folleto “desordenado”. Puede verlo por tí mismo mirando el texto a la derecha.

Para responder a la pregunta “¿Qué es el diseño limpio?” con menos palabras: Un diseño limpio se apoya en el pensamiento visual para que quien lo lee pueda satisfacer sus necesidades de información con un mínimo de esfuerzo consciente.

1.2.- Necesidades de información

Institución de frenología

Si, este Instituto existe realmente.

Las personas tenemos las mismas necesidades básicas de información cuando miramos un documento:

  1. Decidir lo que es relevante. ¿Dónde quiero poner especial atención?
  2. Obtener una visión general. ¿Cuáles son las ideas principales? ¿Qué es más importante?
  3. Comprensión básica. “¿Qué explica el texto?”
  4. Recuperando datos enterrados. Recuerdo algo acerca de un orangután… ¿dónde fue eso?
  5. Encontrar datos que se puedan procesar. ¿Cómo realizo esa conexión?

Las necesidades de información de una persona por lo general evolucionan más o menos en el orden indicado anteriormente. Por ejemplo, si alguien está mirando un folleto, su proceso de pensamiento podría ser algo así:

  1. ¿Acerca de qué es este folleto? Hm … parece que se trata de la frenología. Necesito un frenólogo!
  2. ¿Qué servicios ofrecen? ¿Están certificados? ¿Están por la zona? Cielos – sí, sí y sí!
  3. ¿Cómo puedo ponerme en contacto? Dios, está el número de teléfono! Voy a llamar cuando llegue a casa.
  4. (Más tarde, en casa) Dónde estaba ese número ..

Es importante recordar que no lo estás diseñando para saberlo tú, que ya conoces la información. Lo estás haciendo para ayudar a otra persona a encontrar la información que necesita.

1.3. Pensamiento Visual

La información se transmite organizando los elementos en relación a los demás. La información es comprendida de inmediato, de manera consciente, por la gente que ve el diseño. Esto es genial si las relaciones visuales son evidentes y precisas, pero si no lo son, tú público va a confundirse. Van a tener que examinar cuidadosamente tu diseño, ir y venir entre las diferentes partes para asegurarnos de que entienden.

Colores y texto

Si quieres ver de lo que hablo, trata de decir el color de las palabras de arriba. Por ejemplo, la primera palabra en “verde”. Ahora, trata de decir las palabras en sí. ¿Aún te da vueltas el cerebro?

Es más difícil discernir el color de cada palabra del significado de la palabra en sí, debido a que nuestro cerebro determina automáticamente el significado semántico de la palabra. Esto entra en conflicto con la identificación del color de la palabra, un proceso que no es automático. Nuestros cerebros entonces deben resolver las interpretaciones contradictorias de los estímulos visuales, un proceso que requiere mucho trabajo (Esto se conoce como el Efecto de Stroop).

Al crear un documento, elimina estos conflictos entre significado percibido de forma automática y el significado real. El resto de esta guía se dedica a hacer precisamente eso, explicando tres características visuales: tamaño, proximidad y alineación. También explicará una herramienta valiosa: la eliminación. Pero antes de eso …

1.4. Lo más importante que hay que recordar:

La causa fundamental del desorden de un diseño son pequeñas diferencias, no intencionadas entre los elementos. Esto hace que el procesamiento visual del cerebro falle. En primer lugar, tu cerebro tiene que determinar si realmente existe una diferencia visual. Entonces, se tiene que determinar la importancia de esta diferencia. Debido a que las pequeñas discrepancias en realidad no significan nada, se termina perdiendo la capacidad intelectual de tu audiencia. Hay que lograr un estilo visual consistente, en que los elementos relacionados son de aspecto similar entre sí e inequívocamente diferentes de los demás.

Círculos y contrasteEsto se puede ver en la imagen de la izquierda. En cada grupo, un punto negro es diferente en tamaño y un punto verde se diferencia en el color (bueno ya no es verde en el conjunto inferior, pero se ve el contraste). Mediante el uso claro, contraste intencional, es más fácil distinguir los diferentes tipos de elementos en su diseño. Eso hace que sea más fácil encontrar información. Y eso es lo que hace que el diseño parezca limpio: te ayuda a encontrar lo que buscas.

2.- Tamaño

Echemos otro vistazo a los folletos de Aikido:

Cartel de escuela de aikidocartel de escuela de aikido, mejoras de diseño
¿Cómo utilizan el tamaño de los textos? ¿Cómo contribuyen (o no) las diferencias para comprenderlo?

Hay dos diferencias principales en cómo se utiliza el tamaño entre los dos diseños. En primer lugar, el contraste entre el texto del encabezado y los datos es mucho mayor, el texto del encabezado es mucho más grande. En segundo lugar, el tamaño se utiliza de forma consistente entre elementos similares.

2.1. Usar conscientemente el tamaño para marcar el rol

aikido con áreas destacadasEstas mejoras sirven para revelar claramente las funciones o roles de las diferentes partes del texto. El diseño mejorado deja claro lo que es texto de cabecera y lo que es texto de detalle. Incluso si el texto estuviera en otro idioma, seríamos capaces de diferenciar los encabezados de los detalles.

¿Se puede decir lo mismo de la original? Cuenta con ligeros cambios en el tamaño de la fuente entre un bloque de texto y el siguiente, y no hay dos bloques , son muy parecidos.

Por ejemplo, el bloque que comienza con “Por favor, venga y visítenos” es ligeramente más pequeño, pero en cursiva y negrita. ¿Se puede fácilmente decir lo que es texto de cabecera y lo que es texto de detalle?

2.2. Los roles reconocibles ayudan a los usuarios a encontrar la información

¿Por qué es importante que estos roles (en este caso, entre cabecera y detalle) sean obvios? Hacer estos roles visualmente distintos ayuda a la gente a encontrar la información que necesitan. Nos basamos en las cabeceras para ayudarnos a conseguir una idea de lo que trata el documento. También las usamos para identificar los detalles que más nos interesan. Al mismo tiempo, podemos prestar menos atención a las cabeceras cuando estamos leyendo el texto de detalle.

Usar el tamaño para distinguir claramente las funciones de los diferentes tramos de contenido ayuda a las personas a dirigir su atención de manera eficiente. Saben en qué concentrarse y qué ignorar, dependiendo de lo que están buscando.

Se puede ver la misma idea de trabajo en un supermercado. Los carteles del pasillo actúan como cabeceras: son cortos, fácilmente perceptibles, y están destinados a ayudar a encontrar la masa de brownie que por alguna razón se te antojó a las 2:00 am.

2.3. Resumen del Tamaño

Identifica las función de los elementos visuales.
¿Qué funciones desempeñan los diferentes bloques de texto? ¿Qué preguntas ayudarán a responder? Los encabezados deben responder a preguntas como “¿qué es esto?” y “¿dónde está la información de contacto?”.

Coherencia entre el tamaño de los elementos.
Los encabezados deben ser similares a otros encabezados. Los textos de detalle deben ser similares a otros textos de detalle. Las pequeñas variaciones en el tamaño son confusas, debido a que el cerebro tiene que averiguar si las diferencias son significativas.

Proporcionar un fuerte contraste entre elementos con diferentes roles.
Esto ayuda a las personas a identificar fácilmente los diferentes tipos de contenido del diseño, y les ayuda a encontrar la información que necesitan.

3. Proximidad

A continuación, echa un vistazo a los gatitos:

kittens

En el conjunto de la derecha, ¿reconoces inmediatamente que hay dos grupos de gatitos? ¿Qué hay de la colección de la izquierda, se agrupan los gatitos?

3.1. Elementos colocados cerca uno del otro formando grupos

Cuando vemos a los gatos (o cualquier otro elemento visual) colocados estrechamente entre sí nuestro cerebro inmediatamente asume que forman un grupo que comparte un concepto unificador. Los de la derecha están agrupados por color: grises en la parte inferior, de otros colores en la parte superior.

Al agrupar contenido relacionado de forma visual ayudas al usuario a encontrar rápidamente la información que necesita. Para evitar confusión y frustración, los elementos relacionados deben estar agrupados. Esto suena obvio, pero es fácil de olvidar.

Los ejemplos de esto abundan. En cuanto a mí, tengo el hábito inconsciente de soltar lo que tenga en la mano en cualquier sitio. Una vez dejé una lata abierta de comida para gatos en un armario entre montones de tupperware. Más tarde fue difícil encontrar  la comida para gatos, ya que no estaba en las proximidades del plato del gato o de cualquier cosa remotamente relacionada con la alimentación de gatos.

Sé lo que estás pensando: “Eso es asqueroso ¿Por qué incluyes esa historia?” Te diré por qué: Es para lo pienses dos veces antes de un mal uso o abuso en la proximidad de elementos en tus diseños.

3.2. Asegúrate de que el agrupamiento es obvio

Echa un vistazo a las fotos debajo:

Perritos calientes

En el grupo de izquierda, realmente no se puede decir si es el pie de una foto o el encabezado de la siguiente. ¿Quién tiene una relación complicada con los perritos calientes? No se sabe muy bien. Tal vez se puede adivinar en base a sus expresiones faciales y en tu propia experiencia con los perritos calientes.

En el grupo de la derecha, sin embargo, se puede ver exactamente a qué foto se aplica la leyenda.

La lección es que debe dejar mucho más espacio en blanco entre los elementos no relacionados que entre los elementos relacionados con el fin de hacer que las agrupaciones lógicas sean claras visualmente.

3.3. Resumen de proximidad

Coloca los artículos relacionados cerca uno del otro.
Nuestro cerebro visual supone que los objetos colocados cerca uno del otro forman grupos relacionados lógicamente.

Asegúrate de que la agrupación es evidente.
Pon suficiente espacio en blanco entre los grupos para que quede claro qué elementos se agrupan en realidad. De lo contrario, la gente tiene que molestarse en examinar de cerca el diseño para averiguar qué va con qué.

4. Alineación

La alineación es crucial para dar a tus diseños un aspecto limpio y para transmitir organización. Desajustes leves resultan confusos y ensucian. Por otro lado, el uso de las alineaciones con fuertes contrastes puede hacer el diseño más interesante y atractivo.

La alineación es una de las características que es fácil pasar por alto: los novatos no suelen prestar ninguna atención consciente a la misma. Sin embargo, es posible cambiar el carácter de su diseño cambiando la alineación.

4.1. Utiliza la alineación para que se vea limpio

Hora de un ejemplo! Observa!

alineacion de textos: ejemplo

Los ligeros desalineamientos en el ejemplo de la izquierda hacen que se vea descuidado. Si hay una cosa que deberías saber ya, es que las pequeñas diferencias visuales no intencionales son como arena en el motor de su cerebro visual.

Nuestros cerebros esperan que el contenido relacionado se alinee perfectamente. Si hay algo que está un poco fuera de lugar, nuestro cerebro asume que hay una razón y trata de encontrarla. La última línea del anuncio (“Trapping hands…”) está fuera de lugar, y nuestros cerebros buscan un motivo. Cuando no encuentran uno, envían pequeñas cantidades de sustancias químicas que inducen al mal humor que nos hacen considerar el anuncio descuidado.

El texto que emplea la alineación central no se ve mucho mejor. Para ser justos, no está completamente centrado, pero incluso si lo estuviese, se ve mal. Centrado da al texto bordes irregulares a izquierda y derecha, que hacen que el texto se vea peor.

En general, la gente que no ha leído esta guía es especialmente propensa a centrarlo todo. Esto se puede ver en el folleto de aikido original.

A menudo, la mejor opción es utilizar la alineación a izquierda o a derecha. Puedes ver la alineación a la izquierda en el ejemplo de la derecha de publicidad “Acatemy of Evil”. No es para ganar ningún premio, pero sí se ve mejor que los otros dos anuncios.

4.2. Utiliza la alineación para que se vea chulo


Puedes hacer diseños más interesantes usando intencionalmente diferentes alineaciones. Echa un vistazo a la imagen de arriba.
Los titulares de “A Checklist for Content Work” y “CSS Floats 101” están centrados, al igual que sus subtítulos. Por el contrario, el titular de “Content-tious Strategy” está alineado a la izquierda.

Esta diferencia sutil en el centrado ayuda a distinguir el contenido en la columna principal, lo que indica que es más importante que el contenido en la columna de la derecha. Hay otras características visuales, también. Por ejemplo, los titulares en la columna de la izquierda son un poco más grandes y la columna es más ancha. Aún así, la alineación central es un buen toque.

Por cierto, este ejemplo es una captura de pantalla de la Web A List Apart. Esta página muestra un diseño excelente, y se puede aprender mucho con sólo mirarlo.

4.3. Resumen de alineación

Evita leves desajustes:
Los desajustes leves dan sensación de diseño sucio. Debido a que el cerebro piensa que las diferencias visuales significan algo, un desvío en la alineación desperdicia esfuerzo tratando de averiguar su significado.
Romper el hábito de alinear al centro:
La alineación central a menudo da una impresión mucho “más débil” que la alineación izquierda o derecha. Es especialmente complicado cuando hay muchas líneas de texto.
Experimento con contrastes en las alineaciones:
Usar de manera consciente las diferentes alineaciones en el diseño puede servir para que se vea más interesante. También puede hacer que sea más fácil para las personas encontrar la información, ayudando a distinguir las secciones separadas.

5. Eliminación

A menudo, la gente agrega líneas adicionales, cajas, bullets (los círculos a la izquierda en las listas no numéricas) y otros elementos visuales innecesarios para transmitir información que se entiende mejor mediante tamaño, proximidad y alineación. La inclusión de estos elementos hace que el trabajo del cerebro de tu usuario sea más difícil, ya que tiene que entender la importancia de estos elementos. Por ejemplo:

Cartel de escuela de aikidocartel de escuela de aikido, mejoras de diseño

Ah, sí, nuestros carteles de aikido. ¿Ves como el volante original tiene un cantidad de líneas separadoras? Encierran el espacio y dividen las secciones de izquierda y derecha. El resto de las líneas separan subsecciones.

Todas las líneas son absolutamente innecesarias. La proximidad y la alineación proporcionan a nuestros cerebros visuales suficiente información para distinguir los diferentes bloques de contenido.

Por lo general, la gente añade estos elementos visuales innecesarios, porque el diseño ya está abarrotado. Es como cuando estás en un bar y la gente alrededor está hablando en voz alta, entonces empiezas a hablar más alto, los demás hablan más fuerte, y así sucesivamente hasta que cada uno se desmaya o se va a casa (con dolor de cabeza).

La solución no es añadir más ruido al diseño. En su lugar utiliza lo que has aprendido aquí (tamaño, proximidad y alineación) será suficiente para que el diseño sea un placer para la vista.

6. Aprender Más

¡Hay mucho más para aprender! Color, tipografía, armonía, equilibrio, simetría, ritmo – la lista sigue y sigue, y todo es divertido. La mejor manera de realmente aprender diseño, sin embargo, es practicando.

6.1. Observando y haciendo

Uno de mis pasatiempos favoritos es analizar el diseño visual de las cosas que encuentro en la vida cotidiana. Loas cartas de restaurante son probablemente mi objeto de diseño favorito para analizar: ¿es fácil decir que precio va con qué? ¿Es fácil encontrar el plato que yo quiero?

También es divertido mantener un ojo en los diseños producidos por la gente común. Básicamente cualquier cosa que veas en un tablero de corcho público…

Te recomiendo que hagas uso de esta práctica. Pregúntate a ti mismo lo que harías de manera diferente. ¿Podrías hacerlo más limpio? ¿Qué le quitarías? Puedes comenzar con este sitio web, también. ¿Cómo podría ser más claro? ¿Podrían mejorarse el diseño que muestro? (te aseguro que sí).

También se puede hacer una crítica del trabajo de los compañeros de trabajo, o que critiquen el tuyo. Si tienes tiempo, trata de rediseñar su trabajo para ver si puedes hacer que se vea más limpio y claro.

6.2. Bibliografía adicional

Otra gran manera de aprender más es leer libros de diseño. A medida que aprendas más conceptos de diseño, serás capaz de identificarlos en otros diseños y aplicarlos en los tuyos propios. ¡Diversión!

A continuación muestro una lista con algunos libros útiles para principiantes.
Universal principles of designPrincipios Universales de Diseño
por William Lidwell, Kritina Holden y Jill mayordomo
Uno de los mayores retos en el aprendizaje de una nueva disciplina es aprender el vocabulario. Este libro le da los nombres de 125 conceptos de diseño, con grandes descripciones textuales del concepto y un montón de ilustraciones. Su contenido es conciso y atractivo al mismo tiempo.
Lo mejor de este libro es que se presta a la lectura aleatoria. Puedes abrirlo por cualquier página y aprender algo nuevo.


Non designers designer bookDiseño para no diseñadores
por Robin Williams
Este fue el primer libro de diseño que leí. Me abrió los ojos al mundo del diseño, por lo cual estoy muy agradecido. Robin cubre algúnos material que cubro aquí, pero de una manera diferente.

El libro también trata de tipografía, y sigo pensando que es la mejor guía para principiantes. Vale la pena sólo por eso. Probablemente puedes encontrar una edición anterior por un par de dólares.


Dont make me thinkNo me hagas pensar
por Steve Krug
Se trata de un libro de rápida y fácil lectura sobre usabilidad web. Realmente hizo que comprendiera que en el diseño, no se trata de mostrar nuestra capacidad creativa, se trata de satisfacer las necesidades de los usuarios.
Es una herramienta imprescindible para los desarrolladores web, pero creo que casi todo el mundo le resultaría interesante.


Visual thinkingPensamiento Visual para el Diseño
por Colin Ware
Si estás interesado en la mecánica subyacente de la percepción visual y la forma de aplicarlo al diseño, este libro es para tí. La discusión científica de diseño te guiará, a nivel más profundo, por diferentes técnicas y los principios de trabajo.
Es necesario un grado de familiaridad con los conceptos de diseño, pero no dejes que esto te pare, ¡sobre todo ahora que has leído esta guía!

Aquí están algunos enlaces adicionales que he agrupado:
Los elementos del estilo tipográfico aplicado a la Web
Historia del Diseño Gráfico

7. Conclusiones finales

Espero que hayas encontrado esta guía informativa y entretenida. Más que eso, espero que te sientas más creativo y confiado la próxima vez que vayas a crear cualquier forma de comunicación visual.

Este sitio esta hecho de forma gratuita. Me encanta el diseño, y quiero compartir ese amor con el mayor número de personas posible. Si este sitio web ha sido para ti, compártelo con los demás ;) Me hace feliz saber que mi trabajo, de alguna humilde manera, ayuda a la gente. Me encantaría escuchar cualquier comentario, ya sea a través del correo electrónico ,Twitter (@ nonrecursive) , o en el foro. Si tienes alguna pregunta o crítica, me encantaría saberlo también.

Feliz diseño!

8. Agradecimientos

Mucha gente se tomó un momento para dejar sus comentarios sobre esta publicación, les estoy muy agradecido. ¡Aquí están!
• Pat Shaughnessy
• Alex Rothenberg
• Daniel Rodríguez
• Jess Bulu
• Lea Downing
• Su Jones
• Chris Leyes
• Nicole Rose
• Nadir Ait-Laoussine
• Zed Shaw
• Chad Wegner

Un artículo original (ver original en inglés) de Daniel Higginbotham. Puedes escribirle un Email o tweet a @nonrecursive.

Soy Eduardo Suárez, diseñador front-end y consultor UX. Trabajo creando aplicaciones y entornos web, y realizando consultoría UX y de presencia online. Otros hobbies: música, motos, artes plásticas y ciencia-ficción.