Diseño Visual

Diseño Visual

1. Android

   • Tipo de fuente Roboto
   • Basado en una pulcritud brillante en la composicion de la interfaz
   • Los íconos suele tener sombras y juegan con una ligera perspectiva.
   • *Las pantallas iniciales contienen poca información y solo se muestran brevemente durante la carga inicial.
   • Los tamaños más comunes para textso van desde 12sp hasta 22sp.
   • Para el espaciado y separación, se usa se usa un módulo de 8dp o 2 modulos de 4dp
   • El módulo base es de 48dp
   • Se recomienda utilizar color Azul

2. IOS

   • Despojar de Elementos innecesarios
   • Tipo de fuente Neve Helvetica
   • Íconos encerrados en formas contenedoras con esquinas redondeadas, el sello de identidad de iOS.
   • usar una pantalla inicial que sea una representación del contenedor, vacío de información, para conseguir una sensación de inmediatez en la carga
   • Módulo base es de 44px
   • Para espacios y separaciones son de 11px
   • Los tamaños más comunes para textos van desde 34px hasta 14px
   • Los colores por defecto de iOS están basados en los negros y azules.

3. Windows Phone

   • Diseño Plano, Despojado de relieves,degradados y decoraciones
   • muy basado en su retícula y tipografía, evocando la escuela suiza de diseño.
   • Tipo de Fuente Segoe UI
   • La retícula se apoya en un módulo de 25px con separaciones de 12px.
   • Los tamaños más comunes para textos van desde 20px hasta 70px
   • Windows Phone deja elegir al usuario temas claros u oscuros y un color que se utiliza para resaltar aquellos elementos más importantes.

4. Interfaces Nativas o Personalizadas

   • Nativas
     • Se basan en elementos botones, listas y encabezado que vienen preestablecidos en cada plataforma
     • El problema de usarlas es la limitan el diseño
   • Personalizadas
     • Diseñar una interfaz personalizada tiene que planearse de antemano porque representa una mayor complejidad y tiempo de desarrollo.
   • En la mayoría de los casos no se trata de elegir entre una u otra, sino de alcanzar lo establecido.

5. Identidad Visual

   • A través de las diferentes pantallas de la app, los colores, tipografías y fondos actúan como elementos que reflejan esa identidad.
   • Claramente, uno de los componentes de la identidad es la marca.

6. Iconos y Pantalla inicio

   • Icono de Lanzamiento
     • Debe ser distintivo y representativo de la app
     • Las formas simples, no muy cargadas y cuidadas en sus detalles, suelen ser las que tienen mayor efectividad.
   • Iconos Interiores
     • Los íconos interiores tienen un papel menos estelar y más funcional que los de lanzamiento
     • Ayuda visual para reforzar información
     • los íconos interiores actúan como complemento de elementos interactivos, botones o pestañas.
     • Mejorar la utilización del espacio, en este caso, el ícono resume visualmente algo que en forma de texto .
   • Pantalla de Inicio
     • Conocida también como splash
     • Es la primera pantalla que verá el usuario al iniciar la app

7. Tipografía

   • El objetivo de la tipografía es conseguir que el texto se lea con claridad
   • El contraste, es más importante de lo que puede creerse a simple vista.

8. Legibilidad y resolución

   • *En terminales con buena calidad de pantalla los caracteres son más legibles. En pantallas de poca densidad la elección tipográfica puede representar un problema mayor.

9. Tamaños Minimos

   • El tamaño de pantalla y la distancia de lectura condicionan la elección de los tamaños de la fuente, el interlineado e interletrado.
   • Los tamaños mínimos pueden variar dependiendo del sistema operativo, la resolución de la pantalla y la fuente que se elija

10. Color

    • es un recurso vital en el diseño de una aplicación. Su uso abarca encabezados, textos, botones, fondos y muchos otros elementos que conforman la interfaz.
    • Colores Reservados
      • Rojo: Para errores y alertas importantes
      • Hay ciertos colores que deben emplearse de forma cuidadosa porque tienen connotaciones que no pueden obviarse.
      • Verde: Mensajes de éxito y confirmación de que una acción se ha realizado correctamente.
      • Amarillo: Prevención. Señala que la acción que va a realizarse implica la toma de una decisión que ocasiona alguna consecuencia

11. Jerarquías

    • Su importancia depende no solo de la función que cumple, sino también de la información que contiene y su posición en pantalla.
    • Un texto con mayor jerarquía sería aquel que se ubica como título principal de sección.

12. Fondos

    • Es necesario un contraste mínimo por cuestiones de legibilidad y accesibilidad. Hay

13. Encabezados

    • Además de destacarlos como elemento principal, cuando el color se usa en encabezados tiene que armonizar completamente con el fondo y los otros elementos de la pantalla.

14. El lenguaje

    • En cada caso, las palabras son tan importantes como el elemento gráfico que las contiene o acompaña.

15. Comunicando errores

    • De entrada, esta es una situación estresante o desagradable para el usuario, pero a través de mensajes amables —que no usen tecnicismos incomprensibles o un tono acusatorio— puede sobrellevarse de una forma menos traumática.

16. Pantallas vacías

    • . Es necesario plantear también el diseño para cuando la aplicación comienza a ser utilizada y aún no se dispone de cierta información