Diseño visual

Diseño visual

1. Estilo de interfaces

   • Android
     • Simplicidad
   • iPhone
     • Ligereza visual
   • Windows Phone
     • Diseño plano

2. Interfaces nativas o personalizadas

3. La identidad visual

   • Forma parte del sitema
     • Oportunidad de extender la empresa o producto
       • La marca

4. Iconos y pantalla inicial

   • Impresión inicial
     • Ícono de lanzamiento
       • Representativo
       • Buen tamaño
       • Android
         • Distintivas y con medido realismo
       • iPhone
         • Contienen un solo elemento principal
       • Windows Phone
         • Pictogramas
     • Íconos interiores
       • Tienen un papel menos estelar y más funcional
       • Representativos a la acción a ejecutar
     • Pantalla inicial
       • Conocida también como splash
       • Presentación del contenido
         • Nombre de la app
         • Versión

5. Grilla o retícula de construcción

   • Estructura invisible
     • Android
       • Módulo base de 48 px
     • iPhone
       • Módulo base de 44 px
     • Windows Phone
       • Módulo base de 25 px
   • Permite
     • Establecer imagenes
     • Ubicación de botones
     • Separar tipografía

6. Tipografía

   • El texto se debe leer con claridad
     • Serif o sans-serif
     • Legibilidad y resolución
     • Tamaños mínimos
   • Jerarquías

7. Color

   • Colores reservados
     • Rojo
       • Errores y alertas
     • Amarillo
       • Prevención
     • Verde
       • Mensajes de éxito
   • En fondos
     • Debe estar en consonancia con el elegido para la tipografía
     • Fondos oscuros cansan la vista
   • En textos
     • Elementos tipográficos interactivos
     • Jerarquizar el contenido
   • En elementos interactivos
   • En encabezados

8. El lenguaje: cuidando las palabras

   • Son tan importantes como el elemento gráfico que las contiene o acompaña
     • La incidencia de la palabra equivocada
       • Puede llevar a confusiones sobre el resultado de la acción que indica
     • El receptor
       • Esto es importante para determinar la forma en que se articulan las frases y el lenguaje que se utiliza
     • Comunicando errores
       • Mensajes amables
     • Textos en otros idiomas
       • Tener cuidado con el espacio visual que requieren las traducciones

9. Detalles visuales

   • Es verdad que la diferencia radica en los detalles. Ellos pueden separar una aplicación regular de una genial.
     • 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.
     • Gráficos efímeros
       • Es necesario considerar también el diseño de aquellos elementos que aparecen por poco tiempo en la pantalla.
     • Secretos visuales

10. Animando la app

    • Llenan de vida la aplicación y hacen más agradable su uso, a la vez que acompañan una función principal o una acción.
      • Como feedback
      • Como transiciones.
      • Como herramientas informativas.
      • Puro «caramelo visual».