#Win8JSApps | 2.- Guía de estilos

Post on 30-Jun-2015

91 views 5 download

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

Guía de estiloWindows 8 Apps

Quique Fdez. GuerraCKGrafico

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

Demo

Diferentes estilosen Windows 8

Layout

Texto Segoe

Elementos UI

Iconos Segoe UI SymbolElementos HTML

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

Demo

Elementos HTMLLogos, Iconos y Tiles

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

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

Demo

De web a App(ejemplo inventado)

Esquema

Colores

EstructuraWeb

Ciudades Guía Secciones

Noticias Contenido

1..n

1 1..n

Otros elementosLogin/Registro

BuscadorMucho textoImportancia imágenes

1

1..n

Buscar

>

Buscar

4

6

4

7

2 1

8

3

Buscar

Barcelona

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

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

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

Quique Fdez. GuerraCKGrafico