El diseño visual en la web - Cámara de...

Preview:

Citation preview

SATi pyme

El diseño visual en la webTaller Crea tu tienda online

José Luis LizanoSATIpyme Zaragoza

SATi pyme

“Lo bello tiene aire fácil”

Jean Cocteau (1889-1963). Poeta, novelista, dramaturgo, pintor, diseñador, crítico y cineasta frances.

SATi pyme

1 Los pilares de la webLa construcción

SATi pyme

Identidad corporativa / Tipografía / Color / Fotografías / Iconos / Jerarquía / Resolución / Estilos / Tono / Detalles / Escritorio / Elementos de navegación / Grid…

SATi pyme

Los pilares de la web.

Tipografía Imágenes ColorInterfaz de usuario

A

SATi pyme

Tipografía

SATi pyme

SATi pyme

El corazón de la web es texto

SATi pyme

A ASin remates Con remates

Neutras, objetivas, científicas

Narrativas, emocionales, subjetivas

Tipografía.Clasificación.

SATi pyme

Tipografía.Elemento del sistema*.

*Hasta hace bien poco

Arial / Verdana

Georgia / Times

Sin remates

Con remates

SATi pyme

Tipografía.Aporta significado.No es lo mismo esto:

Que esto:

SATi pyme

Interfaz de usuario

SATi pyme

Interfaz de usuario.

El sistema debe informar siempre al usuario de lo que está pasando.Jakob Nielsen

SATi pyme

Interfaz de usuario.Botones visibles.

ACCIóN

SATi pyme

Interfaz de usuario.Mostrar la interacción.

ACCIóN ACCIóN ACCIóN

Hover Click

SATi pyme

Interfaz de usuario.Coherente.

SATi pyme

Interfaz de usuario.Elimiar ruido.

SATi pyme

Imágenes

SATi pyme

Puertas Pérez

SATi pyme

Puertas Pérez

Son información

SATi pyme

SATi pyme

Grandes

SATi pyme

SATi pyme

PersonasCindy Crawford, portada en más de 600 revistas

SATi pyme

SATi pyme

Calidad

SATi pyme

El producto protagonista

SATi pyme

Coherencia

SATi pyme

Color

SATi pyme

Color.Corporativo.

SATi pyme

Color.Peligro.Precaución.Adelante!

SATi pyme

Color.La naturaleza como referencia.

SATi pyme

2 La caja de herramientasLos recursos

SATi pyme

Google fontswww.google.com/webfonts

Fontdeckwww.fontdeck.com

Typekitwww.typekit.com

Tipografía.

SATi pyme

SATi pyme

Interfaz gráfico de usuario.

UI Paradewww.uiparade.com

UI-Cloudwww.ui-cloud.com/

Pattern Tapwww.patterntap.com/

SATi pyme

Imágenes.

iStockphotowww.istockphoto.com

Fotoliawww.fotolia.com

Shutterstockwww.shutterstock.com

SATi pyme

SATi pyme

Color.

Kulerkuler.adobe.com

Colour Loverswww.colourlovers.com/

SATi pyme

Inspiración.

Dribbblewww.dribbble.com

Site inspirewww.siteinspire.com

Site inspirewww.webdesign-inspiration.com

SATi pyme

Otros.Grid Conocimiento Probar tipos

960www.960.gs

Fontbinerhttp://fontbiner.rojo2.com

Smashing Magazinewww.smashingmagazine.com

SATi pyme

Documentación

SATi pyme

> >Referencias web BibliografíaDISEñO GENERAL

Smashing Magazinewww.smashingmagazine.com

Webdesigner Depotwww.webdesignerdepot.com

Criterionwww.criteriondg.info

Visualwww.visual.gi

Ateneu Popularwww.ateneupopular.com

Grafficawww.graffica.info

Torresburrielwww.torresburriel.com

Foro Alfawww.foroalfa.org

El mundo como proyectoOtl AicherEditorial Gustavo Gili

El diseno emocional: Por qué nos gustan (o no) los objetos cotidianosDonald A. NormanEditorial Paidós

Fundamentos del diseñoWucius WongEditorial Gustavo Gili

Veintidós Consejos sobre TipografíaEric JardíEditorial Actar

Es mi tipoSimon GarfieldEditorial Taurus

Brand Identity Now!Julius WiedemannEditorial Taschen

SATi pyme

The End

Recommended