Principios de diseño de Microsoft

Artículo
04/07/2015

La base sobre la que se asienta un buen diseño

Creemos que los siguientes principios de diseño de Microsoft te pueden servir para crear aplicaciones de la Tienda que encandilen a los usuarios y te hagan sentir orgulloso. Usa estos principios al planear tu aplicación y deja que marquen el camino de tus decisiones de diseño y desarrollo.

Sobre el diseño moderno

Durante mucho tiempo, Microsoft ha sido una empresa líder en muchas áreas del sector de la tecnología y con una amplia variedad de productos. Recientemente dio un giro para centrarse aún más en el diseño. Este cambio surgió a raíz de profundos fundamentos, ideas interesantes e influyentes, exploraciones de gran belleza y, en definitiva, una sensación de que todo lo demás estaba obsoleto. Los fundamentos de este cambio se han convertido en los principios de diseño de Microsoft.

La filosofía de diseño de Microsoft se materializa en pantallas de la aplicación despejadas y ordenadas que funcionan rápidamente, reducen la necesidad de escribir y avisan automáticamente de la información nueva o que se ha actualizado. El usuario interactúa con el contenido y no con controles que representan a dicho contenido. Además, los elementos visuales presentan un acabado estupendo.

Fundamentos del diseño moderno

En nuestro diseño encontrarás mucha más profundidad, carácter y trasfondo de lo que la etiqueta "diseño plano" podría describir. Nuestro lenguaje de diseño se basa en tres pilares inconfundibles:

Bauhaus: nacida en 1919, esta emblemática escuela de diseño fomentó una filosofía de diseño radical: prescindir de todo lo superfluo. Una cosa es saber cuáles son las funciones centrales de una aplicación, pero reducir drásticamente la funcionalidad a únicamente esas funciones centrales requiere una enorme disciplina. Antoine de Saint-Exupéry advirtió que la perfección se logra solo cuando ya no hay nada más que quitar. Lo sencillo lleva a lo bello, pero también a lo útil.
Estilo tipográfico internacional (Escuela suiza): el diseño de Microsoft se inspira en la Escuela suiza, sobre todo en cuanto al uso destacado de tipografía en negrita de gran belleza y claridad. Este estilo aboga por la claridad, la facilidad de lectura y la objetividad. De este estilo hemos tomado la necesidad de una cuadrícula, tanto tipográfica como visual, y el uso por principios de un diseño asimétrico y bonito.
Diseño en movimiento: el movimiento convierte las experiencias en dinamismo y transmite cierta elegancia. Nos inspiramos en pioneros como Saul Bass, que usó el movimiento junto con la tipografía y el diseño para crear preciosas secuencias de títulos para el cine. Un diseño en movimiento excelente no solo es bello, sino que también sirve para explicar al usuario cómo llevar a cabo una tarea.

Para más información sobre estos pilares de diseño, consulta el tema sobre el diseño moderno en Microsoft.

Estas inspiraciones nos han llevado a crear nuestros propios principios, en los que nos basamos en todos y cada uno de nuestros diseños. Son principios que, efectivamente, hemos elegido, pero que de alguna forma, están presentes en todos los diseños. Deseamos que sirvan para favorecer tu marca en la plataforma. Estos son los principios de diseño de Microsoft:

Muestra buen hacer
Haz más con menos
Rápido y fluido
Verdaderamente digital
Gana en equipo

Muestra buen hacer

Este principio es el primero por una razón. A lo largo de la historia, los creadores, arquitectos y artesanos se han distinguido por ser profesionales que se sienten orgullosos de su trabajo. Este principio consiste en centrarse en el detalle—dedicar tiempo, energía y pasión a los detalles más sutiles que a menudo (o para muchos) están a la vista. Se trata de diseñar una experiencia que sea completa y esté perfeccionada en cada fase—desde los píxeles alineados a la perfección en una cuadrícula hasta la tipografía en una pantalla de la aplicación. Acepta el desafío de sentirte orgulloso de tu obra en cada etapa del desarrollo.

La cuadrícula como base

En diseño gráfico, la cuadrícula tipográfica moderna es el andamiaje con el que se consigue un contenido coherente. La organización proporcionada de elementos reporta ventajas tanto estéticas como prácticas. El usuario comprende la página de forma rápida y cómoda.

La cuadrícula tipográfica moderna es el andamiaje que permite la coherencia del contenido

Jerarquía y equilibrio

Muestra los distintos tipos de información con propiedades diferentes para que la jerarquía visual de tu aplicación sea clara para los usuarios. Puedes recurrir al uso de tamaños y colores de fuente, posicionamientos y espaciados para que cada nivel dentro de la jerarquía tenga una apariencia distinta. Si usas diferentes valores de propiedad de manera coherente, el usuario cogerá el ritmo de la aplicación y cada nivel será distinto y reconocible de inmediato.


Jerarquía	Jerarquía insuficiente

Texto grande, contraste de colores alto. En el ejemplo anterior, "threads" es el encabezado del elemento dinámico seleccionado. Establece el contexto del contenido que aparece debajo. El encabezado tiene un alto contraste (blanco sobre negro) y nos hace saber que es el elemento seleccionado en la página. El encabezado del otro elemento tiene un contraste menor (gris sobre negro) que le resta énfasis.

Siguiente texto más grande. El detalle más importante de la lista de subprocesos es el nombre de la persona a la que se está enviado el mensaje.

Texto más pequeño. Las primeras una o dos líneas de cada mensaje son el siguiente elemento en importancia. El color distingue los mensajes leídos de los no leídos y del nombre.

Espaciado y alineación. Usa más espacio entre subprocesos —y menos espacio dentro de un mismo subproceso— para reflejar la jerarquía. El mensaje destacará si simplemente alineamos la marca de tiempo a la derecha.

Jerarquía insuficiente. Sin una jerarquía, la página carece de sentido y legibilidad. La estética se pierde, pero también la facilidad de uso, que es peor todavía.

¿Quién eres?

Encuentra la tipografía que refleje la personalidad de tu aplicación de la mejor forma posible. Estos son algunos ejemplos de tipografía que complementan y ayudan a definir la aplicación.

Los tipos de letra tradicionales ponen de manifiesto la seriedad de esta fuente de noticias

Aplicación de The New York Times. Los tipos de letra tradicionales ponen de manifiesto la seriedad de esta fuente de noticias.

Los tipos de letra de esta aplicación son contemporáneos y elegantes

Camera360. Los tipos de letra de esta aplicación son contemporáneos y elegantes.

Resumen y lista de comprobación

Esfuérzate en los detalles.
Haz que usar las aplicaciones sea seguro y fiable.
Usa el equilibrio, la simetría y la jerarquía.
Ajusta el diseño de tu aplicación a la cuadrícula—el nuevo diseño de las aplicaciones.
Haz que tu aplicación sea accesible para la mayor parte posible del público, incluso personas con dificultades o limitaciones. Consulta el tema sobre los principios de diseño de accesibilidad.

Haz más con menos

Este principio reduce tu aplicación única y exclusivamente a sus funciones centrales. Piensa en el contenido, no en el embellecimiento. El contenido puede adquirir muchas formas: imágenes, correos electrónicos, noticias, etc. Elimina el contenedor visual para que aparezcan en pantalla solamente los elementos más importantes. Crea elementos de navegación desde el propio contenido siempre que puedas. Deja que imperen las experiencias nítidas y envolventes. Cada elemento de la pantalla debe aportar valor y tener una finalidad clara.

Este principio no implica que tengas que sacrificar la intuición. Un diseño es adecuado si los elementos de navegación llevan al usuario a saber cómo interactuar con la aplicación. Un diseño de calidad es un equilibrio entre intuición y reducción, y obtiene como resultado un producto final bonito y ordenado.

Contenido, no embellecimiento

Permite a los usuarios interactuar directamente con el contenido. Al prescindir del contenedor visual y usar fuentes, escalas y colores, el contenido se muestra con mayor facilidad. En este ejemplo, los nombres y títulos son más fáciles de leer.


Enfoque en el contenido	Contenedor visual que distrae

Deja que el contenido respire

Los comandos y funciones importantes son evidentes y fáciles de entender y de usar.

Los comandos y funciones importantes son evidentes y fáciles de entender y de usar

Resumen y lista de comprobación

Sé excelente en algo en lugar de mediocre en muchas cosas.
Pon el contenido antes que el contenedor visual.
Sé visualmente centrado y directo, y deja que el usuario se concentre en lo que le gusta; ya explorará el resto.
Inspira confianza a los usuarios.
Reduce la redundancia en la interfaz de usuario.

Rápido y fluido

Este principio garantiza que las experiencias van a ser envolventes y dinámicas. Con él se fomenta un tipo de animaciones, transiciones y respuestas atractivas que no se esperan, pero que dinamizan la interfaz y encantan a los usuarios. Este principio antepone las personas y las tareas a la tecnología.

Si tu aplicación está destinada a una tableta o teléfono, recuerda que las aplicaciones de calidad dirigidas a los usuarios en constante desplazamiento se centran en escenarios sencillos y de uso rápido. En casos como esos, céntrate en ofrecer exactamente lo que los usuarios quieren de manera rápida y directa, e irás por el camino de un buen diseño.

Sé dinámico

Los iconos dinámicos responden bien y son muy atractivos. Además, pueden hacer realidad todo lo que imagines—desde avisarte del correo electrónico nuevo hasta darte detalles de las ofertas especiales de bebidas en tu bar favorito.

Los iconos dinámicos responden bien y son muy atractivos

Movimiento

Logra una sensación de continuidad y deja que la aplicación relate la historia a través de un uso adecuado del movimiento. El movimiento puede pedir a un usuario que inicie una acción o distinguir entre distintos tipos de acciones. Cuando se pulsa, la pantalla de bloqueo rebota para señalar que se puede deslizar hacia arriba. La transición de salida de un elemento indica cómo volver a recuperarlo deslizándolo.

Usa el movimiento con sentido

Resumen y lista de comprobación

Da respuesta a la interacción del usuario y prepárate para la siguiente interacción.
Diseña una interacción táctil y directa.
Haz las delicias de los usuarios con el movimiento.
Conecta sin problemas lo que viene antes con lo que viene después.

Verdaderamente digital

Este principio abraza la capacidad ilimitada de innovación que el dominio digital permite. El esqueumorfismo sigue las normas y propiedades del mundo físico para informar de sus metáforas de diseño. Pero nosotros nos debemos a la eficacia, el lenguaje y las posibilidades exclusivas de nuestro medio.

Al igual que la escuela de diseño Bauhaus defendía deshacerse de los elementos de diseño superfluos, este principio fomenta también dejar las semejanzas digitales para el mundo real, como los efectos de texturas o cuero, los grapados, las sombras y los reflejos. Usa un lenguaje de diseño más eficaz y escalable. Este es el fundamento del principio verdaderamente digital.

La información importa

Sé infográfico, no solo iconográfico. Transmitir información es nuestro objetivo principal, de modo que no debemos enredarla con detalles innecesarios. El método infográfico aboga por un contenido más claro, una información que deriva en acciones y la ausencia de distracciones.


Iconográfico	Infográfico

Resumen y lista de comprobación

Usa la comunicación para ser dinámico y vivo.
Usa la belleza de la tipografía.
Usa colores intensos y vibrantes.
Conéctate a la nube para que los usuarios estén conectados entre sí.

Gana en equipo

Este principio trata sobre unificar tu propio trabajo y adaptarlo al ecosistema común siempre que se pueda, además de innovar en la medida de lo posible. Factoriza tu trabajo para que las aplicaciones y los escenarios de usuario en distintas plataformas funcionen entre sí como una única experiencia familiar y una sola marca. A los usuarios les gusta la familiaridad; no quieren tener que aprender a usar cada superficie nueva con la que interactúan. Así que crea una plataforma común de software y servicios Microsoft. Basa tus experiencias en controles, gestos, patrones de interacción y animaciones comunes y establecidos e, incluso, en servicios de autenticación y almacenamiento en la nube habituales.

En pocas palabras: no intentes volver reinventar la rueda. Innovar está bien, pero no a costa de la experiencia de usuario. Cada aplicación transmite un determinado tono de voz, una personalidad que calará en los usuarios. Echa un vistazo a nuestro método de voz y empieza a plantearte su uso en tu aplicación. Encuentra lo que funciona en tu aplicación y no dudes en repetir lo que haya sido eficaz.

Piensa en la plataforma

Piensa en cómo la aplicación funcionaría en todo el ecosistema de dispositivos y factores de forma de Microsoft. Plantéate en qué destaca verdaderamente un dispositivo y optimiza la experiencia con esos puntos a favor únicos. El uso de varias plataformas puede incluso brindarte la oportunidad de diseñar para escenarios que serían inviables si solo crearas aplicaciones para una única plataforma.

Piensa en cómo la aplicación funcionaría en todo el ecosistema de dispositivos y factores de forma.

Resumen y lista de comprobación

Usa el modelo de interfaz de usuario.
Participa en contratos de la aplicación para trabajar con otras aplicaciones y satisfacer escenarios.
Usa nuestras herramientas y plantillas para promover la coherencia.

Los principios de un buen diseño se aplican independientemente de la presentación visual de tu marca. Un diseño que sigue estos principios ofrece experiencias que les encantarán a los usuarios y en las que confiarán.