#Win8JSApps | 2.- Guía de estilos

21
Guía de estilo Windows 8 Apps Quique Fdez. Guerra CKGrafic o

description

Segunda presentación del curso para desarrolladores frontend relacionado con WinJS y Windows 8. Curso hecho en escuela.it durante un fin de semana de manera online para alumnos de España y Latinoamerica Puedes ver el curso completo en http://youtube.com/playlist?list=PLIcuwIrm4rKeHYCgypL-Cl9Eakq1EGXPI

Transcript of #Win8JSApps | 2.- Guía de estilos

Page 1: #Win8JSApps | 2.- Guía de estilos

Guía de estiloWindows 8 Apps

Quique Fdez. GuerraCKGrafico

Page 2: #Win8JSApps | 2.- Guía de estilos

Haz más con menos, céntrate en el contenido y no en los efectos

Rápido y fluido, todo al alcance de una forma simple

Auténticamente digital, si está en una pantalla ha de parecer que lo está

Diseño en Windows 8

Page 3: #Win8JSApps | 2.- Guía de estilos

Demo

Diferentes estilosen Windows 8

Page 4: #Win8JSApps | 2.- Guía de estilos

Layout

Page 5: #Win8JSApps | 2.- Guía de estilos
Page 6: #Win8JSApps | 2.- Guía de estilos

Texto Segoe

Elementos UI

Iconos Segoe UI SymbolElementos HTML

Page 7: #Win8JSApps | 2.- Guía de estilos

Podemos clasificarlos principalmenteen tres tipos de logosLos logos simples o iconosque son muy sencillos

Logos de imagen horizontal ylogos anchos y cuadrados

Logos para nuestras apps

Page 8: #Win8JSApps | 2.- Guía de estilos

Demo

Elementos HTMLLogos, Iconos y Tiles

Page 9: #Win8JSApps | 2.- Guía de estilos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere neque mi, ac dictum nulla lobortis et. Suspendisse id fringilla dolor, sed elementum ligula. Duis vel elementum mi, eget dictum justo. Nulla vehicula malesuada egestas. Duis in turpis at purus convallis hendrerit sagittis vel tortor. Aenean semper lectus et li.

Tenemos -ms-grid en IE

La Grid

Siempre podemos hacer unaNo te limites a una lista en forma de gridRecuerda que el responsive aquí si importa

Page 10: #Win8JSApps | 2.- Guía de estilos

Las aplicaciones tiene una estética bastante marcada, aunque podemos salirnos del caminoLos diseños se deben adaptar a varias resoluciones y tamaños

Otras Apps te pueden servir de inspiración

Page 11: #Win8JSApps | 2.- Guía de estilos

Demo

De web a App(ejemplo inventado)

Page 12: #Win8JSApps | 2.- Guía de estilos
Page 13: #Win8JSApps | 2.- Guía de estilos
Page 14: #Win8JSApps | 2.- Guía de estilos
Page 15: #Win8JSApps | 2.- Guía de estilos

Esquema

Colores

EstructuraWeb

Ciudades Guía Secciones

Noticias Contenido

1..n

1 1..n

Otros elementosLogin/Registro

BuscadorMucho textoImportancia imágenes

1

1..n

Page 16: #Win8JSApps | 2.- Guía de estilos
Page 17: #Win8JSApps | 2.- Guía de estilos

Buscar

>

Page 18: #Win8JSApps | 2.- Guía de estilos

Buscar

4

6

4

7

2 1

8

3

Page 19: #Win8JSApps | 2.- Guía de estilos

Buscar

Barcelona

Guía de Barcelona, una de las grandes metrópolis…

Page 20: #Win8JSApps | 2.- Guía de estilos

BuscarVolver

Barcelona

Guía de Barcelona, una de las grandes metrópolis del Mediterráneo que tiene mil dimensiones y miles de espacios llenos de colorido y densidad histórica. Romana, gótica, modernista, futurista...El visitante nunca queda defraudado de su derroche de vida y color. 

Barcelona no sólo es una ciudad para hacer una visita detenida, sino para volver. Nunca faltan en la urbe atractivos culturales para ello. 

Tradición y modernismo se conjugan en esta ciudad, a la que guiarte.com dedica una de sus más extensas guías. 

EL PATRIMONIOBARCELONÉS

LAS RAMBLAS

EL BARRIOGÓTICO

LA CATEDRALDE BARCELONA

PLAZA DEL REY

SANTA MARÍADEL MAR

Page 21: #Win8JSApps | 2.- Guía de estilos

(function(Gracias){ })(this.despedida);

Quique Fdez. GuerraCKGrafico