Primer paso en diseño digital es entender el problema.

Qué medio vas a utilizar para resolver el problema.

Encontrar la herramienta adecuada.

Cuando definimos arte podemos hacerlo con cuatro puntos.

Interpretación, depende del espectador.

Autoexpresión.

Es un sustantivo no es un verbo.

Pero en diseño es diferente, es un proceso para la comunicación. Es un sustantivo y

es un verbo.

Diseño del producto comunica la función de un producto al consumidor, cómo se ve y

se comporta un producto.

Resolvemos visualmente los problemas que se puedan presentar.

HCI: Cómo las personas interactúan con las computadoras.

Principios de un buen diseño:

Es innovador.
Hace un producto usable. Sino es arte.
Es estético.
Hace un producto entendible.
Es discreto. No necesitamos ornamentos o decorar todo.
Es honesto.
Es duradero. No se adapta a modas.
Cuida hasta el último detalle.
Es respetuoso con el medio ambiente.
Es el menor diseño posible.

Principios heurísticos de percepción y comportamiento I

Los productos bien diseñados tienen una gran facilidad de uso. Nos ayudan a mejorar
la calidad del producto y tener una experiencia de usuario sin fisuras.
Los heurísticos son estrategias derivadas de experiencias previas con problemas
similares.
Los principios heurísticos son las bases en las que nos vamos a apoyar para
realizar la valoración de usabilidad de cualquier producto digital.
Se llaman heurísticos porque son reglas.

Percepción y comportamiento.
Efecto estético y usabilidad. Los usuarios a menudo perciben un diseño
estéticamente agradable como un diseño que es más sutil y fácil de utilizar.
La ley de Hick. El tiempo en que lleva tomar una decisión aumenta con el
número y complejidad de las acciones.
Equilibrio entre flexibilidad y usabilidad. A medida que aumenta la
flexibilidad de un sistema disminuye la usabilidad del mismo.
 Carga de trabajo. Cuanto mayor sea el esfuerzo para realizar una tarea, menor
será la probabilidad de que esta tarea finalice o se lleve a cabo. Partir las
tareas en pasos pequeñps.
La ley de Miller. Una persona promedio solo puede mantener entre 5 y 9
elementos en su memoria de trabajo. Agrupar elementos en bloque es una solución.

Jerarquía.
Ley de las regiones comunes. Los elementos tienden a percibirse en grupos si
comparten un área con un límite claramente definido.
Ley de la proximidad. Los elementos que están cerca o próximos tienden a
agruparse en sí.
Ley de la similitud. El ojo humano tiende a percibir elementos similares en
un diseño como grupo completo incluso si estos elementos están separados.
Ley de conectividad uniforme. Los elementos que están conectados visualmente
se perciben más relacionados que los elementos que están sin conexión.
Densidad proposicional. La relación de los elementos de un diseño y el
significado que transmiten.
Capas. Organizar la información en agrupaciones relacionadas nos ayuda a
gestionar la complejidad y reforzar las relaciones entre ellos.
Jerarquía. La organización jerárquica, es la estructura más simple para
visualizar y comprender la complejidad.
Continuidad. Los elementos dispuestos en línea recta o en una suave curva se
perciben como un simple grupo.
Organización de la información. La podemos organizar en:
Categoría.
Tiempo.
Ubicación.
Alfabeto.
Continuo.
Alineación. La colocación de elementos de modo que los bordes se alinean a lo
largo de filas o columas comunes, o su centro a lo largo de un centro común, ayuda
a la legibilidad de todos estos elementos.
Forma.
Forma sigue a la función. Los diseños estétticamente agradables deben ser
resultado de decisiones racionales que tomamos para integrar significado e
intención en nuestro trabajo.
Ley de Pragnaz. Las personas percibirán o interpretarán imágenes ambiguas o
complejas de la forma más simple posible, porque es la interpretación que requiere
el menor esfuerzo cognitivo de nuestra parte.
Sesgo de iluminación de arriba hacia abajo. Interpretamos sombras en un
objeto como resultado de una fuente de luz sobre el objeto. Tener cuidado cuando se
trabajan con sombras, que todas estén en la misma dirección.
Proyección tridimensional. Interposición, Tamaño, Perspectiva.
Simetría. Propiedad de equivalencia visual entre los elementos de una forma.
Relación señal a ruido. Es importante saber la proporción de información
relevante e irrelevante en una pantalla.
Regla de los 3 tercios. La fotografía ayuda a mejorar la parte visual y de
composición. Un medio se divide en tercios creando posiciones estéticas para los
elementos primarios de un diseño.
Legibilidad. La claridad visual del texto generalmente está definido por el
tamaño, tipo de letra, contraste, alineación, espaciado de caracteres.
Iconos. Ayuda a mejorar el reconocimiento y recuerdo de señales.
Remarcar. llmar atención sobre área de texto o imagen.
Ratio de Oro, Ratio inglés o Proporción Aurea. Si la proporción es más
adecuada va a ser visiblemente más placentero y va a funcionar mucho mejor. 1 .
1.618
Profundidad de Procesamiento. La información que se analiza profundamente se
recuerdo mucho mejor que la que se analiza superficialmente.
Sesgo de contorno. Visualmente se prefieren más los objetos con contornos
redondeados que puntiagudos.

Interacción.
Umbral de Doherty. La productividad se dispara cuando una compiutadora y sus
usuarios interactúan a un ritmo menor a 400ms, que garantiza que ninguno va a
esperar al otro, en este caso es recomendable simular pequeñas microinteracciones
que permita al usuario estar enganchado con la aplicación y no de la sensación que
esté infinitamente cargando.
Ley de Fitts. El tiempo para cumplir un objetivo está en función de la
distancia y el tamaño del objetivo.
Ley de Jakob. Los usuarios pasan la mayor parte de tiempo en otros sitios.
Significa que prefieren lo conocido por lo que el sitio debería usar patrones ya
conocidos.
Entrenamiento. Consiste en enseñar un comportamiento deseado, reflejando
aproximaciones cada vez más precisas del comportamiento deseado.
Descubrimiento progesivo. Consiste en solo mostrar la información necesaria
en un momento dado.
Mapeo. Un buen mapeo da como resultado una mayor facilidad de uso. Existe
relación entre los controles y sus movimientos o efectos.
DFestino Común. Las cosas que se mueven en el mismo sentido parecen estar más
agrupadas que las que se mueven en direcciones diferentes.
Affordance. Es todas las posibilidades que materialmente ofrece un objeto
para reconocer cómo usarlo. Un diseñod e itnerfaz bien realizado nos entregará
indicios de cómo navegar de manera fluida.

Principios heurísticos de percepción y comportamiento II

Efectos de la posición. Solemos obviar lo que está al medio, para resaltar algo
debe ser colocado al principio o al final.
Regla de punto máximo. Las personas juzgan una experiencia a partir de cómo se
sintieron en su punto máximo y al final.
Efecto de Von Restorff. Conocido como el efecto de aislamiento. Cuando hay varios
objetos similares presentes es más probable que se recuerde al que difiere del
resto.
Escazes. Los artículos y oportunidades se vuelven más deseables cuando se percibe
que escasean, con poca frecuencia.
Redundancia. Uso de más elementos de los necesarios para mantener un sistema en
caso de fallas.
Consistencia. La usabilidad de un sistema mejora cuando cosas similares se expresan
de manera similar.
Efectos de interferencia. El procesamiento mental es mucho más lento y menos
precios por los modelos mentales en competencia.
Jerarquía de las Necesidades. Para que un sistema tenga éxito debe satisfacer las
necesidades básicas de las personas antes que pueda satisfacer las necesidades de
un nivel superior.

Arquitectura de la Información

Es la creación de una estructura de contenido para un producto digital.

Navegación. Formada por los elementos de la interfaz de usuario que ayuda al

usuario a navegar a través del producto.
Prototipado. Testear si todo lo que estamos haciendo en cuanto a estructura, nos va
a funcionar. Niveles de fidelidad en wireframes.
Patrones Móvil. El principal factor que delimita el diseño de aplicaciones para
móviles es el sistema operativo.
IOS. Utiliza Human Interface Guidence, documento con conjunto de
recomendaciones destinadas a mejorar la experiencia de usuario. Se generan
interfaces más intuitivas, aprendibles y constantes.
Android. Usa Material Design, que establece una normativa de diseño enfocado
en la visualización de diseño del sistema operativo de android, este sistema
interviene en la web y en cualquier plataforma que estemos usando desde un
dispositivo móvil.

Tipografía
Anatomía básica.
Línea base. Línea sobre la que se asientan la mayoría de las letras y
por debajo de la cual se extienden los trazos descendentes, por ejemplo de una p.
Altura minúsculas. En píxeles.
Altura Mayúsculas.
Ascendente y descendente. Un b o una p. Altura que sobresale sobre una
minúscula, o por debajo de la línea base.
Serifa. Quizás el punto más importante, define el acabado de la
tipografía, si es recto o cond ecoración.
Propiedades.
Familia. Tipo de letra.
Tamaño.
Peso.
Interlínea. espaciado entre líneas de párrafo, entre las líneas base, o
entre párrafos.
Espaciado. Distancia entre letras.
Funcionamiento. Cómo colocamos el texto.
Flujo de diferentes formas.
Alineamiento horizontal.
Alineamiento vertical.
Escalado.

Mapas de Bits.
Los mapas de Bits, almacenan información sobre las dimensiones y color de
cada píxel.

GIF. 256 colores, pueden ser transparentes.

JPG. Millones de colores, grado de compresión.
PNG. Millones de colores, puede ser transparente.

Debe estar optimizado para la pantalla que se va a utilizar. Pantalla retina

sobre pantalla normal, se necesitan 2 imágenes una normal y otra con el dobre de
tamaño para las pantallas retina.

Vectores.
La información se almacena como expresiones matemáticas que deben
representarse (calcularse) para el nivel de zoom dado.
Tipo, relleno, tamaño, posición.

SVG.

Están formados por nodos.

Operaciones booleanas. Combinar formas, añadiéndolas, restándolas o

interseccionándolas.
Unir.
Sustraer.
Interseccionar.
Excluir.
Frames vs Grupos
Tratar de evitar los grupos, es lo que se utilizaba normalmente.
Frame. Mismas propiedades que un rectángulo pero puede contener otras capas.
Ayuda a tener un cuadro delimitador para limitar pantallas.
Grupo. Agrupa cosas pero no se puede aplicar ninguna propiedad. Su tamaño se
calcula en función del contenido.

Usabilidad, consistencia y eficiencia.

Productos Digitales.
Tiene un costo.
Se deben estimar las tareas, es importante tener el alcance de la
tarea, mientras más pequeña seamos capaces de partir una tarea, menos
probabilidades de error tenemos.
Centrarnos en tareas más pequeñas para que podamos entregar más rápido,
probar, iterar, testear con usuarios, es una de las claves en el diseño de
productos.
Más gente no siempre es igual a menos tiempo. Más gente necesita más
comunicación y más procesos.
Necesitamos ser eficientes. Cada decisión tiene un impacto en cómo
construimos productos.
No reinventer la rueda. Diseña una vez las mismas cosas.
Tipografía y colores.
La organización es básica, tener un sistema sólido es muy importante,
puede partir de tener una buena guía o escala tipográfica y paleta de colores
definida.
Tomemos la decisión una vez.
Nos ayudará a ser consistentes y evitar decisiones arbitrarias, una y
otra vez.
Un sistema de diseño te permite establecer patrones y contar con una serie de
elementos que se pueden y se deben reutilizar para crear funcionalidades.
Diseño atómico.
La modularidad del sistema es lo que permite crear una unidad mínima,
hasta componentes más complejos y establece reglas que nos ayudan a trabajar a
través de principios y trabajar en forma lineal.
Design tokens, Átomos, moléculas, organismos, templates, páginas.
Design tokens, son entidades con nombre que almacenan atributos de
diseño visual, por ejemplo tamaño, interlínea, tipógrafía, color, espaciado, ... Y
los utilizamos en lugar de valores hardcodeados en nuestro código para mantener un
sistema visual escalable y consistente. Nos permiten que nuestra aplicación sea
consistente indiferentemente de la pantalla a la que esté destinado.

Organización, colaboración y procesos.

La organización es clave para administrar diferentes archivos en tu flujo de

trabajo. Podemos comenzar con los nombres de los archivos, luego pensa en carpetas,
otros tipos de estructuras y tener en cuenta que la organización de grupos
individuales es diferente a la de una gran empresa u organización.
Proceso. Entendemos el proyecto, el problema. Iteramos. Testeamos. Al
finalizar el bucle anterior entregamos el fichero.
Este concepto aplica a Figma o a Ficheros personales en computadora o nube.
Por eso deberíamos intentar tener una nomenclatura y una convención adecuada
para tener a nuestros ficheros organizados para que al ordenar por nombre todo
funcione como debería estar.
La organización también se aplica a las capas de diseño, nomenclaturas,
frames.
Colaboración. En figma hay diversos tipos de roles, por ejemplo el editor y
el viewer. Si alguien hace un cambio va a estar disponible para todos
inmediatamente.

Principios de animación.
Conceptos.
Duración y velocidad.
Tamaño importa.
Móvil.
Tablets y relojes inteligentes.
Movimiento.
Principios.
Comprensión y extensión. Necesitamos dar una sensación de peso y
flexbilidad a los objetos dibujados.
Anticipación. Hay que preparar a la audiencia para una acción para que
la acción parezca muchísimo más realista. Por ejemplo: Un personaje que hace un
salto tiene que realizar un movimiento antes de ello.
Puesta en escena. Dirigir la atención de la audiencia y dejar claro que
es lo más importante de una escena.
Seguimiento y acción superpuesta. Dos técnicas muy relacionadas que
ayudan a representar el movimiento de una manera mucho más realista y ayudan a dar
la impresión de que los personajes siguen las leyes de la física a través del
principio de la inercia. Aceleración o desaceleración además del moviento lineal.
Entrada y Salida. El movimiento de objetos en el mundo real necesita
timpo para acelerar y desacelerar por eso se dibijan más imágenes cerca al
principio o al final de una acción creando un efecto de entrada salida lenta
creando movimientos mucho más realistas.
Acción secundaria. Agregar acciones secundarias a la prinicipal le
puede dar más vida a la escena y puede ayuda y dar más importancia a la acción
principal. Por ejemplo: Una persona que camina puede también silvar.
Tiempo. Cantidad de dibujos o fotogramas para una acción determinada lo
que se traduce en la velocidad de acción de una película. En un nivel puramente
físico la sincronización correcta de que los objetos parezcan obedecer las leyes de
la física.
Exageración. Es un efecto especialmente útil para la animación ya que
los movimientos animados que buscan una imitación perfecta de la realidad puedan
parecer estáticos y aburridos. El nivel de exageración depende de si se busca el
realismo o una caricatura o el estilo de un artista específico.

Prototipando en Figma.

Objetivos y Destinos. Cuando prototipamos una navegación necesitamos

capturar cuál es el objeto y cuál es el destino.
Interacción. Definir cuándo va a ocurrir la interacción. Cuál es el
disparador.
Transiciones o animaciones.
Previsalizar el prototipo.

En animaciones considerar el máximo de 400ms como tiempo de respuesta óptimo.