Diseño

• El diseño es un puente entre la funcionalidad y estética.

• El diseño es la solución a un problema específico, representada de una manera gráfica.

Existen diferentes ramas del diseño:

• Gráfico
• Industrial
• Moda
• Artesanal
• Editorial
• Interiores
• Interfaces

Comunicación efectiva en el diseño

• La percepción visual es la relación que hacemos de lo que se está comunicando y la forma en la

que lo vemos.
• El diseño tiene que tomar los códigos visuales para poder comunicar cosas que para la gente sea
preciso y pueda relacionarlo con su entorno.
• El diseño nace por la necesidad de informar.
• El diseño está en todo lo que vemos.
• El diseño pasó de ser visual a generarnos sensaciones, nos cambia la forma en la que percibimos
ciertos entornos.
• El diseño es entender que la funcionalidad y la estética debe de tener un fin muy claro.

Concepto?

• El concepto es el punto de partida para todo.

• El concepto es la historia que cuenta el diseño.
• El concepto es la representación tangible de una idea.
• Sin concepto, el diseño no puede cumplir su misión de comunicar.
• Para crear la narrativa del diseño:

a) Conocer e investigar el tema

b) Tomar los puntos más importantes
c) Definir la comunicación visual
Diseño universal
• El diseño universal debe comunicarnos algo sin necesidad de tener un sesgo cultural, geográfico
o social.
• La señalética fue creada para comunicar necesidades muy específicas, por eso es funcional en
cualquier parte del mundo y no está limitada culturalmente.
• El diseño universal es muy importante, le da el sentido de pertenencia a la gente.

Diseño atemporal

El diseño atemporal tenemos que tenerlo en cuenta a la hora de conceptualizar.

Buscar un diseño preciso para no sentir que el diseño va a morir pronto. Además de que el diseño
atemporal nos sirve para comunicar algo que puede ser distinto a nivel cultural, geográfico o social.

El boceto

• Este proceso tiene que estar presente en todas fases del diseño.
• Es la aproximación más real al diseño final, pues con él podemos probar distintas formas en las
cuales podemos comunicar una idea.
• El diseño no debe tener improvisación, de ahí la necesidad de los bocetos.
• El boceto nos permite depurar ideas.
• El boceto nos sirve para encontrar el punto en el cual nos podemos sentir cómodos con la idea
que queremos comunicar; que sea concisa y exacta.
• El boceto está presente también en el diseño de interfaces, esto es para poder prototipar la
funcionalidad de las aplicaciones antes de llevar el diseño a digital.

Elementos visuales

Elementos del diseño:

• Fotografía
• Ilustración
• Tipografía
• Color
• Líneas y puntos
• Figuras geométricas

Alineación
 • La alineación crea un balance por peso natural, nos da la sensación de que hay equilibrio en el
diseño.
• La alineación es para tener una mejor lectura y una mejor disposición en el espacio.
• Algo crucial en el diseño es la educación del ojo, debemos entrenarlo para poder observar los
lineamientos que se necesitan o los que están de más.

Contraste

El contraste es la diferenciación visual de uno o varios elementos. Una diferenciación muy marcada.
Tipos de contraste que existen:
• El contraste a nivel de color. Es encontrar uno de esos puntos de diferenciación y se pueda hacer
una composición en función de eso.
• El contraste por forma.
• El contraste por disposición. Cómo es la interacción por disposición de las formas.

Síntesis

• La síntesis no solamente se da en una representación gráfica.

• La síntesis abarca desde el concepto.
• El propósito de la síntesis es saber tomar los punto más precisos y poder simplificar todo en una
idea muy clara.
• En la síntesis gráfica optimizamos tiempo de lectura y de comunicación.
• Es un buen recurso si no se domina la ilustración o fotografía.

La composición y su función

La composición gráfica es la disposición de los elementos dentro de un formato, el cual utilizamos para
poder comunicar algo. Comparte en el sistema de discusiones imágenes en las que notas que la
composición comunica perfecto el objetivo del diseño.

Unidad Visual y principios de la Gestalt

Los principios de Geslat son una rama de la psicología que trata de entender las formas a través de la
simplificación.
Tenemos 4 principios a destacar:
 • Semejanza: Nos llama la atención una forma que no es como las demás. Tenemos 2 grupos que
son una mayoría y otra minoría haciendo que estos destaquen y nos llamen la atención sobre los
demás.
• Cerramiento: Consiste en completar la sugerencia de formas que no están completas.
• Proximidad: Crea unidad a partir de elementos que están cercanos.
• Figura y Fondo: Nos permite crear composiciones interesantes, con síntesis y que comuniquen
concretamente.
•

Balance o equilibrio visual

Peso visual. Es determinado con propiedades como tamaño, color o textura.

1. Elementos con alto contraste de color en relación a los demás elementos de la composición
tendrán mayor peso visual.
2. Elementos con mayor tamaño en ración a los demás tendrá mayor peso visual.
3. elementos con textura tendrán mayor peso visual que aquellos que no tengan.
4. elementos con una disposición a la derecha e inferior tendrán mayor peso visual, esto se puede
justificar a la ley de oro o proporción divina.
5. formas con mayor claridad o reconocibles tendrán mas peso visual.
6. colores cálidos y/o saturados tendrán mayor peso visual.

Dirección Visual
Otro componente del balance visual es la Dirección Visual.
Dentro de la dirección visual logramos que los elementos nos hagan dar un recorrido por la imagen
hasta ubicarnos en cierto plano visual. Con ello logramos asignar significado a muchas cosas.

Balance visual
Existen 4 tipos de balance visual:
• Simétrico. Cuál es nuestro eje vertical, el que mide el estado del balance. Pesos reflejados.
Balance formado, comunica estabilidad, se usa para logotipos gubernamentales.
• Asimétrico. Cómo se compensan los dos pesos, manteniendo balance aunque no sean
simétricos.
• Radial. Concentra atención y le da enfoque a un solo punto, no necesariamente debe estar en el
centro. Es útil para destacar elementos. Juego entre la tipografía y la imagen.
 • Caótico. Es uno de los más difíciles de lograr, se intenta mantener un equilibrio dentro de
muchos elementos. Qué atención quiero tener, hacia donde la quiero distribuir.

Movimiento

• El movimiento es un problema de la imagen, se busca transmitir sensaciones y el movimiento es

una de ellas.
• El movimiento puede estar implícito, es decir que sucede sin provocar intencionalmente el
mandar la vista del espectador a algún punto en particular, es más de percepción.
• El movimiento es una sensación que podemos comunicar, con repeticiones de elementos en la
misma dirección, por ejemplo.

Estructuras naturales

Aún si no hay elementos visuales con los que se pueda construir una composición, con las estructuras
naturales hay una tendencia natural a hacer cierto recorrido visual. Podemos encontrar, por ejemplo:
• Ley de Tercios
• Patrones de lectura

Patrones de lectura

En el diseño editorial y web pensamos mucho la forma en la que vamos entregar la información y esto
es de las cosas más importantes para considerar a la hora de diseñar.
Tener un buen sentido de los patrones de lectura nos puede ayudar a evitar soluciones excesivas a la
hora de querer resolver el problema de la entrega de información al consumidor.

Ritmo

Es la repetición de patrones y cambios que podemos predecir.

Para que haya ritmo, necesitamos que haya un cambio.

El ritmo se refiere a la repetición de uno o mas elementos en la composición de un diseño
Jerarquía

Con la Jerarquía es más fácil comprender el orden de la importancia de la información, de tal forma
que al ver los elementos el ojo va a mirar directamente la información mas importante.
Se puede lograr utilizando:

La jerarquía es una organización en escala de importancia de los elementos de un diseño.

Herramientas de jerarquización

Cuando queremos jerarquizar algo debemos preguntarnos qué es más importante dentro del diseño que
estamos realizando.

• Tamaño
• Color
• Espacio en Blanco
•
Espacio en blanco

Es difícil llegar a una jerarquización cuando tenemos muchos elementos en un diseño.

El espacio en blanco es una gran herramienta para lograr la jerarquización cuando tenemos este
problema de carga de elementos.

Gracias al espacio en blanco podemos darle una jerarquía más clara a los elementos que tenemos en
nuestros diseños, ya que aplicamos el concepto de proximidad, que a la ves nos ayuda a comprender
mejor lo que vemos por que admitimos que un elemento pertenece a un grupo.

Formato

• El formato es conocido como un espacio que está determinado por medidas.

• Todos los programas de diseño tienen la forma de configurar un espacio de trabajo
predeterminados y que podemos modificar según los requisitos de nuestros proyectos.
El formato nos permite conocer el espacio de trabajo que tenemos para desarrollar un proyecto,
también nos pone limites para no sobre pasarlos y lograr un buen uso de espacio.

Retículas y guías
 • Nos ayudan a hacer una distribución mucho más balanceada.
• Las retículas están definidas por grillas, que nos ayuda a ser más exactos en el espacio de
trabajo que vamos a utilizar.
• Las grillas nos sirven para hacer una mejor distribución de elementos gráficos.

Análogo vs. Digital

Tipos de imágenes:
• Análogo. Colores pigmentos. Pintura, serigrafía, litografía, etc
• Digital. Luz. Pantallas. Manipulando la luz se crean los colores.

Pixel y resoluciones
Densidades populares:
Pixel: unidad elemental que tiene 3 colores, rojo, verde y azul
• 72DPI para pantallas
• 144DPI para retina
• 300DPI para impresión

la resolución revela el nivel de detalle que puede mostrar una imagen, mientras mayor es la
resolución, más comprimidos están los píxeles en la imagen Una imagen con una resolución de 72 DPI
dice: “en una pulgada de esta imagen caben 72 píxeles”

Mapas de Bits y Vectores

• Mapas de bits: Cualquier fotografía. Es una retícula, una consecución de pixeles que juntos dan
una apariencia de imagen. Busca en la pestaña de enlaces el Curso Básico de Photoshop que
tenemos.
• Vectores: Un vector está hecho de nodos. Cada nodo está conectado. la conexión es el trazo.
Podemos cambiar el tamaño y no se pierde calidad. Busca en la pestaña de enlaces el Curso de
Illustrator que tenemos.

Círculo cromático y temperatura de color

 • Cuando hablamos de color, estamos hablando de luz rebotando en un objeto y que llega a
nuestros ojos para darnos la perspectiva visual.
• El espectro visible va del rojo al violeta.
• El círculo cromático es la simplificación del espectro electromagnético, esto nos permite
trabajar con los colores en el diseño.
• Los tipos de colores principales son:

a) Colores primarios. Amarillo, azul y rojo.

b) Colores secundarios. Verde, naranja, violeta.
• La temperatura del color es basada en la sensación de cómo percibimos el color. Según esto hay
estos tipos de colores:
a) Colores Fríos. Verdes, azules, morados.
b) Colores Cálidos. Amarillos, naranjas, rojos.
-El color en sí mismo solo tiene valor cuando está rodeado de otro. Cuando evaluamos un color lo
hacemos dependiendo del contexto en el que está.

Sistemas de color

Modelos en los que se obtienen nuevos colores.

• RGB. Mundo digital. Modelo de mezcla aditivo. partimos del negro y según el uso de luz
llegamos al blanco.
• CMYK. Mundo análogo, del pigmento. Empezando y generando en digital, este es el formato
de color para impresiones. Modelo de mezcla sustractiva.
• HSB. Hue Satutartion Brightness

Nota: La obtención del negro absoluto es llevando todos los colores al máximo.

Paletas de color

Armonías cromáticas = Racionalización de cómo funciona un color con otro:

• Monocromática
• Análoga
• Paleta complementaria: Cuando queremos tranquilizar el choque de colores hay que hacer
variaciones en cualquiera de los dos colores.
• Complementaria dividida
• Triada
 • Doble complementaria

La clave para definir una paleta de color en un sitio web, una app o cualquier producto digital está en
habilidad de manipular un color, no solo elegirlo.

1. Cantidad de Colores
Repasando grandes productos o aplicaciones que usamos todos los días podemos descubrir esta
tendencia: La complejidad de la interacción tiende a ser inversamente proporcional a la cantidad
de colores.

Stripe es un gran ejemplo. Un landing page o una página de ventas tiene un nivel de interacción muy
bajo. El objetivo principal está muy claro: comprar, suscribirse, iniciar, etc. Un Call to Action.
En estos casos la cantidad de color tanto en volumen como en variedad puede ser muy alta.
Pero cuando vamos a su dashboard la interacción es mucho más compleja, los objetivos del usuario son
otros y el manejo del color es mucho más medido.
2. Variaciones de color
¿Cómo aprovechamos cada color para que sea funcional, predecible y aún así transmita el espíritu de
una marca? Este es el gran reto del diseñador de interfaces a nivel de color.
La respuesta está en las variaciones: ligeras transformaciones de un color para construir todos los
componentes que necesitemos. Veamos un par de ejemplos:
Esta es la vista móvil de Quora: 1 color principal y 2 variaciones.

Ahora Facebook: 1 color principal y 2 variaciones. Un poco más interesante que Quora. ¿Por qué?
El camino fácil para obtener variaciones de color es tomar nuestro color principal y llevarlo hacia el
negro para obtener una variación más oscura o hacia el blanco para obtener una versión más clara. Eso
hizo Quora y aunque funciona no deja de ser un poco aburrido.
Como seres humanos estamos acostumbrados a ver variaciones de color muy complejas todo el
tiempo. En cualquier objeto de un solo color vemos variaciones por condiciones de luz, temperatura,
reflejo, ambiente, etc. Por esto una variación tan pobre como la anterior no es muy interesante.
Usemos el mundo real para obtener variaciones más interesantes
Al ver con detenimiento el panel de color tenemos un comportamiento menos predecible pero un
resultado mucho más interesante:

Profundicemos en el color digital

El modelo de color con el que estamos acostumbrados a trabajar es el RGB, combinación de valores de
0 a 255 para cada canal. Ahora veamos uno muy útil:
HSB

Hue Matiz
Escala de 0 a 360 de todos los colores “puros”.
Saturation Saturación
Escala de 0 a 100 dónde 100 es la saturación máxima de un color y 0 es blanco
Brightness Brillo.
Escala de 0 a 100 siendo 100 el color limpio y 0 el negro puro
Volviendo a las muestras hay unos valores interesantes. En la variación oscura la saturación aumentó y
el brillo bajó, al contrario de la variación clara donde la saturación bajó y el brillo aumentó.
Esto ya es un patrón repetible:

Al aplicar esto a un solo color ya podemos obtener suficientes variaciones interesantes:

3. El Gris es MUY importante
Una escala de grises es fundamental en nuestra paleta de color. Permitirá que los colores
principales sean valiosos y mantendremos la atención del usuario dónde realmente importa. Aquí
también podemos tomar el camino fácil y elegir algunos grises entre el negro y el blanco:
Pero de nuevo, son muy aburridos para nuestra experiencia visual. Si utilizamos lo aprendido con el
modelo HSB lograremos una paleta mucho mejor. Tomemos los extremos de las variaciones y bajemos
su saturación para neutralizarlos un poco:

Con estos extremos ya podemos hacer nuestra paleta de grises. Y definitivamente es mucho más
interesante que la anterior:
Con un solo color hemos logrado una paleta versátil, útil y sobre todo Interesante. Podemos
arriesgarnos un poco más y tener un color secundario, como cereza del pastel. Ya sabemos los
fundamentos:
4. ¿Y el negro?
La recomendación tradicional nos dice que jamás olvidemos el blanco y evitemos el negro absoluto.
Simplemente porque genera un contraste muy fuerte en las pantallas que cansan la vista. Esto sigue
sigue siendo cierto sin embargo hay que tener en mente el caso inverso.
La masiva adopción de “versiones nocturnas” en aplicaciones nos obliga a tener presente paletas
invertidas dónde el background será negro absoluto, allí tenemos que “evitar” el blanco.
Estos consejos nos ayudarán a crear muy buenas paletas de color en interfaces, aunque siempre nos
encontraremos con colores difíciles de manipular. Déjame en los comentarios las dudas y con gusto lo
resolvemos.
Psicología del color

La psicología del color tiene que ver con cómo conectamos nuestra marca con el color. Las
evocaciones emocionales en el ser humano es lo que le da sentido a la percepción de los colores
utilizados en el diseño.
La psicología del color Intenta agrupar esas evocaciones que da cada color, pero esto no debe tomarse
literal, sino tomar esos precedentes para construir algo. Es decir, romper las reglas según la necesidad
de nuestros diseños, pero guiándonos un poco en los ejemplos de las percepciones de cada color.

Tipografía en el diseño

• Con el texto podemos encontrar la combinación entre algo estéticamente bueno y algo con
mucha narrativa.
• La tipografía da identidad a marcas o proyectos.
• La tipografía logra dar posicionamiento de marca solo con tipografías.

Selección tipográfica

Clasificación de tipografías:
• Sans Serif o Palo Seco. Figuras y cortes muy limpios. Es recomendada para títulos. No es
recomendada para textos largos impresos, recomendada para textos largos en digital.
• Serifa. Terminaciones casi ornamentales, más suaves, son decorativas. Recomendada para
títulos, para textos largos impresos. No es recomendada para texto largo en digital.
• Display. Titulares principalmente. vertiente de las sans serif, son mu experimentales. Da más
carácter al diseño, da más contexto de lo que queremos comunicar.
• Handwritten. Se utiliza en cosas específicas, tiene un carácter más humano.

• Lettering. Letras con un toque personal, se ve mucho en publicidad y caligrafía.

Identificar problemas en composición de texto

¿Alguna vez has empezado a leer un artículo o un libro y has sentido que no puedes seguir leyendo por
alguna razón?
Cuando leemos, nuestro ojo percibe las formas y los elementos como información que debe procesarse
y en el caso del texto debe procesar toda la información que en nuestro lenguaje escrito conocemos,
muchas veces nos encontramos con un texto que contiene fallas a nivel de diseño y se nos dificulta
poder leerlo.
Trabajar con texto en el diseño puede parecer algo muy operativo, tenemos programas que nos
permiten manipular el texto, crear párrafos de forma automática y cambiar muchas cosas en esos
párrafos, como tamaño del texto, interlineado y tipo de fuente.
El problema es que muchas veces desconocemos que el manejo de texto tiene algunos puntos que hay
que considerar, puntos que son cruciales para garantizar una buena lectura y funcionalidad.
Estos problemas se han ido definiendo con el tiempo ya que el texto es uno de los recursos funcionales
de mayor uso en el diseño, lo consumimos en el día a día y muchas veces no somos conscientes de los
cambios que podemos crear en la lectura a causa de estos problemas.
La mejor forma de garantizar un texto que no tenga problemas de lectura y sea completamente
funcional es cuidando de no cometer estos errores:

Interlineado
Al manejar bloques de texto es importante considerar cada línea como un elemento visual, esas líneas
generan un peso y una densidad que debe ser distribuida con un espacio entre ellas.
Si construimos bloques de texto sin considerar este espacio entre las líneas podemos generar un efecto
al ojo donde las percibirá como un solo elemento por la proximidad que tengan y dificultará mucho la
lectura.
La mejor forma de poder garantizar un interlineado adecuado es considerar el tamaño del texto y en
función a eso definir el espacio entre las líneas, la fórmula más usada para eso es colocar 2 puntos más
arriba de nuestra fuente actual, por ejemplo; si tenemos una fuente de 8pt lo recomendable es que
tengamos un interlineado de 10.

Tamaño del texto

Algo que debemos respetar y considerar siempre es la funcionalidad del texto, si no puede leerse, no
funciona.
Existen casos específicos de diseños que a nivel estético tengan una finalidad distinta a la lectura, como
decorativo o complementario, pero en la mayoría de los proyectos donde usemos texto será con una
finalidad de comunicar.
Uno de los principales problemas que pueden afectar la funcionalidad del texto es el tamaño de la
fuente, debemos considerar que el ojo humano tiene una capacidad de lectura limitada, si un texto es
demasiado pequeño el ojo lo percibirá como puntos o líneas y si es demasiado grande será muy
abrumador para poder darle seguimiento a una línea o párrafo.
Lo ideal es mantener un tamaño que pueda leer una persona con alguna dificultad visual y una persona
con una vista 20/20, para lograr este resultado podemos probar un tamaño mínimo 8pts dependiendo de
la fuente para bloques de texto largos y un puntaje para títulos que a nivel de contraste no entorpezca la
lectura.

Ríos
Cuando observamos un bloque de texto como un todo podemos encontrar que algunos espacios entre
palabras (Kerning) nos generan una coincidencia a medida que avanzan las líneas, estas coincidencias
de espacios son conocidas como ríos, si miramos este artículo entrecerrando los ojos podemos
encontrarlas, se llaman ríos porque son muy similares a un río visto en un mapa.
Si en un bloque de texto son muy notables nos crean unos espacios de rigidez o pausas que hacen más
pesada la lectura, es bueno trabajar el Kerning hasta poder encontrar un balance y lograr que no sean
tan notables, desaparecerlos del todo es complicado pero poder entender que existen y mejorarlo
ayudará mucho con la legibilidad.

Viudas
Las viudas son palabras que quedan solas al final de un párrafo, no son un elemento que entorpezca la
lectura pero genera un peso visual innecesario en nuestra composición, al no pertenecer a una línea de
texto el ojo tomará esa palabra solitaria como un elemento que genera un punto de tensión.
Lo ideal es evitarlas manejando el texto de forma de crearle un acompañamiento preferiblemente de 2 o
más palabras o incluyéndola en la línea anterior.

Selección tipográfica
Comprender cuál es la finalidad del texto o cuál será su uso nos ayudará a seleccionar una fuente que
sea funcional para esta tarea, las fuentes serifias o Serif son ideales para trabajar bloques de texto en
formatos impresos, las terminaciones de este tipo de fuente ayudan al ojo poder tener un seguimiento
entre letra y letra con mayor fluidez.
Cuando trabajamos un texto en digital debemos usar una palo seco o Sans Serif ya que la definición en
pixeles que nos da la pantalla generaría un texto con demasiada información al usar una Serif, pero
usando una palo seco podemos tener una forma mucho más agradable y sin terminaciones que
entorpezcan la lectura.
¿Identificas que alguno de estos errores te hayan obstruido alguna vez la lectura de algo? Cuéntanos si
tienes alguna experiencia con alguno de ellos y cómo los resolviste.