SlideShare una empresa de Scribd logo
1 de 26
Composición web
Diseño Web
Anatomía Página web
Identidad
Navegació
n
Contenido
Pie de página
Publicidad
Blancos
Fondo
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
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
Ejemplos
Ejemplo
Regla de los Tercios
 Dividir una
composición en
tercios es una forma
sencilla de utilizar la
proporción áurea
Ejemplo
Ejemplos
Ejemplos
Cuadrícula, equilibrio simétrico
Barra navegación izq
Barra vertical con sub menu
vert
Barra horizontal con sub menu
horizontal
Barra horizontal, sub menu vert
3 barras
No barra, proximidad
Proximidad
Aislamiento: énfasis
Equilibrio Simétrico
Equilibrio Simétrico
Equilibrio asimétrico, proporción
Equilibrio asimétrico, proporción
Herramientas: The Grid System
http://www.gridsystemgenerator.com/ http://netprotozo.com/grid/

Más contenido relacionado

La actualidad más candente

La actualidad más candente (12)

Lenguaje visual
Lenguaje visualLenguaje visual
Lenguaje visual
 
Unidad II Sintaxis de la Imagen
Unidad II Sintaxis de la ImagenUnidad II Sintaxis de la Imagen
Unidad II Sintaxis de la Imagen
 
Wucius Wong, ejercicios de radiación
Wucius Wong, ejercicios de radiaciónWucius Wong, ejercicios de radiación
Wucius Wong, ejercicios de radiación
 
Color Psychology
Color PsychologyColor Psychology
Color Psychology
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
Propiedades del color
Propiedades del colorPropiedades del color
Propiedades del color
 
One point perspective hallway
One point perspective hallwayOne point perspective hallway
One point perspective hallway
 
Colour
ColourColour
Colour
 
Elements of design power point
Elements of design power pointElements of design power point
Elements of design power point
 
Técnicas de composición
Técnicas de composiciónTécnicas de composición
Técnicas de composición
 
Lenguaje visual
Lenguaje visualLenguaje visual
Lenguaje visual
 
Creating an Magazine ad with Adobe InDesign
Creating an Magazine ad with Adobe InDesignCreating an Magazine ad with Adobe InDesign
Creating an Magazine ad with Adobe InDesign
 

Destacado

PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBMario Martinez
 
patrones de diseño web.
  patrones de diseño web.   patrones de diseño web.
patrones de diseño web. Diana Luna
 
Tecnicas de composicion diseño grafico
Tecnicas de composicion diseño graficoTecnicas de composicion diseño grafico
Tecnicas de composicion diseño graficoEstefanieMedinaA
 
Elementos de la Comunicacion Visual
Elementos de la Comunicacion VisualElementos de la Comunicacion Visual
Elementos de la Comunicacion VisualJuliana Villamonte
 
Arquitectura 3 Capas
Arquitectura 3 CapasArquitectura 3 Capas
Arquitectura 3 CapasFani Calle
 
FormulacióN Pres1
FormulacióN Pres1FormulacióN Pres1
FormulacióN Pres1nbrenda
 
PresentacióN Uin 2009 Abril
PresentacióN Uin 2009 AbrilPresentacióN Uin 2009 Abril
PresentacióN Uin 2009 Abrilguestb74ab
 
Los Mayas Y Sus ProfecíAs
Los Mayas Y Sus ProfecíAsLos Mayas Y Sus ProfecíAs
Los Mayas Y Sus ProfecíAsdanidlt83
 
El regreso de la enegia nuclear
El regreso de la enegia nuclearEl regreso de la enegia nuclear
El regreso de la enegia nuclearyayis009
 
Palau De La Musica
Palau De La MusicaPalau De La Musica
Palau De La MusicaJoseluis58
 
Los recursos naturales
Los recursos naturalesLos recursos naturales
Los recursos naturalesguest6d0ae4
 
Facundo Cabral El Arte Del Encuentro +
Facundo Cabral   El Arte Del Encuentro +Facundo Cabral   El Arte Del Encuentro +
Facundo Cabral El Arte Del Encuentro +Joseluis58
 
Athènes au Ve siècle - Fiches de consignes pour les élèves.
Athènes au Ve siècle - Fiches de consignes pour les élèves.Athènes au Ve siècle - Fiches de consignes pour les élèves.
Athènes au Ve siècle - Fiches de consignes pour les élèves.Caroline Tambareau
 
Que Orgullo Vivir En Galiza
Que Orgullo Vivir En GalizaQue Orgullo Vivir En Galiza
Que Orgullo Vivir En Galizalunanueva
 

Destacado (20)

Composicion de paginas web
Composicion de paginas webComposicion de paginas web
Composicion de paginas web
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 
patrones de diseño web.
  patrones de diseño web.   patrones de diseño web.
patrones de diseño web.
 
Tecnicas de composicion diseño grafico
Tecnicas de composicion diseño graficoTecnicas de composicion diseño grafico
Tecnicas de composicion diseño grafico
 
Elementos de la Comunicacion Visual
Elementos de la Comunicacion VisualElementos de la Comunicacion Visual
Elementos de la Comunicacion Visual
 
Arquitectura 3 Capas
Arquitectura 3 CapasArquitectura 3 Capas
Arquitectura 3 Capas
 
Teoría imagen
Teoría imagenTeoría imagen
Teoría imagen
 
FormulacióN Pres1
FormulacióN Pres1FormulacióN Pres1
FormulacióN Pres1
 
PresentacióN Uin 2009 Abril
PresentacióN Uin 2009 AbrilPresentacióN Uin 2009 Abril
PresentacióN Uin 2009 Abril
 
Los Mayas Y Sus ProfecíAs
Los Mayas Y Sus ProfecíAsLos Mayas Y Sus ProfecíAs
Los Mayas Y Sus ProfecíAs
 
Adjudicació Obres Riera
Adjudicació Obres RieraAdjudicació Obres Riera
Adjudicació Obres Riera
 
El regreso de la enegia nuclear
El regreso de la enegia nuclearEl regreso de la enegia nuclear
El regreso de la enegia nuclear
 
Cuento Belen (1)
Cuento Belen (1)Cuento Belen (1)
Cuento Belen (1)
 
Palau De La Musica
Palau De La MusicaPalau De La Musica
Palau De La Musica
 
Los recursos naturales
Los recursos naturalesLos recursos naturales
Los recursos naturales
 
Facundo Cabral El Arte Del Encuentro +
Facundo Cabral   El Arte Del Encuentro +Facundo Cabral   El Arte Del Encuentro +
Facundo Cabral El Arte Del Encuentro +
 
Astronomía - Daniel Martin
Astronomía - Daniel MartinAstronomía - Daniel Martin
Astronomía - Daniel Martin
 
Cp guatemala
Cp guatemalaCp guatemala
Cp guatemala
 
Athènes au Ve siècle - Fiches de consignes pour les élèves.
Athènes au Ve siècle - Fiches de consignes pour les élèves.Athènes au Ve siècle - Fiches de consignes pour les élèves.
Athènes au Ve siècle - Fiches de consignes pour les élèves.
 
Que Orgullo Vivir En Galiza
Que Orgullo Vivir En GalizaQue Orgullo Vivir En Galiza
Que Orgullo Vivir En Galiza
 

Más de Rubens Yanes

Ecosistemas digitales y el mercadeo
Ecosistemas digitales y el mercadeo Ecosistemas digitales y el mercadeo
Ecosistemas digitales y el mercadeo Rubens Yanes
 
Tendencias que afectan al periodismo en el siglo XXI
Tendencias que afectan al periodismo en el siglo XXITendencias que afectan al periodismo en el siglo XXI
Tendencias que afectan al periodismo en el siglo XXIRubens Yanes
 
Periodismo de datos
Periodismo de datosPeriodismo de datos
Periodismo de datosRubens Yanes
 
Periodista como moderador
Periodista como moderadorPeriodista como moderador
Periodista como moderadorRubens Yanes
 
Herramientas digitales para la investigación periodística
Herramientas digitales para la investigación periodísticaHerramientas digitales para la investigación periodística
Herramientas digitales para la investigación periodísticaRubens Yanes
 
Newton & Demarchelier
Newton & DemarchelierNewton & Demarchelier
Newton & DemarchelierRubens Yanes
 
Fotógrafos contemporáneos
Fotógrafos contemporáneosFotógrafos contemporáneos
Fotógrafos contemporáneosRubens Yanes
 
Ciclo de producción
Ciclo de producciónCiclo de producción
Ciclo de producciónRubens Yanes
 
Ensayo fotográfico
Ensayo fotográficoEnsayo fotográfico
Ensayo fotográficoRubens Yanes
 
Entrega 2 diseño web
Entrega 2 diseño webEntrega 2 diseño web
Entrega 2 diseño webRubens Yanes
 
Planos y Movimientos de Cámara
Planos y Movimientos de CámaraPlanos y Movimientos de Cámara
Planos y Movimientos de CámaraRubens Yanes
 
Mirada a la fotografía periodística actual
Mirada a la fotografía periodística actualMirada a la fotografía periodística actual
Mirada a la fotografía periodística actualRubens Yanes
 
Diseño y Eyetrack
Diseño y Eyetrack Diseño y Eyetrack
Diseño y Eyetrack Rubens Yanes
 
Introducción a websites
Introducción a websitesIntroducción a websites
Introducción a websitesRubens Yanes
 

Más de Rubens Yanes (20)

Ecosistemas digitales y el mercadeo
Ecosistemas digitales y el mercadeo Ecosistemas digitales y el mercadeo
Ecosistemas digitales y el mercadeo
 
Tendencias que afectan al periodismo en el siglo XXI
Tendencias que afectan al periodismo en el siglo XXITendencias que afectan al periodismo en el siglo XXI
Tendencias que afectan al periodismo en el siglo XXI
 
Periodismo de datos
Periodismo de datosPeriodismo de datos
Periodismo de datos
 
Periodista como moderador
Periodista como moderadorPeriodista como moderador
Periodista como moderador
 
Herramientas digitales para la investigación periodística
Herramientas digitales para la investigación periodísticaHerramientas digitales para la investigación periodística
Herramientas digitales para la investigación periodística
 
Wordpress
WordpressWordpress
Wordpress
 
Newton & Demarchelier
Newton & DemarchelierNewton & Demarchelier
Newton & Demarchelier
 
Fotógrafos contemporáneos
Fotógrafos contemporáneosFotógrafos contemporáneos
Fotógrafos contemporáneos
 
Ciclo de producción
Ciclo de producciónCiclo de producción
Ciclo de producción
 
Ensayo fotográfico
Ensayo fotográficoEnsayo fotográfico
Ensayo fotográfico
 
Magnum
MagnumMagnum
Magnum
 
Entrega 2 diseño web
Entrega 2 diseño webEntrega 2 diseño web
Entrega 2 diseño web
 
Planos y Movimientos de Cámara
Planos y Movimientos de CámaraPlanos y Movimientos de Cámara
Planos y Movimientos de Cámara
 
Mirada a la fotografía periodística actual
Mirada a la fotografía periodística actualMirada a la fotografía periodística actual
Mirada a la fotografía periodística actual
 
Early siglo xx
Early siglo xxEarly siglo xx
Early siglo xx
 
Diseño y Eyetrack
Diseño y Eyetrack Diseño y Eyetrack
Diseño y Eyetrack
 
Introducción a websites
Introducción a websitesIntroducción a websites
Introducción a websites
 
Lentes
LentesLentes
Lentes
 
Composición
ComposiciónComposición
Composición
 
Evaluación
EvaluaciónEvaluación
Evaluación
 

Último

FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxdkmeza
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesYanirisBarcelDelaHoz
 
Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularMooPandrea
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIIsauraImbrondone
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 

Último (20)

FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonables
 
Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circular
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 

Composición en Web