DISEÑO VISUAL DE LA APLICACIÓN
El diseño visual es para muchos diseñadores la etapa más divertida del proceso. Aquí se da vida a los wireframes con un estilo que está marcado tanto por el diseñador como por la personalidad de cada sistema operativo.
El estilo de las interfaces
La interfaz de una aplicación es como la ropa que viste para salir a la calle. Es también la capa que hay entre el usuario y el corazón funcional de la app, el lugar donde nacen las interacciones.
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, porque Android, iOS y Windows Phone tienen su propia forma de entender el diseño.
El trabajo del diseñador consiste en interpretar la personalidad de cada sistema operativo, aportando su propia visión y estilo de diseño, para conseguir aplicaciones que, además de ser fáciles de usar, sean distintas a las demás y tengan coherencia visual con la plataforma que las acoge.
LA BELLEZA SIMPLE DE ANDROID
El diseño en Android está basado en una pulcritud brillante en la composición de la interfaz. Cada gráfico, botón y texto está acompañado por la idea de limpieza visual pero, a la vez, deslumbra con pequeños detalles.
Roboto, la tipografía propia de este sistema operativo, es en gran parte su seña de identidad y se combina con un estilo de botones y colores bien definido. Android se apoya en la simplicidad, controlada pero no aburrida, que, en ocasiones, rompe o trasciende sus propios formalismos para encantar al usuario.
PHONE, EN BUSCA DE LA LIGEREZA VISUAL
Dejando atrás el estilo que lo marcó hasta su versión 6, iOS defiende actualmente una ideología compartida también con otros sistemas operativos: despojarse de elementos innecesarios, privilegiando el contenido sobre el contenedor.
Para conseguir esto, reduce controles y gráficos a su mínima expresión, siempre con la idea de aligerar visualmente los elementos en pantalla. Este concepto se respalda con la elección tipográfica —Neue Helvética, muchas veces en sus variables más light— y los colores —blancos para fondos y fuertes para íconos y textos—.
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.
EL DISEÑO PLANO DE 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. Esta limpieza visual también se aplica a los contenidos, donde solo aquellos importantes permanecen en pantalla, luciéndose en su contexto.
La interfaz consiste en una aproximación infográfica para sus íconos, con un marcado uso de la retícula y la tipografía como uno de los principales recursos para dotar de personalidad al diseño.
Interfaces nativas o personalizadas
Las interfaces nativas se basan en elementos —botones, listas y encabezados— que vienen preestablecidos en cada plataforma. Tienen un aspecto ya definido en cuanto a las características básicas de su apariencia como color, tamaño o tipo de fuente, que pueden ajustarse en mayor o menor medida para que se correspondan con la estética buscada.
En el momento de comenzar a diseñar es recomendable definir la interfaz con elementos nativos. De esta forma, se consigue una buena base sobre la cual trabajar y no es necesario crear todos los elementos desde cero.
El inconveniente de las interfaces nativas es que limitan la personalidad del diseño y, en algunos casos, es necesario ir un paso más allá. En situaciones como esta, todos o algunos elementos de la interfaz pueden ser personalizados, lo cual se logra creándolos de nuevo como imágenes. Por ejemplo, un elemento visual personalizado podría ser un campo de entrada de texto de un formulario que se genera como imagen, para aprovechar la posibilidad de incluir texturas, relieves o sombras específicas, que un elemento nativo no ofrece.
Diseñar una interfaz personalizada tiene que planearse de antemano porque representa una mayor complejidad y tiempo de desarrollo. De la misma manera, no siempre los diseños de este tipo de interfaces se trasladan a la aplicación funcional de forma fidedigna, pues su correcta implementación queda en manos de la pericia del desarrollador.
¿CUÁNDO USAR UNA U OTRA INTERFAZ?
En la mayoría de los casos no se trata de elegir entre una u otra, sino de alcanzar el balance adecuado combinando ambas. La situación más habitual suele ser partir de una interfaz nativa y personalizar solo aquellos elementos que se consideren necesarios.
El tipo de aplicación también tiene incidencia en este asunto. Por ejemplo, las aplicaciones que dan valor a los detalles visuales y a la experiencia en general, suelen contar con más de un elemento personalizado. Tal es el caso es Path y su forma de añadir «momentos», algo diseñado y desarrollado a medida.
Por el contrario, hay otras aplicaciones que dan más valor al cumplimiento de tareas y que se benefician de tener una apariencia más limpia que no distraiga del proceso. Un ejemplo de ellas es Whatsapp, cuyo aspecto visual está completamente basado en elementos nativos del sistema operativo.
Además del objetivo o del tipo de aplicación, hay otras variables para considerar. Las interfaces nativas tienen un punto a favor y es que están constituidas por elementos que el usuario ya conoce y a los que está habituado, por lo tanto, no representan un nuevo aprendizaje. Esto puede incidir favorablemente en la usabilidad de la app.
Por otro lado, las interfaces personalizadas pueden ofrecer una apariencia más acabada, pero al trabajar con ellas hay que considerar la compatibilidad con múltiples dispositivos —cómo se visualiza el mismo diseño en teléfonos diferentes— y el rendimiento general —un uso excesivo de imágenes puede hacer que la app sea más lenta—.
La identidad visual
Una aplicación es, entre otras cosas, una pieza de comunicación. Forma parte de un sistema y es una oportunidad para extender la identidad de una empresa o producto.
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. Aunque sea tentador hacer un uso extensivo y repetido de ella, se recomienda incluirla en lugares propicios para tal fin, como pantallas introductoras, pantallas para ingresar clave y usuario, o en la sección «Acerca de». De esta forma, se puede asegurar una correcta exhibición de la identidad sin afectar la navegación y la experiencia de uso.
ICONOS Y PANTALLA INICIAL
Dicen que la primera impresión es la que cuenta. En el mundo de las aplicaciones esa primera impresión está limitada a dos componentes visuales: el icono de lanzamiento y la pantalla inicial —también llamada splash— que se mostrará muchas veces al abrir la aplicación.
Estos elementos se verán antes que nada, incluso, antes de empezar a usar realmente la aplicación. No menospreciar su importancia y darles la atención que merecen, garantiza arrancar con el pie derecho.
ICONO DE LANZAMIENTO
Hay que pensar en la aplicación como un producto que estará en un escaparate junto a muchos otros y el icono de lanzamiento es el packaging que lo envuelve.
En primer lugar, este icono servirá para representar a la app en las diferentes tiendas de aplicaciones —junto a las pantallas y textos promocionales— como elemento de venta para convencer al usuario de descargarla.
Sorteado este paso, y una vez instalada en el teléfono, la aplicación convivirá con muchas otras que el usuario haya instalado; por eso, el ícono de lanzamiento debe ser distintivo y representativo de la app. Distintivo, porque tiene que separarla de las demás, incluso de aquellas que cumplan funciones similares, y representativo, porque sus características visuales tienen que comunicar claramente el objetivo principal de la aplicación. Las formas simples, no muy cargadas y cuidadas en sus detalles, suelen ser las que tienen mayor efectividad.
El tamaño también es algo a tener en cuenta. Algunas veces, el icono se verá realmente grande, por ejemplo en las tiendas de aplicaciones, pero otras, como cuando la app está instalada, se verá mucho más pequeño. Al diseñarlo hay que considerar todas las posibilidades, añadiendo más o menos detalle a la imagen en función de sus dimensiones.
Siendo aún más específicos, cada uno de los SO tiene diferentes requisitos que debe cumplir el icono de lanzamiento. Tanto Android como iOS ofrecen detalladas guías del estilo visual y características técnicas que debe tener esta imagen.
En Android los iconos son objetos representados frontalmente con una ligera perspectiva, como si fueran vistos desde arriba. Dan sensación de volumen y profundidad, jugando con transparencias para integrarse mejor a la pantalla. Las formas son distintivas y con medido realismo.
La situación es diferente en iOS: los iconos son por lo general representaciones muy simplificadas de objetos reales o abstracciones del concepto de la app. Por lo general el ícono contiene un solo elemento principal, sin muchos detalles, que reposa sobre un fondo opaco. Para completar la apariencia visual que el ícono tiene en la pantalla del teléfono, iOS añade bordes redondeados a la imagen, que debe ser cuadrada y cubrir la totalidad del tamaño requerido en cada caso.
Por su parte, en Windows Phone tienen un estilo bastante característico: los iconos son pictogramas. Formas extraordinariamente simples y de colores planos —sobre todo blanco—, casi sin detalles e integradas perfectamente a su contenedor. En este caso, la transparencia es fundamental ya que las imágenes están ubicadas dentro de una forma cuadrada, que puede cambiar el color de fondo de acuerdo a las preferencias cromáticas del usuario.
ÍCONOS INTERIORES
Ya dentro de la aplicación, los iconos interiores tienen un papel menos estelar y más funcional que los de lanzamiento. Puede ser que pasen desapercibidos, pero su trabajo es importante y silencioso y, como tal, digno de tener en cuenta.
Su uso suele estar asociado a tres escenarios. El primero, como ayuda visual para reforzar información, por ejemplo, en un cuadro de diálogo con una alerta. En el segundo caso, los iconos interiores actúan como complemento de elementos interactivos, como cuando se encuentran dentro de botones o pestañas. Finalmente, 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.
Los iconos tienen que transmitir por sí solos la acción que ejecutan y esto depende del contexto. Por ejemplo, un ícono de «eliminar» puede referirse a un solo elemento en particular o a varios, dependiendo de dónde esté ubicado y a qué elemento de la interfaz esté visualmente asociado.
Cuando los iconos acompañan determinadas acciones —si no tienen etiquetas de texto que ayuden a ejemplificar su función— se vuelve más importante que sean claros y representativos. Esto ocurre cuando, por limitaciones de espacio, no puede incluirse un ícono y texto al mismo tiempo. Además, es una tendencia que está empezando a verse cada vez más en las aplicaciones.
La interpretación de iconos supone cierta subjetividad que hay que tratar de eliminar haciendo un uso correcto de ellos. Por ejemplo, en cada plataforma algunas acciones como «buscar», «guardar» o «editar» tienen iconos asociados. El usuario ya los conoce y sabe qué significan, por lo tanto, darles el uso que se espera de ellos ayudará a alcanzar consistencia y mejorará la usabilidad de la aplicación.
PANTALLA INICIAL
Conocida también como splash, es la primera pantalla que verá el usuario al iniciar la app. Su uso está siendo cada vez más limitado —y evitado—, por lo que generalmente se muestra rápidamente la primera vez que se abre la aplicación. 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.
La pantalla inicial tiene un carácter tan efímero que pocas veces se ve más de un par de segundos. Debido al poco tiempo de vida que tiene, la información que muestra se debería limitar al nombre, versión de la aplicación y poco más, ya que desaparecerá tan pronto como la aplicación termine de cargarse.
En algunos casos, este splash se trata de una representación del contenedor de la aplicación: una imagen casi idéntica a la que verá el usuario cuando la carga haya finalizado, pero sin aquellos datos que pueden llegar a cambiar como textos, etiquetas en botones y elementos de la barra de estado, haciendo que, aparentemente, la carga resulte más fluida.
En el caso de Windows Phone, el sistema operativo se encarga de gestionar la pantalla de inicio que consiste en una ampliación del ícono de lanzamiento.
En cuanto a la orientación de esta pantalla en teléfonos móviles, hay que recordar que suele mostrarse de forma vertical, mientras que en las tabletas, es necesario determinar la orientación que se está usando al momento de mostrar el splash y, en función de eso, hacer uso de la versión correspondiente al modo horizontal o vertical.
PARRILLA O RETÍCULA DE CONSTRUCCIÓN
La parrilla 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. Una retícula bien definida se transforma en una ayuda al diseño que, generando orden y simplicidad, mejora la usabilidad de la app.
En su forma más básica consta de un módulo base: un cuadrado de un tamaño determinado que se usa como medida de referencia. A su vez, este módulo puede dividirse en submúltiplos para espaciados más pequeños.
Mientras el diseño de la interfaz está en desarrollo, la retícula se representa por medio de líneas guía. Una vez terminada la estructura, se puede percibir por el llamado «ritmo visual» que ubica los elementos armónicamente en el espacio.
En el diseño de interfaces para móviles, la parrilla permite establecer márgenes y determinar la ubicación de los botones, la separación de la tipografía y el espacio interior y exterior de los contenedores. Por supuesto, cada uno de los sistemas operativos tiene diferentes retículas y por lo tanto, distintos módulos.
ANDROID
En Android, el módulo base es de 48dp que equivale aproximadamente a nueve milímetros, tamaño mínimo recomendado para elementos interactivos. Basarse en este tamaño y respetar estas dimensiones para los botones, permite asegurar que estos podrán ser tocados con el dedo sin problemas, cuestión fundamental en el diseño para móviles.
Para el espaciado y separación, en cambio, se usa un módulo de 8dp. Por ejemplo, el contenido de filas tiene una separación —superior e inferior— de 4dp, lo que hace que cuando dos filas están una sobre otra, se sumen conformando un espacio total de 8dp entre ellas. En los márgenes laterales, los diseños suelen tener 16dp o, dicho de otra forma, dos módulos de 8dp juntos4.
IPHONE
Los diseños para iPhone también se basan en una retícula, solo que en este caso el tamaño del módulo base es de 44px, asegurando que botones y elementos en listas puedan ser pulsados sin problemas. En ese ritmo se basan muchas aplicaciones diseñadas para iPhone y es el mismo que recomienda Apple.
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 de la interfaz, generando un ritmo vertical.
WINDOWS PHONE
En Windows Phone la retícula se hace más evidente debido al uso que hace de formas cuadradas en la interfaz. La pantalla principal del sistema operativo está basada en los llamados azulejos o tiles, que permiten apreciar claramente la distribución y tamaño de los elementos principales.
En este caso, la retícula se apoya en un módulo de 25px con separaciones de 12px. Esta fórmula, repetida por toda la pantalla, crea una estructura visual sobre la cual se crean los diseños. Adicionalmente, las filas y columnas pueden agruparse de distintas maneras para lograr diseños personalizados que hacen diferentes usos del espacio.
