Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Diseño periodístico

gerard jota
November 02, 2022

Diseño periodístico

Una breve introducción al diseño para estudiantes de Periodismo en la Universitat Jaume I de Castelló

Parte de un taller práctico

gerard jota

November 02, 2022
Tweet

Other Decks in Design

Transcript

  1. 1 Diseño periodístico para la web 3 • 11 •

    2022 9 - 11 horas Aula HA1220AA, FCHS Universitat Jaume I, Castelló (PE0925)
  2. 5 La tipografía según la RAE De tipógrafo. 1. f.

    imprenta (arte de imprimir). 2. f. imprenta (taller donde se imprime). 3. f. Modo o estilo en que está impreso un texto. 4. f. Clase de tipos de imprenta. “La computadora permite una tipografía muy variada”. *En la web, ‘impreso’ significa que aparece en el navegador
  3. 6 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad

    Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia
  4. 7 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad

    Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia
  5. 8 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad

    Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia
  6. 9 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad

    Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia
  7. 10 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad

    Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia
  8. 11 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad

    Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia
  9. 12 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad

    Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia
  10. 13 Algunas tecnologías que se usan en la web HTML

    HyperText Markup Language > Lenguaje de Formato de Documentos para Hipertexto CSS Cascading StyleSheets > Hojas de estilo en cascada. Se utiliza para añadir estilos a elementos HTML o etiquetas incluidas dentro del HTML Javascript Un lenguaje de programación que, entre otras cosas, se usa para controlar el comportamiento de los elementos de un documento de HTML PHP Un lenguaje de scripting que se ejecuta en el servidor de forma dinámica. Envía al usuario el código en HTML. Wordpress se basa en PHP
  11. 14 HTML Nos permite formatear los textos de un documento

    H1 > encabezado H2 > encabezado H3> encabezado H4 > encabezado H5 > encabezado H5 > encabezado Estas cabeceras permiten estructurar el documento de una forma lógica y que facilita el SEO natural que premia documentos bien formulados
  12. 15 <ul> <li>• Lista sin ordenar</li> <li>• Lista sin ordenar</li>

    <li>• Lista sin ordenar</li> </ul> <ol> <li>1. Lista ordenada</li> <li>2. Lista ordenada</li> <li>3. Lista ordenada</li> </ol> HTML Otros formatos útiles <p> Soy un párrafo de texto. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. </p> <blockquote> Una cita de una persona realmente importante. Aenean lacinia bibendum nulla sed consectetur.Maecenas sed diam eget risus varius blandit sit amet non magna. <cite>Nombre de persona realmente importante</cite> </blockquote>
  13. 16 HTML Otros formatos ‘en línea’ Texto en <strong>negrita</strong> Texto

    en <em>cursiva</em> Texto <span style=”color: blue;”>azul</span> *Un ‘span’ es una etiqueta útil para hacer cambios dentro de un texto sin afectar al resto. Wordpress los usa bastante para cambios de color o para alinear texto
  14. 17 Diseño periodístico Elementos portada Observar: Distintas secciones, cada una

    con una maquetación ligeramente diferente aunque con muchos elementos comunes. Así se logra uniformidad pero que ofrece variedad.
  15. 18 Diseño periodístico Elementos portada Observar: Una gran variedad de

    módulos sobre una base de 5 columnas. Utilza una mezcla de ítems con y sin imágenes para lograr un equilibrio visual. Usa color para distinguir diferentes tipos de noticia
  16. 19 Diseño periodístico Páginas interiores Observar: En las páginas de

    opinión se suele utilizar una maquetación más atrevida, en este caso, bastante asimétrica pero incorporando las buenas prácticas sobre tipografía que hemos mencionado anteriormente: longtidud de línea bastante corta, buen tamaño de letra, interlineado, etc...
  17. 20 Diseño periodístico Páginas interiores Observar: Otro ejemplo de opinión,

    aquí dando protagonismo al comentarista. En el cuerpo de texto, buena legibilidad, y los enlaces dentro del texto, bien distinguidos con otro color y subrayados. En ambos casos, se inluye la fecha e incluso la hora de publicación, algo imprescindible para la credibilidad de cualquier medio