Guía de Diseño Gráfico: Tipografía, Infografías y Conceptos Clave
Preguntas y Respuestas de Diseño Gráfico
Animación y Banners
Medidas de Animación
Para una animación con dimensiones de 1050 píxels de ancho por 700 píxels de alto, se recomienda utilizar las siguientes medidas para cada fotograma:
- Anchura del fotograma: 350 píxels
- Altura del fotograma: 350 píxels
- Número de fotogramas: 6
Ruta de Imagen para Banner con Sprite
Si el sprite se encuentra en un servidor, la ruta debería ser la URL completa de la imagen. Por ejemplo:
https://mmdg2.000webhostapp.com/sprite/trump_run.png
Peso y Duración Máxima de un Banner
Según las especificaciones de Google Web Designer, el peso máximo de un banner es de 150Kb y la duración máxima es de 30 segundos.
Evento Asociado al CTA en un Banner
El evento asociado a un botón de llamada a la acción (CTA) en un banner es Toque/clic, ya que se debe adaptar a dispositivos táctiles y de escritorio.
Elementos de una Infografía
Una infografía efectiva debe incluir los siguientes elementos:
- Titular
- Texto
- Cuerpo
- Imágenes
- Gráficos
- Fuente (origen de la información)
- Tipografía
- Créditos
La Fuente en una Infografía
La fuente en una infografía se refiere al origen de la información, es decir, de dónde se obtuvieron los datos utilizados para crearla.
Tipología de Infografía para Educación
Para representar la educación de una persona desde infantil hasta la universidad, se recomienda una infografía de tipo Secuencial. Un ejemplo esquemático sería:
Estudios de …..
Infantil (2001-2004) – Escuela…
Primaria (2004-2010) – Escuela ….
ESO (2010-2014) – Escuela …
Bachillerato (2014-2016) – Escuela….
Estudios Universitarios (2016-2020) – Grado …
Fuente: …….
Tipografía y CSS
Regla CSS para Tipografía de Dafont
Para utilizar una tipografía de Dafont en un sitio web, se debe usar la regla @font-face
en CSS.
Propiedad para Indentar un Párrafo
La propiedad CSS para indentar un párrafo es text-indent
.
Kerning por Defecto en CSS
El kerning por defecto en CSS es normal
.
Uso de Tipografías de Google Fonts
No es necesario descargar las tipografías de Google Fonts. Basta con incluir el código proporcionado por Google Fonts en el sitio web.
Imágenes SVG en HTML5
Las imágenes en formato SVG se pueden utilizar como cualquier otro formato de imagen (PNG, JPG, GIF) en HTML5 mediante la etiqueta img
. Por ejemplo:
Errores al Usar Tipografía de Dafont
Al utilizar tipografías de Dafont, es posible que falten caracteres especiales como la ñ, diéresis o números.
Tipografía, Caligrafía y Lettering
Diferencias
- Tipografía: Letra prediseñada (ej: Helvetica, Times New Roman)
- Caligrafía: Escritura a mano con estilo (ej: caligrafía Copperplate)
- Lettering: Letras dibujadas a mano con un diseño único
Espaciado entre Caracteres
El ajuste de espaciado entre dos caracteres se llama Kerning.
Alineación de Texto
- Bandera derecha o alineación izquierda
- Bandera izquierda o alineación derecha
- Centrado
- Justificado
Elementos del Renglon Gráfico
- Línea Base
- Altura X
- Altura ascendentes
- Altura descendentes
- Altura mayúsculas
Clasificación de Tipografías
| Tipografía | Estilo | |—|—| | Decorativas | Decorativas | | Sans Serif | Sans Serif | | Cursivas | Cursivas | | Serif | Serif |
Moodboard
Definición y Uso
Un moodboard es una composición de imágenes, colores, tipografías e iconos que se utiliza para definir el estilo de un diseño. Se emplea en la fase de conceptualización de un proyecto.
Técnica de Creatividad de Tony Buzan
La técnica de creatividad creada por Tony Buzan que consiste en un método gráfico para organizar ideas se llama Mind mapping.
Contraste en Composición Gráfica
El concepto de “aguzamiento” en el contexto del contraste se refiere a la exageración de la peculiaridad de un patrón.
Estilo Itálicas
El ejemplo c) corresponde al estilo “itálicas”.
Síntesis Sustractiva
El concepto de “síntesis sustractiva” se relaciona con la imagen a).
Tipografía y Cuerpo para Guion Literario
Un guion literario debe estar escrito con la tipografía Courier New a 12 puntos. Esto permite estimar la duración del guion, ya que cabe la misma cantidad de texto en una página.