SlideShare una empresa de Scribd logo
1 de 13
INSTITUTO SUPERIOR
TECNOLÓGICO RUMIÑAHUI
DIAGRAMACIÓNY CIMPOSICIÓN
MAYRA SUNTAXI 6 SEMESTRE
Diagramación
• trata de que las paginas se establezcan en un orden concreto, formato,
cajas de diagramación, tipografías, tamaño, estilo, formateo de párrafos,
sangrías, tratamiento de la imagen sangrados, recuadros o aplicaciones
especiales, criterios compositivos, todos los detalles que componen una
publicación,
• El diagramador resuelve la organización de las páginas de acuerdo con las
normas que baya a ir estableciendo el diseñador.
• Existe también la diagramación para las paginas web, que estas a su vez se
establecen en el internet para ofrecer información de servicios o productos al
cliente.
Importancia
la diagramación se la puede realizar
en las revistas impresas como
digitales, también en las paginas
web, todo depende de las
estrategias que use el diseñador
para atraer la atención del receptor.
Los márgenes: definen la caja de diagramación que es el lugar
donde van a ir los textos y las imágenes podrán distribuirse en
toda la página aprovechando el trazado de la rejilla de
diagramación.
Las columnas: podrán establecerse en número único (una, dos,
tres, cuatro..) o combinar (de una y dos, de una y tres, de dos y
cuatro...), esto depende de la estructura periodística.
Espacios entre columnas: se pueden dimensionar de acuerdo a
un tipo de diseño pero la separación estándar es de 5mm.
Diagramación
• Trata de la distribución de las
imágenes como también de los
textos colocarlos de manera que
estos el momento de ser
observados por el receptor pueda
extraer un mensaje puro sin
obstrucciones, enfoca al ojo
humano en la información que
este necesite.
Composición
Es la distribución de elementos que forman una estructura clara y precisa, pero
que además esta apta para enviar un mensaje al receptor, es por ello que la
composición debe ser realizada de manera coherente.
La composición constituyen las bases de la diagramación.
Se debe tomar a consideración usar elementos como encuadre, formatos,
centros focales, colores, tipografías, estructura.
Es el orden determinado para lo que se
establece en la pagina, los fondos, imágenes o
textos a usarse, deben tener concordancia en
especial todo diseño debe ser similar al texto,
e información que se proyecte.
Existe la tendencia a desarrollar conceptos gráficos
para un diseño web, completos dentro de un mismo
programa, hasta llegar al montaje de la página web
misma, en contraste, lo habitual es preparar cada
uno de los elementos por separado.
Composición fotográfica
• Para una fotografía establecen puntos exhaustivo en que se encuadra
y ubican los objetos, los cuales requieren que la imagen tenga puntos
centrales que llamean inmediatamente la atención del espectador, es
repartir el equilibrio o peso visual de forma coordinada, al fin de
cuaenta se usa el encuadren imágenes ya que estas tienen la
finalidad de llegar hasta la revista o pagina web.
Bibliografía
• https://prezi.com/9fj1fzsf8c7k/la-composicion-y-la-diagramacion/
• http://www.dgrafid.com/diseno_web/diseno_y_diagramacion_web.html
• http://slideplayer.es/slide/5457065/
• http://www.slideshare.net/abajaire/joan-costaimagencorporativa
• http://es.slideshare.net/paoloarevaloortiz/composicion-de-paginas-web
Gracias

Más contenido relacionado

Similar a Diagramacion y composicion

Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2dj vas olalla ayala
 
Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2dj vas olalla ayala
 
Diagramación y composición fanny c act 2.1
Diagramación y composición fanny c act 2.1Diagramación y composición fanny c act 2.1
Diagramación y composición fanny c act 2.1Fai06
 
Diagramación y composición act 2.1
Diagramación y composición act 2.1Diagramación y composición act 2.1
Diagramación y composición act 2.1Wvivi Martinez
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveAntonRoMX
 
Diagramación y composición
Diagramación y composiciónDiagramación y composición
Diagramación y composiciónGAVELAMARCELO
 
Herramientas tecnologicas
Herramientas tecnologicas Herramientas tecnologicas
Herramientas tecnologicas Daniela Henao
 
Pasos técnicos para crear un sitio web
Pasos técnicos para crear un sitio web Pasos técnicos para crear un sitio web
Pasos técnicos para crear un sitio web Roxsy Velasquez
 
Layout DT
Layout DTLayout DT
Layout DTluisryt
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicosAdrianagz
 

Similar a Diagramacion y composicion (20)

Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2
 
Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2Diagramación y composición jonathan olalla s2
Diagramación y composición jonathan olalla s2
 
Diagramación y composición fanny c act 2.1
Diagramación y composición fanny c act 2.1Diagramación y composición fanny c act 2.1
Diagramación y composición fanny c act 2.1
 
Maquetacion1
Maquetacion1Maquetacion1
Maquetacion1
 
Diagramación y composición act 2.1
Diagramación y composición act 2.1Diagramación y composición act 2.1
Diagramación y composición act 2.1
 
Preguntas generadoras 9 semestre
Preguntas generadoras 9 semestrePreguntas generadoras 9 semestre
Preguntas generadoras 9 semestre
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
Diagramación y composición
Diagramación y composiciónDiagramación y composición
Diagramación y composición
 
Herramientas tecnologicas
Herramientas tecnologicas Herramientas tecnologicas
Herramientas tecnologicas
 
Pasos técnicos para crear un sitio web
Pasos técnicos para crear un sitio web Pasos técnicos para crear un sitio web
Pasos técnicos para crear un sitio web
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
Layout DT
Layout DTLayout DT
Layout DT
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
 
Identificar los elementos de diseño multimedia
Identificar los elementos de diseño multimediaIdentificar los elementos de diseño multimedia
Identificar los elementos de diseño multimedia
 
13.diseño de web apps
13.diseño de web apps13.diseño de web apps
13.diseño de web apps
 
DISEÑO WEB.pdf
DISEÑO WEB.pdfDISEÑO WEB.pdf
DISEÑO WEB.pdf
 
Importancia de la maquetacion
Importancia de la maquetacionImportancia de la maquetacion
Importancia de la maquetacion
 
Power point
Power pointPower point
Power point
 
Tarea de sara
Tarea de saraTarea de sara
Tarea de sara
 
Tarea de sara
Tarea de saraTarea de sara
Tarea de sara
 

Último

CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxcalc5597
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
secuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulossecuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulosRosarioLloglla
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
Manual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfManual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfGermnBelzunce1
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...chechei12040303
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesLuis Fernando Salgado
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....estefaniaortizsalina
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxEdisonCondesoDelgado1
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfoliosofiospina94
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 

Último (20)

CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
secuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulossecuencias de los figuras de cuadros y rectangulos
secuencias de los figuras de cuadros y rectangulos
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Manual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfManual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdf
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHEDIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfolio
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 

Diagramacion y composicion

  • 1. INSTITUTO SUPERIOR TECNOLÓGICO RUMIÑAHUI DIAGRAMACIÓNY CIMPOSICIÓN MAYRA SUNTAXI 6 SEMESTRE
  • 2. Diagramación • trata de que las paginas se establezcan en un orden concreto, formato, cajas de diagramación, tipografías, tamaño, estilo, formateo de párrafos, sangrías, tratamiento de la imagen sangrados, recuadros o aplicaciones especiales, criterios compositivos, todos los detalles que componen una publicación, • El diagramador resuelve la organización de las páginas de acuerdo con las normas que baya a ir estableciendo el diseñador. • Existe también la diagramación para las paginas web, que estas a su vez se establecen en el internet para ofrecer información de servicios o productos al cliente.
  • 3. Importancia la diagramación se la puede realizar en las revistas impresas como digitales, también en las paginas web, todo depende de las estrategias que use el diseñador para atraer la atención del receptor.
  • 4. Los márgenes: definen la caja de diagramación que es el lugar donde van a ir los textos y las imágenes podrán distribuirse en toda la página aprovechando el trazado de la rejilla de diagramación. Las columnas: podrán establecerse en número único (una, dos, tres, cuatro..) o combinar (de una y dos, de una y tres, de dos y cuatro...), esto depende de la estructura periodística. Espacios entre columnas: se pueden dimensionar de acuerdo a un tipo de diseño pero la separación estándar es de 5mm.
  • 5. Diagramación • Trata de la distribución de las imágenes como también de los textos colocarlos de manera que estos el momento de ser observados por el receptor pueda extraer un mensaje puro sin obstrucciones, enfoca al ojo humano en la información que este necesite.
  • 6.
  • 7. Composición Es la distribución de elementos que forman una estructura clara y precisa, pero que además esta apta para enviar un mensaje al receptor, es por ello que la composición debe ser realizada de manera coherente. La composición constituyen las bases de la diagramación. Se debe tomar a consideración usar elementos como encuadre, formatos, centros focales, colores, tipografías, estructura.
  • 8.
  • 9. Es el orden determinado para lo que se establece en la pagina, los fondos, imágenes o textos a usarse, deben tener concordancia en especial todo diseño debe ser similar al texto, e información que se proyecte.
  • 10. Existe la tendencia a desarrollar conceptos gráficos para un diseño web, completos dentro de un mismo programa, hasta llegar al montaje de la página web misma, en contraste, lo habitual es preparar cada uno de los elementos por separado.
  • 11. Composición fotográfica • Para una fotografía establecen puntos exhaustivo en que se encuadra y ubican los objetos, los cuales requieren que la imagen tenga puntos centrales que llamean inmediatamente la atención del espectador, es repartir el equilibrio o peso visual de forma coordinada, al fin de cuaenta se usa el encuadren imágenes ya que estas tienen la finalidad de llegar hasta la revista o pagina web.
  • 12. Bibliografía • https://prezi.com/9fj1fzsf8c7k/la-composicion-y-la-diagramacion/ • http://www.dgrafid.com/diseno_web/diseno_y_diagramacion_web.html • http://slideplayer.es/slide/5457065/ • http://www.slideshare.net/abajaire/joan-costaimagencorporativa • http://es.slideshare.net/paoloarevaloortiz/composicion-de-paginas-web