Diseño Visual

Diseño Visual

1. Da vida a los wireframes

   • Marcado tanto por el diseñador como cada S.O.

2. Interfaces

   • Compuesta por:
     • botones, gráficos, íconos y fondos

3. Android

   • • Diseño simple basado en Roboto como fuente principal

4. iOS

   • • La claridad visual, conseguida por la elección cromática y de tipografía de iOS

5. Windows Phone

   • • Estilo plano, muy basado en su retícula y tipografía, evocando la escuela suiza de diseño

6. Identidad visual

   • Uno de los componentes de la identidad es la marca.

7. El ícono de lanzamiento

   • • Servirá para representar a la app en las diferentes tiendas de aplicaciones junto a las pantallas y textos promocionales

8. splash

   • Se mostrará muchas veces al abrir la aplicación

9. Íconos interiores

   • Tienen que transmitir por sí solos la acción que ejecutan y esto depende del contexto

10. Grilla o retícula

    • Su función es la de separar cada uno de los componentes de la interfaz en un espacio ordenado
      • Android
        • El módulo base es de 48dp
      • iOS
        • Módulo base es de 44px
      • Windows Phone
        • Módulo de 25px

11. Tipografía

    • Android
      • Se mide en sp “scaled pixels” o píxeles escalados, van desde 12sp hasta 22sp
    • iOS
      • Los títulos principales rondan los 34px y el tamaño en etiquetas 28px.
    • Windows Phone
      • No usar un tamaño menor a 20px,

12. Color

    • Colores reservados
      • Rojo: Para errores y alertas importantes
      • Amarillo: Prevención
      • Verde: Mensajes de éxito y confirmación
    • En textos
      • se puede usar para destacar aquellas frases o palabras que pueden ser pulsadas, como enlaces
    • En fondos
      • Debe estar en consonancia con el elegido para la tipografía, ya que es necesario un contraste mínimo por cuestiones de legibilidad y accesibilidad

Bilder und Dateien der Mindmap