Composición en Web
-
Upload
rubens-yanes -
Category
Education
-
view
1.473 -
download
0
Transcript of Composición en Web
![Page 1: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/1.jpg)
Composición web
Diseño Web
![Page 2: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/2.jpg)
Anatomía Página web
Identidad
Navegación
Contenido
Pie de página
Publicidad
Blancos
Fondo
![Page 3: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/3.jpg)
Cuadrícula
El sistema de cuadrícula se utiliza en diseño gráfico y web
Utilizando un sistema de cuadrícula se diagrama Ordenamiento Alineación Equilibrio
![Page 4: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/4.jpg)
Ratio dorado
Pitagóricos: “todo en la naturaleza tiene una cierta proporción que da belleza”
Ratio dorado: 1,6180339 = 1,62
10
10 / 1,62 = 6,17
![Page 5: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/5.jpg)
Ejemplos
![Page 6: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/6.jpg)
Ejemplo
![Page 7: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/7.jpg)
Regla de los Tercios
Dividir una composición en tercios es una forma sencilla de utilizar la proporción áurea
![Page 8: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/8.jpg)
![Page 9: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/9.jpg)
![Page 10: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/10.jpg)
Ejemplo
![Page 11: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/11.jpg)
Ejemplos
![Page 12: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/12.jpg)
Ejemplos
![Page 13: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/13.jpg)
Cuadrícula, equilibrio simétrico
![Page 14: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/14.jpg)
Barra navegación izq
![Page 15: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/15.jpg)
Barra vertical con sub menu vert
![Page 16: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/16.jpg)
Barra horizontal con sub menu horizontal
![Page 17: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/17.jpg)
Barra horizontal, sub menu vert
![Page 18: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/18.jpg)
3 barras
![Page 19: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/19.jpg)
No barra, proximidad
![Page 20: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/20.jpg)
Proximidad
![Page 21: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/21.jpg)
Aislamiento: énfasis
![Page 22: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/22.jpg)
Equilibrio Simétrico
![Page 23: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/23.jpg)
Equilibrio Simétrico
![Page 24: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/24.jpg)
Equilibrio asimétrico, proporción
![Page 25: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/25.jpg)
Equilibrio asimétrico, proporción
![Page 26: Composición en Web](https://reader036.fdocuments.ec/reader036/viewer/2022062307/557b4574d8b42a8c528b471b/html5/thumbnails/26.jpg)
Herramientas: The Grid System
http://www.gridsystemgenerator.com/ http://netprotozo.com/grid/