Impreso y DigitalLa Interrelación entre el diseño

Editorial Indice

El contenido de esta revista pre-senta una visión clara y actualizada en el mundo del Diseño Gráfico y como tema principal la Interrelación del Diseño Impreso y Digital.

Estos temas favorecen la compren-sión de los fundamentos de diseño gráfico, el desarrollo de destrezas, de comunicación y de creatividad.

El valor formativo reside en el de-sarrollo de los valores del ser humano en el campo del diseño, porque permiten generar nuevas formas de ver, sentir, pensar y valorar la realidad.

Autor: Víctor ChiluisaCódigo: 1929

Temas Pág

¿Qué es el Diseño Impreso? 2Medios Impresos 3-4-5 Diseño Digital 7 Diseño Web 8Ejemplos 9-10Diseño Web Aplicado 11Diseño Multimedia 13La Animación 14La Interrelación 16-17

IndiceEditorial

1

Diseño Impreso

¿Qué es el Diseño Impreso?

Principios Básicos de Diseño Aplica-dos al Diseño ImpresoPara conocer los principios que ori-entan el diseño de medios impresos, comience por analizar el concepto de diseño periodístico, de Jesús Canga Larequi:“Es la técnica que permite determinar la situación de un conjunto de ele-mentos impresos (textos e ilustra-ciones) y no impresos (blancos), sobre la superficie de un espacio gráfico (página), con el fin de estruc-turar, jerarquizar y facilitar la legibili-dad de las informaciones periodísti-cas, tomando en cuenta que la infor-mación tiene prioridad sobre la es-tética”.Se trata de ubicar los elementos im-presos, que pueden ser:Gráficos: fotografías, ilustraciones, gráficos informativos, infografías.Tipográficos: antetítulo, título, texto, intertítulo, sumario, leyenda y crédi

tos.La forma en que se organizan los elementos impresos está directa-mente relacionada con los principios que nos interesan y a los blancos se les da mucha importancia ya que constituyen un aspecto determinante en el diseño, al separar todos los ele-mentos de la composición.

Estos elementos no impresos son utilizados además para separar ade-cuadamente cada módulo informati-vo. Es importante tener presente que el orden en que se estructuran las informaciones obedece a la impor-tancia de las noticias.Las notas más importantes van en la parte superior y generalmente se ubican de izquierda a derecha pues leemos de arriba hacia abajo y de izquierda a derecha.

2

Medios Impresos

Los medios impresos son muy antig-uos, los pueblos de la antigüedad uti-lizaban papiros, manuscritos, etc.Los principales medios impresos son: los periódicos, las revistas, los libros.

Inicios de la prensa escrita: antes de la aparición de la imprenta, se difundían las noticias por vía oral.

PERÍODICOS:

El periódico es un medio de comuni-cación que informa, orienta y entre-tiene.

Origen:Las primeras personas que llevaron mensajes de un lugar a otro fueron los pregoneros y juglares. Daban las noticias de forma oral en las plazas

de pueblos y ciudades. Más tarde se empezaron a vender noticias escritas a mano en hojas sueltas en las plazas de los pueblos. Cuando apa-reció la imprenta en el siglo XV, se imprimieron y se difundieron más fácilmente. En el siglo XVIII apareció el primer periódico diario.

Objetivos.· Informar de lo que pasa.· Dar opiniones para formar la opinión de los lectores.· Formar a los lectores en cuanto a conocimientos y comportamientos.· Distraer por medio de chistes, pasa-tiempos...· Ofrecer productos por medio de la publicidad.

Frecuencia de la publicación:* Diarios* Semanales

3

Medios Impresos

Tipos de periódicos:

* Matutino* Meridiano* Vespertino

Tamaño de periódico:

* Estándar (Universo, Comercio, El Expreso)* Tabloide (Diario La Hora Chico 4 a 5 columnas (Crónica de la tarde)

4

Medios Impresos

LIBROS:No es sino hasta mediados del siglo XVIII, una vez que el libro ha supera-do las dificultades tecnológicas que le impedían convertirse en una mer-cancía, que este inicia su rápido as-censo dentro del gusto de las mi-norías ilustradas de la sociedad.

La invención de la imprenta y el de-sarrollo del papel, así como la apa-rición de centros de divulgación de las ideas, permitieron la aparición del escritor profesional que depende de editores y libreros principalmente y ya no del subsidio público o del mecenazgo de los nobles o de los hombres acaudalados.

Además, surge una innovación com-ercial que convierte al libro en una mercancía de fácil acceso a los ple-beyos y los pobres, que consiste en

las librerías ambulantes, donde el librero cobra una cantidad mensual para prestar libros, que al ser devuel-tos le permiten al lector-usuario reci-bir otro a cambio.

El mismo libro, se convierte en un avance que da distinción a los lec-tores como progresistas en un siglo en que el progreso es una meta social ampliamente deseada y a la que pueden acceder por igual nobles y plebeyos, creando una meritocra-cia de nuevo cuño.

A pesar de lo anterior, la minoría que cultiva el gusto por el libro se en-cuentra entre los nobles y las clases altas y cultivadas de los plebeyos, pues sólo estos grupos sociales saben leer y escribir, lo que repre-senta el factor cultural adicional para el inevitable auge del libro.

5

Computadoras de escritorio

Características

- Case full tower varios modelos- Motherboard intel- Procesador core i5- Tarjeta de video 1GB- Memoria Ram 4GB- Disco Duro 1TB- Lector de memorias- DVD writer- Monitor LCD 22” GL- Teclado multimedia- Mouse óptico, parlantes

Gratis:

Pad MouseFull softwareCobertoresAudífonosMicrófono

Incluye:

Mesa importada (cristal)Impresora multifunciónSilla giratoria

6

Diseño Web

Diseño Digital es la disciplina que posibilita comunicar visualmente, informaciones, hechos, ideas y va-lores útiles al hombre mediante una actividad en la cual se procesan y sintetizan: factores sociales, cultur-ales, perceptivos, estéticos, tec-nológicos y ambientales para obten-er formas visuales auténticamente comunicantes.

La función del profesional del Diseño Gráfico Digital es crear y emitir efec-tivamente ideas y conceptos, por medio del adecuado manejo de formas y materiales. Este modo es-pecífico de pensamiento requiere de una representación material a través de dibujos, maquetas, material didáctico y gráfico y de una concep-ción intuitiva.

Introducción

Diseño Digital

7

Diseño Web

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simple-mente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactivi-dad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Se lo considera dentro del diseño multimedial.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comuni-

cación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio.

El diseño web ha visto amplia apli-cación en los sectores comercial-es de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.

¿Qué es?

Diseño Web

8

Diseño WebEjemplos

Ejemplos

Diseño web aplicado

El diseño de páginas web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para difer-entes dispositivos de salida (en una pantalla de com-putador, en papel, en un teléfono móvil, etc).

Estos documentos o páginas web pueden ser creadas:

• Creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.• Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.• Utilizando lenguajes de programación del lado ser-vidor para generar la página web.

11

Si necesita una solución de almacenamiento personalizada y tamaño bolsillo, tenemos lo que busca: los dispositivos DataTrave-ler® y las tarjetas flash de Kingston Technology. Estos productos, fiables y cómodos de llevar, o f - recen la mejor forma de guardar, transpor-tar y transferir ar- c h i v o s digitales impor- t a n t e s de forma segura. A d e m á s , son ideales para rega- los, pues los podemos personalizar para publicitar su empre-sa o su marca.

Kingston® le ofrece una manera muy fácil y cómoda de solicitar productos personalizados, ya sea en paquetes individuales o con varios productos, o bien en embalajes personalizados.

Características

• Capacidad — 2, 4, 8 y 16 GB• Velocidad — velocidades de transferencia de datos: 10 MB/sec. lectura y 5 MB/sec. escritura (capacidad 16 GB )• Dimensiones — 55,65 x 17,3 x 9,05 mm• Peso — 12 g• Cómoda — cabe en el bolsillo y puede llevarse siempre encima• Fácil de usar — insértela en un puerto USB y listo• Práctica — el conector va protegido por una tapa giratoria (de-spreocúpese de perder la tapa)• Fiable — cinco años de garantía• Moderna — disponible en cian, rosa y amarillo

La mejor solución de almacenamiento portátil personalizada.

12

Diseño multimedia

El Diseño Multimedia esta compuesto por la combi-nación de diversas ramas, que engloban texto, foto-grafías, videos, sonido, animación, manipulada y volca-da en un soporte digital. Algunas de estas ramas pueden ser: Diseño Gráfico, Diséño Editorial, Diseño Web, etc.

La cualidad multimedia no está necesariamente ceñida a la informática, pues se puede tomar como medio multi-media la mezcla de un libro junto a un casete, cuya com-binación se utiliza para crear textos con música ambi-ente.

13

La animación

La animación es un proceso utilizado para dar la sen-sación de movimiento a imágenes o dibujos. Existen nu-merosas técnicas para realizar animación que van más allá de los familiares dibujos animados. Los cuadros se pueden generar dibujando, pintando, o fotografiando los minúsculos cambios hechos repetidamente a un modelo de la realidad o a un modelo tridimensional virtual; tam-bién es posible animar objetos de la realidad y actores.

Concebir una animación tiende a ser un trabajo muy in-tensivo y tedioso. Por esto la mayor parte de la produc-ción proviene de compañías de animación que se han encargado de organizar esta labor. Aun así existe la ani-mación de autor (que tiene relación con la animación in-dependiente), en general más cercana a las artes plásti-cas. Ésta surge del trabajo personal de uno o de unos pocos artistas. Algunos se valen de las nuevas tec-nologías para simplificar la tarea. Se comienza el proce-so de animación al hacer un modelo del personaje o la cosa que se va a animar. Este modelo puede ser un dibujo, o puede ser también en plastilina.

Proceso de la animación

14

Portatiles

Características

- Intel core i7- Memoria Ram 4 GB 1333 MHZ DDR3 SDRAM- Disco duro 500 GB- Pantalla 15.6” LED-backlit HD anti-glare display (1366 x 768 resolution)- Lector optico DVD+/-RW SuperMulti DL LightScribe- Camara web de 2Mpx- Tarjeta de video Intel HD Graphics 64MB- Puertos USB 2.0:3, RJ-45:1, Alimentación, Micrófono, Auricular, Expansión, VGA (15-pin : 1, HDMI:1, eSata: 1)- Sistema Operativo Windows 7 Professional

Obsequios: En todas las portátiles

Mouse, Maleta y Flash Memory

15

La Interrelación.

Interactuar en vez de mostrar

El diseño impreso está basado en ver, pero el diseño web está basado en hacer, es decir sin un diseño digital no habría un diseño impreso.La función del diseño tradicional es contar histori-as, la misión del diseño digital es entablar conver-saciones.El soporte gráfico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El diseño impreso es estático, en cambio, la experiencia de un sitio web se define por la interacción del usuario con diseño y con-tenido. Por ejemplo, un usuario hace clic sobre la navegación o se desplaza hacia abajo para leer una página.Un buen diseño impreso tiene que entenderse y ser bonito, pero un buen diseño web tiene que entenderse, facilitar la navegación (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, después el contenido y si queda tiempo el arte. Aunque esto no implica que el buen diseño se deba sacrificar para ganar usabili-dad, en esta guía vamos a explicar cómo hacer-los compatibles.

Espacio y entorno indefinido en vez de definido

El diseño impreso se visualiza en espacio limita-do pero el diseño web se tiene que poder visu-alizar en múltiples espacios, además el diseño web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).Cuando se diseña para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos diseñado y guardado, en cambio, cuando se diseña una web, debemos considerar factores externos de los cuales no tenemos ningún control (el usuario puede tener resolu-ciones de pantalla diferente o utilizar un navegador web distinto, además de no tener las tipografías utilizadas,…).El diseño impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores

web pueden presentar los elementos del diseño con sutiles variaciones.A veces, el peor dolor de cabeza de un maqueta-dor web es como hacer funcionar una web en Internet Explorer, Firefox, Chrome, smartphones, tablets… sin que alguno muestre errores.

Problema con las tipografías

En el diseño impreso se puede utilizar cualquier tipografía, pero el diseño web normalmente solo muestra las tipografías que el usuario tenga insta-ladas en su ordenador. Más adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipografía deseada en imágenes, pero tendremos que tener en cuenta las limitaciones.

Pixeles en vez de pulgadas y centímetros

En el diseño impreso se trabaja con pulgadas y centímetros, pero en el diseño web solo se traba-ja con pixeles. Así pues, dependiendo de la resolución de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los diseños web siempre son píxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de área (se explica más adelante).Si les cuesta diseñar con pixeles, pueden utilizar la resolución 72 dpi, que es la resolución estándar de la mayoría de pantallas de ordenador. Diseñando a esta resolución, la mayoría de usu-arios verán las imágenes y elementos de su diseño al mismo tamaño que en su pantalla.

Píxel: la menor unidad de medida en la pantalla (un punto de luz). La mayoría de pantallas tienen una resolución de 72 píxeles por pulgada o dpi.

Archivos pequeños en vez de grandes

El diseño impreso se trabaja con altas resolu-

16

ciones de archivos y se procura mantener la mejor calidad en las imágenes y originales, mien-tras que en el diseño web se trabaja con resolu-ciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la página rápida-mente. En diseño web, debemos optimizar las imágenes y animaciones, es decir, bajar la resolu-ción lo más posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una página web se calcula como la suma de todos pesos de los documentos que abre una página web (imágenes, archivos flash, anima-ciones...).Con las conexiones de internet actual podemos calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una página tarda un segundo más a descargarse y abrirse.

RGB en vez de CMYK

En el diseño impreso se trabaja colores substrac-tivos o CMYK, en cambio en el diseño web solo se trabaja con colores aditivos o RGB.El color es un error común de los diseñadores gráficos cuando quieren diseñar para web. En la escuela de diseño te enseñan a utilizar siempre CMYK para que la impresión quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz únicamente interpretan datos RGB o aditivos.

Posible editar después de publicar

El diseño impreso no se puede modificar después de la impresión. Por suerte el diseño web se puede modificar después de la publicación, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la información. En este sentido, es mejor evitar diseños que no sean flexibles, para que en el futuro el diseño se pueda adaptar a diferentes tamaños de los contenidos, sin perjudicar la estética del conjunto

Interactuar en vez de mostrar

El diseño impreso está basado en ver, pero el diseño web está basado en hacer, es decir sin un diseño digital no habría un diseño impreso.La función del diseño tradicional es contar histori-as, la misión del diseño digital es entablar conver-saciones.El soporte gráfico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El diseño impreso es estático, en cambio, la experiencia de un sitio web se define por la interacción del usuario con diseño y con-tenido. Por ejemplo, un usuario hace clic sobre la navegación o se desplaza hacia abajo para leer una página.Un buen diseño impreso tiene que entenderse y ser bonito, pero un buen diseño web tiene que entenderse, facilitar la navegación (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, después el contenido y si queda tiempo el arte. Aunque esto no implica que el buen diseño se deba sacrificar para ganar usabili-dad, en esta guía vamos a explicar cómo hacer-los compatibles.

Espacio y entorno indefinido en vez de definido

El diseño impreso se visualiza en espacio limita-do pero el diseño web se tiene que poder visu-alizar en múltiples espacios, además el diseño web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).Cuando se diseña para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos diseñado y guardado, en cambio, cuando se diseña una web, debemos considerar factores externos de los cuales no tenemos ningún control (el usuario puede tener resolu-ciones de pantalla diferente o utilizar un navegador web distinto, además de no tener las tipografías utilizadas,…).El diseño impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores

web pueden presentar los elementos del diseño con sutiles variaciones.A veces, el peor dolor de cabeza de un maqueta-dor web es como hacer funcionar una web en Internet Explorer, Firefox, Chrome, smartphones, tablets… sin que alguno muestre errores.

Problema con las tipografías

En el diseño impreso se puede utilizar cualquier tipografía, pero el diseño web normalmente solo muestra las tipografías que el usuario tenga insta-ladas en su ordenador. Más adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipografía deseada en imágenes, pero tendremos que tener en cuenta las limitaciones.

Pixeles en vez de pulgadas y centímetros

En el diseño impreso se trabaja con pulgadas y centímetros, pero en el diseño web solo se traba-ja con pixeles. Así pues, dependiendo de la resolución de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los diseños web siempre son píxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de área (se explica más adelante).Si les cuesta diseñar con pixeles, pueden utilizar la resolución 72 dpi, que es la resolución estándar de la mayoría de pantallas de ordenador. Diseñando a esta resolución, la mayoría de usu-arios verán las imágenes y elementos de su diseño al mismo tamaño que en su pantalla.

Píxel: la menor unidad de medida en la pantalla (un punto de luz). La mayoría de pantallas tienen una resolución de 72 píxeles por pulgada o dpi.

Archivos pequeños en vez de grandes

El diseño impreso se trabaja con altas resolu-

La Interrelación. ciones de archivos y se procura mantener la mejor calidad en las imágenes y originales, mien-tras que en el diseño web se trabaja con resolu-ciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la página rápida-mente. En diseño web, debemos optimizar las imágenes y animaciones, es decir, bajar la resolu-ción lo más posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una página web se calcula como la suma de todos pesos de los documentos que abre una página web (imágenes, archivos flash, anima-ciones...).Con las conexiones de internet actual podemos calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una página tarda un segundo más a descargarse y abrirse.

RGB en vez de CMYK

En el diseño impreso se trabaja colores substrac-tivos o CMYK, en cambio en el diseño web solo se trabaja con colores aditivos o RGB.El color es un error común de los diseñadores gráficos cuando quieren diseñar para web. En la escuela de diseño te enseñan a utilizar siempre CMYK para que la impresión quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz únicamente interpretan datos RGB o aditivos.

Posible editar después de publicar

El diseño impreso no se puede modificar después de la impresión. Por suerte el diseño web se puede modificar después de la publicación, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la información. En este sentido, es mejor evitar diseños que no sean flexibles, para que en el futuro el diseño se pueda adaptar a diferentes tamaños de los contenidos, sin perjudicar la estética del conjunto

17