ANÁLISIS DE PRINCIPIOS DEL VISUAL DESIGN

Cristina Traba
Jul 20, 2017 · 5 min read

Para este ejercicio de análisis he tomado 3 ejemplos que en una primera impresión me han parecido interesantes y me parecía que “funcionaban”. También he tomado un ejemplo que en esta primera impresión no parecía funcionar.

Estos cuatro ejemplos de diseño de apps los analizo en primer lugar con una breve explicación de las primeras sensaciones y posteriormente siguiendo los principios clásicos del diseño visual.

EJEMPLOS QUE FUNCIONAN:

1.Slack

Primeras impresiones:

Uso de color más sencillo y entendible, las sombras funcionan bien para centrar la atención.

Buena jerarquía entre el uso de bold para títulos y sencillo para explicación

Typo clara.

Paleta de colores que evoca al logotipo de Slack y crea sensación de conjunto.

Análisis (balance, proximity, alignment, repetition, contrast and unity/harmony):

Se encuentra un equilibrio entre el peso de la ilustración (centrado) y el cuerpo de texto, alineado en el eje vertical de la pantalla.

Existe proximidad entre pantallas de modo que se identifican como parte del mismo grupo al mantener en general la misma forma.

En cuanto al contraste, se produce una sensación de claridad debida a la diferencia de colores entre el fondo y el texto y el fondo y las ilustraciones.

El diseño entre pantallas y dentro de las pantallas se encuentra en armonía ya que se distinguen elementos comunes que definen las pantallas como una unidad, tales como la posición común de los textos, títulos e ilustraciones. Los colores pese a que son distintos conforman, junto a las dos pantallas posteriores que no figuran en éstas imágenes, la paleta de colores que representa el logotipo de slack. De este modo se identifica el onboard como elemento unitario de la plataforma.

2. Onboard by Ramotion

Primeras impresiones:

La paleta de colores es calmada y está bien para inspirar confianza

Los tres puntos que indican la situación en el onboard están bien para indicar al usuario en qué posición se encuentra

La pantalla con fondo blanco no es muy invasiva y desvía la atención hacia la info que se quiere transmitir.

El color blanco al no ser arriesgado es más posible que a la mayor parte de los usuarios les resulte agradable el uso de la aplicación.

Análisis (balance, proximity, alignment, repetition, contrast and unity/harmony):

Al igual que en el ejemplo anterior se encuentra un equilibrio entre la imagen y el cuadro de texto, ambos se encuentran alineados en el eje vertical.

Existe proximidad entre pantallas de modo que se identifican como parte del mismo grupo al mantener en general la misma forma.

Aunque se distingue fácilmente el texto y el fondo y el contraste es suficiente, se percibe una sensación de sutileza al tener el cuadro de texto un grosor extremadamente fino.

La paleta de colores común en todas las pantallas de este onboard crean una sensación de armonía y carácter unitario a lo largo de las 3 pantallas.

3. ToFinds by Leo Leung

Primeras impresiones:

El color blanco funciona bien porque la cantidad de información que se encuentra en la pantalla es elevada, si fuera otro color podría llegar a ser demasiado confuso

Las pequeñas sombras grises que se crean entre los perfiles de los distintos lugares ayudan a diferenciar los bloques de información

El uso de la misma fuente pero con variaciones únicamente de tamaño y espesor ayudan a diferenciar los puntos principales

Análisis (balance, proximity, alignment, repetition, contrast and unity/harmony):

Se trata de una pantalla equilibrada en la parte inferior, pero ordenada de una manera asimétrica en la parte superior, aunque la imágen de cabecera tiene mayor peso, lo cual ayuda a equilibrar la pantalla en general. Se encuentra un alineamiento a través de un eje horizontal, a través del cual se puede hacer scrolling para obtener más datos.

Existe proximidad entre los elementos inferiores de modo que se identifican como parte del mismo grupo de información al mantener en general la misma forma y encontrarse próximos y en la misma altura respecto a la composición de la pantalla.

Existe contraste entre las imágenes y el fondo, al igual que ocurre entre las imágenes del texto. Sin embargo estos se tratan de dos maneras distintas. Las imágenes y los títulos intentan dar sensación de claridad y ser el elemento principal, debido al gran contraste que existe entre ellos. El texto más informativo pasa a un segundo plano mediante un contraste menor y una sensación de sutileza.

Como se ha indicado, la repetición de los elementos de scrolling horizontal crean una sensación de unidad en la parte inferior de la pantalla. La tipografía y la paleta de colores ayuda a que la sensación de armonía se mantenga en el diseño general de la pantalla.

Que no funcionan:

1. Anchor FM App

Primeras impresiones:

Demasiado cambio en los colores de tema: 2 gradients + wave line = too much

En la primera pantalla se pierde el goal con tantos logos distintos

En la segunda pantalla hay demasiados emojis, lo hace parecer muy saturado

Análisis (balance, proximity, alignment, repetition, contrast and unity/harmony):

No se encuentra un gran equilibrio en las pantallas. En la primera ésto se debe principalmente a que la barra de logos tiene un gran peso y se encuentra en la parte inferior, mientras que la parte superior es extremadamente ligera y se pasa de una a otra abruptamente. La segunda pantalla mantiene los botones inferiores en equilibrio, al situar el de mayor peso en el centro y los demás alineados horizontalmente respecto a este. Sin embargo el texto “Hi Denis” se encuentra sin una alineación clara. Pese a todo, en esta segunda pantalla el gran peso de la superficie del fondo tiende a equilibrar y pasar por alto este texto.

En la primera pantalla existe cierta proximidad entre los elementos de “interlude” de modo que se identifican como parte del mismo grupo al mantener en general la misma forma.

El contraste entre el fondo y el texto y entre el fondo y los botones es adecuado y facilmente distinguible.

No existe sensación de armonía en la pantalla de la izquierda, debido principalmente a que no parece que los elementos de la parte superior pertenezcan a la misma familia que los de la central ni los de la inferior. Por ello no se crea sensación de unidad entre la pantalla, al igual que ocurre en la segunda, ya que los elementos de esta no evocan en ningún momento a los de la anterior.

)

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade