Diseño Visual
-
Upload
harold-maduro -
Category
Education
-
view
1.367 -
download
0
description
Transcript of Diseño Visual
![Page 1: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/robq/352941096/Nelly Valdivieso, Lara Fuica, Johann González, Harold Maduro
diseño
![Page 2: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/2.jpg)
¿por qué diseñamos?
![Page 3: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/3.jpg)
Diseñamos...Para facilitar la comunicación entre el usuario y el contenido.
http://www.flickr.com/photos/sherca/3628378414/sizes/o/
![Page 4: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/4.jpg)
Buscando siempre la simplicidad
Diseñamos...
http://www.flickr.com/photos/sxt4black/4468233942/sizes/o/
![Page 5: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/5.jpg)
![Page 6: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/6.jpg)
Un diseño exitoso no siempre depende de atractivos visuales.
![Page 7: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/7.jpg)
Herramientas de diseño AgrupaciónProximidadContrasteAlineaciónEquilibrioRitmoTipografíaColor
http://www.flickr.com/photos/aidanmorgan/3261494607/
![Page 8: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/8.jpg)
AgrupaciónLa manera más sencilla de crear una asociación de elementos es agrupándolos.
![Page 9: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/9.jpg)
![Page 10: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/10.jpg)
![Page 11: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/11.jpg)
Proximidad
Agrupar elementos relacionados.Cuando varios elementos están cerca unos de otro; se convierten en un sólo elemento visual.
http://www.flickr.com/photos/katz_/1796348168/sizes/l/
![Page 12: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/12.jpg)
ProximidadLista ordenada en grupos visuales.
Productos
VestirZapatosZapatillasSandaliasElectrónicosTelevisionesDVDsRadiosComidaGalletasHeladosDulces
Productos
Vestir Zapatos Zapatillas Sandalias
Electrónicos Televisiones DVDs Radios
Comida Galletas Helados Dulces
Lista sin formatoTodos los elementos juntos
![Page 13: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/13.jpg)
Proximidad
![Page 14: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/14.jpg)
http://www.flickr.com/photos/jupox/2783071053/sizes/o/
![Page 15: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/15.jpg)
15
![Page 16: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/16.jpg)
AlineaciónEsta es una forma útil de mostrar jerarquía visual, particularmente cuando hay demasiados elementos para arreglar dentro de una estructura.
![Page 17: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/17.jpg)
![Page 18: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/18.jpg)
Tipografía
San serif
Serif
![Page 19: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/19.jpg)
Tipografía
Utilizar muchas
tipografías en un el
contrario, lo hace ver
más desordenado.
diseño no lo hace mejor; por
![Page 20: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/20.jpg)
Colores
![Page 21: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/21.jpg)
Existen colorescálidos.
“A Book About Design Complicated Doesn’t Make it Good” - Mark Gonyea
![Page 22: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/22.jpg)
Existen coloresfríos.
“A Book About Design Complicated Doesn’t Make it Good” - Mark Gonyea
![Page 23: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/23.jpg)
colorIntensidad
(saturation)
Indica la intensidad del color. Un Rojo al 100% se considera
intenso o completamente saturado.
Por el contrario, un gris se considera desaturado ya que
no tiene ningun matiz reconocible.
![Page 28: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/28.jpg)
Darle al sitio web una buena combinación de colores.
![Page 29: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/29.jpg)
uso de suficiente color
![Page 30: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/30.jpg)
buen uso del blanco
![Page 31: Diseño Visual](https://reader033.fdocumento.com/reader033/viewer/2022061212/549460efb47959514d8b4aae/html5/thumbnails/31.jpg)
Complicado no lo hace mejor.