UI Design

• The principle of continuity states that elements that appear to continue each other are perceived as a single shape.
• Objetivos de este curso:

  • Aplicar los principios fundamentales para el diseño de producto digital
  • Ser capaz de comunicar ideas a través de la herramienta de diseño profesional Figma
  • Adquirir conocimientos básicos para avanzar en Platzi y mejorar en el mundo del diseño
  • Ampliar la mente para entender el diseño y analizar aplicaciones o webs diarias
• Resumen del mundo digital:

  • Las pantallas son limitaciones en el mundo digital
  • El pixel es la unidad gráfica digital más pequeña, compuesta por un punto
  • Relación de aspecto, resolución y densidad de píxeles son conceptos importantes en pantallas
  • Teoría básica del color: CMYK y RGB
  • Detalles sobre la cantidad de colores, espacio de color y almacenamiento de información en computadoras
• Introducción al software:

  • El diseño digital comienza con la resolución de problemas
  • Uso de papel y lápiz como inicio
  • Archivos siempre en la nube, guardado automático y herramientas colaborativas
  • Propiedades de capas: posición, tamaño, rotación, relleno y borde
• Historia del diseño:

  • Diferencia entre arte y diseño
  • Concepto de diseño de producto y diseño de usuario
  • Evolución del diseño con la tecnología
  • Principios de buen diseño
• Principios heurísticos de percepción y comportamiento I:

  • Importancia de tener un por qué detrás de cada diseño
  • Ley de Hick, equilibrio entre flexibilidad y usabilidad, carga de trabajo y ley de Miller
• Principios heurísticos de percepción y comportamiento II:

  • Efectos de posición, punto máximo, Von Restorff, escasez, redundancia, consistencia e interferencia
  • Jerarquía de las necesidades en el diseño
  • Regla del punto máximo y "El orden si altera el producto"
• Principios heurísticos de relación y jerarquía:
• Ley de las regiones comunes: Tendemos a percibir límites y áreas si comparten un área definida
• Ley de la proximidad: Agrupamos elementos próximos, elementos cercanos se agrupan entre sí
• Ley de la similitud: El ojo humano tiende a agrupar lo similar, incluso si están separados
• Ley de conectividad uniforme: Los elementos conectados visualmente se perciben con mayor facilidad
• Densidad proposicional: Relación diseño-significado
• Capas: Agrupar información en agrupaciones relacionadas ayuda a entender y gestionar la complejidad, y a reforzar las relaciones entre los elementos
• Jerarquía: La organización jerárquica es la estructura más simple para visualizar y comprender la complejidad
• Continuidad: El cerebro hasta opta por completar espacios para lograr una secuencia o patrón, líneas rectas o curva suave
• Alineación: Alineación de elementos cuyos bordes o columnas sean comunes, o cuerpos con centros comunes, ayuda a la legibilidad
• Principios heurísticos de forma I:
• La forma sigue a la función, los diseños responden a decisiones racionales para dar significado
• Ley de Pragnanz: Interpretación que requiere el menor esfuerzo, imágenes ambiguas o complejas se interpretan como la forma más simple
• Sesgo de iluminación: Áreas sombreadas como fuentes de luz sobre objetos
• Proyección tridimensional: Vemos objetos como tridimensionales cuando hay ciertas señales visuales presentes
• Simetría: Equivalencias visuales en los elementos de una forma
• Relación señal a ruido: Información relevante e irrelevante mostrada en pantalla
• Regla de tercios: Técnica en que medios se divide en tercios creando posiciones estéticas para los elementos de la composición
• Legibilidad: Claridad visual, tamaño, letra, contraste, alineación, espaciado
• Iconos: El uso de imágenes pictóricas mejora el reconocimiento y recuerdo de las señales
• Remarcar: Técnica para llamar la atención sobre un área de texto o imagen
• Ratio de oro / Golden ratio / Proporción áurea: Nos habla de la relación entre el tamaño de los elementos
• Profundidad de procesamiento: La información que se analiza profundamente se recuerda mejor
• Sesgo de contorno: Preferencia en preferir objetos con contornos redondeados
• Leyes de UX:
• La primera impresión es importante
• La velocidad es clave
• Un poco de orden también es relevante
• Los objetivos deben ser fácilmente localizables y accesibles
• Las opciones no deben ser abrumadoras
• La memoria de los usuarios no es infinita
• Les encantan las cosas conocidas
• Umbral de Doherty: La productividad se dispara cuando una PC trabaja a un ritmo menor a 400 ms