Glosario
Términos y conceptos utilizados en el campo del diseño y la comunicación gráfica.
A
Adobe
Empresa de software para el diseño y la edición profesional. Los programas que se utilizan mayoritariamente para el diseño y la edición profesional de publicaciones (libros, revistas, periódicos...) son:- Adobe InDesign, para la maquetación de las páginas
- Adobe Photoshop, para el tratamiento de las fotos e imágenes de mapa de bits
- Adobe Illustrator, para el diseño y la ilustración vectorial, especialmente para logos, cabeceras e infografías.
Animación
Imágenes, normalmente dibujadas, o con textos, en movimiento. Son un recurso utilizado en el diseño de páginas Web y proyectos multimedia. Las formas más habituales de incorporar animaciones a los sitios Web han sido los gif animados y las películas de flash.
La limitación de gif, jpg y png para crear imágenes animadas es que son ficheros de mapa de bits, con una resolución fija. No es posible cambiar el grado de ampliación de la imagen dentro del navegador, y si se hace, inevitablemente se pierde calidad.
Alinear
Acción de disponer ordenadamente, en línea recta, vertical u horizontalmente, los distintos componentes de una página: letras y palabras, líneas, ilustraciones, columnas, etc.Altura-x
Altura de los caracteres de una familia tipográfica sin tener en consideración sus rasgos ascendentes y descendentes.
Arte final
Trabajo gráfico terminado y aprobado por el cliente, preparado para ser reproducido en fotomecánica y así poder imprimirlo.Ascendentes y descendentes.
Los trazos verticales o en diagonal de la letra, que se sitúan por encima o por debajo de la altura x, como sucede en las letras d, k, y.Audiencia
Colectivo de personas con características y rasgos comunes a los que va dirigida una información. La estrategia de audiencia implica acciones planificadas y aproximaciones para conectar con audiencias específicas.
Archivo
Unidad de información almacenada en el disco con un nombre específico. Puede contener datos necesarios para la ejecución de un programa, o información procesada por el usuario. Todos los archivos tienen una extensión consistente, por lo general, en tres caracteres que lo identifican o lo relacionan con un programa determinado.
Los criterios básicos para nombrar archivos son, en primer lugar, evitar duplicar o repetir nombres, y en segundo lugar, facilitar la búsqueda a la hora de trabajar con ellos.
B
Balance de blancos
Sistema automático de establecimiento de equilibrio de blancos en una cámara digital, ya sea fotográfica o de video.
Banner
Pieza gráfica publicitaria dentro de una página web. Haciendo un clic sobre él, se puede llegar al sitio del anunciante. Habitualmente incorpora alguna animación o transición, inicialmente se realizaba con gif animados, más tarde se generalizó el uso de Flash, aunque estas secuencias animadas no es conveniente que duren más de 15 segundos.
El banner es el formato publicitario más antiguo de Internet; fue estandarizado en 1996. Puede usar formatos gif, animado, flash, jpeg o png.
Bauhaus
Escuela de arte aplicado y diseño fundada en 1919 en Alemania y clausurada en 1933. Su labor durante esos años supuso la mayor influencia en este campo en todo el siglo XX y los comienzos del diseño moderno. Fundada por Walter Gropius, participaron en el desarrollo de la escuela arquitectos como Mies Van Der Rohe, pintores como Paul Klee o Wassily Kandinsky, y otros artistas como Moholy-Nagy, Herbert Bayer, o Josef Albers.El término Bauhaus fue propuesto por Gropius trataba de unir el verbo bauer, que significa construir, y el sustantivo haus. Era la “casa a construir” que compatibilizaba el idealismo y el afán creativo de la época.
Además del desarrollo y las propuestas en el terreno del diseño industrial, la Bauhaus marcó el inicio de un nuevo concepto: el diseño gráfico, de una forma similar a como lo concebimos ahora. A partir de 1925, Herbert Bayer dirigió los talleres de publicidad, tipografía y comunicación gráfica, que marcaron los inicios de esta transformación, y diseñó la familia tipográfica “Universal”, experimento compuesto únicamente de letras minúsculas a partir de una geometría básica. Más tarde, tras emigrar a Estados Unidos, Bayer promovería en el nuevo continente los principios y la filosofía gráfica de la Bauhaus.
Branding
Es el desarrollo de la marca (brand), y de su identidad mediante un conjunto de acciones y estrategias encaminadas a su construcción y consolidación. Se refiere a toda actividad que afecte a la percepción de la marca, es decir, cualquier forma de presentar su identidad corporativa, anunciarse, comercializarse, promover ventas o hacer relaciones públicas.Bezier
Tipo de curvas definidas por puntos desde los cuales se puede variar la forma de los trazados. Se utilizan en aplicaciones informáticas de dibujo vectorial como Adobe Illustrator, Freehand o InkScape.
Este sistema se desarrolló para su utilización en el trazado de dibujos técnicos en el sector aeronáutico y automovilístico. Pierre Bézier ideó este método de descripción matemática de las curvas que se aplicó en los programas de Diseño Asistido por Ordenador, y posteriormente en el lenguaje PostScript, que permitió el desarrollo de la autoedición y de los sistemas de impresión digital de alta calidad.
Bit
Dígito binario. Unidad mínima de información en un ordenador.
Bitmap
Mapa de bits. La presentación en pantalla del ordenador por medio de pixeles, o puntos de color.
branding
Es el desarrollo de la marca y de su identidad mediante un conjunto de acciones y estrategias encaminadas a su construcción y consolidación. Se refiere a toda actividad que afecte a la percepción de la marca, es decir, cualquier forma de presentar su identidad corporativa, anunciarse, comercializarse, promover ventas o hacer relaciones públicas.
Branding digital
Imagen de marca que se proyecta y desarrolla en Internet y en las redes sociales. Muy vinculada a la figura del Comunity Manager y a los Social Media.
Briefing
Información necesaria aportada por el cliente antes de iniciar un proyecto de diseño. El briefing debe definir cuales son los objetivos que se persiguen, identificar las audiencias, marcar los recursos y el equipo disponibles para el proyecto.
FASES DEL BRIEFING:
1 Empresa. Conocer al cliente y al proyecto
2. Proyecto. Definir y compartir el objetivo que se quiere compartir
3. Públicos. Identificar la audiencia a la que nos dirigimos
4. Medios. Elegir y asignar los medios, los soportes y las recursos
5. Creatividad. Utilizar el estilo de diseño y los códigos visuales más adecuados.
2. Proyecto. Definir y compartir el objetivo que se quiere compartir
3. Públicos. Identificar la audiencia a la que nos dirigimos
4. Medios. Elegir y asignar los medios, los soportes y las recursos
5. Creatividad. Utilizar el estilo de diseño y los códigos visuales más adecuados.
C
Capitular
Letra inicial de un bloque de texto con un tamaño mayor que el resto de sus letras.
Capas
Elementos que se superponen unos sobre otros. Son recursos utilizados en los programas de dibujo y de tratamiento de imágenes, aunque cumplen diferentes funciones según la aplicación de que se trate. En el caso de Adobe Photoshop, una capa puede contener información de un mapa de bits, objetos vectoriales, de texto o máscaras.
Carácter
Palabra usada en tipografía para describir las letras, números, signos de puntuación o espacios entre palabras.
Clasificación tipográfica
Entre los miles de familias tipográficas que existen en la actualidad y que se utilizan para la composición de texto, si hubiera que dividirlas en dos grandes categorías, tendría que ser en función de que tengan remates (serif) o que no los tengan (palo seco). Del primer grupo, la más popular es la Times Roman, aunque existen muchas otras clásicas, como Garamond, Caslon, Bembo, Baskerville... De las letras de palo seco o sin remate, las más conocidas son Helvética, Univers o Futura.
CMYK
Cian, magenta, amarillo y negro son las cuatro tintas utilizadas en el proceso de impresión por cuatricromía. La combinación de estos colores en diferentes proporciones da como resultado todos los colores y matices.
Cuerpo
Tamaño de las letras en tipografía. Se trata de la medida de la altura del rectángulo que ocupa cada tipo, expresado en puntos.
Código HTML
Conjunto de etiquetas (tags) y atributos que conforman el lenguaje principal con el que se estructura y visualiza en los navegadores una página web. Es conveniente conocer mínimamente lo básico de este lenguaje cuando se diseña o edita un sitio web o un blog. Esisten editores que generan código HTML, como Brackets.
Código abierto
Open source
Software que se comparte y distribuye libremente. Es lo opuesto a “código propietario”, o privado, que requiere pagar previamente por utilizarlo. El código de programación en este caso, no se cifra ni se protege; se deja abierto para poder incorporar posibles cambios y mejoras. El sistema operativo Linux es el caso más conocido.
Color
Es la percepción que permite distinguir diferencias entre dos zonas de un campo visual. Al percibir el color nos produce muchas sensaciones, sentimientos, diferentes estados de ánimo, transmite mensajes... El color es posiblemente el elementos más poderoso de cuantos se utilizan en comunicación visual, ya que es capaz de impactar e influir en el lector antes incluso de empezar a leer, a oír, o incluso antes de interpretar las formas que presenta el mensaje.
Nuestra reacción ante los colores depende de distintos factores:
– Aprendizaje cultural
– Edad
– Genética
– Preferencias
– Modas y tendencias
Los colores pueden ser cálidos, que van del rojo al amarillo, y colores fríos que son las gradaciones del azul al verde. Esta división radica en la sensación y experiencia humana. La calidez y la frialdad son sensaciones térmicas.
Hay dos sistemas específicos de color, según sea para monitores o pantallas, o para imprenta:
RGB (Red, Green, Blue). Es un modo de color aditivo. Se basa en el componente de luz y en ella se basa la mezcla de los colores básicos: el rojo, el verde y el azul.
CMYK (Cyan, Magent, Yellow, Black). Es un sistema sustractivo. A partir de la combinación de estas cuatro tintas o pigmentos se crean los diferentes colores. Es el sistema de color empleado en prensa e impresión. El color blanco, o ausencia de color, sería pues el color del papel.
Color Web
Para definir los diferentes colores en la programación web se utiliza un código hexadecimal que representan los componentes de rojo, verde y azul de cada color. Este código de color se precede del símbolo # para representar que el valor que se va a indicar a continuación es hexadecimal.
Así, por ejemplo, algunos colores muy comunes o básicos tendrían los siguientes códigos hexadecimales:
Negro: #000000
Blanco: #FFFFFF
Rojo: #CC0000
Amarillo: #FFFF00
Comic
El comic, o “arte secuencial”, como lo denomina Will Eisner, ha ejercido una clara influencia en el desarrollo de la cultura visual del siglo XX así como en la narrativa gráfica y en sus recursos formales. Esta narrativa gráfica bimedia busca contar una historia por medio de la combinación de imágenes y textos, en algunos caos, dramatizando y exagerando la narración y utilizando medios como la caricatura o la onomatopeya.
El comic ha ido desarrollando a lo largo del tiempo un lenguaje articulado por medio de viñetas que crean secuencias temporales, de dibujos y de textos,, de planos y contra planos, de onomatopeyas… que han ido convirtiéndose en convenciones asumidas por sus lectores.
Este arte secuencial cuenta ya con una sintaxis que ofrece muchos recursos narrativos que también han sido utilizados en ocasiones por la infografía periodística, la animación o el cine, como una nueva utilización de la inserción de textos en globos o bocadillos, onomatopeyas en los textos para sugerir situaciones, acciones y sentimientos o la secuencia en las viñetas, aplicando un determinado orden de lectura,
Compresión
En fotografía y video, se trata del proceso de eliminación de dígitos binarios de información redundante para reducir el tamaño del archivo así como los tiempos de procesado, el espacio de almacenamiento y los tiempos de transmisión.
CSS
Cascading Style Sheets
Las hojas de estilo en cascada son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).
La idea básica del desarrollo de CSS consiste en separar la estructura de un documento de su presentación.
Versiones antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta debía disponer de la información si se deseaba un diseño consistente para una página, y además, una persona que leyera esa página con un navegador perdía totalmente el control sobre la visualización del texto
Las Hojas de Estilo en Cascada se han convertido en el estándar para crear los estilos de los diferentes elementos de las páginas web. Pueden servir para definir los estilos de las fuentes y los tamaños empleados en un proyecto web, pero también permiten controlar y unificar la presentación de todo el sitio web mediante un único documento externo.
D
Descendente
Parte de un carácter de caja baja que sobrepasa en su lado inferior la línea base (baseline) de un texto (j, g,).
Desarrollo Web
Trabajo completo de diseño, planificación y programación de un sitio web. Es necesario un equipo profesional que abarca varias disciplinas que requieren de una integración adecuada entre contenidos, diseño y tecnología:– Redactor y editor de contenidos
– Diseñador gráfico y de información
– Programador responsable de las soluciones tecnológicas
El proceso de puesta en marcha de un sitio web requiere de una planificación que contemple sus diversas fases.
Diagrama de flujo
Esquema realizado por medio de líneas y formas gráficas sencillas que muestran las rutas de acceso entre distintas partes. Debe representar de forma clara las categorías temáticas, los niveles de la estructura y los vínculos entre cada uno de ellos. El diagrama de flujo muestra cómo es la organización y la estructura de un proyecto.Diseñador Web
Profesional especializado en el diseño de sitios web. Evolución de la del diseñador gráfico, adaptando sus competencias a las necesidades que se han creado con la aparición y desarrollo de los nuevos formatos y requerimientos de la tecnología digital.El diseñador Web ha de hacerse una serie de planteamientos a la hora de realizar su trabajo. En primer lugar, ha habido un cambio en el soporte del mensaje. Si bien sus homónimos a nivel gráfico se enfrentan a formatos estables en el tiempo, ahora hay que planificar la diversidad de los mismos (ordenadores personales, pda, dispositivos móviles,…)
El diseñador Web debe tener presente una serie de condicionantes, entre otros, en los siguientes campos:
– Necesidades comunicativas que se desprenden de la naturaleza del mensaje.
– Adaptación al nivel de experiencia del usuario al que se dirige.
– Innovación de las aplicaciones.
– Captación y retención del receptor mediante una experiencia de usuario satisfactoria.
– Dificultades de acceso.
Diseño visual
El diseño gráfico y de comunicación orientado a la visualización de información aspira a cumplir unas funciones básicas para lograr sus objetivos orientados hacia la transmisión de información de forma eficaz:Enfatizar o hacer visible lo relevante, establecer una clara jerarquía visual entre elementos y zonas de la interfaz, de modo que la atención del usuario se vea guiada de forma lógica y secuencial de lo más relevante hacia lo secundario.
Organizar significa establecer relaciones visuales lógicas, que faciliten al usuario relacionar o diferenciar elementos automáticamente. Su correcta aplicación impregnará al diseño de un aspecto visual organizado, claro e intuitivo, lo que repercutirá positivamente tanto en su usabilidad objetiva como subjetiva.
“Hacer reconocible” nos obliga a considerar con especial cuidado el uso de iconos, etiquetas, encabezados, enlaces… de tal forma que se requiera del usuario el menor de los esfuerzos para comprender y predecir el funcionamiento interactivo de la interfaz, permitiéndole dedicar toda su capacidad de atención al contenido.
E
Edición de fotos
Proceso de trabajo en el que se seleccionan las fotos idóneas para publicar en una determinada pieza informativa. También es la labor de recortar, contrastar o corregir color en un programa de tratamiento de imágenes.
EL PROCESO DE EDICIÓN DIGITAL DE FOTOS:
– Abrir un programa de edición fotográfica como Adobe Photoshop
– Editar únicamente una copia de la foto, no el original. “Guardar como”, cambiando el nombre del archivo.
– Recortar la foto, para omitir la información innecesaria de la imagen. Para ello hay que analizar el contenido de la foto y decidir cuál es su parte más importante.
– Cambiar el tamaño de la imagen, para que sea adecuado al lugar donde se va a publicar. Hay que conocer las propiedades de la foto: medida de la imagen en pixeles y resolución.
– Comprobar el modo de color de la imagen. Para la pantalla debe de ser RGB.
– Variar el contraste y el brillo de la imagen si se considera necesario.
– Revisar el tono, la saturación o la iluminación.
– Guardar en el formato más adecuado para el medio donde se va a publicar. En jpg o png si son fotos para publicar en un blog o en una página web.
Edición de texto
Un texto informativo para ser publicado, ya sea un periódico o una página web, requiere ser tratado, corregido y adaptado.
También es preciso crear distinciones entre cada una de las partes del texto periodístico por medio de la tipografía.
– Tipo o familia de letra
– Tamaño de la letra
– Estilo (Redonda, cursiva, negrita…)
– Alineación
– Interlineado
El lenguaje HTML permite marcar estas diferenciaciones tipográficas en los textos de los editores de páginas web como Dreamweaver.
Edición de video
La realización de una pieza videográfica requiere de un trabajo de edición y montaje. En este proceso se unen secuencialmente los diversos trozos o clips de película e imágenes fijas que previamente se han tomado, y se unen mediante transiciones, se incorpora el sonido y la locución o la música, la rotulación de títulos y subtítulos… y finalmente se exporta en el formato y en el tamaño adecuado para el canal donde se vaya a difundir. Este trabajo se realiza mediante los editores de vídeo, que son aplicaciones de software, más o menos complejos.
En el montaje de un video es fundamental una buena planificación, seleccionando las piezas o clips adecuados, haciendo un premontaje donde se ensamblen los distintos planos siguiendo el orden de un guión. En el montaje es básico unir coherentemente la imagen y el sonido.
Las diferentes unidades narrativas, como el plano, la escena, la secuencia o el plano secuencia deben tenerse en cuenta para utilizarlas adecuadamente.
Las transiciones (corte, fundido, encadenado o disolución, cortinilla, barrido…) sirven para pasar de un clip a otro, y deben utilizarse como los signos de puntuación en la escritura.
– Editores profesionales como FinalCut, Avid o Adobe Premier permiten realizar todas las tareas de montaje de video con más exactitud, más opciones y posibilidades, incluso para la edición de un documental de larga duración.
EPS
Encapsulado postscript.
Se trata de un archivo de exportación postscript. Suele utilizarse por su gran calidad de imagen para exportar dibujos realizados con programas vectoriales como Illustrator e incluirlos en aplicaciones de edición como InDesign.
Se trata de un archivo de exportación postscript. Suele utilizarse por su gran calidad de imagen para exportar dibujos realizados con programas vectoriales como Illustrator e incluirlos en aplicaciones de edición como InDesign.
Eyetracking
Técnica que sirve para estudiar las preferencias y los puntos de atracción de los usuarios ante una página web o una información diseñada. Este sistema realiza un seguimiento del movimiento del ojo. Se emplea para medir la usabilidad y la funcionalidad de un diseño web.
F
Familia
Cada una de las variaciones que ofrece un tipo de letra o fuente tipográfica:
fina, redonda, negra, itálica…
Fuente
Traducción del término inglés font, que se refiere al archivo informático que contiene los datos de una variante de una familia tipográfica en su codificación específica: Truetype, OpenType, PostScript…
Funcionalismo
Corriente, escuela o actitud ante el proceso creativo del diseño que se resume con el axioma “la forma sigue a la función”, es decir, que todos los aspectos artísticos, decorativos y estéticos deben subordinarse al objetivo que se persigue, a la función que debe cumplir, en arquitectura, en diseño industrial o en diseño gráfico. Se trata, en cierto modo, de un antecedente de la usabilidad.
G
GIF
Graphics Interchange Format
Es un formato gráfico utilizado ampliamente en la World Wide Web, tanto para imágenes fijas como para animaciones.
El formato fue creado por CompuServe en 1987 para dotar de un estándar de imagen a color para sus áreas de descarga de ficheros.
GIMP
Software gratuito, de código abierto y multiplataforma para edición y tratamiento de imágenes de mapa de bits.
H
Hipermedia
La hipermedia surge como resultado de la fusión de dos conceptos: el hipertexto y la multimedia.
Los ordenadores personales y sus documentos incorporaron una nueva dimensión, la profundidad, que permitió el uso del hipertexto. Hipermedia extiende así la noción de texto hipertextual al incluir la información visual, sonora, animación y otras formas de información propias de la multimedia
El hipertexto es la organización de una determinada información en diferentes nodos, conectados entre sí a través de enlaces. Los nodos pueden contener sub-elementos con entidad propia. Además los hipertextos añaden una cuarta dimensión: el tiempo, incorporando vínculos a elementos de audio y vídeo.
La hipermedia, por tanto, es la tecnología que nos permite estructurar la información de una manera no-secuencial, a través de nodos interconectados por enlaces. La información presentada en estos nodos podrá integrar diferentes medios. (texto, sonido, gráficos...).
1. Es interactiva y controlada por el usuario
2. Combina múltiples media: texto, imagen, video, audio, animación…
3. Es específica y formalmente no lineal
Hipertexto
Forma de organizar información donde ciertos términos están unidos a otros mediante links o enlaces. El hipertexto permite saltar de un punto a otro en un texto o en otros textos al hacer clic en un hipervínculo.
Es una forma de lectura no lineal que ofrece al lector y usuario itinerarios diferentes de lectura y de narrativa. En lugar de leer un texto en forma continua, ciertos términos están unidos a otros mediante relaciones (enlaces o links) que tienen entre ellos.
El hipertexto permite saltar de un punto a otro en un texto, y a través de los enlaces (con un simple click sobre las palabras subrayadas y en negrita), permite que los navegantes busquen información de su interés en la Red, guiándose por un camino distinto de razonamiento.
El término hipertexto fue acuñado por Theodor Nelson en 1965, que investigó las posibilidades de interacción entre los ordenadores y la literatura. Se ha convertido en uno de los conceptos básicos para el desarrollo de la www, aunque también se utiliza en muchas otras aplicaciones. Algunos programas muy difundidos, como la Ayuda de Windows o las enciclopedias en CD-ROM, están organizadas como hipertextos.
“Por hipertexto yo entiendo simplemente la escritura no secuencial”.
La secuenciación del texto es la del lenguaje hablado y la letra escrita. Pero para Nelson tiene dos inconvenientes. En primer lugar, no se corresponde bien con el movimiento del pensamiento, y en segundo lugar, impone a todos los lectores una única manera de recorrer el texto. El hipertexto propondría pues diferentes versiones del mismo texto, activadas por diferentes recorridos según las estrategias seguidas por los propios lectores.
El hipertexto va más allá de lo meramente verbal, y puede convertirse en hipermedia, al convertir esos vínculos en información visual, fotográfica, infográfica, sonora…
Hit
Impacto, visita a una página web por parte de un usuario. Cada una de las entradas que se registran relativas a algún elemento hipertextual existente en dicho servidor.
Cuando el usuario accede a un sitio web, su ordenador envía una solicitud de descarga de la página web al servidor del sitio web. El log de servidor se encarga de registrar los elementos de una página solicitada (como los gráficos, texto, elementos interactivos) en forma de impacto. Si un usuario accede a una página que contiene dos gráficos, los impactos se grabarán una vez para la página en sí y otra por cada uno de los gráficos.
Los webmasters utilizan los impactos para medir el tráfico y el volumen de trabajo de sus servidores.
HTML
HyperText Markup Language
Lenguaje de Marcas de Hipertexto; es el lenguaje de marcado de código predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con otros objetos, como imágenes. Con las marcas HTML se especifica el formato de un documento que presenta en la pantalla de un ordenador para ser visto en el navegador.
Inicialmente concebido como un lenguaje para el intercambio de documentos digitales, HTML se ha convertido en el lenguaje hipertextual de la Web. Además, permite una presentación multimedia –texto, imágenes, video, grabaciones– en un mismo documento.
La primera versión del lenguaje HTML, creada por Tim Berners-Lee en 1991 contaba únicamente con 22 elementos. Después vinieron otras versiones más completas, como la 3.0 en la que el W3C decidió desarrollar y mantener los estándares que aparecieran en el código HTML, o la 4.0, y posteriormente la versión 5.
El lenguaje HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
Con el uso de marcas HTML es posible describir el aspecto y ubicación de todos los elementos de una publicación Web. Desde crear una retícula hasta definir la tipografía y el color de los textos y secciones o fondos del documento, incorporar imágenes, definir su tamaño y proporcionar soporte para incorporar elementos de otros lenguajes de programación.
Un lenguaje de marcado de este tipo cumple con dos objetivos esenciales a la hora de diseñar y procesar un documento digital:
Especificar las características tipográficas y las funciones que debe ejecutar el programa navegador cuando presenta dichos elementos;
y descomponer un texto en elementos como un párrafo, un capítulo, un encabezamiento, etc. y proporcionarle atributos tipográficos según se desee.
I
Infografía
O infográfico. Es una pieza visual que utiliza códigos verbales e icónicos combinados para ofrecer una información precisa y con datos exactos, que en un texto redactado no se podría explicar con claridad.
El tipo de infográfico varía según la información que se presenta. Así, para mostrar datos e información cuantitativa se utilizarán barras, quesos, tablas, líneas o superficies. Para la información espacial se utilizan los mapas, tanto de situación como explicativos. Y para la información de tiempo o secuencial se utilizan los diagramas.
Los infográficos se utilizan habitualmente en las publicaciones científicas y divulgativas, en la comunicación empresarial y corporativa, y también en los periódicos y medios informativos.
Infografía digital
Utiliza recursos multimedia: dibujos, fotos, signos gráficos y tipográficos, sonidos además de recursos hipertextuales e interactivos para mostrar y visualizar información.
Las infografías digitales pueden ser de varios tipos:
– Estáticas
– Dinámicas
– Animadas
– Interactivas
Infografía web 2.0
Infografías producidas por los usuarios de internet con los servicios especializados de plataformas de la Web 2.0, para ser publicadas, compartidas principalmente en los medios sociales.
Picktochart, Createlly, Visual.li, icharts o Infogr.am son algunas de estas herramientas 2.0 que permiten al usuario crear infografías en línea sin necesidad de tener instalado un programa específico en el propio ordenador. Gracias a este servicio podemos realizar infográficos interactivos incorporando, además de datos, imágenes mediante plantillas y diferentes modelos de gráficos para la visualización de los datos (barras, columnas, tarts, líneas, áreas, árboles, tablas…)
Infoxicación
Información + intoxicación
Este concepto hace referencia a la dificultad existente en la actualidad para analizar y comprender la descomunal cantidad de información, datos y estímulos que proporcionan los diferentes medios y soportes digitales.
Interactividad / Interactivo
Retroalimentación o feedback que tiene lugar cuando un ordenador o sistema informático manipulado por un usuario afecta a sus propiedades y las altera y el resultado de esa acción es comunicado a dicho usuario.
La interacción del usuario debe realizarse con la menor carga cognitiva para el usuario, por lo que se recomienda:
- Evitar la sobrecarga memorística.
- Poder predecir la respuesta del sistema ante su acción, para ello el nombre de los enlaces y componentes de interacción debe ser significativo y preciso. Los globos de texto pueden ser de mucha utilidad en este sentido.
- Ofrecer asistencia al usuario en procesos de interacción complejos (formularios, etc...).
- Los mensajes de error deben ser explicados de forma clara y no alarmista, indicando al usuario vías alternativas para resolver el problema.
Interfaz
Interface
Parte visible de los programas o sitios web, que interactúa con los usuarios. La interfaz abarca tanto las pantallas y su diseño como la forma en que el usuario puede dar instrucciones a la aplicación.
Lev Manovich describe el concepto desde un punto de vista semiológico: “la interfaz del computador actúa como un código que transporta mensajes culturales en una diversidad de soportes. Cuando utilizamos internet, a todo lo que accedemos –texto, música, espacios navegables- pasa a través de la interfaz del navegador y, luego, a su vez, por la del sistema operativo”.
Una interfaz se compone de una serie de elementos que se pueden mover y reutilizar en distintas combinaciones. Es importante entender el diseño de una interfaz como un sistema unificado cuyas partes integrantes se utilizan y ensamblan en una serie de pantallas que deben producir en el usuario una sensación de unidad, de continuidad y de coherencia.
J
Jerarquía
La organización lógica de los diferentes elementos en un diseño de información, desde las cabeceras, los titulares, el texto o las imágenes que atraen la vista del lector o usuario y hacen que los interprete en un determinado orden de importancia.
Para facilitar la exploración de la información por parte del usuario es preciso jerarquizarla:
– Aumentando el tamaño de los textos de mayor importancia (títulos, texto…)
– Agrupando la información que esté relacionada
– Utilizando efectos tipográficos (negrita, cursiva...) para enfatizar contenidos
– Utilizando el contraste en el color para discriminar y distribuir informaciones
– Posicionando la información más relevante en zonas visuales superiores.
JPEG
Es un formato y un método comúnmente utilizado para la compresión de imágenes fotográficas. El grado de reducción se puede ajustar, lo que permite seleccionar el compromiso que existe entre el tamaño de almacenamiento y la calidad de la imagen. Normalmente alcanza una compresión de 10 a 1 con pocas pérdidas perceptibles en la calidad de la imagen. Además de ser un método de compresión, es a menudo considerado como un formato de archivo. JPEG es el formato de imagen más común utilizado por las cámaras fotográficas digitales y otros dispositivos de captura de imagen.
Sus siglas significan Joint Photographic Experts Group.
K
Keywords
Palabras clave. Son las palabras que identifican el contenido más relevante de una página web. Estas palabras se han convertido en un elemento muy importante para el proceso de búsqueda de los buscadores y los motores de búsqueda en internet. La elección de las palabras clave adecuadas se ha convertido en una cuestión fundamental para ser encontrado, en función de la “competencia” y en un trabajo especializado de los llamados SEO.
La programación de una página web utiliza en su cabecera las llamadas meta etiquetas con el fin de que los motores de búsqueda indexen y cataloguen de forma correcta un sitio web. Para ello se incluyen en la cabecera del código HTML tres tipos de etiquetas diferentes: el título, la descripción de contenidos y las palabras claves o keywords.
L
Legibilidad
Se refiere al nivel de dificultad en el proceso de lectura de un texto. La legibilidad puede variar según el soporte donde se leen los caracteres, impresos sobre papel o en una pantalla. Según los casos hay que seleccionar las familias de letra, así como los tamaños, los estilos o los interlineados que más convengan a la información
tres tipos de legibilidad:
Legibilidad óptica. Trata de la capacidad del lector para distinguir signos, lo cual depende de sus habilidades para hacerlo y del tamaño y forma de los signos. Es el nivel más bajo de análisis de legibilidad ya que se considera que leer es distinguir entre signos.
Legibilidad tipográfica. Estudia el efecto de las relaciones entre signos, ya que ningún lector lee signos aislados. Los elementos que lee son los naturales en que se agrupa nuestro sistema de escritura, a los que además está acostumbrado.
Legibilidad funcional. Trata de la transmisión del contenido de los mensajes, por lo que implica de manera especial la estructura de los documentos. A este respecto hay que considerar dos factores como el mundo simbólico del receptor o la estructura visual del documento.
Línea de tiempo
Timeline
Es la representación lineal del avance de una animación del primer al último cuadro, punto o frame. Este concepto se utiliza también en la edición de video.
En infografía se suele llamar línea de tiempo a los diagramas en los que se representa gráficamente la cronología de un hecho o un proceso.
M
Mapa conceptual
Sistema de realización de esquemas que tiene como objetivo generar ideas, diseñar estructuras complejas, ordenar conceptos e ideas. Sirve también para medir y comprobar la comprensión de conjuntos de conceptos.
Los mapas conceptuales y mentales se construyen seleccionando, agrupando, ordenando, conectando y comprobando los diversos temas y conceptos en diversos niveles que guardan relación unos con otros.
Estos mapas también se convierten en una eficaz técnica de aprendizaje pues sirven para simplificar, jerarquizar y comprobar el impacto visual.
Son especialmente útiles al desarrollar proyectos de diseño complejos como los sitios Web multimedia. Existen aplicaciones que ayudan en la realización gráfica de estos esquemas.
Mapa de sitio web
Es una herramienta útil y recomendable a incluir en un proyecto web. El site map puede ser un simple índice en texto/html, o una compleja representación gráfica/multimedia. El acceso a éste se debería colocar en una zona visual de nivel jerárquico alto, y a ser posible este enlace deberíamos mantenerlo en todas las páginas del sitio web.
Maqueta/maquetación
Layout
Estructura visual que contiene el diseño y los diferentes elementos y contenidos de una página web. En el desarrollo web hay tres modelos u opciones de maquetación para un sitio web:
Maqueta estática. Con posiciones fijas y absolutas para cada elemento, de ancho y de alto. No varía el tamaño de la página diseñada en los distintos tamaños de pantalla o de dispositivo.
Maqueta relativa. Los diferentes elementos de diseño se adaptan a la anchura y altura de la pantalla donde se visualiza.
Maqueta liquida. Los distintos elementos se van adaptando al tamaño de la pantalla como un líquido o fluido que se vierte.
Motion graphics
Gráficos que con determinados programas se pueden animar, rotar y crear movimiento en ellos hasta conseguir una secuencia de vídeo. Este tipo de vídeos suelen combinarse con audio en proyectos multimedia.
Existen varias formas de animar una imagen, ya sea por interpolación de movimiento, simulando los movimientos de la naturaleza o bien mediante fórmulas o comandos.
Multimedia
Combinación de varias tecnologías de presentación de información (imágenes, sonido, animación, video, texto) con la intención de captar todos los sentidos humanos que sea posible.
El término multimedia se aplica a cualquier objeto que usa simultáneamente diferentes formas de contenido informativo como texto, sonido, imágenes, animación y video para informar o entretener al usuario.
Previamente a la existencia de la multimedia, el intercambio de información con los ordenadores estaba limitado al texto. Más tarde, con el nacimiento de las interfaces de usuario gráficas y los avances en video y sonido digitales, la multimedia permitió transformar el modo de comunicación entre personas y dispositivos aumentando la variedad de información facilitando la difusión masiva de Internet.
Desde el punto de vista de los contenidos, de la narrativa o el relato multimedia, se puede afirmar que la inmensa mayoría de los contenidos digitales actualmente son multimedia ya que se acumulan o se unen dos o más medios y expresiones ( texto, fotos, video...). Pero cuando hablamos de multimedia propiamente dicha, esos medios deben estar integrados en un mensaje conjunto donde los diversos lenguajes se complementan, haciendo posible que el conjunto de los diversos medios configuren un nuevo discurso o relato.
O
OCR
Optical Character Recognition.
Un texto impreso puede convertirse en un archivo digital que contiene esos caracteres mediante una determinada aplicación informática que reconoce ópticamente los diferentes caracteres.
Offline
Sin conexión o desconectado de Internet o de otras redes.
Online
Estar conectado a la red Internet.
Open type
Formato vectorial de fuentes tipográficas que permite una mayor flexibilidad que su formato antecesor, TrueType.
P
Parallax
Efecto visual que consiste en el desplazamiento de imágenes y objetos cuando se realiza scroll en la pantalla o dispositivo donde se visualiza una página web.
Portable Document Format
Formato digital creado por Adobe que describe cada página individualmente. Puede generar archivos a partir de casi todas las aplicaciones informáticas y convertirlas en páginas en formato PDF para ser publicadas en la web, imprimirlas en impresoras o enviarlas a imprenta en el caso de periódicos, revistas, libros o folletos, con la resolución y la separación en planchas de color CMYK. Se utiliza cuando se quiere enviar una información cerrada.
Plantilla
Template
Modelo de página web prediseñada. Se trata de una estructura modular con partes que no se modifican y otras que se pueden sustituir por texto, fotos u otros elementos. Al diseñar un sitio Web complejo es aconsejable utilizar plantillas que hemos creado previamente para garantizar que se repite la estructura en las diferentes partes de la publicación.
En el caso de los blogs, ofrecen opciones para elegir diferentes plantillas con temáticas y estilos adecuados al contenido y al público del blog sobre las que se pueden realizar cambios o variaciones de color, de fuentes, de fondos, así como la disposición de algunos elementos.
PNG
Portable Network Graphics
Es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos.
Las imágenes PNG usan la extensión .png.
PSD
Photoshop Document
Es un formato que guarda una imagen abierta y tratada con Photoshop, como un grupo de capas, métodos de fusión, colores, textos, máscaras, canales de color, canales alfa, trazados, formas, configuración de tonos, entre otras.
El formato PSD permite trabajar con distintas capas después de haber cerrado el programa, al contrario del formato jpeg, pero ocupa mucho más espacio y no se puede abrir con programas como el Visor de Imágenes y Fax de Windows.
Profundidad de campo
En fotografía es el rango de distancias reproducidas en un plano con una nitidez aceptable. Ese nivel de nitidez dependerá en el momento de tomar la foto de factores como la apertura del objetivo, la distancia entre la cámara y el elemento fotografiado y la distancia focal.
Cuanto más cerrado esté el diafragma del objetivo mayor profundidad de campo se apreciará.
La profundidad de campo aporta una sensación de tridimensionalidad a la imagen, permitiendo aislar o concentrar el centro de interés de la imagen.
R
RAW
Formato de imagen fotográfica que contiene toda la información guardada en el sensor de la cámara en el momento de realizar la instantánea fotográfica, lo que supone la posibilidad de decidir posteriormente sobre el color, el contraste, la luminosidad y muchos otros controles que afectan a la propia fotografía.
Rediseño
Proceso creativo y estratégico que consiste en actualizar, renovar o variar, sobre las bases de un diseño y un prototipo anterior de un periódico, una revista o un sitio web, en base a una serie de condicionantes, para que el nuevo diseño resultante recuerde al anterior y su imagen no resulte extraña a los usuarios y lectores de la publicación anterior.
Un proyecto de rediseño se plantea habitualmente desde tres enfoques que afectan a niveles diferentes:
– Estético (forma), que es su aspecto visual
– Periodístico (contenidos y recursos periodísticos), que afecta a la planificación informativa
– Producción empresarial, que afecta a los costes económicos e incluso a la estrategia empresarial
Renderización
Rendering
Es el proceso de generar una imagen desde un modelo. La palabra renderización proviene del inglés render. Es frecuente usar la expresión renderizar.
En términos de visualizaciones en ordenador, más específicamente en 3D, la “renderización” es un proceso de cálculo complejo desarrollado por un ordenador destinado a generar una imagen 2D a partir de una escena 3D. La traducción podría ser “interpretación”. Podría decirse que en el proceso de renderización, el ordenador “interpreta” la escena en tres dimensiones y se plasma en una imagen bidimensional.
Resolución
Cantidad de pixeles, o puntos de color, que se encuentran en un área determinada (la medida estándar son pixeles por pulgada o ppp). Un archivo de 300 ppp tiene mejor calidad que uno de 150 ppp, pero también tendrá un peso mayor. El estándar para Internet son 72 ppp.
La resolución de imagen nos indica cuánto detalle podemos observar en la imagen, tener una mayor resolución es lo mismo que tener más detalle.
Lo que denominamos resolución de pantalla viene determinada por el número de pixeles que se muestran en la ventana del monitor (800x600, 1024x768, 1152x864, 1280x960…).
La resolución de pantalla es muy importante. A mayor resolución se dispone de más puntos de información para presentar los elementos en pantalla.
Retícula
Estructura espacial constituida por una serie de líneas no visibles en la página que ayudan a definir las proporciones del diseño así como la uniformidad y coherencia visual de una publicación a través de sus páginas o sus pantallas. El objetivo es que el lector perciba orden en el conjunto de la información ofrecida, pero también que el diseñador-maquetador pueda organizar las diversas informaciones que ha de integrar.
La retícula o maqueta dispone de una serie de elementos que constituyen su formato, como los márgenes, las columnas, los corondeles, los módulos o divisiones horizontales…
La retícula se ha utilizado habitualmente en los periódicos y revistas pero también se aplica en las publicaciones digitales y páginas web con el fin de ordenar y distribuir eficazmente la información presentada en pantalla.
RGB
La descripción RGB (del inglés Red, Green, Blue) de un color hace referencia a la composición del color en términos de la intensidad de los colores primarios con que se forma: el rojo, el verde y el azul.
Es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores luz primarios. Indicar que el modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, razón por la cual los mismos valores RGB pueden mostrar colores notablemente diferentes en diferentes. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.
Para indicar con qué proporción mezclamos cada color, se asigna un valor a cada uno de los colores primarios, de manera, por ejemplo, que el valor 0 significa que no interviene en la mezcla y, a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla.
S
Storyboard
Guión dibujado de una narración visual, ya sea un anuncio televisivo, una película o cualquier presentación audiovisual, que muestra la secuencia de imágenes tal como se desea que se realice finalmente. Debajo de las viñetas o bocetos aparecen los diálogos así como peculiaridades, comentarios, efectos especiales…
Storytelling
Término inglés que se refiere a la narrativa transmedia o transmedialidad, que sería una suma de hipermediación e intertextualidad. Se considera como la habilidad de usar palabras y acciones para mostrar los elementos y las imágenes de una historia, estimulando la imaginación de las personas a las que nos dirigimos: usuarios, lectores, oyentes… En resumen, “el arte de contar una historia”, como medio para asegurarse una mayor comprensión y ser recordada.
SVG
Scalable Vector Graphics
Formato de imagen vectorial idóneo para gráficos escalables, tanto estáticos como en animaciones. Este tipo de gráficos se definen en.
Al estar basado en el formato XML, los archivos SVG pueden ser modificados con un simple editor de texto y su código se puede visualizar e interpretar.
Otra ventaja del formato SVG es su compatibilidad máxima con HTML5 y CSS, ambas reguladas por el World Wide Web Consortium.
T
Target
Es el público objetivo al que va destinado una campaña publicitaria. Viene definido por una serie de variables que se fijan según los objetivos generales de dicha campaña y que suelen atender a edad, sexo, situación geográfica, características en el comportamiento, etc. A diferencia de lo que ocurre en el mercado de la televisión, no existen targets predefinidos de uso comúnmente aceptado en las publicaciones Web.
Tipografía
Concepto amplio que abarca tanto las disciplinas relacionadas con las letras diseñadas o fuentes, como con el uso que se hace de ellas para componer textos y mensajes en diferentes soportes y con distintos objetivos.
En un sentido estricto podemos decir que es la forma de representación gráfica del lenguaje utilizando moldes preestablecidos, en sus orígenes, tipos móviles y, en la actualidad, fuentes digitales.
La tipografía nació y se desarrolló con la imprenta y con la creación de la industria del libro y de la prensa durante los últimos cinco siglos. En ese tiempo se diseñaron la inmensa mayoría de las familias de tipos que hoy utilizamos.
Durante los últimos treinta años los usuarios de ordenadores han podido convertirse en “tipógrafos” y componer textos con algunas de las fuentes creadas en épocas anteriores y que se han adaptado a los soportes digitales.
También la tecnología ha permitido crear y rediseñar fuentes con herramientas digitales, y en algunos casos, proyectar familias adaptadas a la lectura sólo en pantalla.
Truetype
Formato de fuentes digitales desarrollado por Apple y Microsoft frente al formato PostScript. Los distintos caracteres de la fuente son dibujos vectoriales que se pueden escalar a voluntad sin pérdida de calidad. Denominadas también Type 1.
U
UX
User Experience
Término que se desarrolla a partir de los conceptos Usabilidad y Diseño Centrado en el Usuario. UX se convierte en un requisito que determine si un diseño es realmente bueno, eficaz y rentable en un mercado que es cada vez más competitivo y en el que los clientes son más exigentes.
Lo que se busca es la satisfacción del usuario. Para ello es imprescindible saber todo sobre él y sobre sus intereses.
El diseño UX va encaminado a facilitar de un modo más amigable la interacción del usuario con la tecnología que lo rodea.
V
Vectorial
Es un sistema de representación gráfica o de dibujo. Los programas de diseño vectorial trazan objetos por medio de vectores. Los vectores están constituidos por una serie de puntos y líneas rectas o curvas, definidas matemáticamente. También se llaman curvas de bezier.
La clave de la utilización de estos programas está en los puntos o nodos, que unen las líneas rectas o curvas, y los puntos de control o manejadores, que sirven para modificar las curvas en sus formas.
Este sistema de dibujo vectorial se desarrolló inicialmente para el trazado de dibujos técnicos destinados al diseño industrial en modelos aeronáuticos y automovilísticos.
Estos programas de diseño utilizan el postscript, que es un lenguaje de descripción de página, un estándar en el sector de la impresión profesional y el diseño gráfico, que se creó para la impresión en dispositivos de alta resolución. Así, por ejemplo, Illustrator crea ficheros en lenguaje postscript, y exporta como EPS (Encapsulado PostScript).
Las letras o caracteres utilizados en estos programas (fuentes) se pueden transformar en trazados o contornos editables, o lo que es lo mismo, convertirlas en dibujo, u objetos vectoriales descompuestos. De esta forma, ya no es necesario tener instalada la fuente elegida en el sistema. Los programas de creación tipográfica se basan en las curvas bezier.
Visualización de datos
Información gráfica interactiva que combina bases de datos con mapas interactivos, diagramas y gráficas estadísticas, con el objetivo de ayudar a entender informaciones complejas. Aunque habitualmente se basan en datos numéricos, pueden ser ofrecidos de una forma atractiva, creativa e interactiva.
Visual Thinking
Pensamiento visual o capacidad para visualizar la información por medio de esquemas, diagramas, gráficos con el fin de exponer, desarrollar y provocar deducciones y pensamientos organizados y estructurados.
El pensamiento visual o visual thinking recupera el lenguaje visual para comprender y explicar la realidad, cuando las palabras se quedan cortas para expresar determinadas emociones y cualidades, ya que mientras leer texto supone un examen lógico y secuencial, dividido en partes, la lectura de imágenes requiere una aproximación al objeto de manera simultánea, holística, sintética e integral.
El ‘visual thinking’ se utiliza en diversos campos relacionados con la innovación, ya sea en el mundo empresarial, en el relacionado con procesos creativos o en procesos educativos y de formación.
Pensar visualmente despierta nuestra creatividad y nuestra imaginación y nos enseña a usarlas como herramientas para desarrollar ideas y resolver problemas: desde el boceto en apariencia más simple, pasando por infografías y diseños más elaborados, hasta llegar a los nuevos formatos y narrativas transmedia.
V
Viuda.
Fragmento corto de una línea o de un párrafo que queda aislado en la parte inferior de una columna o página.Volado
Signo, letra o número de tamaño menor que el cuerpo al que pertenecen. Ocupan la parte superior del ojo y se utilizan en las fórmulas, abreviaturas y notas. Parte de algunas letras que sobresalen del prisma del tipo, especialmente en los cuerpos grandes o en las letras acursivadas.WYSIWIG
What you see is what you get
Iniciales utilizadas para referirse a las aplicaciones informáticas con entornos gráficos como los programas de diseño y autoedición en los que “lo que ves es lo que obtienes”.
