el diseño visual en la web - cámara de...
TRANSCRIPT
![Page 1: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/1.jpg)
SATi pyme
El diseño visual en la webTaller Crea tu tienda online
José Luis LizanoSATIpyme Zaragoza
![Page 2: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/2.jpg)
SATi pyme
“Lo bello tiene aire fácil”
Jean Cocteau (1889-1963). Poeta, novelista, dramaturgo, pintor, diseñador, crítico y cineasta frances.
![Page 3: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/3.jpg)
SATi pyme
1 Los pilares de la webLa construcción
![Page 4: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/4.jpg)
SATi pyme
Identidad corporativa / Tipografía / Color / Fotografías / Iconos / Jerarquía / Resolución / Estilos / Tono / Detalles / Escritorio / Elementos de navegación / Grid…
![Page 5: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/5.jpg)
SATi pyme
Los pilares de la web.
Tipografía Imágenes ColorInterfaz de usuario
A
![Page 6: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/6.jpg)
SATi pyme
Tipografía
![Page 7: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/7.jpg)
SATi pyme
![Page 8: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/8.jpg)
SATi pyme
El corazón de la web es texto
![Page 9: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/9.jpg)
SATi pyme
A ASin remates Con remates
Neutras, objetivas, científicas
Narrativas, emocionales, subjetivas
Tipografía.Clasificación.
![Page 10: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/10.jpg)
SATi pyme
Tipografía.Elemento del sistema*.
*Hasta hace bien poco
Arial / Verdana
Georgia / Times
Sin remates
Con remates
![Page 11: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/11.jpg)
SATi pyme
Tipografía.Aporta significado.No es lo mismo esto:
Que esto:
![Page 12: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/12.jpg)
SATi pyme
Interfaz de usuario
![Page 13: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/13.jpg)
SATi pyme
Interfaz de usuario.
El sistema debe informar siempre al usuario de lo que está pasando.Jakob Nielsen
![Page 14: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/14.jpg)
SATi pyme
Interfaz de usuario.Botones visibles.
ACCIóN
![Page 15: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/15.jpg)
SATi pyme
Interfaz de usuario.Mostrar la interacción.
ACCIóN ACCIóN ACCIóN
Hover Click
![Page 16: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/16.jpg)
SATi pyme
Interfaz de usuario.Coherente.
![Page 17: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/17.jpg)
SATi pyme
Interfaz de usuario.Elimiar ruido.
![Page 18: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/18.jpg)
SATi pyme
Imágenes
![Page 19: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/19.jpg)
SATi pyme
Puertas Pérez
![Page 20: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/20.jpg)
SATi pyme
Puertas Pérez
Son información
![Page 21: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/21.jpg)
SATi pyme
![Page 22: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/22.jpg)
SATi pyme
Grandes
![Page 23: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/23.jpg)
SATi pyme
![Page 24: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/24.jpg)
SATi pyme
PersonasCindy Crawford, portada en más de 600 revistas
![Page 25: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/25.jpg)
SATi pyme
![Page 26: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/26.jpg)
SATi pyme
Calidad
![Page 27: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/27.jpg)
SATi pyme
El producto protagonista
![Page 28: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/28.jpg)
SATi pyme
Coherencia
![Page 29: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/29.jpg)
SATi pyme
Color
![Page 30: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/30.jpg)
SATi pyme
Color.Corporativo.
![Page 31: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/31.jpg)
SATi pyme
Color.Peligro.Precaución.Adelante!
![Page 32: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/32.jpg)
SATi pyme
Color.La naturaleza como referencia.
![Page 33: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/33.jpg)
SATi pyme
2 La caja de herramientasLos recursos
![Page 34: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/34.jpg)
SATi pyme
Google fontswww.google.com/webfonts
Fontdeckwww.fontdeck.com
Typekitwww.typekit.com
Tipografía.
![Page 35: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/35.jpg)
SATi pyme
![Page 36: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/36.jpg)
SATi pyme
Interfaz gráfico de usuario.
UI Paradewww.uiparade.com
UI-Cloudwww.ui-cloud.com/
Pattern Tapwww.patterntap.com/
![Page 37: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/37.jpg)
SATi pyme
Imágenes.
iStockphotowww.istockphoto.com
Fotoliawww.fotolia.com
Shutterstockwww.shutterstock.com
![Page 38: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/38.jpg)
SATi pyme
![Page 39: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/39.jpg)
SATi pyme
Color.
Kulerkuler.adobe.com
Colour Loverswww.colourlovers.com/
![Page 40: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/40.jpg)
SATi pyme
Inspiración.
Dribbblewww.dribbble.com
Site inspirewww.siteinspire.com
Site inspirewww.webdesign-inspiration.com
![Page 41: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/41.jpg)
SATi pyme
Otros.Grid Conocimiento Probar tipos
960www.960.gs
Fontbinerhttp://fontbiner.rojo2.com
Smashing Magazinewww.smashingmagazine.com
![Page 42: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/42.jpg)
SATi pyme
Documentación
![Page 43: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/43.jpg)
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
![Page 44: El diseño visual en la web - Cámara de Zaragozadocumentos.camarazaragoza.com/comercio-electronico... · Fundamentos del diseño Wucius Wong Editorial Gustavo Gili Veintidós Consejos](https://reader030.vdocuments.us/reader030/viewer/2022041010/5eb75d056480e143e7660c45/html5/thumbnails/44.jpg)
SATi pyme
The End