Una aproximación a las directivas de diseño para aplicaciones.

An approach to design politics

Principios y fundamentosInspirado en la vida

Keywords

Windows 8 : Modern UI : Lenguaje de diseño

El lenguaje de Diseño no es más que una serie de reglas sobre la cual se basa todo el proceso creativo de nuestra aplicación.

Modern UI es el lenguaje de diseño de Windows 8, para su desarrollo se basaron en el sistema de señales y carteles del subte y aeropuertos en varios países, al entender que este es un lenguaje universal comprendido por todo el mundo, sin importar el idioma en el que hablen.

Múltiples pantallas

Experiencia de usuario

Fuentes claras y legibles

Lenguaje Universal

Diseño Industrial Moderno / Sistema Internacional de Tipografías / Diseño en Movimiento

Fotografía: georg-brauchle ring station with installation by franz ackermann

Inspirado en _

Diseño industrial moderno Se refiere a la escuela de diseño Bauhaus de Alemania que  buscó la simplificación de la forma de los objetos y la reducción de los elementos geométricos revalorizando su función

Objetivo: Construir un hábitat adecuado para el ser humano y suprimir las barreras entre arte, industria y artesanía

KeywordsFormas Simples.

Funcionamiento.

Entorno dinámico y más humano.

Sistema Internacional de Tipografías Se refiere a fuentes claras y legibles.

También se completa con otros elementos clave como:

El uso de las Grillas Colores planos y sencillos Uso de fotografías en lugar de ilustraciones

KeywordsClaridad de lectura.

Grillas como guía.

Colores planos.

Fotografías.

Diseño en movimiento Los usuarios del presente siglo son muy diferentes a aquellos usuarios tradicionales en la plataforma Windows.

Es necesario crear experiencias que se adapten a las necesidades de información de hoy en día: grandes volúmenes de datos que se muestren de manera veloz y con una interfaz táctil.

KeywordsRapidez.

Sencillez.

Volumen de datos.

Artesanal / Rápido y fluido / Completamente digital / Más con menos / Ganar con todo

Fotografía: enfoce by daniel garay fleck posadas misiones arentina

Pensado para ser_

Artesanal Rápido y fluido Foco en los detalles.

Seguro y Confiable.

Balance, simetría y jerarquía.

Alineación con la Grilla.

La vida es móvil.

Deleita con animaciones.

Diseña para los dedos.

Interacción intuitiva.

Responsivo y preparado.

Irresistible.

Auténtico digital Hacer más con menos Conectado a la nube.

Dinámico y vivo.

Uso de tipografías.

Colores vibrantes y atrevidos.

Movimiento.

Ser especialistas. Hacer una cosa y de la mejor manera posible.

Enfocado y directo.

Contenido sobre todas las cosas.

Inspirar confianza.

Ganar como un todo Encajar en modelo de UI: Todas las aplicaciones en Windows 8 deberán respetar el modelo propuesto por Modern UI e integrarse al sistema operativo.

Reducir la Redundancia: Ofrecer experiencias únicas en cada aplicación e integrar aquellas que puedan complementarse.

Aplicaciones trabajando juntas para completar escenarios: El mejor ejemplo de esto es la conexión entre la aplicación de Fotos en Windows 8 y la aplicación de Email.

Herramientas y Plantillas listas para escalar: Todo lo que nos ofrecen dentro de Visual Studio 2012 como herramienta está preparado para adaptarse a los múltiples tamaños y formas de pantallas.

Aplicaciones Esta vez, lo que importa es lo de afuera.

Activos de diseño

Lo mejor de programar aplicaciones para Windows 8 es que tenemos disponibles los activos de diseño, es decir que todo lo que necesitamos esta para descargárnoslo en formato de Photoshop desde el sitio de MSDN.

http://msdn.microsoft.com/es-ar/library/windows/apps/hh700403.aspx

Antes de empezar a diseñar Determina los puntos fuertes.

Qué podrá hacer el usuario.

Qué contratos incluirás.

Decide cómo rentabilizar.

Organiza y jerarquiza la información.

Causa una buena impresión.

Manos a la obra.

NavigationDirectivas de navegación

Diseño de navegaciónSISTEMA JERÁRQUICO

Páginas de concentrador

Páginas de sección

Páginas de detalle

SISTEMA PLANO

Patrón común-Resulta familiar-Rápido y fluido-Fácil de usar

Barra de navegación superior

Estados de visualización

VISTA ACOPLADA

VISTA PANTALLA COMPLETA

VISTA RELLENA

La aplicación rellena toda la pantalla

La aplicación está acoplada en una región estrecha de la pantalla.

La aplicación rellena el área del resto de la pantalla que no está ocupada por la aplicación en estado acoplado.

Las dimensiones exactas importan

La pantalla completa importa

CommandsDiseño de comandos

Ubicación de comandos:

1 – Identifica qué comandos utilizarás.

Diseño de comandosRecomendacionesUsar los botones de acceso (contratos).

Usar la barra de aplicaciones.

Usar menús contextuales.

- Comienza por colocar los comandos a la derecha.

- Usa los bordes.

- Los comandos de selección siempre irán a la izquierda.

- Muestra y oculta los comandos deshabilitados.

Recuerda que buscamos:

Simplicidad.

Fácil acceso.

Comandos legibles.

DirectricesPara crear coherencia e infundir confianza, siga estas directrices para decidir dónde colocar los comandos en la barra de la aplicación.

Comandos de selección Los comandos relacionados con la selección siempre se muestran en el extremo izquierdo.

Comando de nuevo elemento Si tu aplicación llama a un comando "Nuevo" para crear cualquier tipo de entidad (agregar, crear, redactar), coloca ese comando en el borde derecho de la barra. 

Comandos de eliminar Usa Eliminar/Nuevo si tu aplicación administra entidades individuales que podrían persistir fuera de tu aplicación, por ejemplo, una aplicación de correo o de cámara. Eliminar/Nuevo deben aparecer siempre en este orden.

Comandos de quitar Usa Quitar/Agregar si tu aplicación administra una lista, por ejemplo, lista de tareas pendientes, lista de ciudades en una aplicación de información meteorológica o una lista de restaurantes incluidos en marcadores. Quitar debe aparecer siempre a la izquierda de Agregar.

Comandos de borrar Usa Borrar si vas a realizar una acción destructiva en todos los elementos posibles. Usa la etiqueta del comando y sé explícito acerca de la acción que realizará el comando, por ejemplo, "Borrar selección".

AdvertisingDirectivas de Publicidad

- Integra el anuncio en el diseño.

- Elige formatos, tamaños y ubicaciones de anuncios complementarios.

- Define el diseño de todos los estados de visualización.

- Considera anuncios locales.

- Incluye palabras claves.

Directrices de publicidad

La aplicación no debe mostrar solo anuncios.

Los anuncios (obviamente) también están sujetos a los requisitos de certificación.

La aplicación no debe usar sus iconos, notificaciones, barra de la aplicación ni la interacción de hacer pasar desde el borde para mostrar anuncios.

Los anuncios no deben ejecutar un código de programa que no provenga del proveedor del anuncio.

RECURSOS: http://adsinapps.microsoft.com/

Uso no apropiado de la publicidad

Diseño de página Sistemas de Grilla

Sistema de cuadrícula

El sistema de cuadrícula se basa en las plantillas para desarrolladores, y los controles y las colecciones se diseñaron con este sistema en mente.

La cuadrícula consta de unidades y subunidades. La unidad de medida básica es la unidad. Una unidad equivale a 20 × 20 píxeles.

El sistema de cuadrícula es una herramienta de diseño que permite lograr una unidad visual a través de diferentes aplicaciones, al mismo tiempo que proporciona una estructura que hace posible la variación y mantiene al usuario 

Encabezado de página La línea base del encabezado de página debe ser de 5 unidades, o 100 píxeles, desde la parte superior.

El margen izquierdo para el encabezado de página es de 6 unidades, o 120 píxeles.

El encabezado de página de Windows 8 es Conjunto de estilos SegoeUI 20, atenuado.

Área de contenido El área de contenido tiene un margen superior de 7 unidades, o 140 píxeles.

El margen izquierdo es de 6 unidades, o 120 píxeles.

El margen inferior es flexible.

Para contenido con desplazamiento horizontal, no debe ser mayor a 6,5 unidades (130 píxeles) ni inferior a 2,5 unidades (50 píxeles).

Para contenido con desplazamiento vertical, los márgenes superior e izquierdo permanecen igual.

No se especifica el margen inferior porque el contenido se desplaza fuera de la pantalla.

Espaciado horizontal interno - Varían en función a los elementos.

Espaciado vertical interno - Varían en función a los elementos.

Espaciado horizontal entre grupos

El espaciado interno entre grupos es de 4 unidades, u 80 píxeles.

Este espaciado interno proporciona la separación suficiente para que el usuario distinga un grupo del siguiente con facilidad al desplazarse.

TypographyDirectrices sobre tipografía

Qué tipografía usar Para lograr simplicidad y claridad, se necesita prestar mucha atención a los detalles tipográficos.

Usa Segoe UI para los elementos de la UI como botones y selectores de fechas.

Usa Calibri para el texto que el usuario escribe y lee, como correo electrónico y chat.

Usa Cambria para los bloques de texto más grandes, como un lector RSS o de revistas.

- No uses estilos de fuente cursiva.- No mezcles tamaños de fuente en una página.- El texto principal tiene una opacidad del 100%. - El texto secundario tiene una opacidad del 60%.- El texto en estado de desplazamiento tiene una opacidad del 80%.- El texto en blanco y negro en el estado presionado tiene una opacidad del 40%. El texto en otros colores tiene una opacidad del 60%.

Cambria > Lectura La mayor parte de los medios impresos usan fuentes serif, por lo que los usuarios esperan una fuente serif al leer un libro o una revista. Cambria es una fuente serif diseñada para una lectura prolongada en pantalla. Usa Cambria para mostrar grandes cantidades de texto, como contenido de un libro o una revista.

Para las aplicaciones de lectura, sigue estas directrices:

Mantén un ancho de columna de texto suficiente para que las líneas de texto no sean demasiado largas para leerlas con comodidad. La cuadrícula tipográfica tiene especificaciones para esto.

Divide un texto largo en capítulos o secciones.

Incluye compatibilidad para continuar desde el punto en que lo dejó el lector.

Al usar la fuente Cambria, usa estos tamaños de fuente:

9 ptos, 11 ptos y 20 ptos.

Puedes usar los grosores de fuente normal y negrita. Te recomendamos que mantengas el espaciado predeterminado.

Calibri > Lectura y escritura Calibri es una familia de fuentes sans-serif diseñada para leer textos largos en una pantalla. Usa Calibri para texto que el usuario escribe o edita, como el texto de un mensaje de correo electrónico o de un cliente de chat. Es la fuente predeterminada en Microsoft Outlook, Microsoft Word y Microsoft PowerPoint.

* Calibri de 13 ptos tiene el mismo alto x que Segoe UI de 11 ptos, así que sus tamaños parecen uniformes cuando se usan juntas en la misma línea.

Al usar Calibri debes establecer el tamaño de fuente en 13 y un grosor normal. Te recomendamos que mantengas el espaciado predeterminado para Calibri.

Live titlesCuestiones a tener en cuenta

TipografíaUtiliza Segoe UI para los títulos.

Es de fácil lectura

Mantiene el lenguaje de diseño

Se integra perfectamente

Palabras cortadasUtiliza puntos suspensivos cuando las palabras son muy largas

Facilita la lectura cuando hay movimiento

Mantiene la intriga al espectador

Invita a ingresar a la aplicación para ver qué mas hay.

Colores Evita usar distintos colores para fondos que ya usan color pleno.

Mejor visiblidad del contenido

Unidad de contenido

Evita confusiones en el contenido

Tamaños Utiliza el tamaño de fuente predeterminadas por el sistema.

Mantiene la línea gráfica.

Evita cortes indeseados en la línea de texto.

Confunde contenido con títulos.

Bold No pongas en negrita el contenido, utiliza texto plano.

Mantiene la línea gráfica.

Evita cortes indeseados en la línea de texto.

Confunde contenido con títulos.

OpacidadesUtiliza colores plenos.

Mantiene la línea gráfica.

Facilita la separación de la unidad de texto y la imagen.

ÍconosNo utilices íconos grandes.

Utiliza el tamaño de ícono por defecto de 30 x 30 px.

Imágenes y Plantillas.

Utiliza los modelos de plantilla que provee Windows paraLos distintos tipo de productos en la tienda.

No pierdas la oportunidad de hacerlo visual. Muestra imágenes en su máximo esplendor.

Splash screen¡La segunda primera impresión!

No utilices tu logo en los costados No utilices texturas de fondo No utilices imágenes de fondo

Utiliza tu logo al centro.Elige un color de fondo sólido.Plasma toda tu creatividad en el logo, pues él te representa.

No utilices una imagen cortada, mejor haz una creatividad con transparencias.No agregues versiones, publicidad, información que no sea necesaria.

Si tienes loguin, recuerda que puedes mostrarlo en una segunda pantalla.

Gracias.Daniel Garay Fleck

MSP ArgentinaMisionesDaniel.GarayFleck@stdntpartners.onmicrosoft.comhttp://danielgarayfleck.com.ar/windows8/