Please enable JavaScript.

Coggle requires JavaScript to display documents.

Interface design - Coggle Diagram

- - - - Limites:
        Tener presente la versión ideal y simple del producto y en base al presupuesto, tiempo y recursos crear a idea realista.
        Alcance: Jerarquizar y dejar los plus para una próxima iteración
      - Estructura la información y contenido del producto según los objetivos
      - Cree en tu idea, pero no confíes tanto en tu ideas, por eso: prueba, juzga, compara e inténtalo de nuevo
      - Crear el flujo del producto
      - Wireframes
        
        Son una parte mas del diseño en la bocetacion de la idea en base a las siguientes partes:
        
        Arquitectura
        
        Jerarquía se da según forma, tamaño y posición
        
        Estructura Define el tipo de elemento y la sistematización, cada componente debe tener nombre, función y herramienta.
        
        Componente Tiene que tener un estructura en común para evitar diseñar varias veces lo mismo
        
        Foundations
        
        Los wireframes son estáticos, solo importa la arquitectura del producto
        Lo mas simple posible (black and white)
        Rápido y mas rápido
        
        Tener en cuenta, durante el diseño del flujo:
        
        Flujo
        
        Estado
        
        Retroalimentación
        
        El objetivo es crear estructura sin perder de vista crear una grafica impactante
        
        Wireframes:
        
        Niveles de resolución
        Low level
        Medium level
        High level
        
        Arquitectura de la información
        Jerarquía, textos, grupos y componentes
        
        Flujos
        Flujo de información, flujo visual y resisar funciones
        
        Prototipo
        
        Tools:
        Adobe XD
        Invision
        Sketch
        Figma
        Marvel
        
        El proceso es solo una parte del producto al final el diseño debe ser código, y para eso es el prototipo, comunicación efectiva con desarrollo
        No se debe prototipa todo lo mas recomendable es prototipar las funcionalidades mas complejas
        Medar entre lo que puedo comunicar con un estático y que requiere animación
        El prototipo debe comunicar de una forma clara los flujos
        
        Tener en cuenta la prototipar:
        
        Animación:
        Estar al pendiente de comunicar las entradas y salidas
        
        Comportamiento:
        
        Interacción - retroalimentación:
        Debes pensar que pasa cuando el usuario hace onkeypress, on responde, on click rage, enter, emoji
        
        Estados:
        Como cambia el componente a partir de las interacciones
        (Desconexión, sin respuesta, error en envió de mensaje, navidad, etc.)
        
        Tiempo:
        Wireframe low 2X
        Estático detallado 10X
        Animado 10X
        
        Patrones
        
        Soluciones mas comunes para una funcionalidad dentro de una interfaz
        No hablan sobre el diseño hablan sobre la estructura ya definida para una funcionalidad
        El aprovechar el conocimiento ya adquirido de los usuarios
        
        Estilos de interfaces
        
        Wireframe - Mockup - Prototipo
        Mockup: Es un prototipo estático que nuestra con detalles gráficos las interfaces
        Usar moodboard para experimentar e idear
        "Alimenta tu creatividad, con nuevas experiencia, la creatividad es buena memoria asociativa"
        "Yo encuentro alimento e la ciencia ficción y en los video juegos"
        Es momento de ir pensando en el copywritting
        
        Factores:
        
        Diseño de producto
        
        Diseño de interfaces
        
        Visual Design
        
        Swag
        Pequeños elementos que hacen a tu plataforma única
        El lenguaje grafico tiene que ver con el concepto de la aplicación
        
        Micro interacciones
        
        Buenas practicas
        
        2 more items...
        
        Se basan en la interacción que tienen las personas con el software
        
        Fases:
        Trigger/ Disparador
        Son las acciones que van a activar la interacción como: click, tap. tiempo,
        
        Reglas:
        Son cosas en particular que se deben cumplir para que la micro interacción te muestre o te informe ciertas características de un proceso.
        
        Retroalimentación:
        Es la comunicación de vuelta que te da un botón u elemento que tiene la micro interacción
        
        Bucles o modos, en todo caso estados
        Te da a entender que la acción es repetitiva
        
        "Experimenta mucho con animaciones"