INSTITUTO POLITÉCNICO N ACIONAL

CENTRO DE TECNOLOGÍA EDUCATIVA

LINEAMIENTOS DE DISEÑO GRÁFICO PARA LA

ELABORACIÓN DE PUBLICACIONES ELECTRÓNICAS

Anna María Serrato Martínez

Palabras Clave: Publicaciones multimedia, diseñadores gráficos, navegación, diseño

digital, texto con imagen, leibilidad, legibilidad, recorrido visual

Este sitio no pretende formar diseñadores gráficos, para ello existe la carrera en las
Universidades, así como especializaciones para temas como el "diseño de publicaciones
electrónicas", o algo similar. La Dirección de Tecnología Educativa, por medio de su
Departamento de Recursos de Información de se ha dado a la tarea de crear una cultura
de diseño visual en el Instituto, con el fin de dar a conocer el lenguaje propio de la
comunicación gráfica, para que, quienes no tienen relación con el diseño puedan dirigirse
a los profesionales de la comunicación gráfica más fácilmente, hablando el mismo idioma.

Hasta el momento hemos creado cinco secciones para este sitio, las cuales identificamos
de la siguiente manera:
Contexto de Definiciones de los conceptos más utilizados en el
Diseño lenguaje de la comunicación visual.
Guía de Trabajo Marcamos las "reglas del juego". cómo va a ser el
acercamiento entre ustedes y el grupo asesor de
diseño.
Trabajando con Aspectos a considerar cuando se elabora un material
los elementos para la web.
Soluciones para Queremos integrar aquí todas las dudas, con
todo soluciones precisas, de todos los problemas que
vayan teniendo al elaborar su materiales.
Ver para Muchos ejemplos para activar la creatividad y poder
aprender hacer uso de diferentes aplicaciones.

Definición de diseño gráfico

Es todo el conjunto de actos de reflexión y formalización material que intervienen en el

proceso creativo de una obra original (gráfica, arquitectónica, objetal, industrial o
ambiental), la cual es producto de una combinación particular (mental y técnica) de
planificación, ideación, proyección y desarrollo creativo en forma de un modelo o prototipo
destinado a su producción, producción o difusión por medios industriales.
Toda publicación multimedia está integrada por
diversos elementos, no importando su escencia, los
llamaremos objetos multimediales, siendo estos:
• Texto
• Imagen, en cualquera de sus tres tratamientos
-Fija (en forma de fotografías o gráficas)
-Animación
-Video
• Audio
• Interactividad

Navegación
La navegación debe ser sencilla e intuitiva, está determinada por la interactividad que se
le asigne a los objetos. Se requiere de sentido común para saber qué quiero que hagan
los objetos por medio de eventos y acciones. Los eventos forman acciones, por ejemplo,
una acción podría ser que con un clic del mouse sobre un elemento multimedial, se vaya
a otra pantalla o que aparezca otra imagen o que comience a correr un video.

Los efectos son disolvencias, wipes, barridos, fades.

Navegación lineal: No hay interactividad Navegación no lineal: Tiene varias opciones por
medio de las cuales se da la interactividad, el usuario puede decidir qué camino tomar
para hacer el recorrido. Es importante que haya opciones de navegación, se le debe dar
al usuario la posibilidad de ir a un lado o a otro, o incluso regresar y empezar de nuevo,
dejar el recorrido inconcluso para que la próxima vez que entre al programa el usuario
pueda continuar navegando donde sse quedó en la sesión anterior.

¿Cómo comenzar?»

• Hacer un guión de lo que se va a presentar

• Realizar un storyboard, de éste obtenemos una
• Lista de elementos multimediales y entonces ya sabemos que necesitamos tantos
botones, tantos fondos, archivos de audio, de video, textos de información, etc.

Texto con imagen

Muchas veces tenemos que convertir texto en imágenes, he aquí algunas consideracines
para tomar en cuenta

Formar un caracter toma un mínimo de 5 pixeles para el cuerpo. Con ascendentes y

descendentes, 9 pixeles de altura
GUIAS.3 2/11

Esquema cuerpo "X" en tipografía. El largo de las ascendentes y descendentes hace

posible la lectura de un tipo.
Para el tipo, cualquier borde produce escalonamiento. Los pixeles son áreas fijas que on
pueden ser cortadas. Para suavizar los cerroteados se puede usar tono y color.

Insertando pixeles de un color entre el fondo y la imagen, se pueden suavizar los bordes
de las líneas.

ESTILO EN LAS PUBLICACIONES MULTIMEDIA

El estilo es una serie de elementos creados por un diseñador, produciendo algo distinto
en el mercado. Por lo general, los temas y sentimientos del arte popular quedan reflejados
a menudo en el estilo de diseño de la época. Las imágenes serán modificadas para
hacerlas compatibles con los procesos de reproducción.

CONDICIONANTES PARA UN BUEN DISEÑO DIGITAL

Recorrido Visual

Se puede hacer la lectura o recorrido visual de cualquier lado tomando en cuenta que los
objetos grandes llaman la atención en relación a los objetos chicos, así como elementos
fuera de lo común o convencional. También llama la atención el color en relación al blanco
y negro.

La tipografía inclinada puede llamar la atención en relación a objetos colocados en forma

clásica.

Para una buena lectura en un medio electrónico debe haber comprensión y buen
aprendizaje; comprender y analizar un texto sin fatiga.

Leibilidad y Legibilidad

Debe haber un orden dentro de nuestra publicación. La leibilidad tiene que ver con el
aspecto material de la publicación y la legibilidad ayuda para que haya una lectura
adecuada.

Leibilidad es la capacidad asignada a un texto para ser leído con un máximo de

comprensión, un mínimo de fatiga y una máxima recuperación de ésta. Legibilidad es la
relación de la letra con el fondo o pantalla, al tipo utilizado.

La legibilidad depende también de la longitud de la línea de texto, las líneas largas son
difíciles de leer. Conviene también evitar columnas muy cortas, pues con una longitud de
línea pequeña se producen cortes poco adecuados en las palabras. Cuando el
interlineado es muy pequeño, la vista tiende a saltarse renglones. Para una buena
interlínea un 20% de la altura de la tipografía es adecuado.

Más detalles sobre el uso de la tipografía se verán en la sección trabajando con

elementos.
círculo cromático: leibilidad dada por el contraste entre color para tipografía y color de
fondo; legibilidad, textos pequeños en fondos cambiantes de color ayudan a una buena
lectura
Contraste

Se habla de contraste entre lo obscuro de la tipografía y la claridad de la pantalla o

viceversa. Colores para una buena lectura son el negro y el blanco. Su objetivo es marcar,
acentuar y señalar una diferencia entre dos o varias cosas, dependiendo de lo que se
quiere destacar, resaltar o recalcar.

Factores que afectan la lectura

Los estilos de la tipografía cuando son más familiares, son más sencillos de leer (tipos sin
patines).

Al combinar elementos, se debe buscar realizar la composición de lo más simple aunque

no siempre es lo más fácil ya que también se debe buscar que el diseño sea impactante.

Al trabajar con texto, por ejemplo, pueden usarse dos estilos de letras cuando mucho, uno
para la lectura y otro para los cabezales, el cual debe ir de acuerdo al tema. Las variantes
del cuerpo del tipo nos dan más posibilidades de combinación sin tener que recurrir a
muchos tipos dentro de una pantalla.

Composición

Los conceptos y métodos geométricos de disposición de los elementos en el espacio

blanco, constituyen una sólida base para la introducción al estudio de la armonía de la
composición, misma que nos es útil en el campo editorial, ya sea de proyectos impresos o
digitales.

Al realizar una composición lo que estamos haciendo es proyectar o disponer dentro de

nuestro espacio-formato varios signos o elementos de diseño (tipografía, ilustraciones,
márgenes, blancos, etc.) según una idea directriz, para así obtener un efecto estético y
agradable además de una lectura fácil y cómoda.

Existen diferentes clases de composición y cada una de ellas nos ayudará a resolver
determinados problemas de diseño.

Composición dinámica o libre

Por ejemplo, la composición dinámica o libre nos da la impresión de movimiento y fuerza,

en este caso lo que domina es el contraste entre los distintos elementos de la
composición, desde el que da un sentido de fuerza violenta, hasta aquel que es apenas
insinuado, sugerido e inconcluso. Para obtener este resultado, existen ciertas exigencias
que son fundamentales para la composición, tales como la unidad y el equilibrio.

Composición clásica o estática

Otra clase de composición es la clásica o estática, que al contrario de la anterior en ellase

asentúa el sentido de continuidad, eliminando todo aquello que pudiera sugerir
movimiento, evolución o transformación dando por resultado un efecto tranquilizador.
Composición clásica y estática: el sentido de continuidad

La composición continua en cambio. se caracteriza porque en ella la acción de los

elementos visuales se desarrolla dominando el espacio-formato con una narración
continua, de tal manera que su lectura visual tendrá que ser sucesivamente coordinada en
todas las zonas del formato, ya que no habrá ningún punto que esté determinado por un
interés preponderante.

Composición en espiral

Por último veamos la composición en espiral, con ella conseguiremos un efecto de fuerza
vital cuando los elementos se expanden hacia el exterior del formato, si por el contrario la
línea espiral se repliega hacia sí misma el efecto será trágico. En este tipo de composición
lo más característico es el sentido de profundidad.

La composición en diseño y otros términos

Para lograr resolver en una composición la función, debe antes resolver la unidad, en la
armonía total entre los elementos que conforman el todo en la composición: entre
lenguaje y signo, y entre contenido y forma.

El fín último de la composición es la unidad, es la organización de las fuerzas, es corregir

la unidad estética del arte. En una composición tan sólo es necesario mover un solo
elemento por pequeño que sea, y todo el conjunto reciente el cambio dentro de la unidad
misma de la composición. Importante también es la variedad que debe haber en la
unidad, y por supuesto, el equilibrio, el ritmo y todas las leyes de la composición para
lograr un resultado satisfactorio.

Ritmo
En la ley del ritmo actúan leyes específicas como la simetría y la intensidad,
conjuntamente con las leyes del equilibrio y del lenguaje. El ritmo y el equilibrio pueden
regular el efecto compositivo.

Ahora bien, ritmo es la repetición de uno o varios elementos dentro del mismo diseño, ya
sea perfectamente ordenados o desordenados. Es la sucesión y armonía de los valores
visuales como son: dibujo, espacio, claroscuro, color, movimiento y equilibrio, puesto que
el ritmo debe aplicarse con racionalidad y coherencia lógica, podemos usar las reglas de
las matemáticas y la geometría.

Ahora bien, cuando hablamos de simetría nos referimos al equilibrio de energías o fuerzas
contrastantes, este equilibrio se consigue por medio de las disposiciones especiales de
los distintos elementos, de las cuales la más común es la repetición, lo que sugiere
movimiento. Según sea el movimiento sugerido, tendremos diferentes formas de simetría,
por ejemplo simetría lineal, simetría alternada, etc. Cuando nos referimos a la Intensidad o
a la densidad de fuerzas, estamos hablando de la intensidad de un signo, por ejemplo en
este caso la intensidad se manifiesta por medio del carácter de su estructura o en la
densidad rítmica de su forma.

En tipografía es la repetición de la misma unidad (palabras, bloque, columna, línea, etc.),

ya sea en forma simétrica, asimétrica, irregular o irregular asimétrica. Del ritmo que se le
dé al diseño dependerá que éste resulte un modelo tradicional o bien rompa con lo
establecido, imprimiéndole dinámica, gusto, expresión, etc.; claro está de acuerdo a un
objetivo punto de vista.

No es necesario que todos los conceptos que hemos descrito aparezcan en una
composición gráfica, pero al disponer de los elementos en nuestra área de trabajo es
importante lograr un equilibrio visual controlando el peso de la imagen global en cada uno
de sus elementos.

Grupo de Trabajo
Dentro del esquema de "Ambientes Virtuales de Aprendizaje" desarrollado por la
Coordinación de Cómputo Académico se ha conformado para la etapa de producción a
tres grupos:

− Grupo de desarrollo: Realizan el diseño instruccional de los cursos

− Grupo pedagógico: Aportan el valor didáctico a los materiales
− Grupo técnico:

• Programadores. Convierten los materiales al ambiente de Internet propicio para AVA

• Diseñadores gráficos. Aplica los gráficos, animación, video y sonido por
computadora para reforzar la comunicación.

Funciones del grupo de diseñadores Graficos

Usted debe emplear los elementos gráficos para que la comunicación sea lo más efectiva
posible, es decir una de nuestras primeras funciones es la de lograr... COMUNICACIÓN
VISUAL

Además de lo anterior, en un medio como es Internet, estamos hablando de la capacidad

del hipertexto, lo que nos permite no sólo una apariencia atractiva si no también una
interación con el usuario.
Si bien, el grupo de desarrollo de contenidos deberá de marcar una pauta en la
interacción con los materiales igualmente es función de este grupo sugerir modos y
formas acordes al diseño gráfico planteado.

Es decir tenemos la función de proponer y diseñar la... INTERFASE Y NAVEGACION

Otro aspecto significativo en este Instituto es el entusiasmo del personal técnico por el
conocimiento de todo tipo de herramientas de software gráfico y por ende se les haga
partícipes en los grupos de esta índole.

Si bien un diseñador gráfico de profesión es la persona mas pertinente para formar parte
del grupo, la función que deben asumir los "no gráficos" es la de... VER PARA
APRENDER
Revisar constantemente materiales que permitan ampliar la visión de uso del medio y la
aplicación gráfica y de interfase.

Comunicación con los diferentes actores

Dada la naturaleza de un grupo de trabajo colaborativo, es imprescindible tener una
comunicación permante con los demas actores. Como grupo de diseño gráfico tenemos
acciones de comunicación muy particulares y la interacción con los otros actores las
podemos describir como sigue:

Comunicación con el grupo de desarrollo

Este grupo es el más importante ya que es el que liderea la creación de los materiales;
son ellos quienes tienen la visión más completa de las metas por alcanzar; conocen a su
público y sus necesidades. Es con ellos con los quienes entendemos el concepto de los
materiales a desarrollar en su sentido más amplio y por ende nos permitirá proponer
nuestro concepto gráfico así como la interfase de operación con el usuario.

Comunicación con el grupo pedagógico

Con ellos, la comunicación puede enfocarse sobre los procesos didácticos y las formas de
interacción del usuario, proponiendo formas atractivas y de facil asimilación.
Comunicación con el grupo técnico (programadores)

Para que las propuestas de nuestro grupo se cristalicen en productos finales, requiere de
un conocimiento de las posibilidades de técnicas y de programación del grupo de
programadores. Plantear soluciones con un alto nivel de gráfico/interactivo pueden no ser
factibles de solucionarse técnicamente y en contraparte quizá se tenga un grupo de
programadores con gran potencial que nos motive a realizar propuestas mas creativas.

Cómo realizar las propuestas?

En primer término, es necesario conocer el material base del grupo de desarrollo para
entender el concepto general del material a desarrollar y presentar la propuesta gráfica.
Revisar con el grupo pedagógico y técnico los métodos o mecanismos que se utilizarán
para comunicarse con el ususario y como se pretende se efectúe la navegación.
Despues de haber realizado una primer propuesta, se deberá hacer una segunda revisión
con todos los actores (esto puede ser en diferentes momentos) que sirva para redondear
detalles no contemplados y realizar los ajustes necesarios.

Preparará el "paquete" en forma impresa con los anexos descriptivos necesarios, así
como los medios magnéticos de soporte para que el grupo técnico de programadores
realicen el armado.

¿Cómo se facilita el procesamiento de la información?

A continuación listamos algunos lineamientos a considerar para mejorar el procesamiento
de la información.

− Establecer procesos de gestión de información hacia los dos sentidos; hacia el

grupo de diseñadores y hacia los diferentes actores.
− Solicitar se especifiquen las formas, formatos, extensión, etc., en que se encuentran
los materiales ya que eso implicará en ocasiones tratamientos muy específicos
que deben contemplarse en los tiempos de procesamiento.
− Conocer la plataforma de hardware y las herramientas de software de que dispone
el grupo técnico para evitar reconversiones o pérdidas de calidad en los materiales
que arme dicho grupo.
Trabajando con los elementos multimediales

Esta sección se formará por los temas que nos soliciten se desarrollen más ampliamente.
Describiremos cómo se deben tratar los elementos que componen una pagina electrónica
para su correcta salida, es decir, el despliegue en la pantalla. No desplegamos todo
ahora para que vuelvan pronto a nuesto sitio.

Problemas más frecuentes al diseñar y trabajar con multimedios

Esta sección la formaremos integrando sus dudas específicas y nuestras soluciones,

queremos que no permanezcan en el anonimato para que quienes aún no se han
enfrentado con algún problema, se enteren de lo que se les puede presentar en el
camino y tengan en este sitio una referencia para poder resolverlo apropiadamente.

Anna María Serrato Martínez

Carlos González Pérez