Diseño visual

Diseño visual

1. Interfaz

   • En mayor medida está compuesta por botones, gráficos, íconos y fondos, que tienen una apariencia visual diferente en cada uno de los sistemas operativos
     • IOS
       • Cada componente de la interfaz se trata como una capa superpuesta a la otra, a veces con cierta transparencia y difuminado, transmitiendo una sensación de continuidad y permanencia en el contexto
     • Android
       • El diseño en Android está basado en una pulcritud brillante en la composición de la interfaz
     • Windows Phone
       • El estilo de diseño de Windows Phone se basa en un diseño plano, despojado de relieves, degradados y decoraciones estéticas excesivas
     • Nativa
       • Se basan en elementos —botones, listas y encabezados— que vienen preestablecidos en cada plataforma
     • Personalizada
       • Interfaces personalizadas pueden ofrecer una apariencia más acabada, pero al trabajar con ellas hay que considerar la compatibilidad con múltiples dispositivos

2. Identidad visual

   • A través de las diferentes pantallas de la app, los colores, tipografías y fondos actúan como elementos que refleja la identidad visual
     • Iconos
       • Icono de lanzamiento
         • El ícono de lanzamiento de una app debe tener personalidad para diferenciarla de las demás en una tienda, pero también representar claramente lo que hace
         • IOS
           • Íconos encerrados en formas contenedoras con esquinas redondeadas, el sello de identidad de iOS
         • Android
           • En Android los íconos suele tener sombras y juegan con una ligera perspectiva
       • Iconos interiores
         • Los íconos interiores actúan como complemento de elementos interactivos, su función puede ser la de mejorar la utilización del espacio, en este caso, el ícono resume visualmente algo que en forma de texto sería muy extenso o complejo de entender
     • Pantalla inicial ó Splash
       • Esta pantalla sirve como presentación del contenido mientras se realiza la carga inicial, por tanto, es normal que se incluya un elemento indicativo de carga junto a los demás elementos gráficos

3. Retícula de construccion

   • La grilla o retícula “grid “en inglés es la estructura invisible sobre la cual se apoyan todos los elementos visuales. Su función es la de separar cada uno de los componentes de la interfaz en un espacio ordenado, organizando los sitios que quedarán en blanco y aquellos que contendrán formas
     • IOS
       • En iOS el módulo base es de 44px. Este módulo de 44px se divide en otros de 11px que, repetidos la cantidad de veces deseada, crean los espacios y separación entre tablas, botones y otros elementos
     • Android
       • La grilla en android está compuesta por un módulo base de 48dp, Para el espaciado y separación, en cambio, se usa un módulo de 8dp, En los márgenes laterales, los diseños suelen tener 16dp
     • Windows phone
       • La retícula se apoya en un módulo de 25px con separaciones de 12px. Esta fórmula, repetida por toda la pantalla

4. Tipografía

   • El objetivo de la tipografía es conseguir que el texto se lea con claridad. Esto se logra no solo con una adecuada elección de la fuente, sino también gestionando su tamaño, separación entre líneas, ancho de columnas y contraste visual con el fondo
     • Legibilidad y resolución
       • La pantalla influye bastante en el comportamiento y desempeño tipográfico si se tiene en cuenta que, en algunos casos, es sumamente pequeña
     • 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
         • IOS
           • Tamaños tipográfico de 14px hasta 34px
         • Android
           • Tamaños tipográfico de 12sp hasta 22sp
         • Windows phone
           • Tamaños tipográfico de 20px hasta 70px
     • Jerarquias
       • Para definir diferentes niveles de protagonismo en un texto se puede apelar, además del tamaño, a las variantes negrita, regular o light, por ejemplo y al color
     • IOS
       • Neue Helvetica Light, Neue Helvetica Medium
     • Android
       • Roboto regular, Roboto bold
     • Windows phone
       • Segoe UI Semilight, Segoe UI Semibold

5. Color

   • Su uso abarca encabezados, textos, botones, fondos y muchos otros elementos que conforman la interfaz. En algunas ocasiones, está asociado a la identidad color corporativo.
     • Colores reservados
       • Suelen reservarse para reforzar el significado y la importancia de algunos elementos visuales
         • 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, o en jerarquizar contenido
     • 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
     • En elementos interactivos
       • Se utiliza como respuesta o feedback a acciones concretas del usuario
     • En encabezados
       • Los encabezados juegan con variaciones de color que marcan una diferencia visual entre cada una de las secciones
     • Colores por defecto de cada S.O.
       • IOS
         • Los colores por defecto de iOS están basados en los negros y azules.
       • Android
         • Sugiere una paleta de colores, aunque su recomendación principal es usar el azul
       • Windows phone
         • Deja elegir al usuario temas claros u oscuros y un color que se utiliza para resaltar aquellos elementos más importantes

6. El lenguaje

   • las palabras son tan importantes como el elemento gráfico que las contiene o acompaña. Lenguaje textual y visual van de la mano, unidos para lograr una experiencia de usuario consistente en todos los sentidos.
     • La incidencia de la palabra equivocada
       • Cómo formular una frase es algo que generalmente no suele considerarse importante en un primer momento, pero tiene influencia directa en la forma en que el usuario usa la aplicación y se relaciona con ella
     • El receptor
       • Es importante para determinar la forma en que se articulan las frases y el lenguaje que se utiliza. No es lo mismo hablarle a un niño que a un adulto
     • Comunicando errores
       • Esta es una situación estresante o desagradable para el usuario, pero a través de mensajes amables, puede sobrellevarse de una forma menos traumatica
     • Testos en otros idiomas
       • Hay que tener cuidado al incorporar los textos traducidos para asegurase de que sigan viéndose correctamente en el espacio visual que tienen asignado

7. Detalles visuales

   • Ellos pueden separar una aplicación regular de una genial
     • Pantallas vacias
       • 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
       • Se puede pensar en aquellos gráficos que están ocultos a primera vista, que no son de fácil acceso para el usuario, pero que una vez descubiertos generan un placer especial
     • Animando la app
       • Las animaciones son más difíciles de diseñar y, en ocasiones, de percibir que los llamados detalles visuales, pero también hacen una diferencia en la experiencia de usuario
         • Como feedback
           • Los gráficos en pantalla pueden animarse para mostrar el resultado de una acción
         • Como transiciones
           • Las animaciones pueden ayudar a hacer las transiciones entre pantallas más fluidas
         • Como herramientas informativas
           • Puede ser necesario mostrar algún elemento en la pantalla señalando cómo se usa o destacar la presencia de un componente nuevo
         • Puro Caramelo visual
           • A veces, una animación no cumple otra función más que endulzar el ojo del usuario