> Manuales > Curso práctico de diseño web

La historia del diseño gráfico, desde los orígenes de la humanidad hasta la aparición de la web e Internet. Características del diseño gráfico en la actualidad y el diseño gráfico en la web de manera particular.

El ser humano ha tenido siempre la necesidad de comunicarse con sus semejantes, hasta tal punto que podemos afirmar que si el hombre es el ser más avanzado de la naturaleza, es debido en gran parte a la facilidad que ha tenido para hacer partícipe a los demás de sus ideas de una forma u otra.

Las primeras formas comunicativas fueron mediante elementos visuales. Antes de que desarrollaran capacidades de expresión mediante el lenguaje hablado, los hombres utilizaron su cuerpo para comunicar a los demás estados de ánimo, deseos e inquietudes a través de ademanes, expresiones y signos, que con el tiempo adquirieron la condición de "lenguaje", al convertirse en modelos de comunicación.

Aunque posteriormente el lenguaje hablado pasara a ser el medio de intercambio de información más directo, el lenguaje visual siguió teniendo un importante peso en las relaciones comunicativas, sobre todo a partir del uso de diversos materiales y soportes como medios del plasmar mensajes visuales, como lo demuestran multitud de dibujos en piedra y pinturas rupestres que han llegado a nuestros días, en las cuales se representan elementos naturales, actividades cotidianas y diferentes signos artificiales con significado propio.

Pintura rupestre (Cueva de Altamira, España)
Pintura rupestre

La representación de ideas mediante grafos experimentó su mayor avance con la aparición de los lenguajes escritos, que permitieron expresar cadenas estructuradas de pensamientos mediante un conjunto de elementos gráficos de significado propio dispuestos según una estructura definida, capaces de transmitir mensajes entendibles por la comunidad.

Estos lenguajes escritos estaban basados, bien en la representación de elementos tomados de la naturaleza, a los que se les asignaba una interpretación particular, bien en un conjunto artificial de símbolos inventados: los alfabetos. Cada uno de estos signos aislado tenía a veces un significado incierto, pero unido a otros, permitían representar gráficamente el lenguaje hablado por cada pueblo o cultura.

Grabado en piedra con jeroglíficos (Egipto)
Grabado egipcio

Como soporte físico se utilizó inicialmente la piedra, pero pronto se buscaron otros tipos de materiales que permitieran una mayor facilidad de uso y una mayor portabilidad, como los papiros o los pergaminos.

Papiro de los muertos
Papiro de los muertos

También se empezaron a usar diferentes tipos de pigmentos naturales para dar un mayor colorido y expresibidad a las obras escritas y composiciones artísticas, y a disponer los diferentes elementos textuales y gráficos de forma armoniosa y equilibrada, ya que se apreció que con ello se ganaba poder comunicativo, claridad y belleza. Esto se puede apreciar en la confección de los incunables medievales realizados en los monasterios, en los que se observa de forma clara la importancia de la "FORMA" (diseño) para transmitir un mensaje.

Incunable medieval
Incunable medieval

Posteriormente, Johann Gutenberg inventó la imprenta, artefacto capaz de reproducir en grandes cantidades y de forma cómoda un original, lo que hizo posible que los documentos impresos y el mensaje que contenían fueran accesibles a un gran número de personas.

Primer libro impreso
Primer libro impreso por Gutenberg

Pronto empezaron a aparecer imprentas en las que se reproducían todo tipo de obras, cada vez más elaboradas. Se empezaron a usar nuevos materiales como soporte, nuevas tintas y nuevos tipos de letras, originando la aparición de unos profesionales especializados en su manejo, los tipógrafos y los cajitas, tal vez los primeros diseñadores gráficos como tal, ya que se encargaban de componer y maquetar los diferentes elementos que iban a formar una obra de forma que resultara lógica, clara, armoniosa y bella.

Otro gran impulsor del desarrollo del diseño gráfico fue la Revolución Industrial. Surgieron las fábricas y la economía de mercado, un gran número de personas se desplazó a las ciudades a trabajar, aumentaron las tiendas y los comercios y empezó la competitividad entre empresas por hacerse con una parte del mercado. Con ello apareció y se desarrolló una nueva técnica comercial, la publicidad, encargada de hacer llegar a los consumidores mensajes específicos que les convencieran de que un producto dado era mejor que otros análogos.

Cartel publicitario
Cartel publicitario

El desarrollo de la publicidad trajo consigo un desarrollo paralelo del diseño gráfico y de los soportes de comunicación. Había que convencer al público de las ventajas de un producto o marca, y para ello nada mejor que mensajes concisos, cargados de componentes psicológicos, con diseños cada vez más elaborados, que se hacían llegar al mayor número posible de personas. El cómo se transmitía la información llegó incluso a superar en importancia a la misma información transmitida.

No se trataba ya de presentar mensajes visuales bellos, sino efectivos, que vendieran, y para ello no se dudo en realizar grandes inversiones, haciendo posible un gran avance en las técnicas de diseño y la aparición de profesionales dedicados exclusivamente a desarrollarlas y ponerlas en práctica: los diseñadores gráficos.

En el siglo XX, hicieron su aparición los ordenadores, máquinas en un principio destinadas a un grupo reducido de técnicos y especialistas, pero que poco a poco fueron ganando popularidad y que con la aparición del ordenador personal se extendieron a todos los ambientes y grupos sociales.

El ordenador es útil porque permite el uso de programas informáticos capaces de realizar multitud de tareas. Pero estos programas tienen una estructura interna muy compleja, que la mayoría de las veces va más allá de los conocimientos que poseen los usuarios de los mismos.

Esto dio lugar a la introducción de unos elementos intermedios, denominados "Interfaces de Usuario", cuya misión era aislar al usuario de las consideraciones técnicas y procesos internos de los programas, permitiéndoles realizar tareas con ellos por medio de un "lenguaje" intermedio, más fácil de entender por el usuario.

Interfase de usuario en modo texto
Interfase de usuario en modo texto

En sus principios, estos programas se manejaban de forma textual, mediante comandos crípticos, que entendían tan solo expertos en la materia. Pero con el acceso a la informática de todo tipo de personas se hizo necesaria una simplificación en el manejo de las aplicaciones, surgiendo el concepto de "Interface Gráfica de Usuario" en toda su extensión, como un medio capaz de hacer entendibles y usables estas aplicaciones a través de elementos visuales comunes, que presentados en la pantalla del ordenador permitieran al usuario medio realizar las tareas propias de cada programa concreto.

Interfase Gráfica de Usuario
Interfase Gráfica de Usuario

La labor de diseñar estas IGU correspondió inicialmente a los mismos programadores que desarrollaban las aplicaciones, pero pronto se vio que su concepto de interface de usuario no se correspondía con la que necesitaban los usuarios finales.

Hacía falta pues profesionales del diseño que se encargaran de concebir las interfaces, pero los diseñadores gráficos clásicos no estaban acostumbrados a construir obras con capacidades de interacción y navegabilidad, por lo que hubieron de reciclarse, aprendiendo conceptos y funcionalidades nuevas.

Con la entrada en escena de Internet y las páginas web se hizo aún más patente el desfase de los diseñadores gráficos con el nuevo medio. Hacía falta ahora diseñar y construir interfases de usuario muy especiales, condicionadas a pequeños tamaños de fichero y a un medio concreto de presentación, los navegadores web, que imponían serias limitaciones al diseño, que necesitaban sistemas de navegación entre páginas simples y entendibles.

Interfase web
Interfase web

Si a esto sumamos la necesidad de los creadores de interfaces web de conocer a fondo diferentes lenguajes de marcas y de programación (HTML, JavaScript, DHTML), es evidente que era necesaria la aparición de un nuevo profesional, el diseñador web, híbrido entre el diseñador gráfico clásico y el programador de aplicaciones para Internet.

Diseño gráfico en la actualidad

Ahora vamos a realizar una aproximación al diseño gráfico en general, con una descripción de los elementos que componen habitualmente un diseño y las características principales que podemos encontrar en ellos.

Podemos definir el diseño gráfico como el proceso de programar, proyectar, coordinar, seleccionar y organizar una serie de elementos para producir objetos visuales destinados a comunicar mensajes específicos a grupos determinados.

La función principal del diseño gráfico será entonces transmitir una información determinada por medio de composiciones gráficas, que se hacen llegar al público destinatario a través de diferentes soportes, como folletos, carteles, trípticos, etc.

El diseño gráfico busca transmitir las ideas esenciales del mensaje de forma clara y directa, usando para ello diferentes elementos gráficos que den forma al mensaje y lo hagan fácilmente entendible por los destinatarios del mismo.

El diseño gráfico no significa crear un dibujo, una imagen, una ilustración, una fotografía. Es algo más que la suma de todos esos elementos, aunque para poder conseguir poder comunicar visualmente un mensaje de forma efectiva el diseñador debe conocer a fondo los diferentes recursos gráficos a su disposición y tener la imaginación, la experiencia, el buen gusto y el sentido común necesarios para combinarlos de forma adecuada.

El resultado final de un diseño gráfico se denomina grafismo, y es una unidad por sí misma, aunque esté compuesto por multitud de elementos diferentes. Podemos establecer una analogía entre un grafismo y un plato de cocina. Ambos están compuestos por diferentes elementos individuales que, unidos correctamente y con sabiduría, componen una obra final única y definida que va más allá de la suma de las partes que la forman.

Formas, colores y textos en un grafismo
Formas, colores y textos en un grafismo

Toda obra de comunicación visual nace de la necesidad de transmitir un mensaje específico. Un diseñador gráfico no es un creador de formas, sino un creador de comunicaciones, un profesional que mediante un método específico (diseño) construye mensajes (comunicación) con medios visuales (grafismos). No es el creador del mensaje, sino su intérprete.

El principal componente de toda composición gráfica es pues el mensaje a interpretar, la información que se desea hacer llegar al destinatario a través del grafismo. Esta información se debe representar por medio de diferentes elementos gráficos, que pueden ser muchos y variados, aunque los más comunes son:

Un diseño limpio
Un diseño limpio

Estos elementos básicos se combinan unos con otros en un grafismo, y de esta combinación surge un resultado final en el que tienen mucha importancia una serie de conceptos propios del diseño gráfico, entre los que destacan:

Los diferentes elementos de un grafismo son percibidos por el destinatario de acuerdo con la influencia que ejercen cada uno estos conceptos a nivel individual, grupal y total. Pero la unión de todos ellos, la obra gráfica, es una entidad comunicativa individual y completa, cargada de complejos elementos humanos asociados con el lenguaje, la experiencia, la edad, el aprendizaje, la educación y la memoria.

Diseño gráfico en la web

Ahora podemos introducirnos en nuestro campo objetivo, la web, conociendo sus características específicas. Y es que el diseño web va más allá del diseño tradicional, pues existen muchos limitadores relacionados con el medio donde se presentan las páginas: Internet.

El diseño gráfico de una página web es tan solo una parte del diseño de la misma, ya que, además, hay que considerar un conjunto más o menos extenso de condicionantes que van a limitar la libre creatividad del diseñador.

En primer lugar, las páginas web se deben descargar de un servidor web remoto por medio de Internet, por lo que el ancho de banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualización. La mayoría de los usuarios se conectan todavía a Internet con un módem, con velocidades teóricas de 56 Kbps, aunque en realizada no superar los 10-15 Kbps en el mejor de los casos.

Los elementos gráficos, ya tengan formato de mapa de bits o vectorial, suelen traducirse en ficheros de bastante peso, dependiendo del tamaño de la imagen y del formato en que se guarde. Esto origina que las páginas que contienen en su diseño muchas imágenes, o pocas pero de gran tamaño, tarden mucho tiempo en ser descargadas desde el servidor web y presentadas en la ventana del ordenador del usuario, que no suele ser muy paciente.

Estudios realizados demuestran que el tiempo máximo de aguante de una persona que espera la descarga de una página suele ser de unos 10 segundos, pasados los cuales prefiere abandonar nuestro sitio web y buscar otro más rápido. Por lo tanto, el número de elementos gráficos que podemos introducir en una página web queda bastante limitado, teniendo que buscar alternativas mediante el uso imaginativo de fuentes y colores.

Otro aspecto a tener en cuenta es que las páginas web son visualizadas en unas aplicaciones específicas, los navegadores web, que imponen grandes limitaciones al diseño de las mismas. La ventana de un navegador es eminentemente rectangular, con unas medidas concretas (dadas por la resolución empleada por el usuario en su monitor) y con unas capacidades de interpretación de colores que varían mucho según el ordenador usado, el sistema operativo, el monitor y la tarjeta gráfica.

Estos factores imponen fuertes limitaciones al diseñador web, que debe buscar siempre que sus páginas puedan ser visualizadas correctamente por el mayor número de usuarios.

Diseño de un formulario web
Formulario web

En segundo lugar, los navegadores existentes en el mercado tienen una forma particular de presentar el contenido de las páginas. Internet Explorer interpreta en muchas ocasiones una página web de forma muy diferente a Netscape Navigator 4x, y este a su vez lo hace de forma diferente a Netscape Navigator 6x.

Para intentar solventar estas diferencias, el diseñador web debe trabajar a la vez con varios navegadores, diseñando sus páginas de tal forma que la interpretación de ellas sea similar en todos, lo que impone nuevas limitaciones al diseño.

Por otra parte, una página web no es un diseño gráfico estático, sino que contiene diferentes elementos que tienen la capacidad de interaccionar con el usuario, como menús de navegación, enlaces, formularios, etc. Además, una página aislada no existe, sino que forma parte de un conjunto de páginas inter-relacionadas entre sí (el sitio web), que deben presentarse al usuario con el mismo “estilo”, aunque su funcionalidad sea muy diferente.

A esto hay que sumar que las páginas diseñadas deben luego construirse en un lenguaje específico, el HTML, que por sí mismo es muy limitado, lo que hace que el diseñador web tenga que estar siempre pensando si la interfase que está diseñando gráficamente va a poder ser luego construida.

Por último, una página web suele ocultar, en la mayoría de los casos, una serie de procesos complejos que se ejecutan sin que el usuario sea consciente de ellos (ejecución de códigos de lenguajes de programación tanto en cliente como en servidor, acceso a bases de datos en servidores remotos, etc.), procesos que añaden tiempo a la presentación de las páginas y que muchas veces suelen afectar de forma importante al diseño de estas, ya que el diseñador no sabe de antemano qué contenidos concretos van a tener.

Resumiendo: el diseño web va más allá del diseño gráfico, al influir en él multitud de factores que limitan las posibilidades del diseño, pero también otros que añaden interactividad y funcionalidades a una página web que no tiene un cartel, folleto o revista.

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...

Manual