El diseño metro y su camino

Hola a todos, bienvenidos a esta nueva comunidad, de parte del equipo de colaboradores unidos para darle vida, te damos la bienvenida, esperamos que todos los contenidos aquí te sean de utilidad, por nuestra parte, nos esforzaremos en garantizarte los mejores contenidos.

Para comenzar, quiero hacerlo con las principales bases de un artículo que leí hace poco y con el cual coincido en muchos conceptos, sino lo traduzco completamente es porque hay otros puntos con los cuales no coincido, si gustas leer el artículo original, puedes hacerlo en este enlace, por nuestra parte, continuemos.

En primer lugar debo comentar que soy un gran fan del lenguaje de diseño Metro, hablando en cuestiones de esta índole, se me hace una gran idea por parte de Microsoft el unificar todas sus plataformas bajo un mismo marco de visualización, no imagino el esfuerzo que esto debe llevar, hacer que muchas divisiones que hasta ahora han trabajado de forma independiente ahora comienzan a unificar sus interfaces para hacerlas lucir de la manera mas similar posible, hasta ahora se ha tratado de interfaces para el consumidor, pero no dudo que las aplicaciones de tipo empresarial puedan irse moviendo hacia el mismo camino, me refiero a interfaces como las de Sharepoint y Windows Azure, el inicio de esto son las noticias de Office Metro.

El otro lado de la moneda y creo que uno de las principales razones por las que esta comunidad existe, es que hay una línea muy delgada entre un diseño genial basado en la interfaz Metro, y un abuso de sus principios y características o peor aún, simplemente la ignorancia de como poder utilizarlas, recuerda que una interfaz Metro no son solo rectángulos de diferentes colores y ya, así que vamos por los que para mí gusto (y el de el artículo que me inspiró a escribir este) son los tres pilares de la interfaz Metro.

Tipografía

La tipografía esta muy enfatizada en Metro y esto beneficia al usuario en muchas formas. El texto grande en las pantallas hace fácil al usuario poder navegar en la aplicación al caminar por ejemplo (recuerda que se ha orientado mucho hacia dispositivos móviles), asegura que el contenido que deseas que tu usuario vea este al frente y centrado y es junto a los íconos uno de los elementos mas distintivos de este tipo de interfaces.

Simplicidad

El énfasis en la tipografía ya está contribuyendo con este elemento de simplicidad. Las otras áreas donde la simplicidad aparece en Metro es en las formas e íconos. Colores sencillo en “cajas” que contienen íconos de un solo color, ambos de los cuales son prominentes en la pantalla. Cuando el énfasis en la tipografía y el enfoque en la simplicidad están combinados con el tercer pilar, el contenido será simplemente genial.

Los live tiles son un gran ejemplo de simplicidad, generalmente no tienen mucho contenido dentro de ellos, solo un gran cuadro o rectángulo con un ícono (si es que lo hay) de un solo color y una forma simple en 2D.

Un  ejemplo de esto es el nuevo tablero de xBox 360° que bien podría estar en una tableta o una pantalla y sabrías aún así muy bien hacia donde ir. Además de que podrías muy bien adaptar esa interfaz a una versión vertical sin problemas, al final, los cuadros y texto son fáciles de adaptar y mover.

 

Otro gran ejemplo de simplicidad es la barra de aplicaciones en Windows Phone. Para teléfonos, el contenido debería cubrir el tamaño entero de la página, pero es definitivo que necesitas un menú o las opciones que sean necesarias, y esta barra definitivamente es una gran solución a estos dilemas y en un modo simple.

Utilizar íconos de fácil entendimiento y una breve explicación pueden ser lo único necesario para poder utilizar las acciones a ejecutar, nada mas.

Vibrante

Vibrante es el último de los tres pilares de Metro y el único elemento comúnmente desaparecido. Las mejores experiencias Metro son aquellas que realmente marcan una diferencia con respecto a las otras plataformas, son aquellas vivas, coloridas y que consideran su simplicidad y tipografía.

Solo basta que veas los videos de anuncios de Windows 8, puedes ver uno aquí y aquí, para poder entender este concepto.

Así de sencillo es este tema, el mas simple, pero el mas difícil de lograr, hacer una interfaz que haga que el usuario simplemente sea feliz solo al verla.

Los grandes errores

Dice una frase que demasiado de algo bueno es malo y es correcto, abusar de los elementos y utilizarlos de una manera errónea en el mejor de los casos te dará un gran híbrido, pero en el peor solo hará parecer que tienes un mal gusto y lucirá muy mal. Si no me crees podemos ver unos ejemplos ¿Estás de acuerdo?

El portal de Windows Azure

Ahí lo tienes, cumple con la letra, pero definitivamente no es simple, como mencioné al inicio, no basta una tipografía y unos cuadros para decir que “es Metro”. Además de que tiene movimiento estilo animaciones y esta demasiado saturado haciendo simplemente lucir a la página demasiado saturada.

MSDN

Es increíble pensar que los mismos creadores de la interfaz sean los mismos que cometen tantos errores ¿Recuerdas lo mencionado acerca de usar íconos de un solo color? ¿Qué te parece el letrero repetido tres veces? Incluso el banner al mas puro estilo flash pudo ser una gran idea, pero sin adoptar los matices que nos pudieron hacer pensar que estaban integrándose a la unificación de interfaces.

Hay muchas guías para la creación de interfaces, solo debes buscarlas, una que me encanta, muestra incluso los tamaños y distancias para Windows Phone, aún no hay mucho para Windows 8, pero guiarte de la misma forma es un buen inicio y para ello puedo mostrárte algunas interfaces que he visto y que pueden servirte como una pauta a seguir y que seguramente tu también has visto.

 

Conclusión

Así que recuerda la delgada línea que puede hacer de una gran interfaz, un fiasco, solo cuida los detalles, ahí es en donde radica la grandeza de este nuevo tipo de aplicaciones, además de poder ofrecerle a nuestros usuarios la mas grata experiencia posible. ¡Nos vemos!

About Amin Espinoza

Mas geek y programador que ingeniero en sistemas, completamente Microsoft y Silverlight, emprendedor, fan de las luchas, el café y la buena música Mirar todas las publicaciones de by Amin Espinoza → Esta entrada está publicada en General and tagged diseño. Guarda el permalink.