Mejora el apartado visual de tus apps!

 Introducción

Dicen que lo de adentro es más importante que la apariencia, pero, ¿entonces no importa la apariencia? Si bien es cierto que el contenido es más importante, no debemos descuidar el apartado visual de nosotros mismos, y tampoco el de nuestras aplicaciones, jeje. Si todos los conceptos de psicología del color, estrúctura y ornamentación te suenan a otro idioma este blog es el indicado si quieres obtener un mejor resultado en tus diseños. Estos consejos no solo aplican para diseño de interfaces, puedes aplicarlos para cualqueir tipo de trabajo que requiera de una atención especial en el apartado visual.

Busca referencias

Gracias a sitios como Pinterest e Instagram podemos tomar inspiración para crear nuestros propios diseños. Si no conoces mucho del tema, es complicado que, de la nada, te venga una idea de un diseño increíble. Tomar referencias no es malo, es más, todo el mundo lo hace; todos los artistas tienen algo que los inspira a crear su arte; que tú lo hagas no es un pecado capital.

Se trata de detalles

El diseño de aplicaciones está basado en detalles. Imagina que tienes la siguiente estructura:

Lo práctico ya está allí: tienes un botón, pero, puedes detallarlo para que sea más interesante, como centrar el elemento, cambiar el color, redondear, añadir textura al botón, un largo, etc. A continuación te hablaré de algnos detalles importantes que siempre debes tomar en cuenta:

Uso correcto del color

Los colores complementarios son los colores que se encuentran en contra en el círculo cromático, esots son útiles ya que... ¡Ignora todo eso! Gracias a sitios como Coolors podemos ahorrarnos el trabajo de conocer estos detalles para elegir una buena paleta de colores:

Estos son ejemplos de las paletas que nos ofrece el sitio. Lo que nos permite Coolors es identificar colores que funcionan bien juntos, queda a tu criterio cuáles utilizarás para cada apartado. Eso nos lleva a otro punto importante: la forma en la que uses los colores determinará la comodidad y facilidad que tendrá el usuario para, por ejemplo, leer un texto.

Imágenes por parte del canal de Youtube: Seso

Ambas imágenes poseen la misma intención: mosrar un texto; sin embargo, es evidente que la imagen superior es más clara que la imagen inferior. Esto se debe a la distribución, de manera en que los colores oscuros se encuentran en el fondo, mientras que los claros se encunetran en el texto. En la imagen inferior podemos ver que todos los colores son débiles y el texto parece parte del fondo, por lo que se imposibilita su claridad y es díficil leer el texto. Estos detalles no requieren de ser un experto en diseño; solo necesitas de saber elegir colores para que tus elementos sean visibles y atractivos para el usuario.

Jerarquía

Este concepto es un poco más complejo que el anterior pero no es imposible de aplicar. Podemos definir este detalle como en lo que quieres que el usuario ponga su atención.

La siguiente imagen es un ejemplo claro de a lo que se refiere este detalle:

Imágenes por parte del canal de Youtube: Seso

En la primera imagen no vemos una distribución clara del texto, por lo que el mensaje de "feliz cumpleaños" pierde su intención y pasa a ser un elemento del montón. En la segunda, el tamaño de la letra deja en claro la intención de la imagen y, por lo tanto, toma el primer puesto en la jerarquía del mismo. De igual manera se aplica el concepto al construir diseños de aplicaciones. Generalmente, quieres que los títulos y acciones importantes se mantengan siempre con la atención del usuario. Tomemos como ejemplo a la interfaz de Instagram:

Tomaré como ejemplo la primera imagen, ya que es la más común. Instagram quiere que tu énfasis sea en la foto, por eso, el tamaño de la misma es grande. Además, el hecho de darle doble tap para dar like fortalece esta intención, haciendo que la foto sea lo más importante de esta pantalla. Además de la foto, esta interfaz nos quiere dejar claro que tenemos la libertad de buscar lo que nos guste o visitar nuestro perfil de forma inmediata, por lo que estas opciones prevalecen en la pantalla en todo momento: los botones inferiores. Las acciones como ir al perfil de la persona y comentar se encunetran alrededor de la foto, esto lo podemos inerpretar como un estilo de "si el usuario gusta de a foto, recurrirá a las siguientes opciones" por eso, estas se encuentran en el segundo nivel de jerarquía. 

Mi explicación es muy simple y un diseño como este requiere del estudio de varias personas para quedarse con la atención del usuario; sin emabrgo, estos detalles que te he mencionado son suficientes para hacerte pensar en la jerarquía de tus propios diseños.

Conclusión

Acá he dejado detalles como la tipografia, espacio en blanco, etc. Sin embargo, lo que te he mencionado aquí son las bases para crear diseños limpios y lo suficientemente ineresantes y funcionales para que el usuario se sienta cómodo en la aplicación. Como último detalles JAMÁS UTILICES COMIC SANS POR FAVOR.

- Mxrk