Directivas de Diseño para Aplicaciones de Windows 8 y Windows 8.1 Todas las marcas presentes en esta presentación perteneces a sus respectivos dueños. Esta presentación fue hecha exclusivamente con fines educativos y no tiene fines de lucro. Creada en el marco del programa de Microsoft Student Partners. *La forma en la que se muestran los datos en la presentación pueden ser modificador por slideshare debido a relaciones de aspectos o cuestiones ajenas al archivo original. Si ves un error y necesitas aclararlo no dudes en dejar un comentario.

1. Una aproximación a las directivas de diseño para aplicaciones.
An approach to design politics

2. Principios y
fundamentos
Inspirado en la vida

3. 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

4. Diseño Industrial Moderno / Sistema Internacional de Tipografías / Diseño en
Movimiento
Fotografía: georg-brauchle ring station with installation by franz
Inspirado en _

5. 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
Keywords
Formas Simples.
Funcionamiento.
Entorno dinámico y más
humano.

6. 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
Keywords
Claridad de lectura.
Grillas como guía.
Colores planos.
Fotografías.

7. 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.
Keywords
Rapidez.
Sencillez.
Volumen de datos.

8. 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_

9. Artesanal Rápido y
fluidoFoco 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.

10. Auténtico digital Hacer más con
menosConectado 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.

11. 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.

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

13. 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

14. 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. 

15. Navigation
Directivas de navegación

16. Diseño de navegación
SISTEMA 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

17. 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

18. Commands
Diseño de comandos

19. Ubicación de comandos:
1 – Identifica qué comandos utilizarás.
Diseño de comandos Recomendaciones
Usar los botones de acceso
(contratos).
Usar la barra de aplicaciones.
Usar menús contextuales.

20. - 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.

21. Directrices
Para 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".

22. Advertising
Directivas de Publicidad

23. - 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

24. 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

25. Diseño de página
Sistemas de Grilla

26. 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

27. 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.

28. Á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.

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

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

31. 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.

32. Typography
Directrices sobre tipografía

33. 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.

34. - 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%.

36. 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.

37. 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.

38. 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.

39. * 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.

41. Live titles
Cuestiones a tener en cuenta

42. Tipografía
Utiliza Segoe UI para los títulos.
Es de fácil lectura
Mantiene el lenguaje de diseño
Se integra perfectamente

43. Palabras cortadas
Utiliza 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.

44. Colores
Evita usar distintos colores para fondos que ya usan color pleno.
Mejor visiblidad del contenido
Unidad de contenido
Evita confusiones en el
contenido

45. 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.

46. 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.

47. Opacidades
Utiliza colores plenos.
Mantiene la línea gráfica.
Facilita la separación de la
unidad de texto y la imagen.

48. Íconos
No utilices íconos grandes.
Utiliza el tamaño de ícono por
defecto de 30 x 30 px.

49. Imágenes y
Plantillas.
Utiliza los modelos de plantilla que provee Windows para
Los distintos tipo de productos en la tienda.
No pierdas la oportunidad de
hacerlo visual. Muestra
imágenes en su máximo
esplendor.

50. Splash screen
¡La segunda primera impresión!

51. 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.

52. 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.

53. Gracia
s. Daniel Garay Fleck
MSP Argentina
Misiones
Daniel.GarayFleck@stdntpartners.onmicrosoft.com
http://danielgarayfleck.com.ar/windows8/