Novice Guide to Visual Design

Guía para principiantes de diseño visual

Resumen Curso: Novice Guide to Visual Design

Punto, línea forma color textura tipografía, formulario, cuadricula, diseño. Son elementos
básicos del diseño Visual, la creación de un buen diseño comienza con la comprensión de los
conceptos básicos.
Unidad, Espacio, Jerarquía, Equilibrio, Contraste, Escala, Dominio, Semejanza, Proximidad y
Alineación. Son Principios de diseño, al aplicar principios de diseño, no solo le permitirá comunicar
la personalidad de la marca a sus usuarios objetivo, sino que también le ayudará a evitar desastres
de diseño
Psicología de la Gestalt: se ocupa del estudio de cómo percibimos los objetos de nuestro
entorno. Discute principalmente la diferencia entre espacios positivos y negativos y examina cómo
varias leyes nos ayudan a diferenciar figura y fondo. (Leyes: Similarity, proximity, familiarity,
symmetry, continuity, common fate, synchrony, common region, element connectedness & The
principle of closure)
¿Como las personas leen una Página Web?
Una página tendrá áreas activas y pasivas. Los estudios de seguimiento ocular revelan que cuando
los usuarios leen una página, sus ojos escanean el contenido de la esquina superior izquierda.

En los sitios web con mucho texto, como los blogs, el lector primero escanea verticalmente el lado
izquierdo del texto en busca de palabras clave o puntos de interés en las oraciones iniciales del
párrafo. En el momento en que el lector encuentra algo que le gusta, comienza a leer
normalmente, formando las líneas horizontales. El resultado final es que el patrón se parece a las
letras F o E y se llama como F-Pattern.
Z-Paterno el escaneo se realiza en sitios web que no tienen mucho texto. Cuando el ojo llega al
final de la línea, se mueve en diagonal hacia abajo a la izquierda (nuevamente según el hábito de
lectura) y repite un escaneo horizontal en la parte inferior de la página. El patrón Z es perfecto
para interfaces simples, minimalistas y centradas en botones de llamada a la acción.
Gutenberg Diagram muestra el comportamiento del usuario de la lectura-gravedad. Divide el área
de diseño visual en cuatro. Área óptica primaria Fuerte, área de barbecho, Área de barbecho
débil, Área terminal.
Según Fitts’ law, la cantidad de tiempo necesaria para que una persona mueva un puntero (por
ejemplo, el cursor del ratón) a un área objetivo es una función de la relación de la distancia al
objetivo dividida por el tamaño del objetivo. Por lo tanto, cuanto mayor sea la distancia y menor el
tamaño del objetivo, más tardará el usuario en alcanzarlo.
Introducción
La creación de un buen diseño comienza con la comprensión de los conceptos
básicos. Al aplicar principios de diseño, no solo le permitirá comunicar la
personalidad de la marca a sus usuarios objetivo, sino que también le ayudará a
evitar desastres de diseño.

Elementos de diseño visual

Los siguientes elementos tienen una importancia primordial en el diseño y deben funcionar en
conjunto.

 Puntos : dot es el elemento de diseño más simple; marca una posición en el

espacio. Es el lugar de encuentro de dos coordenadas en 2 dimensiones o tres
coordenadas en 3 dimensiones.

 Líneas:  line se forma si conecta dos puntos. Está formado por una colección de
puntos, Una línea puede ser gruesa, delgada, ondulada o irregular.

 Formas: Si pones cuatro puntos y los conectas con cuatro líneas, obtienes
un shape. Una forma es básicamente un área bidimensional con un límite conocido.
Son los componentes básicos del diseño gráfico. Son figuras y formas que se utilizan
para crear logotipos, ilustraciones y otros innumerables elementos que aparecen en
el diseño. Hay 3 tipos de formas:
Geometric: Formas como círculos, cuadrados, rectángulos y triángulos.
Organic: Formas que se asemejan a formas u objetos naturales que se
encuentran en la naturaleza: hojas, flores, etc.
Abstract: Las formas abstractas son aquellas que no pueden relacionarse
con la realidad. Estas son formas de forma libre como formas de burbujas,
espirales, etc.

 Color: Color es un elemento importante en el diseño y estos se utilizan para

diferenciar elementos y agregar énfasis a los elementos.
El color es la luz reflejada por los objetos y tiene tres características
principales:
matiz (como rojo, verde, azul, etc.)
valor (cuán claro u oscuro)
saturación (qué tan brillante o aburrida)
 Textura: En el mundo físico, la calidad de la superficie de un objeto se denomina
como texture. Puede ser de dos tipos.
 Tactile Textures: Texturas que puedes sentir y ver. Ej .: Textura sobre un
paño.

Implied Textures: Texturas que solo puedes ver. Por ejemplo: textura en el
fondo de pantalla de su teléfono

 Tipografía: Typography, un aspecto importante del diseño visual, es un arte /

técnica de ordenar letras para hacer que el lenguaje escrito sea fácil de leer,
comprender y atractivo cuando se muestra.
La tipografía establece un estado de ánimo o una emoción y, cuando se hace
bien, ayuda a reconocer una marca.

 Formulario: Form se aplica a objetos que son de naturaleza tridimensional y

tienen altura, ancho y profundidad. Se puede utilizar para definir el espacio,
crear contraste y agregar volumen a una composición visualmente.
Hay principalmente dos tipos de formas.
Geométrico
Orgánico

 Cuadricula: Grids son la base sobre la que se realiza un diseño que permite a

un diseñador organizar varios elementos de diseño en una página.

 Diseño: A Layoutes la disposición de los elementos visuales en un diseño que

se parece a la apariencia final del mismo. Por lo general, se construye dentro
de una cuadrícula. El diseño tiene áreas activas y pasivas según la forma en
que el ojo lo escanea.

Principios del diseño visual

Para crear un buen diseño visual, aplicaremos los siguientes principios a los
elementos de diseño.
 Unidad: Debe haber un sentido de unityo harmonyentre todos los elementos
utilizados en una pantalla o página. Debe organizarse de manera equilibrada
para crear un sentido de unidad. El diseño debe lograr un equilibrio entre la
unidad y la variedad, no debe ser demasiado aburrido o caótico.
 Espacio: Una forma utilizada en el diseño a menudo se denomina positive
space (figure)y el área que la rodea se llama negative space
(ground). Ambos son elementos de diseño igualmente importantes y aportan
equilibrio a una composición.
 Jerarquía: Visual hierarchy es la presentación o disposición de elementos
de una manera que implica significado / importancia.
Al establecer diferentes características visuales para fragmentos de
información, un diseñador puede influir en la percepción del usuario de lo
que aparece en la jerarquía.
Algunas de las características son:
Size: los elementos más grandes atraerán más atención.

Color: es más probable que los colores brillantes llamen la atención

sobre los apagados.
Alignment: un elemento que se mantenga alejado de la alineación de
los demás llamará la atención.
Character: un elemento que posee una forma diferente a la del grupo
llamará la atención.

 Equilibrio: Balancenos ayuda a distribuir los elementos de un diseño de

manera uniforme. Los diseños equilibrados parecen estables. Existen
principalmente dos tipos de equilibrio.
Equilibrio simétrico
Equilibrio asimétrico

Symmetric balance: Los elementos están orientados a lo largo de un eje

común de arriba a abajo o de izquierda a derecha.

Asymmetric balance: Los elementos se colocan orgánicamente creando

tensión y equilibrio.

 Contraste: Contrastse usa cuando se desea que un elemento se destaque. Se

refiere a la disposición de elementos visualmente distintos para crear interés.
 Escala: Scale define el tamaño relativo de los elementos de diseño, por lo
que crea interés y profundidad al mostrar cómo se relacionan los elementos
en función del tamaño.

 Dominio: Dominanceestá creando un enfoque en un solo elemento. Esto se

puede lograr variando los siguientes parámetros.
Talla, Forma, color, valor, profundidad, textura, densidad saturación,
orientación, espacio en blanco local, interés intrínseco, peso físico percibido
  Semejanza: Similarityse trata de mostrar que varios elementos de diseño
están relacionados, lo que aporta consistencia al diseño. Principalmente
complementa nuestras habilidades para procesar información.

 Proximidas: Proximity ayuda a organizar elementos. Al agrupar elementos

similares juntos o muy cerca, crea una relación entre esos elementos en la
mente del espectador.
La proximidad le da al usuario, claridad e idea de dónde debe comenzar y
terminar la lectura. Esto se puede materializar mediante el uso de tamaño en
puntos, fuente, color, etc.

 Alineación: Alignment ayuda a crear un diseño más nítido, organizado y

ordenado. Es uno de los principios de diseño más básicos e importantes, ya
que ayuda a proporcionar una conexión invisible entre los elementos, incluso
si no están muy cerca unos de otros. Ayuda a reducir la carga cognitiva y, por
lo tanto, aporta un aspecto más limpio.

Psicología Gestalt
Gestalt psychologyse ocupa del estudio de cómo percibimos los objetos de
nuestro entorno. Discute principalmente la diferencia entre espacios positivos y
negativos y examina cómo varias leyes nos ayudan a diferenciar figura y fondo.

 The law of similarity afirma que todos los elementos con caracteres

superficiales similares se perciben como un grupo.

 The law of proximityafirma que los objetos que están cerca unos de otros
se perciben juntos como un grupo. 
 The law of familiarityafirma que el cerebro humano percibe las líneas, formas
y curvas y las relaciona con objetos significativos del mundo real.
 The law of symmetry afirma que el cerebro humano percibe los elementos
visuales agrupados cuando están dispuestos simétricamente.
 The law of continuity afirma que el cerebro humano prefiere ver un flujo
continuo de elementos de diseño y no como objetos separados.
 The law of common fate afirma que los humanos tienen una tendencia a agrupar
elementos que se mueven en la misma dirección.
 The law of synchronyes similar a la ley del destino común. Afirma que existe una
tendencia a agrupar los elementos visuales que aparecen al mismo tiempo aunque
no estén en movimiento.
 The principle of closure afirma que la mente humana combina la información
visual disponible para formar un objeto significativo en lugar de verlo como
elementos individuales.
  The law of common region afirma que los elementos de una región cerrada se
perciben como un grupo.
 The law of element connectednessafirma que los humanos tienen tendencia a
agrupar elementos conectados. En este ejemplo, sentimos que los cuadrados
conectados se destacan en comparación con el resto de cuadrados.

¿Cómo lee la gente una página?

Una página tendrá áreas activas y pasivas. Los estudios de seguimiento ocular
revelan que cuando los usuarios leen una página, sus ojos escanean el contenido de
la esquina superior izquierda.

Nota : los árabes y los chinos leen las páginas de manera diferente a los europeos.

Patrón F
En los sitios web con mucho texto, como los blogs, el lector primero escanea
verticalmente el lado izquierdo del texto en busca de palabras clave o puntos de
interés en las oraciones iniciales del párrafo.

En el momento en que el lector encuentra algo que le gusta, comienza a leer

normalmente, formando las líneas horizontales. El resultado final es que el patrón se
parece a las letras F o E y se llama como F-Pattern.

Patrón Z
Z-Pattern el escaneo se realiza en sitios web que no tienen mucho texto.

Cuando el ojo llega al final de la línea, se mueve en diagonal hacia abajo a la

izquierda (nuevamente según el hábito de lectura) y repite un escaneo horizontal en
la parte inferior de la página.
El patrón Z es perfecto para interfaces simples, minimalistas y centradas en botones
de llamada a la acción.

Diagrama de Gutenberg

Gutenberg Diagrammuestra el comportamiento del usuario de la lectura-

gravedad. Divide el área de diseño visual en cuatro.

 Área óptica primaria

  Fuerte área de barbecho
 Área de barbecho débil
 Área terminal

Ley de Fitt
Según Fitts’ law, la cantidad de tiempo necesaria para que una persona mueva un
puntero (por ejemplo, el cursor del ratón) a un área objetivo es una función de la
relación de la distancia al objetivo dividida por el tamaño del objetivo.

Por lo tanto, cuanto mayor sea la distancia y menor el tamaño del objetivo, más
tardará el usuario en alcanzarlo.

Diseño visual para daltónicos

Estas son algunas consideraciones que se deben tener en cuenta al diseñar una
interfaz que también se adapte a los daltónicos :
 Usa símbolos junto con colores
 Utilice un enfoque minimalista al diseñar limitando la paleta de colores.
 Usa texturas y patrones para mostrar contraste.
 Utilice una amplia gama de colores contrastantes y no solo en blanco y negro

Testing a Visual Design

El diseño visual de un producto se puede evaluar mediante el seguimiento ocular.
 Analiza cómo los ojos del usuario se mueven por la pantalla.
 Un buen diseño visual debe llamar la atención del usuario hacia algo
importante para los objetivos estratégicos del producto.