SlideShare a Scribd company logo
1 of 6
Download to read offline
IMAGEN, TIPOGRAFÍA Y COLOR
           Reglas Para Pantalla, Tipografía y Color
Reglas Para Pantallas, Tipografía y Color

 Existen ciertos parámetros de diseño para lograr una
 presentación atractiva para el internauta, no solo en
 términos creativos sino también en estructuras idóneas
 para una fácil lectura del contenido.

 Por ende, se debe tener en cuenta además de la
 información y las imágenes de apoyo para publicar; la
 retícula, la tipografía, la plantilla y el color, que enmarcaran
 toda la armonía deseada.

 Son reglas que implican mucho a la hora de conseguir éxito
 con la página, y la atención de los usuarios.
Sistemas de Colores                              ¨El pintor del futuro es un colorista como no ha
                                                                                     existido jamás.
                                                                               El pintoq del futuqo…
                                                           No lo imagino merodeando por pequeños
                                            restaurantes, con la boca llena de dientes postizos
                                                                y visitando burdeles como hago yo.¨
                                                                                  Vincent Van Gogh


                                            •Sistema de Color Aditivo: RGB (sistema de
                                            colores primarios).
                                            •Sistema de Color Substractivo: CMYK (sistema
                                            cromático utilizado como base en impresión).


 El color siempre se debe elegir con intención y un propósito. El efecto del color siempre
 depende del contexto, porque puede tener efectos dispares.

 El fondo de la pantalla suele ser la superficie de color más extensa, por lo que el color
 que se elige para este debe ser seleccionado con cuidado. Cada color posee una
 personalidad que conviene tener en cuenta a la hora de combinarlo con los colores de
 otros elementos de diseño, como la tipografía y los logotipos.
Tipografía

                                            Es necesario analizar cada tipografía
                                            teniendo en cuenta su legibilidad en
                                            pantalla. Para soportes digitales, las
                                            tipografías con remates resultan menos
                                            legibles que las de palo seco.

                                            Si se opta por utilizar una tipografía con
                                            remates para una presentación en
                                            pantalla, es conveniente corroborar que
                                            los terminales y las líneas no sean
                                            excesivamente finos. Estos tipos nunca
                                            deben usarse en cuerpos muy reducidos
                                            en pantalla.

Los estilos fina y ultrafina son desaconsejables, porque sus trazos son muy
delgados para descomponerlos en píxeles, a menos que se utilicen letras de gran
tamaño. También se recomienda evitar las cursiva y las letras estrechas.
Longitud de la línea y cantidad de texto

                                                                     Por ejemplo
                                                                     Wikipedia, se
                                                                     caracteriza por
                                                                     mantener
                                                                     extensas líneas
                                                                     de texto y no
                                                                     dividirlas por
                                                                     columnas más
                                                                     aconsejables.



 Para una buena legibilidad en pantalla no sólo es importante elegir el cuerpo de
 letra y la tipografía adecuados, sino también una longitud de línea correcta.

 Para establecer el ancho que mejor se adecua a una columna hay que tener en
 cuenta el interletraje de la tipografía utilizada.
Interlineado y Espacio entre Palabras

                                 La mala visualización de tipografía
                                 en pantalla no supone un gran
                                 incentivo a la lectura. Por ello, el
                                 diseñador debe experimentar y
                                 utilizar otros recursos que
                                 permitan leer el texto más
                                 cómodamente.

                                 El interlineado en pantalla debe
                                 ser superior al aplicado en papel,
                                 que resulta fácilmente legible al
                                 120% (ajuste automático).
                                 Pantalla: cuerpo 14pt -
                                 interlineado 130% = 18,2 pt.

More Related Content

Viewers also liked

Reglas para pantalla 1
Reglas para pantalla 1Reglas para pantalla 1
Reglas para pantalla 1DianeLadino
 
Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...
Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...
Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...comunicacionesmincultura
 
Recurso didáctico digital "Maestría en Eva"
Recurso didáctico digital "Maestría en Eva"Recurso didáctico digital "Maestría en Eva"
Recurso didáctico digital "Maestría en Eva"Carlos Raul Gonzalez Diaz
 
Fundamentos del diseño
Fundamentos del diseño  Fundamentos del diseño
Fundamentos del diseño DianeLadino
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla DianeLadino
 
Luis miguel posada » juan camilo higuita
Luis miguel posada » juan camilo higuitaLuis miguel posada » juan camilo higuita
Luis miguel posada » juan camilo higuitamariacamilasepulvedacsj
 
Caracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónCaracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónDianeLadino
 
Fundamentos del Diseño
Fundamentos del Diseño   Fundamentos del Diseño
Fundamentos del Diseño DianeLadino
 

Viewers also liked (20)

Ponencia sobre aulas virtuales.
Ponencia sobre aulas virtuales.Ponencia sobre aulas virtuales.
Ponencia sobre aulas virtuales.
 
Laminario cafe
Laminario cafeLaminario cafe
Laminario cafe
 
María camila sepúlveda arismendy
María camila sepúlveda arismendyMaría camila sepúlveda arismendy
María camila sepúlveda arismendy
 
Emprendimiento
EmprendimientoEmprendimiento
Emprendimiento
 
Reglas para pantalla 1
Reglas para pantalla 1Reglas para pantalla 1
Reglas para pantalla 1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Cuento
CuentoCuento
Cuento
 
Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...
Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...
Portafolio Nacional de Estímulos - Mincultura Colombia - Convocatorias Comuni...
 
Recurso didáctico digital "Maestría en Eva"
Recurso didáctico digital "Maestría en Eva"Recurso didáctico digital "Maestría en Eva"
Recurso didáctico digital "Maestría en Eva"
 
Fundamentos del diseño
Fundamentos del diseño  Fundamentos del diseño
Fundamentos del diseño
 
Las camaras fotográficas laura
Las camaras fotográficas lauraLas camaras fotográficas laura
Las camaras fotográficas laura
 
Ilustracion
IlustracionIlustracion
Ilustracion
 
Reticulas para Pantalla
Reticulas para Pantalla Reticulas para Pantalla
Reticulas para Pantalla
 
Maria camila sepulveda 7a
Maria camila sepulveda 7aMaria camila sepulveda 7a
Maria camila sepulveda 7a
 
Las camaras fotograficas
Las camaras fotograficasLas camaras fotograficas
Las camaras fotograficas
 
Mac y pc
Mac y pcMac y pc
Mac y pc
 
Laminario cafe
Laminario cafeLaminario cafe
Laminario cafe
 
Luis miguel posada » juan camilo higuita
Luis miguel posada » juan camilo higuitaLuis miguel posada » juan camilo higuita
Luis miguel posada » juan camilo higuita
 
Caracteristicas Digitales de Composición
Caracteristicas Digitales de ComposiciónCaracteristicas Digitales de Composición
Caracteristicas Digitales de Composición
 
Fundamentos del Diseño
Fundamentos del Diseño   Fundamentos del Diseño
Fundamentos del Diseño
 

Similar to Reglas para Pantalla

Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorjonbethan
 
Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorjonbethan
 
Tipografía
TipografíaTipografía
Tipografíammratona
 
Reglas para Pantalla, tipografía y color
Reglas para Pantalla, tipografía y colorReglas para Pantalla, tipografía y color
Reglas para Pantalla, tipografía y colorelmorenof
 
Tipos de impresora luis tercero
Tipos de impresora luis terceroTipos de impresora luis tercero
Tipos de impresora luis terceroeduardogarcia1524
 
Tipografía y color
Tipografía y colorTipografía y color
Tipografía y colorgarv1032
 
Tipografía y color
Tipografía y color Tipografía y color
Tipografía y color Yuri Urrego
 
Tipografía y color
Tipografía y color Tipografía y color
Tipografía y color Yuri Urrego
 
Olga iza presentacion
Olga  iza  presentacionOlga  iza  presentacion
Olga iza presentacionog93
 
Impresoras
ImpresorasImpresoras
ImpresorasFJ2M
 
T4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoT4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoAnnabellYar
 

Similar to Reglas para Pantalla (20)

Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y color
 
Reglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y colorReglas para pantalla, tipografía y color
Reglas para pantalla, tipografía y color
 
Tipografía
TipografíaTipografía
Tipografía
 
Eq4 tipografia
Eq4 tipografiaEq4 tipografia
Eq4 tipografia
 
Reglas para Pantalla, tipografía y color
Reglas para Pantalla, tipografía y colorReglas para Pantalla, tipografía y color
Reglas para Pantalla, tipografía y color
 
Impresoras
ImpresorasImpresoras
Impresoras
 
Tipos de impresora luis tercero
Tipos de impresora luis terceroTipos de impresora luis tercero
Tipos de impresora luis tercero
 
Tipografía y color
Tipografía y colorTipografía y color
Tipografía y color
 
Tipografía y color
Tipografía y color Tipografía y color
Tipografía y color
 
Tipografía y color
Tipografía y color Tipografía y color
Tipografía y color
 
Olga iza presentacion
Olga  iza  presentacionOlga  iza  presentacion
Olga iza presentacion
 
Impresoras
ImpresorasImpresoras
Impresoras
 
T4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoT4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenografico
 
Tecnicas de impresión
Tecnicas de impresión Tecnicas de impresión
Tecnicas de impresión
 
Jgaibor impresora ppt
Jgaibor impresora pptJgaibor impresora ppt
Jgaibor impresora ppt
 
Reticulas tipografia y color
Reticulas tipografia y colorReticulas tipografia y color
Reticulas tipografia y color
 
Impresoras
ImpresorasImpresoras
Impresoras
 
Impresoras
ImpresorasImpresoras
Impresoras
 
Impresoras
ImpresorasImpresoras
Impresoras
 
Impresoras
ImpresorasImpresoras
Impresoras
 

Recently uploaded

Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
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
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxbarbaracantuflr
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfAdrianaCarolinaMoral2
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOManuelBustamante49
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddabuitragoi
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasRiegosVeracruz
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 

Recently uploaded (20)

Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
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
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidad
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 

Reglas para Pantalla

  • 1. IMAGEN, TIPOGRAFÍA Y COLOR Reglas Para Pantalla, Tipografía y Color
  • 2. Reglas Para Pantallas, Tipografía y Color Existen ciertos parámetros de diseño para lograr una presentación atractiva para el internauta, no solo en términos creativos sino también en estructuras idóneas para una fácil lectura del contenido. Por ende, se debe tener en cuenta además de la información y las imágenes de apoyo para publicar; la retícula, la tipografía, la plantilla y el color, que enmarcaran toda la armonía deseada. Son reglas que implican mucho a la hora de conseguir éxito con la página, y la atención de los usuarios.
  • 3. Sistemas de Colores ¨El pintor del futuro es un colorista como no ha existido jamás. El pintoq del futuqo… No lo imagino merodeando por pequeños restaurantes, con la boca llena de dientes postizos y visitando burdeles como hago yo.¨ Vincent Van Gogh •Sistema de Color Aditivo: RGB (sistema de colores primarios). •Sistema de Color Substractivo: CMYK (sistema cromático utilizado como base en impresión). El color siempre se debe elegir con intención y un propósito. El efecto del color siempre depende del contexto, porque puede tener efectos dispares. El fondo de la pantalla suele ser la superficie de color más extensa, por lo que el color que se elige para este debe ser seleccionado con cuidado. Cada color posee una personalidad que conviene tener en cuenta a la hora de combinarlo con los colores de otros elementos de diseño, como la tipografía y los logotipos.
  • 4. Tipografía Es necesario analizar cada tipografía teniendo en cuenta su legibilidad en pantalla. Para soportes digitales, las tipografías con remates resultan menos legibles que las de palo seco. Si se opta por utilizar una tipografía con remates para una presentación en pantalla, es conveniente corroborar que los terminales y las líneas no sean excesivamente finos. Estos tipos nunca deben usarse en cuerpos muy reducidos en pantalla. Los estilos fina y ultrafina son desaconsejables, porque sus trazos son muy delgados para descomponerlos en píxeles, a menos que se utilicen letras de gran tamaño. También se recomienda evitar las cursiva y las letras estrechas.
  • 5. Longitud de la línea y cantidad de texto Por ejemplo Wikipedia, se caracteriza por mantener extensas líneas de texto y no dividirlas por columnas más aconsejables. Para una buena legibilidad en pantalla no sólo es importante elegir el cuerpo de letra y la tipografía adecuados, sino también una longitud de línea correcta. Para establecer el ancho que mejor se adecua a una columna hay que tener en cuenta el interletraje de la tipografía utilizada.
  • 6. Interlineado y Espacio entre Palabras La mala visualización de tipografía en pantalla no supone un gran incentivo a la lectura. Por ello, el diseñador debe experimentar y utilizar otros recursos que permitan leer el texto más cómodamente. El interlineado en pantalla debe ser superior al aplicado en papel, que resulta fácilmente legible al 120% (ajuste automático). Pantalla: cuerpo 14pt - interlineado 130% = 18,2 pt.