Cuando un diseñador de UI se enfrenta al diseño de una App, el primer punto al que debe enfrentarse es al diseño de los wireframes  (esquema o plano de las diferentes pantallas), siendo posiblemente la parte más divertida del diseño pero, a la misma vez, la más complicada puesto que en este punto se decide la parte creativa donde van a ir los diferentes elementos de la app, para que la usabilidad sea coherente y sencilla y la información se muestre de la mejor forma posible.

Con los bocetos de nuestra app decididos, es cuando pasamos a darle forma y es en este punto cuando debemos tener en cuenta estos tips para elaborar la estructura y el aspecto final que nuestra aplicación necesita.

La Interfaz

La interfaz es el aspecto a modo global de nuestra aplicación, es donde el usuario interactúa y aquello que lo separa de los órganos internos de nuestra app.

Se compone de muchos elementos (gráficos, botones, fondos, etc..) los cuales varían en función de el sistema operativo en el que nos encontremos (Android, IOS, Windows Phone, etc..). Un diseñador debe conocer bien las preferencias estéticas de cada uno de ellos e intentar adaptar una aplicación a los distintos aspectos según sea el lugar donde va a estar alojada.

Elegir entre interfaces nativas e interfaces personalizadas

Otro punto muy importante a la hora de empezar a implementar nuestro diseño es ver que tipo de interfaz queremos, una interfaz nativa, aquella donde casi todos los elementos de diseño vienen dados según cada plataforma, o una personalizada, donde crearemos todos los elementos bajo criterio propio.

Es una decisión que debe ser tomada a conciencia, ya que de esto dependerá mucho el trabajo que deba realizar a posteriori el programador, además una interfaz nativa se compone de elementos que el usuario ya conoce por lo que esta familiarizado con su uso, de la otra forma debemos ser bastante intuitivos, sino podremos realizar trabajos que el usuario no entienda y no sepa manejar.

Incluso con un diseño muy personalizado, se puede llegar a abusar de imágenes que le den el aspecto que buscamos, y esto puede ralentizar el uso de nuestra app.

Identidad Corporativa

A la hora de diseñar nuestra aplicación es vital que tengamos en cuenta el manual corporativo de nuestro cliente, por lo tanto, debemos intentar compaginar al máximo el estilo visual de la plataforma en donde estará nuestra app, con la imagen de nuestro cliente, ya que es otro escaparate más para reforzar la marca.

Eso sí, no debemos excedernos deberá aparecer el logo y demás elementos corporativos, pero nunca deberán entorpecer o empeorar la experiencia de usuario.

Iconos y Splash

Son dos aspectos primordiales en el diseño de una app. Por un lado, tenemos nuestro icono principal, el cual, deberá ser muy claro y lo suficientemente llamativo para que destaque dentro de un escaparate lleno de aplicaciones con muchos iconos similares.

Además, se deberá tener en cuenta las especificaciones de diseño dentro de cada sistema operativo, ya que, mientras en Android pueden tener diferentes formas y transparencias, en IOS o Windows siempre estarán encajados en un marco cuadrado, en el caso concreto de IOS con bordes redondeados.

En cuanto a los iconos interiores de la app, debemos saber que deben ser de uso universal, entendibles por el usuario a simple vista, ya que muchas veces se usarán para reducir el uso de texto y si no queda claro lo que refleja la imagen podrían entorpecer la experiencia del usuario.

Finalmente tenemos la splash o pantalla de carga, es la primera visión que tenemos de nuestra aplicación mientras se carga (siempre o la primera vez que la usemos). Se trata de una pantalla muy efímera que puede estar menos de un segundo en pantalla, pero es necesario tener en cuenta su diseño ya que es el primer reflejo que el usuario tendrá de nuestra aplicación. Se suele realizar un fondo igual al de nuestro inicio pero sin contenido para dar la sensación de que el contenido llega a medida que se carga.

Grid o Retícula

Nuestro grid será la distribución en el espacio de todos los elementos de la app, debemos diseñar respetando siempre la retícula que hayamos establecido en nuestro wirframes, de modo que la app siempre mantenga un aspecto armónico respetando los espacios en blancos y con contenido.

Además, es muy importante tener en cuenta las especificaciones técnicas que nos da cada sistema operativo, para asegurarnos de que los espacios que dejamos son los adecuados para que sean fácilmente interactuar con los diferentes botones y elementos de nuestra aplicación.

Tipografía

Como en cualquier diseño, es muy importante hacer un buen uso de las tipografías, pero en el caso de aplicaciones móviles, cobra aún más importancia ya que en una pantalla pequeña y donde las condiciones de luz pueden ser muy variables, que la legibilidad y el contraste sean lo mejor posible debe ser primordial.

Es muy importante poder elegir una buena tipografía, para ello también debemos tener en cuenta las librerías recomendadas por cada sistema operativo, y en caso de no seleccionar alguna de las tipografías propuestas, hay que asegurarse de que la que escojamos sea perfectamente legible a bajar resoluciones.

Por otra parte, el sistema de jerarquías es vital para que la experiencia de usuarios sea buena. 

Color

Al igual que la tipografía, cobra gran importancia, puesto que debemos saber usarlo para obtener un buen contraste, además de poder establecer jerarquías en la información, etc.

El color muchas veces vendrá dado por los colores corporativos de la empresa para la que se realice la app, pero aún así debemos informarnos bien de las particularidades de cada código de color que tendrá el sistema operativo para el que se desarrolle la aplicación.

El lenguaje

La forma en la que nos comunicamos con nuestro usuario es muy importante, por eso que los textos sean claros y explicativos, que si el usuario se pierde tenga ayudas, avisos o alertas, son valor añadido para nuestra app, lo cual será un gran valor añadido para nuestra UX.

Los detalles

Es uno de los últimos puntos. A tener en cuenta, pero está claro que su uso marca la diferencia. Nos referimos a aquellos detalles que en su mayoría son efímeros pero que marcan la diferencia para la experiencia del usuario, nos referimos a que se ve cuando una imagen no se ha cargado, como se muestra una bandeja de mensajes cuando esta vacía etc. Son pequeños detalles que normalmente no se ven, pero que cuando ocurren, si no están pueden estropearnos el resto de nuestro diseño.

Animaciones

Al igual que ocurre con los detalles, son elementos que no son visibles de manera constante pero que su presencia puede alegrar o hasta incluso cambiar el estado de ánimo del usuario en el momento que usan nuestra aplicación. Ya que llenan de vida la aplicación e influyen en la forma que se interactúa con ella.

Si deseas implantar una App en tu empresa, has encontrado el lugar perfecto para hacerlo. Contacta ahora mismo con nosotros.

Te recomendamos leer