diseño de iconos y pictogramasGonzález-Miranda&Quindós

' Los iconos y pictogramas son signos que informan sin palabras. Son

(,/')

-e e

un simple golpe de vista. La portada de esta publicación sintetiza la

::J

idea que sirve de hilo conductor para sus diferentes apartados; un

a

mundo donde la comunicación no verbal tiene sentido y es eficaz

e

para acceder al instante a grupos de contenidos o para superar barreras idiomáticas y culturales.

re

re

1-

>

Este libro contiene una introducción al estudio y diseño de los

re -e e re 1-

iconos y pictogramas, en general, y de los sistemas de pictogramas

¿ 1

de origen tipográfico, en particular. Propone un modelo o metodo-

N Q) --'

logía para resolver este tipo de proyectos. Diseñar un pictograma o

-re

una familia de pictogramas es una experiencia que requiere rigor

o

metodológico y habilidades técnicas que sólo se aprenden con la práctica. Se aprenden abordando de principio a fin proyectos de diferente complejidad y naturaleza. Como en una orquesta, para

N

e

~

re e

~ LJ.J

lograr un conjunto armonizado, es imprescindible comprender el concepto de sistematización y saber aplicarlo en una práctica ordenada. El diseñador tiene que organizar, clasificar y estructurar los elementos integrantes de la serie, ideando un orden que le permita normalizar su proceso constructivo. Tiene que definir un sistema gráfico planteando un conjunto limitado de formas esenciales, que configurarán cada signo y todos a la vez. Estas formas estarán interrelacionadas entre sí mediante una serie de reglas sintácticas de construcción gráfica. Una vez conformados todos los signos de la serie, ajustando proporciones y realizando ajustes ópticos, obtendremos la necesaria cohesión formal en el conjunto. Pero lo más interesante es que este sistema constructivo y este modo ordenado de actuar, nos permitirán configurar cualquier otro icono o pictograma que sea necesario añadir al sistema, para satisfacer nuevas necesidades de comunicación. Diseño de iconos y pictogramas pretende acompañar al estudiante como guía docente y ser de utilidad al diseñador profesional como material de consulta, en ese proceso de indagación gráfica, donde es necesario concebir signos de forma depurada y sobria, cuya Universidad del País Vasco

Euskal Herriko Unibertsitatea

función informativa es primordial para su destinatario.

DISEÑO DE ICONOS Y PICTOGRAMAS

•O

portadores de un significado que reconocemos y decodificamos con

V)

<(

~

<(

a::

~

o

1-

u 0..

>V)

o z o u

<

Elena Gonzátez-Miranda y Tania Quindós

-

DISENO DE ICONOS Y PICTOGRAMAS Elena González-Miranda y Tania Quindós

Universidad del País Vasco


>

«El viento era viento y la piedra piedra Y eso enteramente me bastaba» Sophia de Mello Breyner

© Elena González-Miranda y Tania Quindós, 2014 © Universidad del País Vasco/ Euskal Herriko Unibertsitatea Servicio Editorial!Argitalpen Zerbitzua www.ehu.es/ argitalpenak Diseño de cubierta y concepto gráfico: Tania Quindós Iconos y pictogramas: Tania Quindós y Elena González-Miranda Tipografía utilizada: Asap (Pablo Cosgaya, 2012) ISBN: 978-84-9860-916-S Depósito legal/Lege gordailua: Bl-6-2014 Todos los derechos reservados. No se permite la reproducción total o parcial de este libro, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier medio, sea este electrónico, mecánico, por fotocopia, por grabación u otros métodos, sin el permiso previo por escrito del Servicio Editorial de la Universidad del País Vasco/ Euskal Herriko Unibertsitatea.

Universidad del País Vasco


ÍNDICE

Presentación

1

2

ICONOS Y PICTOGRAMAS

15

Semiótica y pictogramas

23

Principios básicos

33

EL PROCESO DE DISEÑO Planteamiento del proyecto

3

4

~

39 46

Definición del referente

56

DESARROLLO DE ICONOS Y PICTOGRAMAS

59

Procedimientos sintácticos

66

La retícula

72

Caso práctico: «Precaución, animales salvajes»

78

ICONOS Y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO

81

Análisis de la tipografía de origen

86

La estructura tipo-pictográfica

95

Caso práctico: Pictogramas de origen tipográfico para Avenir y Helvetica

99

Caso práctico: Pictogramas para la tipografía Asap

115

5

DIGITALIZACIÓN Y AJUSTES ÓPTICOS

119

6

VALORACIÓN

131

7

REFERENCIAS BIBLIOGRÁFICAS

137

PRESENTACIÓN Este libro trata del diseño de los signos que informan sin palabras. Su portada sintetiza la idea que sirve de hilo conductor para los diferentes apartados que lo componen. Un mundo donde la comunicación no verbal tiene sentido y es eficaz, para

acc~der al

instante a grupos de contenidos o para superar barreras idiomáti cas y culturales. En la búsqueda de este objetivo, se hace cada vez más necesaria la producción de enunciados no alfabéticos con significado propio; iconos para la interfaz de los productos y servicios ~ de las nuevas tecnologías o pictogramas para la orientación de las personas en entornos señaléticos. Nu estro libro ha querido seguir la estela de aquellas publicaciones que explican el proceso de diseño de los proyectos, que muestran los caminos transitados por otros diseñadores para concebir y desarrollar ideas. Estos autores proporcionan información muy valiosa para nuestra profesión, ya que nos transmiten su proceso de aprendizaje. En estos proyectos se explican los principios básicos y el enfoque (es esencial no equivocarse en el inicio del camino), las propuestas previas, el antes y el después de la toma de decisiones, el desarrollo y los detalles hasta llegar al resultado final. Diseño de iconos y pictogramas pretende acompañar al estudiante co mo guía docente y ser de utilidad al diseñador profesional como material de consulta, en ese proceso de indagación gráfica, donde es necesario concebir signos de forma depurada y sobria, cuya fun ción informativa es primordial para su destinatario.

PRESENTACIÓN


Diseñar un pictograma o una familia de pictogramas es una expe-

Los contenidos. Este libro contiene una introducción al estudio y

riencia que requiere rigor metodológico y habilidades técnicas

diseño de los sistemas de iconos y pictogramas. Propone un modelo

que sólo se aprenden con la práctica. Se aprenden abordando de

o metodología para resolver este tipo de proyectos. También hemos

principio a fin proyectos de diferente complejidad y naturaleza.

profundizado en los aspectos sintácticos de optimización formal de

Proyectos en los que se parte de una necesidad para plantear

un pictograma, ya que con la Sintaxis accedemos a lo más íntimo y

el enfoque conceptual; en los que debemos configurar la forma

esencial del objeto gráfico: se accede a la belleza de las soluciones.

precisa de cada signo partiendo de referentes adecuados, sin

Los apartados más importantes engloban el desarrollo de familias

olvidar la creación de conexiones entre ellos, constantes visua-

de iconos y pictogramas, en general, y el diseño de sistemas de

les que harán que sean apreciados como de la misma familia .

pictogramas de origen tipográfico, en particular.

Tampoco debemos olvidar que estos mensajes tienen que llegar a cualquier tipo de receptor para que los perciba, los interprete

A lo largo de la publicación, hemos incluido casos de estudio

y los decodifique sin ambigüedad en un entorno concreto.

y ejemplos didácticos enmarcados en diferentes contextos, desarrollados expresamente para explicar conceptos, como los

Como en una orquesta, para lograr un conjunto armonizado, es

que ilustran la aplicación de la retícula o el diseño de iconds y

imprescindible comprender el concepto de sistematización y saber

pictogramas a partir de tipografías concretas.

aplicarlo en una práctica ordenada. El diseñador tiene que organizar, clasificar y estructurar los integrantes de la serie, ideando

En los últimos apartados exponemos diversas recomendacio-

un orden que le permita normalizar su proceso constructivo. Tiene

nes para comprobar si los signos están bien concebidos y bien

que definir un sistema gráfico planteando un conjunto limitado

ejecutados. Planteamos preguntas y criterios que nos ayuden a

de formas esenciales, que configurarán cada signo y todos a la

valorar la dimensión semántica, sintáctica y pragmática de los pic-

vez. Estas formas estarán interrelacionadas entre sí mediante

togra mas. Estas recomendaciones están basadas en la Semiótica

una serie de reglas sintácticas de construcción gráfica. Una vez

y en la rigurosa investigación para la familia de los pictogramas

conformados todos los signos de la serie, ajustando proporciones

estand arizados por el American lnstitute of Graphic Arts (AlGA).

y realizando ajustes ópticos, obtendremos la necesaria cohesión

Por último, incluimos a los autores que, a nuestro entender, han

formal en el conjunto. Pero lo más interesante es que este sistema

sid o y son relevantes en el tema tratado en este libro así como las

constructivo y este modo ordenado de actuar, nos permitirán con-

referencias de Internet, fuentes que complementan y construyen

figurar cualquier otro icono o pictograma que sea necesario añadir

el amplio abanico de conocimientos de este área.

al sistema, para satisfacer nuevas necesidades de comunicación.

Las imágenes. Hemos desarrollado un amplio repertorio de imágenes que ilustran cada etapa de diseño y permiten visualizar detalles concretos, como la digitalización de un pictograma o la apli cación de los ajustes ópticos. El Diseño de Información es cru cial para comprender procesos o conceptos, por lo que hemos elab orado varios esquemas y diagramas que esperamos sinteticen y aclaren los contenidos.

La consulta. Esta publicación está organizada para adaptarse a la persona que consulta. De esta manera, el lector puede trazar su prop io recorrido en la búsqueda de una solución a cuestiones

lO

11

PRESENTACIÓN

DISE ÑO DE ICONOS Y PICTOGRAMAS

generales o puntuales, según el planteamiento y los objetivos de

Agradecimientos

su proyecto. Como ayuda didáctica, hemos diseñado una serie de iconos que señalan diferentes tipos de información:

Deseamos dedica r nuestro más profundo agradecimiento a todos aquellos que de alguna forma, directa o indirecta, han contribuido

Este icono indica que podemos ampliar o complementar la información

OJ

con sus ideas y consejos a que este libro se haga realidad. Son

mediante un enlace a una dirección de Internet.

muchos los apoyos que hemos recibido de amigos, compañeros y

El libro abierto indica una referencia bibliográfica con una breve reseña

familiares; les estamos agradecidas por su creciente interés en el

sobre su interés en el tema tratado.

•

La flecha hacia la izquierda indica una página anterior en la que

podemos localizar información que es conveniente revisar o recordar. La flecha hacia la derecha indica una página posterior que extiende el

contenido que estamos leyendo o dirige el interés a un caso de estudio.

tema y su contribución paralela en la preparación de este libro. Gracias a todos. Queremos agradecer especialmente a Pablo Cosgaya y Marcela Romero su inestimable ayuda y generosidad, en las productivas sesiones de asesoría e intercambio de opiniones, a través del

re~

Elena González-Miranda (QMG, 1962) aporta su experiencia en la

océano. A Elena Veguillas, por sus acertados consejos en la

enseñanza y el diseño de pictogramas. Es diseñadora gráfica y profe-

sión del texto y la maquetación. Deseamos que pronto podamos

sora en el Grado en Creación y Diseño de la Facultad de Bellas Artes,

compartir una deliciosa sopa.

de la Universidad del País Vasco/Euskal Herriko Unibertsitatea (UPV/EHU). Ha impartido asignaturas sobre Metodología del

Sin olvidar a Guillermo, que durante la revisión de los textos ha

proyecto gráfico, Envase y embalaje y Señalética, durante más

descubierto que los pictogramas son interesantes, aunque no se

de veinticinco años, en la especialidad de Diseño Gráfico de la

miren a través del microscopio. A Sergio por ejercer de chef de

facultad. Ha colaborado en equipos de diseño e investigación para

tres estrellas durante estos meses de arduo trabajo; y a lker, por su

diversas entidades como el DZ-Centro de Diseño de la Diputación

paciencia y comprensión durante la elaboración de estas páginas.

Foral (ahora Beaz, Agencia de Innovación de Bizkaia), Metro Bilbao, programa Lingua de la Unión Europea, Enkartur y UPV/EHU.

Nos es indispensable expresar tamb ién nuestra gratitud a todos

http://elenamiranda-bilbao.blogspot.com.es/

y cada uno de los estudiantes que han pasado por las aulas de

@ElenaMira_Anda

la especialidad de Diseño Gráfico de nuestra universidad. El aula es un lugar donde tanto los alumnos como los profesores aprenden;

Tania Quindós (Bilbao, 1986) aporta una mirada práctica, basada

este intercambio de experiencias es una fuente inagotable

en los ensayos con pictogramas y tipografía realizados para el

de conocimiento.

desarrollo de su tesis doctoral Procesos de configuración simbiótica entre pictogramas y tipografía. Es licenciada en Bellas Artes por la

Por último, deseamos dar las gracias a la Universidad del País

Universidad del País Vasco/Euskal Herriko Unibertsitatea (UPV/

Vasco/Euskal Herriko Unibertsitatea (UPV/EHU), nuestra alma

EHU), donde se especializó en Diseño Gráfico. De forma paralela,

mater, por la concesión del Proyecto de Investigación EHUll/ 29 y

realiza proyectos profesionales y personales en los que conviven

de la beca de investigación de Tania Quindós, para la realización

y confluyen los territorios de la tipografía, ellettering, la caligrafía

de su Tesis doctoral sobre pictogramas y tipografía.

o la poesía visual. http://www.behance.net/taniaquindos @TeQuinDos

En Getxo, noviembre de 2013

13

ICONOS Y PICTOGRAMAS Los iconos, símbolos y pictogramas se utilizan para comunicar información sin necesidad de palabras. Son signos portadores de significado que reconocemos y decodificamos con un simple golpe de vista. Indican conceptos, acciones o servicios de interés para~l usuario de diferentes culturas e idiomas. «Un pictograma es un signo icónico que representa las cualidades de lo que es representado y, mediante la abstracción,

1 Herbert W. Kapitzki. En

adquiere calidad de signo» 1

Abdullah y Hübner (2002, p. 10)

Los sistemas de iconos y pictogramas son valiosas herramientas

Icono: Del griego eikon (imagen). Signo que mantiene una relación de semejanza con el objeto representado.

de comunicación visual en una amplia variedad de aplicaciones. Su uso comprende áreas como los Sistemas de Señalización y Señalética Corporativa en grandes edificios y recintos como

Pictograma: Del latín pictus,

museos, hospitales o transportes públicos. En el área de Diseño de In formación los encontramos en instrucciones de aparatos o en

de figuras o símbolos.

diagramas, en el Diseño de Producto en electrodomésticos, en el salpicadero de vehículos o en herramientas especializadas. En el Di seño de Interfaz de Usuario tenemos ejemplos en Internet y en las diversas aplicaciones para los nuevos dispositivos electrónicos.

rn

(pintado), y grama (escrito o gráfico). Signo de la escritura

Símbolo: Del griego symbolon, (signo, contraseña). Imagen o figura con que se representa un concepto moral o intelectual, por analogía o por convención .

Aicher, O. y Krampen, M. (1979) Sistemas de signos en la comunicación visual. Barcelona: Gustavo Gili. En este libro, los autores llevaron a cabo un amplio estudio de investigación documental reun iendo distintos tipos de signos junto con sus códigos, de diversos campos de conocimiento: Códigos para la ciencia, códigos de información pública, códigos técnicos como el sistema de signos de la electrónica, automóviles, botánica, cartografía, símbolos arquitectónicos o el sistema Bra ille.

17


l . ICONOS Y PICTOGRAMAS

Las raíces de los pictogramas son muy antiguas. Si profundizamos

Algunos ideogramas milenarios, en un proceso más complejo,

en la historia podemos comprobar que estaban presentes en el

muestran representaciones abstractas cuyo significado tuvo que ser

mundo antes que las letras. Miles de idiomas y escrituras han evo-

acordado y aprendido. En estos casos, si conocemos el significado

lucionado desde un inicio pictográfico de dibujos esquemáticos

del ideograma base, pueden deducirse los demás con facilidad .4

hasta su abstracción en forma de representación de sonidos, como

En la actualidad, también hemos compuesto signos que se articu-

4 Liungman (1974, p. 517)

se observa en los alfabetos occidentales. Los signos logográficos

lan como «sintagmas visuales», en cierta medida con este mismo

iniciales eran pictogramas que representaban seres vivos, objetos

concepto de construcción semántica y sintáctica, compuestos por

o acciones. Se podría recorrer la historia dé la Humanidad a través

signos abstractos e icónicos que son comprendidos a nivel mundial.

5 La Semantogra fía, con signos diseñados por Charles Bliss en los años 1940 o la creación de la teoría de los

de los múltiples sistemas de comunicación visual que han existido:

Glyphs por Margaret Mead y

desde la llamada protoescritura, hasta el desarrollo de las inscrip-

®®®

ciones cuneiformes en la antigua Mesopotamia o los jeroglíficos y 2 Aicher (2004); Frutiger

los ideogramas en la cultura egipcia .2

(1981); Robinson (1995)

Un paso en la evolución de estos signos se puede ejemplificar con

Ideogramas: cielo, luz, lluvia y noche

Pictogramas actuales de prohibición

los pictogramas sumerios primitivos o los jeroglíficos egipcios, que eran representaciones figurativas de objetos de la época, 3 Frutiger (1981, pp. 85 y 87)

animales o personas, cuyo significado era simple y

directo.3

Si

observamos los pictogramas estandarizados actuales, vemos que

Uno de estos avances se dirigió a desa rrollar sistemas de comu-

~ /Jll7 V ~ ~t CJ

lllil

~

L

*

-~

f!)

C!:l.

f)

1?

~

tl1

oc.

\>

~i

tli o• ·~ '1

t"'

(iijJ

r\ + (;) ~ - 1m e

•

~

Pictogramas primitivos sumerios: Pez, ave, orejas, mano, fuego,

Jeroglíficos egipcios: Ojo, arado, sandalia, montaña, pan, ángulo,

Pictogramas de AlGA: Aseos, aseo/ acceso para minusválidos, ascensor,

puerta, estaca, cereal, huerto,

ciudades, plantas, atar, región ,

sala de espera, agua potable,

ciudad, lado y divinidad .

flauta y golpear.

aeropuerto, autobuses, estación de trenes, helipuerto, puerto, compras y teléfono .

un lenguaje icónico que trata de transcribir a textos visuales

lcon-language

lsotype http://www.gerdarntz.org/isotype

Arntz desarrollaron el proyecto lsotype (lnternational System of Typographic Picture Education) con el objetivo de comunicar in formación a través de un sencillo medio no-alfabético. Una investigación fundamental en la morfología y el diseño de los pictogramas fue la llevada a cabo por el American lnstitute of Graphic Arts (AlGA) y el Department of Transportation (DOT).

i t tli

~ '-G

:a + ~ ~

r\ 6i i!f ~ ~ J.

r Á~ 111 + .., im (: 1 -~ ~ ~ ¿~Y'' ;;) ~;)~~ ~

18

Jochen Gros ha desarrollado

http://www.i con-language.com

En 1924, el filósofo y educador Otto Neurath y el ilustrador Gerd

~

1

adjeíivos formando sintagmas no verbales comp letos.

entendemos hoy en día.

ti cas de los lenguajes fonográficos y de la escritura alfabética.5

~

un lenguaje pictográfico. Recientemente, el profesor

Incluye artículos, pronombres y distingue géneros, verbos o

substancial en los sistemas de signos no verbales, tal como los

nicación con carácter universal, para salvar las barreras idiomá-

-*
inspirados en la posib ilidad de comun icarse a través de

el lenguaje fonográfico .

Ha sido durante el pasado siglo XX cuando se produjo un avance

aún se conserva este sencillo proceso de interpretación de los mensajes, pero adaptado a la cultura material de nuestros días.

Rudolf Modley, son ejemplos

(7)

==

4~ p 19

iií / P

® ® ~®



Este estudio fue un exhaustivo proceso de estandarización de los

Además de las fuentes de conocimiento mencionadas, existen

símbolos destinados a orientar a los pasajeros en edificios del área

otros recursos donde podemos localizar los pictogramas estanda-

de transportes. Este sistema, ampliamente difundido, se extendió

rizados que se aplican actualmente en aeropuertos, terminales de

por todo el mundo y hoy en día permanece vigente en muchos

autobuses, centros comerciales y recintos de ocio.

aeropuertos. Este proyecto es un ejemplo incomparable de investigación teórico-práctica en este área.

m

m

Hora, M. (1996) Oficial Signs & /cons 2 New York: Ultimate Symbol lnc.

American lnstitute of Graphic Arts (AlGA) (1981) Símbolos de señalización.

Gran compendio de signos clasificados según diferentes normativas y grandes

Barcelona: Gustavo Gili .

áreas temáticas: Autopistas (MUTCD) (UNCRT), zonas recreativas (SEGD), transportes (AIGA!DOT), seguridad (DOT/ ANSI/ISO), electrónica, mecánica,

Publicación sobre el proceso Llevado a cabo para La estandarización de

meteorología y Braille (ADA).

SO pictogramas, donde se evalúa un amplio abanico de símbolos según Las

tres dimensiones del signo: semántica, sintáctica y pragmática. EL último apartado recoge pautas para determinar La Legibilidad, Los tamaños, Las

Familia de AIGA/ DOT (50 pictogramas)

distancias, Las flechas y Los formatos.

http://www.aiga.org/sym~fl-signs/

Japan Sign Design Association (150 signos) http://www.sign.or.jp/english/index.html 6 En Smitshuijzen

Los Juegos Olímpicos nos muestran sistemas de pictogramas con

(2007, pp. 331-337), Signage

diversos recursos y niveles de abstracción, así como con connota-

Design Manual se pueden comparar fácilmente todos Los pictogramas de Los Juegos Olímpicos con sus

lnternational Standard Organization (ISO) http://www.iso.org/ iso/ home.html

ciones variadas como los que tratan de captar La cultura visual del Lugar de celebración. La primera serie fue diseñada en 1948 para 6

los Juegos de Verano de Londres. En 1972, Otl Aicher introdujo

respectivos diseñadores.

ERCO. Pictogramas de Otl Aicher http://www.piktogramm.de/ pictoserver/ homepage/ homepage/ start/de/ de_start.php

una innovación conceptual significativa a nivel sintáctico, cuando planteó una retícula pictográfica como pauta modular para el diseño de los pictogramas de las Olimpiadas de Munich. La simbiosis de los pictogramas con la tipografía. Hasta finales del Estudios a mano alzada

siglo XX, las necesidades informativas parecían estar cubiertas con

sobre la retícula, para los

los pictogramas estandarizados que había propuesto AlGA. En este

pictogramas de los Juegos Olímpicos de Munich (Otl

proceso de estandarización conceptual, formal y universal parecía

Aicher, 1972)

da rse por zanjada la experimentación morfológica, funcional y estética. Sin embargo, en el momento actual, encontramos varios proyectos que se basan en la articulación de tipografías con

&

pictogramas. Parten de unidades formales mínimas y estructuras de construcción básicas, con las que se van componiendo los dos gru pos de signos. Así mismo, en las fuentes tipográficas encontramos signos no alfabéticos elaborados en base a nuevas necesidad es comunicativas como la flecha, los signos «ampersand» y

@

«a rroba» o los símbolos monetarios. La presencia de estos signos

€f:$

dem uestra que existe una clara intención de reunir pictogramas y tipografía bajo un mismo patrón morfológico. Un ejemplo es el

20

21



sistema de pictogramas y elementos gráficos en base a la tipografía Office para el Museum of Modern Art de Queens (MoMA QNS), 7 En Uebele (2007 pp. 178-181)

diseñado por BaseNYC en 2002?

Semiótica y pictogramas Durante el proceso de diseño de un pictograma podemos aplicar el lenguaje que se utiliza para hablar de los signos y estudiar la

http:// www.airport-cgn .de

Otro ejemplo de este tipo de creación simbiótica es la Identidad

disciplina conocida en EE UU como Semiótica y en Europa como

Corporativa del aeropuerto de Colonia-Bonn, diseñado por lnté-

Semiología. La Semiología (o Semiótica) tiene su origen

gral Ruedi Baur en 2003. En este proyecto, los pictogramas son

gico en el griego, semeion, que significa signo y lagos, que significa

un elemento esencial de emisión de identidad y de personalidad

estudio, tratado, ciencia . Es un campo de conocimiento que

corporativa para el aeropuerto.

eti~o ló

estudia los sistemas de signos que permiten que las personas se comuniquen entre sí. Trata de averiguar por qué y cómo una letra, un conjunto de palabras, un objeto, una fotografía, un símbolo matemático, un gesto con las manos, un color o una serie de pict ogramas, adquieren significado en un entorno concreto y en una

.. I "_ '_

~ :5 '1

t'

-

:¡~/" .(.~ _.e ~

.!)

_

determinada sociedad. A través de esta disciplina comprendemos la manera en que asignamos un significado y le damos sentido a aquello que percibimos. Esta disciplina nos ayuda a valorar si una forma es pertinente en relación a lo que quiere dar a entender (si gnificar) y a comprobar que los mensajes de un sistema de pi ctogramas van a ser comprendidos e interpretados de manera unívoca por sus destinatarios. «La Semiótica estudia todos los procesos culturales (es decir, aquellos en los que entran en juego agentes humanos que se ponen en contacto sirviéndose de convenciones sociales) como procesos de comunicación» 8

Estudios a mano alzada de los pictogramas del MoMA QNS y del aeropuerto de Colonia Bonn.

8 Eco (1989, p. 27) 9 Abril (2007, p. 28)

A lo largo de los siglos, los filósofos han tratado de catalogar «los modos generales de presentarse algo a la conciencia». 9 Fueron Ferdinard de Saussure (1875-1913, Semiología) y Charles Sanders Peirce (1839-1914, Semiótica) quienes comenzaron a sentar las ba ses de la disciplina.

22

23

l. ICONOS Y PICTOGRAMAS


DJ

Ferdinard de Saussure (1875-1913). Saussure era Lingüista y sus teorías se centraban en modelos lingüísticos (como por ejemplo,

HALL, S. (2007) Esto significa esto. Esto significa aquello. Semiótica: guía de los signos y su significado. Barcelona: Art Blume, S. L. En esta publicación se explican, de manera sencilla, 75 conceptos semióticos

las palabras como signos). Para él, los signos expresan ideas de

clave. Cada concepto está acompañado de una pregunta y de ejemplos

un emisor que son comunicadas a un destinatario, a través de un

visuales que nos ayudan a comprender qué es la comunicación, cómo funciona y por qué es tan importante.

significante y un significado. El significante de un signo lingüís~ico es la imagen que tenemos en nuestra mente de una cadena de sonidos determinada. Esa imagen

Charles Sanders Peirce (1839-1914). El modelo de Peirce puede

fónica nos permite pensar palabras sin pronunciarlas.

adaptarse también a los signos naturales que no tienen emisor, como la forma de las nubes o un dolor de cabeza. En su represen-

El significado de un signo lingüístico es el concepto o la imagen

tación del signo hay un interprentante, un representamen (signo)

que asociamos en nuestra mente a un significante concreto.

y un objeto (referente). Para él, la semiosis es un proceso triádico de inferencia (que remite a algo) mediante el cual, a un signo (llamado representamen) se le atribuye un objeto.

SIGNIFICANTE

~

Para estos y otros autores, la persona está determinada por el lenguaje verbal, ya que es a través de las palabras como

p-e-r-r-o

explica el mundo.

SIGNIFICADO

Charles Morris (1901-1979). Morris dirigió su atención hacia los símbolos debido a ciertos problemas de cálculo que tuvo en un

Un hablante de castellano asociará esta imagen a la cadena de sonidos p-e-r-r-o.

curso preuniversitario, interesándose por el lenguaje de la ciencia

y los signos específicos que ésta utiliza.

Un mismo significante puede dar lugar a diferentes significados:

«El proceso en el que algo funciona como signo puede denominarse semiosis [... ].Este proceso implica tres (o

SIGNIFICANTE

SIGNIFICADO

cuatro) factores: lo que actúa como signo, aquello a lo que el signo alude, y el efecto que produce en determinado

Perro

significa

Animal

Perro

significa

Mascota

Perro

significa

Fidelidad

intérprete en virtud del cual la cosa en cuestión es un signo para él. Estos tres componentes de la semiosis pueden denominarse, respectivamente vehículo sígnico, el designatum, y el interpretante; el interprete podría considerarse un cuarto factor. Estos términos explicitan los factores

Diferentes significantes dan lugar a un mismo significado:

SIGNIFICADO

SIGNIFICANTE Perro

significa

Dog

significa

Txakurra

significa

24

implícitos en la afirmación común de que un signo alude a algo para alguien» 10

10 Morris (1985, p 27)

25



DESIGNATUM

Para Morris, «designa» y «denota» son términos semánticos,

12 Morris (1985, p. 34)

«implica» es un término sintáctico y «expresa», un término pragmático. 12 Por ejemplo, el pictograma de «no fumar» denota un cigarro, humo y un círculo rojo con una banda atravesada de izquierda a derecha (dimensión semántica). Por otra parte, expresa una prohibición o imposición en el comportamiento del receptor (dimensión pragmática). Por último, la dimensión sintáctica revela 1NTERPRETANTE

VEHÍCULO SÍGNICO

la forma que implica el signo.

13 En Abril (2007, p. 32) 14 Morris (1985, pp . 59-61)

La categorización de los signos. Se han definido diversas tipologías Semiosis: proceso de

INTÉRPRETE

transferencia de significado o acto de significar.

o categorizaciones de signos en función de diferentes criterios. Por ejemplo, los signos naturales (humo, fiebre, trueno) y los

El autor define «Signo» como un vehículo o un puente hacia el

artificiales (señales de tráfico). O los signos según la forma en que

sentido. Pero «algo es un signo si, y sólo si, algún intérprete lo con-

se perciben a través de los sentidos, como visuales, acústicos

sidera signo de algo». Este signo puede ser analizado valorando

táctiles. Peirce hizo una primera clasificación de los iconos:

~

tres dimensiones interconectadas. La dimensión semántica de la

11 Morris (1985, pp. 28-35)

semiosis «trata de las relaciones de los signos con los objetos a los

«Las representaciones por semejanza son mas bien

que son aplicables». La dimensión pragmática estudia «la relación

hipoiconos según la terminología de Peirce. Quién también

de los signos con sus intérpretes». Finalmente, la dimensión sintác-

diferenció como subclases de los iconos, las imágenes en

tica trata de la «relación formal de los signos entre sí»Y

sentido estricto, los diagramas, que representan relaciones y las metáforas» 13 Charles Morris incorpora las tres categorías de la relación del signo co n su objeto, establecidas por Peirce: icono, símbolo e índice. 14 El signo como Icono. Un icono es un signo que mantiene con su

SEMÁNTICA RELACIÓN SIGNO- SIGNIFICADO

<
En el diagrama podemos

obj eto una relación de semejanza «en algunos aspectos»; 15 esta relación se establece desde los patrones de similitud propios de un determinado contexto. El icono adquiere su identidad de

observar cómo las tres dimensiones están interconectadas: la Semántica estudia el contexto en que aparece el signo y su significado, la Pragmática trata de la función del signo y su interpretación por el usuario, y la Sintáctica

aqu ello a lo que representa. Grado de iconicidad. El grado de semejanza o correspondencia de lo representado con el original o referente se llama grado de ico-

considera el modo en que se construyen, se organizan y se interconectan los signos formando sistemas. El estudio de esta dimensión del signo recibe el nombre de Sintaxis.

PRAGMÁTICA

SINTÁCTICA

RELACIÓN SIGNO- USUARIO

RELACIÓN DE UN SIGNO

<
CON OTRO SIGNO <
nicidad. El grado máximo sería cualquier percepción de la realidad obtenida a través de la visión. Una fotografía también sería una repr esentación analógica que apenas necesitaría descripción con pa labras ya que añadir el código de la lengua sería redundante. El gra do cero sería la representación no figurativa, la descripción de palabras normalizadas o fórmulas algebraicas.

26

27

15 Morris especifica que un signo icónico es semejante en algunos aspectos a lo que denota. Umberto Eco, en La estructura ausente (1989, p. 194) se pregunta si las propiedades que el signo icónico tiene en común con el objeto ¿son las que se ven o las que se saben? <

Escala de iconicidad decreciente basada en Villafañe (1985, pp. 40-43)

GRADO

NIVEL DE


FUNCIÓN

EJEMPLOS

PRAGMÁTICA

REALIDAD

11

Imagen natural

Cualquier percepción de La realidad obtenida directamente a través

aunque la utilización de este tipo de imágenes puede ser adecuada para señalar algún lugar en un contexto determinado. Por

Reconocimiento

ejemplo, no es lo mismo encontrar una fotografía en sepia de una señora, señalando los aseos de un bar ambientado en el siglo XXI,

de La visión

10

Un pictograma no puede ser una fotografía ni una ilustración,

Modelo

que encontrarla en un polideportivo, donde el receptor quedaría

tridimensional

desconcertado en la interpretación de la imagen.

a escala

9

Imagen de registro

El signo como Símbolo. El símbolo es un signo en el que la

Holograma

rela ción entre significante y significado es arbitraria; es decir, que

estereoscópico

un grupo de personas tienen que ponerse de acuerdo en lo que representa. El símbolo mantiene con su objeto una relación esta8

Fotografía en color

ble cida por una convención. Para que un símbolo se comprenda, el receptor ha tenido que aprender su significado. Los Descripción

7

Fotografía en blanco y negro

Artística

símbolo~

pu eden representar hechos complejos o conceptos abstractos, com o por ejemplo, el sonido de una letra del alfabeto, la palabra pictograma o la señal de «prohibido el paso».

6

Pintura realista

El signo como Índice. El signo como índice es un indicador de

Las meninas de Velázquez

aqu ello que señala. Los índices remiten a aquello que señalan y manti enen con sus objetos una conexión real y directa. Se describe - - - + - - - - - - - - - - + - - - - - - - - - - - 1 Artística Guernica de Picasso 5 Representación figurativa no realista

4

3

Pictograma

Esquemas motivados

•

un a pista de que hay fuego, un indicio de que, en la zona donde vem os el humo, hay un incendio. El olor del jazmín es un indicio de que encontraremos esta planta cerca. El índice tiene sentido

•

'' ~

com o un apuntador o un indicio de lo que designa . El humo es

y adquiere su significado en el entorno en el que está situado. En esta categoría podemos incluir por ejemplo el pictograma de «extintor» que localizaremos detrás de una puerta, una flecha o el dedo que apunta a un objeto. Información

«Estas categorías no son excluyentes. Puesto que los signos 2

no son cosas, sino relaciones o funciones[ ... ] cada signo es

Esquemas arbitrarios

en alguna medida icónico, indicial y simbólico. Solo en un momento determinado y por relación a la práctica semió-

1

Representación no figurativa

Pintura abstracta

tica de que se trate, se podrá establecer el predominio de una de esas funciones» 16

16 Abril (2007, p. 33)

29


~

ÍNDICE

SÍMBOLO 6

Denotación y connotación. En los años 1960, Roland Barthes,

ICONO

ICONO

ICONO

SÍMBOLO


ÍNDICE

SÍMBOLO

6

continuando las ideas de Saussure y Peirce, aplica conceptos lingüísticos a otros sistemas visuales con dos niveles de significación: ÍNDICE

denotación y connotación. Denotación : lo que se representa . El primer plano de significación denotativa es directo. Se refiere a lo que se representa, a la reali-

•

e=

'

e=

=

r

dad física del objeto significado. Son los elementos explícitos de la imagen o su lectura literal. Una fotografía de un fuego representa el fuego. Aunque obtengamos varias fotografías diferentes del fuego, todas las imágenes denotarán los mismos significados.

e=

Connotación: cómo se representa. El plano connotativo se refiere a cómo se representa ese fuego. Los diferentes recursos gráficos1 o la manera de sacar la fotografía expresarán diferentes connotaciones según el trasfondo de la persona que observa la imagen. Un ejemplo que hemos mencionado anteriormente son los pictogramas de los Juegos Olímpicos de algunos países concretos, que aunque denotan el mismo significado, presentan diferentes connotaciones relativas a la cultura visual del lugar donde se

En el pictograma de aseos,

Por último, otros cuatro conceptos que nos permitirán comprender,

colocado en una puerta, prima

analizar y valorar los pictogramas son el referente, los rasgos morfo-

la función indicia/. Pero tiene también función icónica, ya

celebraron los Juegos.

lógicos y los dos niveles de significación: denotación y connotación.

que existe una relación de semejanza con el hombre y la

mujer. A su vez, tiene función simbólica, ya que existe una convención que relaciona esos pictogramas de hombre y mujer con la función de un aseo.

El referente. El significado etimológico de la palabra referente es

Estas imágenes tienen

diferentes connotaciones

«que refiere o que hace relación a algo». En términos semiológicos

según la interpretación

es el objeto real al que alude el signo. Para proponer un picto-

particular que realice el

receptor. La misma imagen

grama, uno de los primeros aspectos que tenemos que pensar es

del fuego, puede evocar,

si el «objeto» que selecciono como vehículo para la interpretación

mediante una fotografía

del mensaje es el óptimo. -7 p. 56 Los rasgos morfológicos. Una vez seleccionado el referente,

manipulada una noticia del periódico, un incendio o una representación siniestra. O la imagen, convertida en signo,

tenemos que analizar y elegir sus rasgos morfológicos esenciales.

puede advertimos del peligro de incendio.

Un rasgo es una característica, una peculiaridad, una propiedad o nota distintiva de algo o alguien. Los rasgos de un pictograma son los elementos, partes o componentes que configuran la estructura

En la tabla siguiente, podemos obtener una visión global que aglu-

morfológica del objeto que decido incluir en el mismo para que

ti na los conceptos explicados según las dimensiones semántica,

ese objeto se reconozca como tal.

si ntáctica y pragmática del signo.

31



SEMÁNTICA

SINTÁCTICA

PRAGMÁTICA

El signo en relación con el significado

El signo en relación con los valores

Función. Modo en que el receptor

formales

interpreta el signo

El signo como Icono

INTENCIÓN DEL EMISOR

Semejanza visual

Forma inconfundible

Grado de iconicidad

Forma concisa

Semejanza sustancial

Unidad visual como grupo

Influencia, impacto en el receptor 1nd icativa/ 1nd icación Información

con el origina l

Influencia en el pensamiento, no en la

Grado de abstracción Desvío sustancial del original El signo como Símbolo Portavoz de conceptos abstractos Acuerdo entre el emisor y el receptor

PROCEDIMIENTOS SINTÁTICOS

decisión de actuar

Elementos

Imperativa/ Imposición

Punto, línea, plano,

Influencia en la voluntad o en el

efecto de tridimensión

comportamiento del receptor

El signo como Índice Indicio. Apuntador

Cualidad

Sugestiva/ Sugerencia

Principios básicos Durante el proceso de diseño y, sobre todo, antes de comenzar a diseñar, tenemos que tener en cuenta varias consideraciones y

Regular/ i rregu lar

Influencia en los sentimientos para que

prin cipios o fundamentos que se deben aplicar, tanto a cada icono o

Recto/ redondeado

se actúe de un modo particular

pictograma en particular, como a la familia de signos al comp1eto Y

Simétrico/ asimétrico

Costa, (2007, p. 95) y Abdullah GRADO DE INTE RPRETACIÓN

CONTEXTO

Tamaño 1 Escala

Dependiente del repertorio de signos del emisor y del receptor. (Correspondencia para una correcta

Gran formato

Facultades de interpretación del

Pequeño formato

receptor

Demarcación

interpretación)

Positivo/ Negativo/ Combinación

significado de un signo: · El entorno en el que

Interpretación ab ierta (no es posible

y Hubner (2002, pp. 36-39),

En unciados precisos. Los enunciados deben ser precisos y sig-

anotan una serie de puntos de

nificativos, ya que surgen de una necesidad de un gran número

partida o fundamentos a tener

de destinatarios. Por ejemplo, el enunciado «tiendas» abarca un

en cuenta durante el proceso de diseño de un signo.

con cepto más amplio que el de «tienda de regalos». También es

con un pictograma)

importante definir correctamente el enunciado cuando se trata de

Forma vacía/ Parcialmente rellenada

Interpretación incuestionable.

men sajes que pueden ser ambiguos, como es el caso de «sala de

Fragmento

Reconocimiento inmediato e

Forma abierta/ Forma cerrada

inequívoco

Estructura/ Sistema/ Grupo

completa dentro de la serie. Tiene

Enu nciados relevantes. No se debe diseñar un pictograma para

Retícula/ Estructura ti po-pictográfica

sentido dentro del sistema

un mensaje insignificante, ni mezclar pictogramas de mensajes

positivo y negativo Condiciones que influyen en el

Norberto Chaves (2009), a modo de decálogo, enumera

ord enadores» y «espacio con servicio wifi».

sus Diez principios del diseño

La interpretación es revelada y se

el signo es percibido · El grado de reconocimiento del repertorio sígnico

Estructura generatriz

· La cultura particular del destinatario

Módulos

· Las circunstancias sociales

gráfico, algunos de los cuales, pueden ser aplicados al diseño de pictogramas: convencionalidad, ocurrencia,

relevantes con mensajes sin importancia.

eficacia, propiedad, respeto,

Repertorio de elementos

· Las combinaciones de los signos

pertinencia, densidad, economía, transparencia

Iluminación

Elección adecuada del referente. El referente u objeto elegido

Color

pa ra la transmisión del mensaje debe ser el adecuado y tener un

http://foroalfa.org/ articulos/ diez-pri ncipios-del-diseno-

y anonimato.

Formato

sign ificado preciso. En el caso anterior «sala de ordenadores» y

Marco

«espacio con servicio wifi», la elección del referente condiciona la

Secuencia

com prensión del mensaje. Para el primer enunciado podemos elegir

Movimiento

un ordenador independientemente de que esté conectado o no a

lnteractividad

~p. 66

grafico

internet. Sin embargo, en el segundo, elegi remos el símbolo que representa el servicio de conexión inalámbrica, ya que el usuario se podrá conectar al mismo a través de cualquier dispositivo. ~p. 56

Diagrama que sintetiza las dimensiones semántica, sintáctica y pragmática de los signos gráficos. Basado en Abdullah y Hübner (2006, p.l3)

32

17 Varios autores como

33

-·

DISEÑO DE ICONOS Y PICTOGRAMAS l. ICONOS Y PICTOGRAMAS

Compatibilidad semántica. Los referentes deben estar elegidos con similar enfoque y con Los mismos criterios de selección.

o o

~

u

z zw

Compatibilidad semántica (Un objeto específico de cada entorno)

Incompatibilidad semántica (Mezcla de objetos y conceptos científicos)

Laboratorio

Microscopio

Molécula de agua

Biblioteca

Libro

Estantería

Sala de ordenadores

Ordenador

Ratón de ordenador

:J

El mensaje «Precaución, animales salvajes» y su adaptación a diferentes zonas geográficas.

Forma fisonómica Lógica. EL referente debe tener una forma que se corresponda con su constitución y estructura Lógica, para que el objeto que representa sea reconocido.

Elección de un modelo vigente. La transcripción gráfica del

~

mensaje debe realizarse en base a la elección de modelos vigentes. EL referente «guantes» del enunciado «objetos perdidos» no es un modelo demasiado actual. Podría proponerse la utilización de unas gafas o un maletín como elemento mas representativo de lo que Bicicleta: forma fisonómica lógica.

Bicicleta: desproporción en algunos de sus elementos que podría generar confusión.

Bicicleta: faltan algunos rasgos esenciales para reconocer el referente.

las personas perdemos en La actualidad. Así mismo, poca gente com pra pipas para regalo, un referente del pictograma «Tiendas». Sería más adecuado utilizar sólo el Libro o el regalo, o incluso

Pictograma para «Objetos perdidos» y «Tiendas» propuesto por AlGA.

sustituir todos estos elementos por una bolsa de compras. Aprendizaje inmediato. Si el icono o pictograma es nuevo o no ha sido difundido antes, debe ser fácil de aprender y reconocer para

Au sencia de caracteres alfabéticos. Debemos evitar al máximo la

el enunciado previsto. Por ejemplo, en La interfaz de Las nuevas

utilización de caracteres alfabéticos porque son dependientes de

tecnologías de comunicación social, todos reconocemos La estrella

un id ioma concreto. Tampoco se añadirá un texto explicativo, para

como icono que representa el enunciado «favoritos» (contactos

evitar redundancias en el mensaje. Sin embargo, en algunos siste-

favoritos, páginas web favoritas o tuits favoritos, entre otros). De La

mas de señalización, como en las señales de tráfico, es inevitable

misma forma, se ha generalizado el uso del símbolo «corazón» o el

la utilización de números (para Limitar la velocidad o establecer

«pulgar hacia arriba» para reprentar el mensaje «me gusta» en las

dista ncias) o de letras para identificar lugares.

En algunos países se utiliza la P de «Parking», mientras que en otros países hispanohablantes se emplea la E de «Estacionamiento».

redes sociales. Con cisión gráfica. La forma de cada pictograma tiene que estar Adaptación cultural. Es imprescindible que cada uno de los motivos

depurada y reducida a lo esencial, con el fin de evitar el exceso

o referentes elegidos se adapte al contexto cultural y temporal del

de información visual irrelevante. Lograremos abstraer Las formas

destinatario. La interpretación del significado de los pictogramas

esenci ales de cada referente, mediante un proceso de síntesis y

debe ser común para todos los usuarios. Un sistema pictográfico

esquematización. Además, deberemos reflejar sólo las característi-

ideal debería ser universal y tendría que ser reconocido en todo el

cas genéricas y no las particulares del objeto. «El signo debe estar

mundo por personas de diversas culturas, pero Lograr este come-

saturado, o sea, carente de zonas privadas de sentido. Si al eliminar

tido es difícil si tenemos en cuenta La diversidad cultural existente.

un elem ento nada se pierde, es porque ese elemento sobraba». 18

34

Paraguas: antes y después del proceso de síntesis. 18 Norberto Chaves (2009)

35



Convencionalidad. Tendremos que diseñar una forma convencional y común, que esté generalizada en el imaginario colectivo. Por ejemplo, si decidimos utilizar el referente «gafas» como parte del pictograma «objetos perdidos», no pensaremos en unas gafas

¡, ·

'

concretas ni buscaremos un estilo definido por una época, por una tendencia (gafas de pasta) o por su función (gafas 30 o gafas

,

.. .•

Bordes redondeados

de buceo). Tendremos que diseñar una forma que represente el concepto general de gafa.

Del mismo modo, el pictograma «prohibida la entrada de animales»,

ll

no estará bien solucionado si muestra una raza particular de perro.

Ángulos suavizados con curvas

,..,..--1 ' 1 ,1 1

•G

'i·' (;)'

(ii.)·· llí '

~

(AlGA, 1984, p. 136)

.....

-1 ' ,,

\

\ 1

1

1

1 \

1 1 1

\ '

En los pictogramas de AlGA, se establece un vocabulario visual reconocible con las siguientes características: simplificación de las imágenes, número de detalles reducido al minimo, eliminación de rasgos superfluos, linea del mismo grosor, ángulos suavizados con curvas, bordes redondeados, tendencia a una configuración simétrica y a un eje vertical. Finalmente, todos los pictogramas se unifican mediante su integración dentro de un mismo formato: un cuadrado con ángulos redondeados.

',, ... ___ .,. .,,'

1

•

t

•

~

~¡'

i

~

~

Tendencia a la simetría y a un eje vertical

Coherencia formaL Todos tos signos de la familia, sean simples o compuestos, estarán diseñados en base a unos mismos marcadores de identidad, con una estructura uniforme y un «vocabulario gráfico» unificado. Estructura uniforme. Para que un sistema de pictogramas sea percibido como una unidad visual armónica, todos tos elementos que lo forman tendrán una estructura común o retícula. Si empleamos

Formato unificado

una retícula, será más fácil sintetizar y unificar tos signos, ya que las proporciones, tos ángulos y el grosor del trazo, estarán delimitados por la misma. ~p . 72 Constantes visuales. En cada sistema de pictogramas observamos

Compatibilidad cromática. La referencia al color en relación con

una serie de procedimientos sintácticos de relación entre sus

el mensaje debe ser clara. Los códigos de color deben ser cono-

componentes, que definen su identidad gráfica. Este «Vocabula-

ci dos por tos destinatarios y decodificados de manera inmediata,

rio visual» unificado debe aplicarse de manera sistematizada a

por medio del autoaprendizaje y la experiencia del usuario en el

todos los signos, para garantizar la coherencia formal entre ellos,

propio entorno de aplicación. ~p. 70

tanto de manera individual, como en relación a la familia o serie completa. ~ p. 66 36

37

<'

•~·e·~~~.....

'·"' ;"' -~~·,.:'

EL PROCESO DE DISEÑO

Podemos considerar dos enfoques para abordar el diseño de un sistema de pictogramas. El primero supone contemplar los pictogramas como un diseño coherente pero independiente de la tipografía con la que van a convivir. La segunda opción consis& en generar los pictogramas a partir una tipografía concreta o en diseñar los dos grupos de signos de manera simultánea. En ambos casos, el proceso se desarrolla teniendo en cuenta una serie de etapas. En una primera etapa, de trabajo conceptual previo, se comprende y se planifica el proyecto; también se definen y organizan los enunciados o mensajes de la familia de signos. En una segunda etapa, se concreta el «vocabulario» gráfico, se plantea la retícula o estructura, se realizan los bocetos y se desarrolla cada uno de los pictogramas. Esta fase finaliza con la digitalización de cada signo y sus ajustes ópticos. En una última etapa, se comprueba la solidez semántica, sintáctica y funcional del pictograma para el destinatario. Además, se verifica que cada pi ctograma esté integrado en el grupo morfológico al que pertenece y con la familia completa de pictogramas. En las siguientes páginas podemos observar dos diagramas que se corresponden con los procesos de diseño de ambos tipos de pictogramas. Es estos esquemas, apreciamos etapas similares pero con algunos matices metodológicos adaptados a cada uno de los dos enfoques.

41

2. EL PROCESO DE DISEÑO DISE ÑO DE ICONOS Y PICTOGRAMAS

Diagrama del proceso de diseño de un sistema de pictogramas

DEFINICIÓN

DESARROLLO

(~P-~

.

VERIFICACIÓN

.,

J

__N_T_EA _M __ IE_N_T_o _ ; B_R_IE_F__, -______________________

J JUSTIFICACIÓN ¿Es necesario diseñar un nuevo sistema de pictogramas? OBJETIVOS ¿Cuál es el propósito de este sistema? ENFOQUE CONCEPTUAL ¿Cómo será la familia de pictogramas ? LISTA DE ENUNCIADOS ¿Cuántos pictogramas tengo que diseñar?

P~NIFICACIÓN/CRONOGRAMA

¿Cómo voy a organizar el trabajo a lo largo del tiempo?

DOCUMENTACIÓN ¿Qué documentación relevante tengo que encontrar?

.. ···· ·····> ·· ········· ...

DEFINICIÓN DE CADA ÍTEM

¿Cúal es el referente más adecuado para cada pictograma?

r:.

1.:.:.: BOCETOS INICIALES

BOCETOS

DIGITALIZACIÓN

Exploración previa

Búsqueda de las formas óptimas

Vectorización mediante curvas de Bézier

DEFINICIÓN DE MARCADORES DE IDENTIDAD

( AJUSTES ÓPTICOS

J

--~

l'----·

VERIFICACIÓN DEL SISTEMA

Relación de cada pictograma con el grupo morfológico al que pertenece y con la familia

PROCEDIMIENTOS SINTÁCTICOS

ESTRUCTU RA/ RETÍCU ~

Masa

de pictogramas completa

Definición de la estructura

Línea

Integración de los signos diseñados

Positivo

como «sintagmas visuales »

Negativo

Comb inación masa/línea Terminaciones Conexiones Calidad de trazo Escala

/¿Funciona? PROCESO DE VALORACIÓN

'·················<····· ····· ·····

42

Dimensión semántica Dimensión sintáctica Dimensión pragmática

43

2. EL PROCESO DE DISEÑO DISEÑO DE ICONOS Y PICTOGRAMAS

Diagrama del proceso de diseño de un sistema de pictogramas de origen tipográfico

DEFINICIÓN

DESARROLLO

1

VERIFICACIÓN

(~P-~

__ N_T_EA _M __ IE_N_T_ o ;_B_R_IE_F__, -______________________]

J JUSTIFICACIÓN ¿Es necesario diseñar un nuevo sistema de pictogramas? OBJETIVOS ¿Cuál es el propósito de este sistema? ENFOQUE CONCEPTUAL ¿Cómo será la familia de pictogramas? LISTA DE ENUNCIADOS ¿Cuántos pictogramas tengo que diseñar?

P~NIFICACIÓN /CRONOGRAMA ¿Cómo voy a organizar el trabajo a lo largo del tiempo?

DOCUMENTACIÓN ¿Qué documentación relevante tengo que encontrar?

í

VERIFICACIÓN DEL SISTEMA DEFINICIÓN DE CADA ÍTEM

Integración de [os signos diseñados

¿Cúal es el referente más adecuado para cada pictograma?

como «sintagmas visuales»

Relación de cada pictograma con [a familia ELECCIÓN DE ~

ANÁLISIS DE~ TIPOGRAFÍA

TIPOGRAFÍA

¿Cuál es el ADN de la tipografia?

pictográfica completa Relación de [a familia pictográfica completa con [a tipografia de referencia

Integración de [os signos diseñados como parte de[ alfabeto

DEFINICIÓN DE LOS MARCADORES DE IDENTIDAD 1

¿Funciona? Proporciones, altura y peso

ESTRUCTURA/ RETÍCU~

Coherencia formal

Definición de la estructura

PROCESO DE VALORACIÓN

V

Afinidad morfológica

Dimensión semántica

Relación formas/ contraformas Tensión de las curvas Unificación formal caja alta/caja baja Variaciones de ángulo

Dimensión sintáctica Dimensión pragmática

Apertura Contraste

BOCETOS INICIALES

BOCETOS

Exploración previa

Búsqueda de las formas óptimas

DIGITALIZACIÓN Vectorización mediante curvas de Bézier

('-AJ _ u_ sT_E_s _ó _ PT_Ic_o_s_

_

_ __ _ _}

······

<······...... . 45

44

y


2. EL PROCESO DE DISEÑO

Enfoque conceptual. El enfoque es la manera de considerar el asunto desde unos supuestos, con el fin de anticipar una solución y encauzarla con acierto. Enfocar la cuestión es revisar los diferen¡1

tes puntos de vista con los que podemos abordarla y sopesar su posible dirección para resolverla. Veremos, por ejemplo, que tiene sentido abordar los pictogramas atendiendo a la normativa del '

Manual de Identidad Visual de la Entidad, y diseñar pictogramas partiendo de la tipografía corporativa o para convivir con ella. Planteamiento del proyecto

También podemos pensar en la orientación formal; es decir, en el aspecto que tendrá la familia y en los procedimientos gráficos que

Antes de emprender el proceso de diseño de cualquier familia de

utilizaremos. Según sea el planteamiento y los objetivos, puede

iconos o pictogramas debemos responder a una serie de cuestio-

ser aconsejable y viable resolver todos los pictogramas con una

nes que nos permiten obtener una idea clara del proyecto que se

línea gráfica del espesor de la tipografía, en negativo o con un

va a desarrollar: ¿es necesario diseñar un nuevo sistema? (Justifi-

mismo marco o formato. Estas formulaciones iniciales o «hip
cación), ¿qué enfoque conceptual le quiero dar al proyecto?, ¿cuál

gráficas» ayudan a aclarar el tema y a buscar variables de mayor

es el propósito de la serie? (Objetivos) y ¿de cuántos pictogramas

interés para asegurar la calidad del trabajo.

estará compuesta nuestra familia? (Lista de enunciados). Objetivos. El siguiente paso consistirá en definir una serie de

1

¡ i

Justificación. Encontramos opiniones muy diversas sobre la nece-

premisas que se deben cumplir a lo largo del proyecto. Estos

sidad de diseñar o no nuevas familias de pictogramas. El nuevo

propósitos pueden ser de distinta índole y abarcan cuestiones tan

sistema que vamos a desarrollar puede ser necesario por diversas

importantes como la finalidad principal, los objetivos secundarios,

razones. Por ejemplo, cuando se pretenda informar a usuarios de

el tipo de destinatario, la cantidad de trabajo a desarrollar o la

diferentes culturas e idiomas sobre sus opciones de orientación y

metodología a emplear.

comportamiento en un entorno determinado. De la misma forma, serán necesarios en aquellos casos en los que la comunicación

¡

ligüística no puede usarse o la explicación con palabras es

i

demasiado larga. También pueden utilizarse, si los iconos permi-

¡

ten llamar la atención de manera inmediata hacia contenidos de información sin emplear las palabras.

Objetivos del proyecto

Objetivo principal

de diseño de pictogramas

Diseñar un sistema coordinado de pictogramas que permita una comprensión

para la identidad visual de un jardín botánico .

efectiva de las diferentes áreas de exposición de un jardín botánico.

Objetivos secundarios · Proponer un enfoque conceptual que tenga en cuenta los elementos básicos del Manual de Identidad Visual de la Entidad.

Sin embargo, debemos tener en cuenta que la eficacia de los iconos Y pictogramas es limitada. El contexto cultural, psicológico y social del receptor del signo puede reducir su comprensión. Además, la creación de nuevos códigos que impliquen un aprendizaje por parte del receptor, puede suponer un problema de comunicación; incluso el nuevo sistema puede contribuir a la generación de «ruido visual» o saturación comunicativa. Finalmente, es importante saber que no todos los conceptos comunicables como mensajes pueden

· Diseñar los mensajes informativos de localización de las zonas específicas sobre Botánica. · Adaptar la se rie para ser visualizada tanto en señalética corpo rativa, como en dispositivos electrónicos: 200 mm en señales direccionales e identificativas de área botán ica, 20 mm en el plano señalético del plano principal y 40 píxeles en pantalla. · Redactar una normativa de construcción de la serie de iconos y pictogramas en previsión de posibles remodelaciones o actua l izaciones del Jard ín Botánico. Esta normativa permitirá configurar otros mensajes en un futuro, que puedan satisfacer nuevas necesidades de comunicación de la entidad.

ser correctamente representados por pictogramas. 46

47

(:.~....

--~.~.;' ·~·

·-

'



Lista de ítems. Para tener una visión organizada y global del

Actividades de procesamiento. Mensajes que hacen referencia

proyecto y conocer el número de signos con los que vamos a

a procedimientos relevantes relacionados con los pasajeros.

trabajar, es necesario realizar un inventario de enunciados para

Como ejemplos podemos enumerar compra de billetes,

los mensajes que deseamos comunicar.

aduana o salida de vuelos.

Reglamentaciones. Estos mensajes comunican procedimientos Invernadero

Sala de conferencias

lnsectario

Teléfono

Parking

Sala de reuniones

Aseos

Autobús

Plantas autóctonas

Acceso silla de ruedas

Embalse

Prohibido fumar

obligatorios. No fumar, estacionamiento prohibido o extintor

®

de incendios son algunos de los ítems de este grupo.

Clasificación según la función del signo. Abdullah y Hübner proponen la siguiente división de los mensajes: 2

Jardín de China

Arboretum

Palmeral

Bibilioteca

Plantas medicinales

Sala de espera

Direccionales. Sirven para indicar algo. Por ejemplo, una sefial de la localización de los aseos.

Ejemplo de lista de enunciados entregada por el cliente para el sistema de pictogramas de la Identidad Visual de un jardín botánico.

Fuente

Área merendero

Plantas tropicales

Salida

Respetad las plantas

Área recreativa

Plantas carnívoras

Huerto escolar

Sala de exposiciones

Plantas en peligro de extinción

Área plantada. No pisar

Plantas venenosas

el terreno

2 Abdullah y Hubner (2002, p. 30)

tlt-+

De advertencia o peligro. Su función es la de avisar de un peligro. Por ejemplo, peligro de incendio. De solicitud. Empleados para generar un tipo de comportamiento concreto. Por ejemplo, tira la basura en la papelera. De prohibición. Tienen como objetivo que se cumpla una ley.

Clasificación de los mensajes. Para facilitar el desarrollo de

r

Por ejemplo, prohibido aparcar.

®

nuestra familia, podemos ordenar los signos según su función, su grado de aprendizaje, su área de aplicación o su morfología. Clasificación según el grado de aprendizaje. Para Adrian Frutiger Clasificación de los s1gnos de AlGA. La Oficina de Apoyo del

existen tres tipos de pictogramas según el grado necesario de

Departamento de Transporte y el Comité de AlGA para Signos y

aprendizaje por parte del receptor. 3

3 Frutiger (1981, p. 272)

Símbolos propuso cuatro categorías para ordenar los pictogra1 AlGA (1984, p. 16)

mas propios de la señalización de transportes: 1

l. Signos que proceden de imágenes figurativas y que son comprendidos de manera inmediata por el observador. Estas

Servicios públicos. Mensajes que hacen referencia a los servi-

imágenes no requieren aprendizaje. Es decir, cualquier recep-

cios. Algunos ejemplos de este caso serían teléfono, aseos de

tor reconocerá el elemento representado, independientemente

hombres, aseos de mujeres, información o agua potable.

de su idioma, cultura, o costumbres. Son ejemplos, teléfono, zona de fumadores o cafetería.

Concesiones. Mensajes relativos a actividades comerciales. Son ejemplos de esta categoría restaurante, cafetería, tiendas o alquiler de coches. 48 ~l_

49

_____________________________________________________________________________ _ _

,I/



2. Signos que derivan de esquemas cuyo mensaje no es comprensible a primera vista sino con cierto grado de reflexión . En este caso el grado de reconocimiento es menor y el receptor deberá hacer un esfuerzo intelectual para comprender el significado. Entre otros, podemos incluir en este grupo punto de encuentro, paso preferente, pendiente o salida. 3. Signos abstractos, que requieren de un proceso de aprendizaje. Tanto la señal de prohibido como tos semáforos son ejemplos de este grupo. Servicios generales

Reguladoras

Clasificación según la señatética corporativa. Del mismo modo,

Botánica

Exterior

podríamos clasificar nuestra lista de mensajes en función del entorno de aplicación y el tema al que hacen referencia. En la

u .~

página anterior veíamos un listado de enunciados para un jardín

V'l

o "* e ·sCi .g

botánico. El siguiente esquema muestra la posible organización de

u

las aplicaciones y del conjunto de mensajes señatéticos ordenados según su localización y según su función.

\_ 1

1

1)

11

u

-o~ -o~ Servicios generales

Material divulgativo Material didáctico

Botánica

1

\

Interior

) ( Señalética corporativa V'l (1)

í "O V'l

.~

:g a...

o_ :0 ::J

\_1 1 1 1) \_ 1

1

1 1)

ro

"O

o

o

y

Publicaciones

_g

V'l

e

ro

o(¡¡ "O

e

ro

co

Eventos especiales

o E

ro

Vl

ro

-~

o

::J

Q) e

(1)

e

"O

ro

oro ¿

~

2

Q) ::J

co

\____)

1

í

oro ..e u

N

\____) Vehículos

Papelería básica

::J

V'l

o

1

Vest uario (

í

1

o

o

o ro

o

·.;::;

b.O

E

so

1

1

0..

0..

b.O

o

__¡

-~

'§

b.O

o

0..

i=

,_ o

ou

«El árbol del Jardín Botánico» Aplicaciones y Seña/ética Corporativa.

51

....

,..

DISEÑO DE ICONOS Y PICTOGRAMAS 2. EL PROCESO DE DISEÑO

Clasificación según la morfología de los signos. Otra manera de ordenar nuestra lista podría consistir en organizar los signos en

PICTOGRAMAS AlGA

FORMA Redonda

base a su morfología, una vez que hayamos realizado la primera

Redonda/recta

Ctfl

fase de bocetos. Para explicar esta opción podemos buscar su paralelismo en el diseño de tipos. Polhen plantea una clasificación

mayúsculas

Angulosa

Redonda

En pisos

GS

EFH

::l

Lados abiertos

e

LT

u

::l

Ancha

1-

Media

~

1-

Redonda 1 Angulosa

BPR

a:

"' w

EFLHT

OQGS

Redonda 1 Vertical

Redonda

Con ascendente

~ t

Con descendente

Diagonal/ Angulosa

X

KY

X

KZY

w

M

VAX

NKZY

FORMA

CAJA BAJA

g

Redonda 1 Diagonal

~

::l Altura mínima

1-

u

Diagonal

Vertical

bdft

k

hl

jpq

y

.. ~

::l

J?Á~

•••

r

¿

~~

~

"'w

Ancha

.•. .,

(\\ Gi' 6 l "G"'

~+

(iiV;)~~""!!

181

=•t®®

®®~

re

~

yf Á~ .

~

Ctfl

.

¿¿?

;¡m

Organización de los

pictogramas de AlGA en base a criterios morfológicos

m

aplicable a cualquier familia de signos.

vyxkz nhu ~ L~Med~i~a________~c~e~o~g~-----f~b~d~p~q~-----r~a~s----------t-~--------¡;~--------jft

~~~

/+

·~

~ L~An~c~h:a________~----------+-~--------t------------t~~~-----¡::~-------Estrecha

/+

18l.,C

a:

1-

Estrecha

w

~+

;) ""!! (iiV ~ ~

J

Estrecha

minúsculas

BPRDU

Diagonal

Recta

Altura máxima

FORMA

CAJA ALTA

"G~6Gif\\~tJ.

Diagonal/Recta

~®®

de los caracteres alfabéticos en función de su forma y su estructura, tal y como podemos ver en las siguientes tablas. 4

4 Pohlen (2011, p. 95)

Redonda/ diagonal/recta

i Lr

Pictograma base. Si optamos por esta última opción podremos seleccionar, definir y diseñar un pictograma de cada grupo y convertirlo en La base o modelo sobre La que generar el resto de pictogramas de su grupo. Podríamos denominar a estos signos, pictogramas base.

Las opciones de clasificación expuestas nos permiten visualizar grupos de signos que facilitan el análisis, el desarrollo de la familia de pictogramas y la organización de nuestro trabajo.

52 53

tlllj_____~-----------------------------------------------------------------------------------~--------------------------------------------------------------~·----------------------~~-



Planificación. Una vez que hemos especificado Los objetivos y

Documentación. No debemos olvidar que cada proyecto está

hemos elaborado La Lista de ítems con Los que trabajar, podemos

siempre acompañado de un proceso paralelo de recopilación

organizar el flujo temporal de trabajo y dividir el proyecto por

y análisis de La documentación relacionada con los temas que

etapas: definición, desarrollo y verificación.

tratamos en el trabajo o con otros de naturaleza similar que nos puedan resultar de utilidad.

DEFINICIÓN

2012

DESARROLLO

VERIFICACIÓN

ENTREGAS Documentación para el

OCTUBRE NOVIEMBRE

Planteamiento del proyecto

proyecto de diseño de

pictogramas para la Identidad

Primeros bocetos

2013

ENERO

Reino vegetal, así como de la flora representativa de la Cornisa Cantábrica y del País Vasco.

Visual de un jardín botánico .

Análisis de Asap DICIEMBRE Definición de grupos morfológicos

· Información sobre conceptos esenciales de botánica, tipos y división del

ENTREGA 1

Bocetado de un pictograma base para cada grupo morfológico

· Información y documentación sobre los conceptos específicos que definen las diferentes áreas de un jardín botánico. · Documentación gráfica de representaciones vegetales asociada a diferentes áreas geográficas, en especial de la flora q11e puede servir como referente de l cada pictograma.

FEBRERO MARZO

· Documentación significativa sobre series de pictogramas que aborden un enfoque conceptual similar o cercano al tema tratado.

ABRIL MAYO

DESARROLLO DE TODA LA FAMILIA DE SIGNOS

JUNIO

Digitalización

JULIO

Ajustes ópticos AGOSTO

Aplicación de las correcciones derivadas de las sucesivas entregas

·Observación de modelos con procedimientos sintácticos de solución formal que ayuden en el proyecto. ;

1

· Información sobre materiales, empresas, sistemas y soportes de señalización interior y exterior. Visión global del conjunto y correcciones para sistematizar la familia completa

· Información y estudio sobre la visualización y la adaptación de los iconos a las diferentes pantallas de los dispositivos electrónicos. · Documentación gráfica y fotográfica de otros jardines botánicos.

ENTREGA4 SEPTIEMBRE OCTUBRE NOVIEMBRE

2014

ENTREGA FINAL

Ejemplo de cronograma

Es una tarea compleja prever los tiempos para cada fase, cuando

realizado para el sistema de

nos enfrentamos a un proyecto de estas características. Aunque

pictogramas asociado a la tipografía Asap.

tengamos fecha de entrega, tenemos que ser flexibles y adaptar el

-7 pp. 115-117

cronograma durante el desarrollo de nuestra familia de pictogramas. Estas variaciones pueden deberse a distintos factores como que no hayamos previsto La complejidad del proyecto o que se amplíe la extensión del juego de signos a medida que descubrimos nuevas necesidades de comunicación.

54

55

Jlllllll

DISEÑO DE ICONOS Y PICTOGRAMAS 2. EL PROCESO DE DISEÑO

Mapas conceptuales. En ocasiones, la elección del referente es evidente. Sin embargo, para otros mensajes es necesario asegurarnos un buen punto de partida que evite la ambigüedad o el equívoco. Antes de dar forma a un icono o pictograma podemos aplicar técnicas de asociación de ideas, como Los mapas conceptuales. Estas técnicas nos permiten visualizar el mayor número

Un mapa conceptual se

posible de soluciones potenciales antes de tomar la decisión finaL

elabora desplegando

Por ejemplo, en el siguiente mapa conceptual podemos observar Definición del referente

el despliegue de soluciones para elegir el referente del enunciado «.Jardín de China», dentro de un jardín botánico.

Elección de un punto de vista favorable: la elección del punto

y estudiando el tema en

En esta etapa, podemos realizar una primera fase exploratoria con

b.ocet~s para definir las formas básicas. Esta opción nos per~itirá

interpretación del mensaje sea óptima. Algunos pictogramas

v1sual1zar el concepto a través del dibujo.

podrán solucionarse con un solo referente elegido expresamente para representar gráficamente el concepto. Otros, de manera

influirá en la identificación

excepcional, podrán articular varios referentes, según Lo requiera

representar un paraguas abierto

PARAÍSO EN EL MUNDO

La complejidad del mensaje. f- p. 30 y p. 33

~

que cerrado, una vista lateral de una flor o la misma flor vista

CARÁCTER MÁGICO O MÍSTICO

desde arriba, o un animal de

EJEMPLO 1: UN SOLO REFERENTE

lado o en escorzo. Un punto

Enunciado

Referente

Pictograma

Mensaje

Contexto

de vista en escorzo impedirá posiblemente la decodificación inmediata del referente.

o

fuentes especializadas.

enunciado. EL referente es el vehículo necesario para que La

de vista del referente también de sus rasgos. No es lo mismo

consultando al cliente

a un experto en la materia

Una de Las decisiones más relevantes en el diseño de un pictograma es La elección de un referente adecuado para cada

conceptos e imágenes en relación con el tema tratado,

Aseos de

Mujer

QUIOSCOS

Aquí está el

mujeres

t

~

\

¿__

,

' r - - ARQUITlECTURA

aseo para

~

Pictograma

1

~

ESTANQUES

~

Mensaje Si usted ha

interrogación

perdido algo,

56

-Jh

¿..;.~

h

i~fi.1l UlJ 4Jj

PUENTES ICONOGRAFÍA

LOTO

ANIMAL Y VEGETAL 1

~

/ PLANTAS -

ANIMALES

Signo de

Un guante

SAUCE LLORÓN

V.t

JfAt ~

diríjase aquí

l

Contexto

1

~

CARPA

E-(----~L-,'t TORTUGA

r--

'V

BAMBÚ

MITOLÓGICOS 1

ACUÁTICOS FÉNIX

''

AJ;;~ ""'~..._,~~2> '

1

___/! ELEMENTOS FUNDAMENTALES

~

l

j/

,_A..

perdidos

Un paraguas

MONTANA

r-

PAGODAS

Objetos

?

j

~

ELEMENTOS DECORATIVOS

EJEMP LO 2: VARIOS RE FERENTES Referentes

JARDIN DE CHINA

mujeres

ARCOS f~---'

Enunciado

=-:G :¡-

NATURALEZA IDEALIZADA

¡

\j

DRAGÓN

1

~~

r: '

CHINO BONSAI

~ 57


r

Otro modo de extender las posibilidades para encontrar un referente consiste en partir de las palabras o términos lingüísticos clave del enunciado. Con estos conceptos podemos elaborar listas conductoras. de modo que un término puede extenderse en otro y éste conducir a otro hasta localizar el referente adecuado. 5 5 Umberto Eco explica Las

También podemos indagar buscando en el diccionario las defini-

variables para La construcción

ciones y anotando sinónimos. Así mismo, podemos focalizar la bús-

de campos semánticos en La estructura ausente

queda de la iconografía teniendo en cuenta las tres dimensiones

(1989, pp. 83 y 101-104):

del signo enumeradas en el apartado «Semiótica y pictogramas»;

Connotación como significado definicional (significados

de esta manera localizaremos signos como iconos que repre-

de definiciones comunes en

senten el concepto, signos como indicios que sugieran el tema y

diccionarios), connotación

signos como símbolos que pudieran asociarse con el enunciado. La

de Las unidades semánticas que componen el significado

mayoría de los «iconos» que utilizamos en la interfaz de nuestros

(de sol a masculino, de Luna

dispositivos electrónicos pertenecen en mayor o menor medida

a femenino), definiciones ideológicas, connotaciones emotivas, connotaciones de hiponimia (de tulipán a flor), hiperonimia (de flor a tulipán) y

a estas tres categorías del signo. Por ejemplo, la papelera en el escritorio virtual. la lupa para realizar búsquedas o la casa de inicio son signos icónicos encontrados por analogía, ampliamente

antonimia (de mujer a marido),

difundidos y asimilados por la cultura de las nuevas tecnologías.

connotaciones por traducción

Otra forma de ampliar el repertorio iconográfico puede ser dirigir

a otro sistema semiótico (de perro a pictograma de

nuestra atención hacia algunas figuras retóricas como la metáfora,

perro), connotaciones po r

en la que existe una traslación de sentido por comparación (la

artificio retórico (metáfora),

estrella de favoritos), la metonimia, en la que se reemplazan refe-

connotaciones retóricoestilísticas y connotaciones

rentes por sustitución (el engranaje para el mensaje de configura-

axiológicas globales (valores

ción) o la sinécdoque, en la que se representa el todo por la parte

positivos o negativos en una cadena de connotaciones) .

o lo importante por lo accesorio (la cabeza de un animal).

58

DESARROLLO DE ICONOS Y PICTOGRAMAS Tal y como hemos descrito en las páginas anteriores, para minimizar los posibles errores y poder simplificar al máximo cada signo, es necesario haber planteado correctamente cada pictograma

1

dentro de la serie.

Una vez desarrollada la fase conceptual, podemos emprender el diseño del nuevo sistema de signos. Para ello, tendremos en cuenta aspectos como el formato y el soporte, el tamaño, el proceso de bocetado, la retícula, la metodología de vectorización, los ajustes ópticos, el grosor de la línea o la manera adecuada de aplicar el color.

OJ

Abdullah, R. y Hubner, R. (2002). Pictograms. lcons & signs. A guide to information graphics. Londres, Ed. Thames & Hudson Ltd. Esta publicación contiene una introducción sobre Historia, Semiótica y construcción de los pictogramas, así como varios capítulos con una amplia documentación gráfica y casos de estudio como los signos para ERCO, el sistema para el Servicio de Transportes de Berlín, la serie de pictogramas para Swiss Post, o los aeropuertos de Dusseldorf y de Colonia/ Bonn.

61

DISEÑO DE ICONOS y PICTOGRAMAS

3. DESARROLLO DE ICONOS y PICTOGRAMAS

Los bocetos. En esta fase d f. . f ami·L·la de pictogramas E' de 1n1remo . s La personalidad de nuest

· s ec1r b ra aquellos elementos comunes remos y concretaremos q e daran coherencia al sistema

~ use~

Fase 2. La segunda f ase de b generado La retícula ocetos se realizará des

porc1one

lenguaje gráfico Recomenda mos reaLizar . esta etapa de dib UJO . en dos fases.

·

.

'

an o La

l

t

s configuradas en la retic l es ructura a las -....3. u a, y Las formas L · ....,.p. 72 a

especificado

Fase 1 . La. primera · puede inl·c·1arse a m e onstructlva, realizando una . ano alzada, sin estructura pnmera apr oxlmaclón · . intuitiva.

Algunos bocetos de 1apnmem . f ase pam los enunciad . 1 Fl • os. . om autoctona del P . 2. Jardín de bulbos ats Vasco

.

Partimos del b Y de haber definido el pues de haber Líneas y pro os . ocetos anteriores adapt vdocabulario gráfico.

r

r

,,

/ <

3. Plantas acuáticas 4. lnsectario

L

1

r)

y

1

r-

~

r'<,l'

L

2 0

~v-~IJ-,-

.\""

\ _.,., _

1

/ \

L

-.l-

3

Segunda fase de 1 alzada a

~ano

i~

rettcula impresa.

4

) 62

63

b

so~~e ~~ce tos


3. DESARROLLO DE ICONOS Y PICTOGRAMAS

Podemos partir de una o varias fotografías elegidas expresamente para facilitar la síntesis del referente .

""""' -

!

1

1

1

1 ~ ~ 0«'

-

' > l

1

)<

><1

i

;xl\. X

)< '

¡,¡¡

K-:-

X H ,(:--

~é-'L~<-

Bocetos para la señal «Precaución, animales domésticos» con diferentes procedimientos sintácticos: en masa, en línea, combinando formas positivas Y negativas o buscando una estructura generatriz.

64

·~

1

1 -

1

!

>

71'(1

X

~

1

1 1

7f1 '

' 1 1

1(

x I)<>,XI

1'><'1Y

-'*

1 1

7

lx~· lx

1

1

¡X

~~

X

lx

1

~1

X

~

X

~]'y-

1

lE-

X

-

1~

/

X

J

1¡

1

1

IX!XI

x¡ _ X-

1 1

1

¡~

41

j

!

é--* -

~

AX

&

Bocetos sobre distintas retículas para el referente «corzo», asociado al mensaje de la señal «Precaución, animales salvajes» ~ p. 7 6

65

!A

1

'><'1

IX



TAMAÑO 1 ESCALA Grande (sistemas de señalética)

Pequeño formato (iconos para libro o para una aplicación)

m

Procedimientos sintácticos

American lnstitut

Publicación que pictogramas do

Para configurar la familia de iconos o pictogramas podemos considerar uno o varios procedimientos sintácticos de relación, que emplearemos de manera sistemática en toda la serie.

dimensiones

1

1

recoge p

DEMARCACIÓN ELEMENTOS Punto

Positivo Línea

..

•• •••• •• ••• •••••• ••••• •••• •••• ••••• • • ••••

w

CUALIDAD Irregular

Regular

Negativo

Combinación positivo 1 negativo

Tridimensión

Plano

o *

Forma vacía

Forma parcialmente rellenada

l Redondeado

•

Recto

Fragmento

•

Simétrico

Lll

w

1

66

Asimétrico

Forma abierta

Forma cerrada

o~ 1

1

67

DISEÑO DE ICONOS Y PICTOGRAMAS 3. DESARROLLO DE ICONOS Y PICTOGRAMAS

ESTRUCTURA 1 SISTEMA 1 GRUPO

SECUENCIA Módulos

Ret ícu la

Fabricación

Repertorio de elementos

. . .~# · · · · ·.

....

;.¡

Reciclado Llenado

i 1

Estructura tipo-pictográfica

•

Erguido formal

...

Batido por el viento

ComerdaUzadón

•••

@

t

~ LjJ

~·················

~stribución

~

El mismo elemento se repite en las cinco fases para significar el ciclo de vida del

Bosque

COLOR

Literati

mismo embalaje de cartón.

MOVIMIENTO

............. .. ............... ..:·. ..:

FORMATO

.......... ·:··. .. ..=·::. ....

............. ........ . ....... . ..................

............. .......... .. ... ... .......... ............ ... :=· ... .

................ ........... ..........

................. . ............ . .

:••

:

Pictograma en movimiento utilizado en algunos semáforos para describir la

acción de andar.

MARCO

INTERACTIVIDAD

[] 68

69


EL color en Los pictogramas. EL color se puede utilizar con dife-

Criterios de Legibilidad. Hay dos aspectos que influyen en La legibi-

rentes criterios relacionados con La percepción, La psicología, La

Lidad de Los pictogramas en un sistema de señalización, el tamaño

arquitectura o con criterios de codificación señalética. En primer

Y el ángulo de visión. Por una parte, tendremos que calcular el

Lugar hay que tener en cuenta el contraste entre figura y fondo.

tamaño adecuado para Los pictogramas según La distancia a La que

AlGA recomienda utilizar sus pictogramas en negro sobre un fondo

vayan a ser visualizados. También consideraremos el ángulo de

blanco para mantener el máximo contraste de claro-oscuro. Así

visión, que «será mejor cuanto más se acerque a la Línea natural de la visión humana». 2

mismo, es imprescindible mantener un d~terminado color si sirve

2 AlGA (1984, p. 196)

de identificación de un código que todos conocemos, como el color señalético en Los símbolos de prohibición o de advertencia.

Tamaño y distancia. EL siguiente esquema muestra los resultados

Otro ejemplo es La codificación cromática para informar sobre el

de una prueba realizada por AlGA para calcular Las relaciones

comportamiento de Los individuos, como el verde para zonas de

entre el tamaño y La distancia para sus pictogramas.

Libre circulación, rojo para estancias prohibidas y azul para zonas de personal sanitario en un hospital. También podemos utilizar

~

criterios de adecuación a Los colores corporativos de La Identidad

fa cm

Visual de la entidad, siempre que Los pictogramas se mantengan 1

visibles y se perciban con claridad.

113

cm

118 cm

1

J

Naciones Unidas, para crear un sistema estandarizado en el

·---

sistema de señales de tráfico, organizó una comisión especial para revisar los sistemas existentes en todo el mundo y unificarlos bajo 1 Abdullah y Hübner

Los mismos estándares de forma y el color.

DISTANCIA

1

-----

-1--9 met ros

-1-- 15 metros

_j 24 metros

(2006, p. 35)

FORMAS CUADRADO

RECTÁNGULO

CÍRCULO

TRIÁNGULO

Rescate o signo

Rescate,

Prohibición

Señal de

de protección

indicador o signo

o signo

obligación o

contra fuego

adicional

indicador

de advertencia

Prohibición

Obligación

Rojo

Amarillo

•

ce

La efect ividad del ángulo de visión:

T

30cm

10°

_f

Advertencia,

o.....J o u

precaución

•

Verde

<

Rescate,

primeros auxilios Azul

111 Indicador

70

Ángulo de visión. A continuación podemos ver un esquema sobre

1

Indicador

Distancia efectiva de visión, entre 6 y 47 metros

1

~

>

•

Indicador

71


La retícula de la página anterior fue diseñada por Otl Aicher en 1972 para los pictogramas de los Juegos Olímpicos de Munich. Permite la representación sintetizada del movimiento del ser humano. Según Joan Costa, debemos desarrollar una retícula o pauta modular específica para la temática a la que harán referencia los pictogramas (función de adecuación de los pictogramas). Además, debemos conformar el menor número de «infrasignos», simplificando y abstrayendo al máximo sus rasgos para tener la

La retícula

garantía de que todos los pictogramas del sistema que diseñamos guardan una coherencia formal y expresiva (función normativa

Las familias de pictogramas se construyen sobre una retícula o

para la construcción de las figuras). 4

4 Costa (1987, p. l45)

pauta modular que ayuda a que los signos se perciban como un sistema formal coordinado. Esta estructura unitaria facilita la sistematización y el desarrollo de toda la serie. Para crear una retícula, debemos considerar las necesidades formales y expresivas de nuestra familia de pictogramas. Una retícula puede dividirse en unidades y subunidades que ayudan al diseñador a establecer un equilibrio visual. 3

Retícula para los iconos de iOS 7.

Retícu la primaria: líneas horizontales y verticales que son el elemento principal de referencia . Retícula secundaria: divide la retícula primaria en elementos más pequeños y ayuda al diseñador a crear equ ilibrio visual.

Ajuste a la retícula de los bocetos para «flora autóctona del País Vasco», <> de un jardín botánico .

...

''

t ce. t diagonales que dividen cada unidad en

cuatro fragmentos iguales, establecen el ángulo de referenc ia y aseguran un diseño más preciso.

e

3 Abdulla h y Hubner

''

'

'

(O v-=7_ ____ _ '

(2002, p. 33)

72

''

73

En la figura se puede observar que se han buscado intencionadamente, en la medida de lo posible, parámetros similares en altura, anchura o ángulo.


Grosor de Línea. La coherencia entre el grosor de las Líneas con las 1

que compondremos el pictograma garantiza una uniformidad de su

r -- -

estructura formal. Los grosores de la Línea deben aplicarse sistemá-

-- -

--.,

r -

-

-- -

-- ,

~ :!: @! --027---~~-~~/?-;

ticamente a partir de las unidades que forman la retícula en el caso de los pictogramas independientes o en base al grosor de astas si 1

trabajamos con pictogramas de origen tipográfico. ~p . 90

-

1 1

Por ejemplo, si empleamos la retícula citada anteriormente,

L

_

_

_

_

__

_

_

_

J

L

___

__

_

J

L

5 Abdullah y Hubner

. podríamos trabajar con los siguientes grosores:

c~-~--).C'7-'.L . -~

1 1 _

-

-

---

-

--

-

-

~5

"

11

--.J

L

_

__

_

_

__

___

: 1

_

J

5

(2002, p. 35)

2

Media unidad

Una unidad

Dos unidades

3

Área de protección. Además de las unidades y subunidades, también marcaremos un área de protección. Este área delimitará el espacio entre pictogramas cuando se encuentren en grupo. De la misma forma, el área de protección marcará la distancia que se deberá respetar cuando aparezcan sobre cualquier soporte, de manera individual o acompañados de elementos tipográficos.

4

- +,.. ·r+-- f "\ -4,.,_;r1-' t c f t- ~ --,- ¡--,. ,¡--

¿ r' H /-loe

J._

t

hit most, vel inti de et ut accullacipic

Ejemplo de aplicación del

Ebit erro blatem

área de protección en iconos/ pictogramas:

Quis a utas su m vellenis animus, in re perumNem hit mas t. vel inti de et ut accullacipic

r-;f.

~'!'-

f---'1é--

~-

-'*' ___,¡ ~ 1

~:or--

'tf

A

r-' 1-7 _.J._

-~

'

f--e

f-

~

f---1'

~

p

~

~

f- ---1--:;f

L

t + -+'·

corporativo y áreas de

___:,¡;

r- /1;----+-- r-

!--->

l. Área de protección respecto al fragmento de retícula que ocupa el signo digitalizado. 2. Signo con grosor de línea

Ebit erro blatem

-~-

f

~

r--+

protección.

3. Distancia entre pictogramas

't'

respetado el área de protección

-f--->

y ajuste de manera manual Área de protección

4. Aplicación de los iconos en una posible aplicación.

74

75



La retícula puede construirse con un mayor o menor número de

Algunos elementos pueden liberarse de la retícula para aportar

subdivisiones. Esta variable determinará también las posibilidades

mayor coherencia o dinamismo al pictograma o para representar

de construcción del pictograma.

correctamente su morfología. Joan Costa nos advierte del «peligro de caer en excesos intelectuales o estéticos cuando se crea una pauta pretendidamente universal[ ... ]. La pauta debe ser "un esquema abierto" a las potencialidades de diseño y no una cárcel en la que el propio grafista se encierra. En este sentido, y conforme al criterio señalético de una economía generalizada, es preferible no pedirle a una pauta modular más funciones de las que realmente puede asumir con eficacia». 6

f:

6 Costa (1987, p.l46)

.:.t.

:¡¡

Aunque la retícula constructiva de Otl Aicher es muy flexible Y

!1¡

;....

1':

....

._

~

;.:

¡¡ ...

\ )1-

~

funcional, en algunos casos podemos proponer otras variaciones .

J\1\ 1

J\

,;

J\

v v\

~v

1\f ,; ./ JJ\

'\N

J\1\ '\/\/

Cuadrícula

Ángulo de 45 a

..,¡_ -:.::,.

Vv

'\

.....,

1?'!?" / /

\,.(_

¿_..,¡__ '\ \

./J V\

Ángulo de 60°

Ángulo de 30°

.... ·¡ :'

·-· . : •.

••

-l

)1

Por lo tanto, para cada proyecto debemos elegir o diseñar una

Dos posibilidades del proceso de trazado del signo, adaptación a la retícula y localización y corrección de errores. En el segundo ejemplo, se dibujan las dos patas delanteras para aportar dinamismo a la figura.

retícula específica que será determinante para organizar las partes en un todo coherente.

Propuestas de adaptación a la retícula del referente «corzo» para la señal «Precaución, animales salvajes».

76

77



0

VARIABLES: cadrícula

y circunferencias

Caso práctico «Precaución, animales salvajes»

0

Generación de las formas en base a la estructura generatriz

Objetivo. Diseñar tres pictogramas para la señal «Precaución, animales salvajes» para diferentes entornos geográficos. Desarrollo. Otro sistema para crear pictogramas es mediante el uso de una estructura generatriz. La familia de pictogramas que estudiaremos en esta ocasión será la formada por los animales canguro, camello y corzo. Los tres pictogramas se han creado a partir de dos variables clave, una cuadrícula y una serie de cuatro circunferencias de distintos tamaños que encajaremos en la retícula. Bajo la retícula podemos colocar, en otra capa, una imagen o fotografía del animal o un

0

1 Variación en las formas y ajustes

boceto realizado a mano alzada. Si observamos la forma preliminar, las proporciones se corresponden con los animales que se van a representar. (1 y 2)

1

Sin embargo, algunos detalles, como las orejas, el grosor de las patas, las pezuñas o la forma de la cabeza no pueden configurarse con esta estructura generatriz. Por esta razón, podemos añadir y adaptar estos detalles al margen de la retícula, hasta que cada animal adquiera sus rasgos característicos. (3) El último paso consiste en reajustar algunos detalles para que el

0

1 Bocetos a escala reducida.

Ampliación del tamaño de algunos rasgos de los animales

Recordamos que cada

conjunto tenga coherencia formal. Nos aseguramos de que los

pictograma debe ser diseñado

elementos pequeños, como las orejas, o de poco grosor, como las

en su tamaño real

patas, tengan el tamaño y grosor suficiente pa ra que sean visibles

valorado en su entorno de

y ser

aplicación. En este caso sería

y reconocibles por el receptor, desde largas distancias. (4)

necesario colocar las señales en la carretera y realizar in

situ pruebas de visibilidad y reconocimiento del signo.

78

79

1


Aplicación del mismo vocabulario gráfico a toda la familia y contextualización en la señal.

80

ICONOS Y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO En el apartado anterior hemos profundizado en el proceso de diseño de Los iconos y pictogramas en general; en este apartado nos centraremos en Los sistemas de pictogramas de origen tipográffo. Denominamos icono o pictograma de origen tipográfico a aquel diseñado para convivir con una tipografía concreta y que surge del análisis de sus signos alfabéticos. La coordinación entre pictogramas y tipografía puede darse en distintos grados de afinidad morfoLógica y puede percibirse en aspectos tales como La estructura, Las proporciones, Las relaciones entre formas y contraformas o en el contraste. Hemos observado que La construcción de Los pictogramas presenta ciertos paralelismos con el diseño de tipos. Esta relación se intensifica cuando hablamos de familias de pictogramas que han sido diseñadas en base a tipografías concretas. En este apartado, aplicaremos aspectos sintácticos y metodológicos propios del diseño tipográfico, pero adaptados al desarrollo de Los sistemas de pictogramas. Como ejemplos de este proceso vamos a mostrar varios proyectos. EL primero tiene su origen en La tipografía Avenir Light (Adrian Frutiger, 1988), seguido del diseño de pictogramas para Helvetica Regular (Max Miedinger, 1957). Finalmente, veremos Los resultados de La familia de pictogramas para Asap (Pablo Cosgaya, 2012).

83

DISEÑO DE ICONOS Y PICTOGRAMAS 4. ICONOS Y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO

Los pictogramas tienen una finalidad señalética y por lo tanto acompañarán a familias tipográficas, por lo general lineales, optimizadas para este tipo de entornos. En los años 1960, el tipógrafo Matthew Carter diseñó Airport para una terminal del aeropuerto de Heathrow. Carter modificó la tipografía Standard para adaptarla a las necesidades de un proyecto de señalización ampliando la altura de x, haciendo los ángulos de los terminales horizontales

Elección de la tipografía

o verticales, diseñando los números para coordinarse de manera uniforme con el texto, y redibujando algunas letras y números

El primer paso de este proceso consiste en elegir la fuente con la que vamos a trabajar. La personalidad de una tipografía puede

concretos, tales como la j, la y, la ro el 1, para incrementar el reconocimiento de los caracteres y aumentar la legibilidad. 1

1 Re (2011, no 60: 27-28)

estar definida por diferentes variables como el contraste entre astas la forma de los remates o los ejes de las letras circulares.

Disp~ner de una tipología en la que aparezcan todas las tipogra -

fías ordenadas por grupos nos ayuda a comprender la complejidad y cantidad de fuentes que existen en la actualida~. ~~más

En lntroducing the pictogram font Wayfinding Sans Symbols, Ralf Herrmann

conocida de estas clasificaciones es la que realizó Max1m1l1en

define las cualidades y características que hacen de su tipografía Wayfinding

Vox en 1954-1955. Otras tipologías que se han desarrollado son Pellitteri, la de Jean Alessandrini o la de Hermann Zapf. A estos

·Sus caracteres deben poseer la diferencia estructural necesaria para facilitar

Typographique tnternationale (Atypl) estandarizó en 1962.

primero que se vuelve ilegible desde la distancia, por lo que estos elementos deberán tener un tamaño considerable.

HUMANAS

GARALDAS

REALES

DI DONAS

MECANAS

Jenson, Centaur, Schneidler

Garamond, Palatino, Bembo

Caslon, Baskerville, Perpetua

Didot, Bodoni, Century

Clarendon, Serifa, Rockwell

Eo ~E e ~E e

_l_ boq

E !Ee

LINEALES

INCISAS

ESCRIPTAS

MANUALES

Helvetica, Avenir, Futura

Trajan, Albertus, Graphia

Snell Roundhand, Zapfino

Brush, Benguiat, Brush Script

1

boq

E

su reconocimiento y distinción en entornos de señalética. Por ejemplo, se acentuará la diferencia morfológica entre pares de caracteres que pueden ser confundidos, como la C y laG, la O y la Q, o lag y la p. · Teniendo en cuenta que los signos diacríticos son muy importantes en algunos idiomas, debemos considerar que las formas separadas de las letras son lo

CLASIFICACIÓN TIPOGRÁFICA

boq

í

la de Francis Thibaudeau, la de Aldo Novarese, la de Giuseppe

(1954). En Pohlen (2011, p. 56)

1

Sans una fuente idónea y especialmente diseñada para proyectos de señalética. · Una tipografía para señalética estará dise~ada para aumentar al máximo la distancia de visión.

planteamientos hay que añadir la clasificación que la Association Clasificación de Maximilien Vox

Ralf Herrmann: Wayfindinf} & T~pography http://opentype.info/ blogÍ 2Ól2/ 04/19/ wayfinding-sans-pro-released/

ABC

d:f¡f~ ABCDEF

· Es interesante que la fuente incluya un sistema de flechas que podamos integrar con la tipografía de manera sencilla. · Resulta de gran utilidad, sobre todo si pensamos en sistemas de señalización bilingües o incluso trilingües, que la familia sea versatil y tenga varios pesos que nos permitan organizar la información.

En esta web también se recoge el proceso de documentación, investigación y análisis previo que realizó Ralf Herrmann.

Si nuestro proyecto incluye el diseño de una familia de iconos para dispositivos electrónicos, tomaremos como referencia aquellas tipografías optimizadas para la pantalla. Algunas de las cualidades

~~ ""'~ rt'BeD&?tpl1fl

de estas tipografías son las siguientes: poseen grandes alturas de x, amplios blancos internos y formas abiertas y el grosor es uniforme. Finalmente, estas tipografías han tenido que ser adaptadas mediante 2 Klanten, Mischler y Bilz Ed. (2008, pp. 93-95)

un proceso de hinting para su correcta visión en pantatla. 2 84

85

IJLLJL_______________________________________~----------------------~------------~-~~----~----------------------------------------~--------------------~-------

1

DI SEÑO DE ICONOS Y PICTOGRAMAS

4. ICONOS Y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO

Estructura. Una familia tipográfica se construye en función de cinco líneas principales: base, altura de x, altura de descendentes, altura de ascendentes y altura de mayúsculas. Estas líneas marcarán las proporciones en altura de los futuros signos.

Avenir. Análisis estructural; líneas horizontales. DIACRÍTICOS

Análisis de la tipografía de origen Una vez que hemos seleccionado la tipografía de origen, reali-

ALTURA CAJA ALTA

zaremos un análisis de la misma para definir sus marcadores de identidad. Este análisis nos permite comprender aquellas características estructurales y estilísticas que la definen y que aplicaremos al diseño de sus iconos o pictogramas. Clasificación tipográfica. Dentro del grupo de las tipografías

ALTURA DESCENDENTES

lineales, tendremos que apreciar las diferencias entre humanistas, neogrotescas, grotescas de Benton y geométricas. 3

3 Pohlen (2011. pp. 64-67)

Altura de x. Altura de la letra x en caja baja de una fuente. Esta altura determina, en gran medida, la percepción del tamaño de un tipo de letra.

TIPOGRAFÍAS LINEALES HUMANISTAS o

Sin remates

N EOG ROTESCAS o

Uniformidad casi total del grosor de los trazos, con un ligero contraste

Tendencia al contraste clásico La letra g minúscula suele tener «dos ojos» (forma clásica)

o o

o

abcdefghijklmnño

pqrstuvwxyz ABC DEFGHJKLMN ÑOPQRSTVWXYZ

1234567890 [(&?¿!!,.;:''/ ·"")] Gill Sans, Frutiger, Myriad, Syntax o Meta.

Sin remates

Eje de las curvas vertical En muchos casos la altura de las ascendentes y la de las mayúsculas coincide

GROTESCAS DE BENTON

GEOMÉTRICAS Ascendente. Cada uno de los trazos de un carácter que sobresalen por encima de la

o

o

Sin remates

o

Contraste fácilmente reconocible

o

Eje de las curvas vertical

o

Blancos internos grandes

o

o

o

Sin remates

altura de x (b, d, f, h, k,

Grosor de los trazos uniforme (mínimas correcciones, meramente ópticas)

línea imaginaria a la que llegan los extremos superiores de los rasgos ascendentes de las letras minúsculas. Descendentes. Cada uno de los trazos que sobresale por debajo de la línea de base (p,

Eje de las curvas vertical

q, g, y). De este modo, entendemos como línea de descendentes la línea imaginaria a la

Estructuras que parten de figuras geométricas simples

que llegan los extremos inferiores de los rasgos descendentes de las letras en caja baja.

Caracteres estrechos o

La letra g minúscula tiene un arco abierto apuntando hacia arriba

abcdefghijklmnño

ÑOPQRSTVW

abcdefghijklmnño pqrstuvwxyz ABC DEFGHJKLMN ÑOPORSTVWXYZ

1234567890

XYZ 1234567890

1234567890

[(&? ¿!!,.;:''/·"")]

[(&? ¿! !,.;:''/·\\")]

[(&? ¿!!,.;:'' /·" ")]

86

Por lo tanto, entendemos como línea de ascendentes la

Línea base. Línea horizontal imaginaria sobre la que se apoyan las letras; se corresponde con el borde inferior de La altura de x de una fuente. Línea de mayúsculas. Línea horizontal imaginaria a la que llega la parte sup erior de las letras en caja alta.

abcdefghijklmnño pqrstuvwxyz ABC DEFGHJKLMN ÑOPQRSTVWXYZ

Helvetica, Universo Akzidenz Grotesk.

l. t).

pqrstuvwxyz

ABC

DEFGHJI
Bell Gothic, Franklin Gothic u Officina Sans.

Familia tipográfica. Las variantes son opciones que nos ofrece una misma famili a para jerarquizar la información y responder a las diferentes necesidades de la comunicación visual. En el

Avenir, Futura, Avant Garde o Eurostile.

caso de la señalética, nos posibilitarán, por ejemplo, trabajar con text os bilingües (asignando un peso diferente para cada idioma).

87

.,!!


Si anticipamos que los pictogramas van a resolverse en línea o

~

Avenir Light

Coherencia formal y afinidad morfológica. Por medio de la

trazo, podemos elegir una variante de la familia tipográfica que

repetición de elementos o partes comunes de los signos y el tipo

nos facilite la elaboración de los mismos.

de contraste, se logra una «relación armónica entre todos los caracteres de la misma fuente».4 4 Henestrosa, Meseguer y Scaglione (2012, p. 36)

ABCDEFGHIJKLMNÑOPORST UVWXYZ abcdefghijklmnñopqr stuvwxyz 1234567890

[.,:;·'/- _ -](¿?!! "" /\) {ao%&$*}

1;fJ hi j Kimnñ 1 1 1

La forma de los puntos de la tipografía puede sugerir la forma de la cabeza .

1

Avenir Roman

ABCDEFG H IJ KLM N ÑOPORST UVWXYZ abcdefghijklmnñopqr

stuvwxyz 1234567890

Avenir. Estudio de los elementos que aportan coherencia formal.

[.,:;·'/- _ -]{¿?!!""/\) {ao%&$*}

Avenir Medium

ABCDEFGHIJKLMNÑOPQRST UVWXYZ abcdefghijklmnñopqr

stuvwxyz 1234567890

TERMINALES

CD· · · CD CAJA ALTA

CAJA BAJA

[.,:; .' / __ -]{¿ ?!! 11111\) {ao%&$*}

Otra alternativa es desarrollar una propuesta de sistema de pictogramas que conviva con todas o algunas de las variantes de la familia tipográfica, como en el caso de Asa p. ~ p.llS

88

DIAGONAL-RECTA

~ ~

\1) ...... \L) CAJA ALTA

CAJA BAJA

INTERSECCIONES

CURVAS

~. . ...rO\ \~Y \{y

~ ~

~······~

,,

Avenir. Análisis de algunos

CAJA ALTA

de los rasgos unificadores

CAJA BAJA

CAJA ALTA

CAJA BAJA

existentes entre la caja alta y la caja baja.

89


Tensión de las curvas. Conviene analizar tamb ién la relación entre las curvas, la entrega o unión entre ellas y su dinamismo. En la imagen anterior podemos observar las formas de las curvas (c,e,o) y cómo éstas se unen con las astas verticales (b,d,h,m,n,ñ,u).


Numerales, símbolos, signos de puntuación y signos diacríticos. Como es lógico, debemos estudiar las estructuras de aquellos signos no alfabéticos elaborados en base a nuevas necesidades comunicativas como la flecha, tos signos «ampersand» y «arroba» o los símbolos monetarios.

Contraste. Aunque en las tipografías más adecuadas para señalética, el contraste suele ser total o casi uniforme, es importante estudiar este aspecto para comprender la 'lógica de diseño de la tipografía y los espesores de trazo que podemos emplear en el

1234567890 ~¿ ?%&([ {}*+\/.,:;<<=~:t:>> ™@©

diseño de los pictogramas.

@fD}(i§€" #$' 1\-'j-q:··a«---, -o+23'~. "10» J.4Y2%BP-7-0A~·o<-

Grosor de astas. El análisis del grosor de las astas (verticales Y hori-

"O~n-","" ~~+·

zontales de la caja alta y la caja baja) de la tipografía de referencia

.. .%o<~oea6ni -lvoof O ~

es imprescindible si vamos a desarrollar un sistema de pictogramas con línea gráfica. Pero, a la hora de aplicarlo a los pictogramas, deberemos revisarlo y adaptarlo, ya que «las figuras más complejas 5 Henestrosa, Meseguer

deben dibujarse más livianas que las figuras simples». 5

y Scaglione (2012, p. 56)

Aunque en este caso situamos el análisis en la primera etapa de desarrollo, debemos tener en cuenta que el análisis y la observación de la tipografía de referencia deben ser continuos durante todo el

Avenir. Numerales, símbolos, signos de puntuación y signos diacríticos.

proceso de diseño de los pictogramas. De esta manera se perciben más detalles para aplicar en cada ítem concreto.

Es importante tomar conciencia de que, aunque es necesario comprender y asimilar las formas de la tipografía de referencia, llegará un momento en que debamos liberarnos de las mismas para dar paso a formas nuevas en los pictogramas. Aunque pictogramas y tipografía estén vinculados morfológica mente, a medida que diseñemos la serie de signos, nacerán nuevos rasgos que atenderán a las nuevas exigencias producidas por la necesidad de que cada signo se adapte a su referente. Si recurrimos a una analogía, podríamos decir que pictogramas y caracteres alfabéticos serían los miembros de una misma familia, que comparten muchos rasgos genéticos (genotipo), pero que en su aspecto exterior (fenotipo) difieren unos de otros en mayor o menor medida.

rn

Avenir. Estudio de las relaciones de grosor entre las líneas horizontales y verticales en la caja alta y la caja baja y aplicación a los pictogramas.

Henestrosa, C., Meseguer, L. y Scaglione, J. (2012). Cómo crear tipografías. Del boceto a la pantalla. Madrid: Tipo e Editorial Este libro explica de una manera clara y precisa el proceso de creación de una fuente. El contenido engloba premisas y principios metodológicos, correcciones ópticas, digitalización de caracteres, ajuste del espaciado, diseño de las varian tes de una familia y el papel de la tecnología digital en el diseño de tipos, entre otros apartados.

90

91

1


Bocetos Una vez analizada la tipografía de origen, podemos realizar dos fases de bocetos. Una primera fase a mano alzada y otra serie de bocetos sobre la estructura constructiva.

o

¿Por dónde empezamos? No es fácil seleccionar el punto de partida. Sin embargo, recomendamos comenzar por los signos que .1

representan al hombre y a la mujer. Éstos pictogramas poseen las 1

formas más complejas, ya que es difícil mantener las proporciones

f

y la esencia del cuerpo humano cuando buscamos la máxima Avenir. (Parte inferior de la doble página) Secuencia de bocetos para «aseos de hombre», «aseos de mujer» y «aseos 1 acceso para minusválidos».

síntesis posible. Además, una vez diseñados o bocetados los pictogramas para «aseos de hombre» y «aseos de mujer», tendremos una serie de parámetros (proporciones, altura, anchura, grosor de la línea, valor de masa o grado de esquematización) que nos

Estudio del tronco de la mujer a partir del tronco invertido del hombre.

Estudio de los dos pictogramas en masa.

Estudio de una posible versión con cuello (cabeza unida al tronco) y de la forma de esta conexión (recta o curva).

ayudarán a crear el resto de la familia

)

(

(

93



l

_?

(j

la estructura tipo-pictográfica

Una fase paralela a la realización de los bocetos consiste en la configuración de la estructura sobre la que generar los pictogramas .

.L

Altura de los pictogramas. Para establecer los límites horizon1ales retomamos el análisis de la estructura de la tipografía. Así, podremos coordinar las alturas de los diferentes signos que formen el sistema de pictogramas con la tipografía.

ALTURA MÁXIMA DE PICTOGRAMAS DIACRÍTICOS ASCENDENTES

ALTURA MEDIA

CAJA ALTA V

ALTlJf{)\ MÍNIMA

~ "'!":-

·~ ·

::b-. r-

C:AJf\ BAJA

t:>.C'

, .~ oJtJ ; C'. , ,r ::

A

LÍNEA DE BASE QESCENDENTES

. .

. '

\

--

Avenir. Aplicación de líneas estructurales horizontales para concretar las 3 o 4 alturas de los pictogramas.

Una vez definidos los rasgos generales, también podemos dibujar La mayoría de Los bocetos fueron realizados con una dimensión de 8 a 12 cm de altura, ya que de esta manera nos acercábamos al tamaño real que tendrían Los pictogramas.

directamente en la pantalla, con un programa de dibujo vectorial. En el caso de los pictogramas, así como en el de muchas tipogra-

Anchura de los pictogramas. Para establecer las líneas vertica -

fías, el dibujo a mano alzada, el dibujo en pantalla y sus variacio-

les que completarán la retícula, nos servimos de la anchura de algunas letras.

nes, conviven y se combinan a lo largo del proceso de diseño.

94

95


ANCHURA MÁXIMA

ANCHURA MÍNIMA

ANCHURAS MEDIAS ;>

Figuras humanas. Para resolver las figuras humanas, realizamos un proceso paralelo de ajuste de las proporciones al máximo. En primer lugar, tomamos la línea de diacríticos como altura máxima y la línea de base como lugar donde se apoyan los pies. En segundo lugar, observamos algunos cánones estéticos de proporciones a lo largo de la historia; entre estas referencias, podemos tomar como modelo el hombre de Vitruvio (Leonardo da Vinci).

Avenir. Selección de anchuras para confeccionar la estructura de los pictogramas.

A continuación, analizamos las relaciones entre esta obra y las líneas estructurales de la tipografía. Finalmente, de la combinación de ambas, generamos un esqueleto o «cursus pictográfico» a partir del cual se pueden crear las figuras humanas en cualquier posición anatómica.

6 Aún así, algunos pictogramas rompen la norma para poder ofrecer una

Con estos parámetros obtenemos tres alturas y tres anchuras

representación fisonómica lógica y natural del objeto o

entre las que se desarrollará la familia pictográfica completa

acción al que hace referencia .

coordinada estructuralmente con su tipografía.6

TIPOGRAFÍA AVENIR

PROPORCIONES HUMANAS

Cursus pictográfico Cuello Hombros

ALTURA MÁXIMA DIACRÍTICOS -1 1

ALTURAS

ASC:.tN.PtNT_E_S

MEDIAS

CAJA ALTA

Cadera RETÍCULA 1 ESTRUCTURA

Rodillas Línea de base PROPORCIONES HUMANAS Hombre de Vitruvio

:::::::::::::::::

"·"'CIN EA DE BASE

~

ANCHURA MINIMA

ANCHURA MÁXIMA

--·

-,r"'.......

Avenir. creación de la estructura y ejemplos de adecuación a la

......

estructura base.

_

..... -

Avenir. Generación del «cursus pictográfico» y su aplicación en diferentes posiciones anatómicas.

96 97

-

..--

-""'

-·

..

e

4. ICONOS Y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO DISEÑO DE ICONOS Y PICTOGRAMAS

TIPOGRAFÍA ASAP

PROPORCIONES HUMANAS Hombre de Vitruvio

PROPORCIONES HUMANAS

cursus pictográfico

Caso práctico: Pictogramas de origen tipográfico para Avenir y Helvetica Objetivo: estudiar la posible simbiosis entre los signos alfabéticos y los pictogramas a partir del análisis de las tipografías Aven~ (Adrian Frutiguer, 1988) en su variante de peso Light y Helvetica (Max Miedinger, 1957) en su versión Regular. Estos nuevos «pictogramas corporativos» podrían ser un elemento esencial de emisión de la identidad de una empresa donde los mensajes señaléticos fueran muy relevantes. Sobre todo en contextos de señalización donde necesariamente tienen que convivir el lenguaje verbal y el lenguaje icónico. Ejemplo realizado con !a tipografia Asap. Generación de! «cursus pictográfico» Y su aplicación en diferentes

esquema del proceso de diseño de los pictogramas para Avenir.

posiciones anatómicas.

sivas etapas de análisis morfológico, búsqueda de la estructura y

Desarrollo: En las siguientes páginas podemos observar un En el caso de Helvetica este esquema se completa con las sucebocetos a mano alzada. En ambos casos, mostramos los nuevos signos introducidos como parte de la fuente para verificar su afinidad morfológica y valorar su posible aplicación en los paneles de señalética corporativa.

Los resultados pre!iminares de estos ensayos se presentaron y publicaron en !as actas de! 111 Encontro de Tipografia (05-06 de Octubre de 2012) en Oporto.

99 98


~

AVENIR

4. ICONOS

0--~)

ELECCIÓN DE LA TIPOGRAFÍA

Proceso de diseño de los pictogramas para Avenir.

y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO

DIGITALIZACIÓN

AVENIR light Adrian Frutiger, 1988

Versión en masa

V

ANÁLISIS DE LA TIPOGRAFÍA

¡¡~

¿Cuál es el ADN de la tipografía?

ÁABCDEFGHIJKLMNÑOPORSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890 [. (¿?!! 1\) {ao%&$*} 1111

1

:; •

1

Versión en línea

/-- -]

Características de las lineales geométricas

Pictogramas comunes

Altura de ascendentes Altura de mayúsculas

· Sin remates

Altura de x

· Grosor de los trazos uniforme (mínimas correcciones meramente ópticas) · Eje de las curvas vertical

0---~)

· Estructuras que parten de figuras geométricas simples

~

•

~

ÁABCDEFGHIJKLMNÑ OPORSTUVWXYZ abcdefg hij kl mnñopq rst uvwxyz 1234567890 [.,:;·'/- _ -] ~¿_? J J " " /\) {ao%&$*}

PROCESO DE BOCElADO

•

RETÍCULA p' .... -

VERIFICACIÓN

~9~CD

o

Altura de pictogramas 1 Altura de pictogramas 2

0'12J

if~ ~ ta,t

Altura de pictogramas 3

Línea base

100

101 ~ !'&'

-' ;

-

•

....

•

:

•••

-~ .... -


•

•

•

•

•

•

o

•

• • • 103

102 1\

""

;

~

.-

,

\

--_ .....

l'li..,¡.._.f'~· v...>:.!L~

-

-~--

'


DI SEÑO DE ICO NOS Y PICTOGRAMAS

ÁABCDEFGHIJKLMN ÑOPORSTUVWXYZ abcdefghijklmnñopq

Secretaría Secretariat

ilt

Biblioteca Library

Papelería Stationery

~

O'

1

Decanato Deanery ~

rstuvwxyz 1234567890 [ ... 11- -

los pictogramas como «sintagmas visuales » en un panel directorio de la seña/ética corporativa .

](.¿ ?. .1.111 11 /\)

•1•1

{ao%&$*} •

•

~9~COQl21

¡¡~ ~ ~

lOS

104 ~p;

...

,.

..

Contextualización de

'

.

..... --

•

'<4.

~,¡:.:::~

""

,¡;,,.__,.,_·'

"

"" DISEÑO DE ICONOS Y PICTOGRAMAS 4. ICONOS Y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO

HELVETICA

~

ELECCIÓN DE LA TIPOGRAFÍA

Proceso de diseño de los pictogramas para Helvetica.

0~-~)

DIGITALIZACIÓN

0~--~)

VERIFICACIÓN

HELVETICA regular Max Miedinger, 1957

V

ANÁLISIS DE LA TIPOGRAFÍA ¿Cuál es el ADN de la tipografía?

ÁABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890 [.,:;·'/- _ -](¿ ?!!""A){aoo/o&$*}

1/

Características de las lineales neogrotescas

Altura de ascendentes Altura de mayúsculas Altura de x

· Sin remates · Uniformidad casi total del grosor de los trazos, con un ligero contraste · Eje de las curvas vertical

1

·· -

· En muchos casos la altura de las ascendentes y la de las mayúsculas coincide

1

1

1

....

Línea base

V

~

PROCESO DE BOCETADO

ÁABCDEFGHIJKLMNÑ OPQRSTUVWXYZ abcd efg hij kl mnñopq rst uvwxyz 1234567890 [., :;·'/-- -] (¿?!!""A) {aoo/o&$*}

o~~ lif¡O ~

Q

~

C!l

V

RETÍCULA Altura pictogramas1 ~=lt+:l:rttt+:l=t:H+=t1 Altura pictogramas 2 ~+M#l::±lt+!-tt-tt-H Altura pictogramas 3 t-'1

1- -1--1-l--1-1-1-+ + + ++1-H - 1-1

Ll

Línea base

106 :...::. 1

107



En las páginas siguientes

/

se muestra el análisis de la tipografía Helvetica, bocetos,

TU RAS MEDIAS v

generación y aplicación de la estructura y resultados .

CAJA A

TUBA MÍNIMA CAJ

,

DIACRÍTICOS ALTURA ASCENDENTES ALTURA CAJA ALTA ALTURA DE X

•

LÍNEA DE BASE ALTURA DESCENDENTES

Análisis estructural; líneas horizontales.

al 1~fj h i J lmnñ 1 1 •

rstU\ WX\ Z

DIAGONAL-RECTA

TERMINALES

CAJA ALTA

CAJAALTA

CAJA BAJA

CURVAS

INTERSECCIONES

CAJAALTA

CAJABAJA

CAJA ALTA

CAJABAJA

CAJA BAJA

Estudio de los elementos que aportan coherencia formal y de los rasgos unificadores existentes entre la caja alta

Estudio de las relaciones de grosor entre las líneas horizontales y verticales en la caja alta y la caja baja y aplicación a los pictogramas.

y la caja baja.

108

109

-

. •

~

-

t::

=· •

t

...,.~

-

.loO.c

_..r_

-

~

~,

'



ALTURA MÁXIMA DIACRÍTICOS ALTURAS

MEDIAS

Bocetos.

A?.c:EN.DJNIJ:S ~C~A~J~ A~A~L~ T~ A~~~~~~~-~ .. ~--~..~ ..~ .. ~ .. ~--~~=

ALTURA MÍNIMA CAJA BAJA

RETÍCULA 1 ESTRUCTURA

,..r

·····LiN.EA.'DE..Eí.As·E··· ............................. ·········· ............ ·········· ANCHURA MÍNIMA

ANCHURA MÁXIMA

V

........... .......... Creación de la estructura

y ejemplos de adecuación a la misma.

ANCHURA MÁXIMA

ANCHURA MÍNIMA

ANCHURAS MEDIAS

TIPOGRAFÍA HELVETICA

PROPORCIONES HUMANAS Cursus pictográfico Altura humana Cuello Hombros

Cadera Rodillas Línea de base PROPORCIONES HUMANAS Hombre de Vitruvio

Helvetica. Generación del «cursus pictográfico» y su

Selección de anchuras para confeccionar la estructura de

aplicación en diferentes

los pictogramas.

posiciones anatómicas.

111

110

1

~-.

..

"'~.f2--1~;;~

- . -

<

(


•

•

•

• • • 113

112

DISEÑO DE ICONOS Y PICTOGRAMAS 4 · ICONOS y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO

ÁABCDEFGHIJKLMN ÑOPQRSTUVWXYZ

abcdefg hijkl mnñopq rst uvwxyz 1234567890 [ .' .... ' '/- - - ] ( ~. ?. .1.1''''A) {aoo/o&$*} •

•

Caso práctico: Pictogramas para la tipografía Asap Objetivo: desarrollar una familia de pictogramas para la tipografía

~sap (Pablo Cosgaya, 2012), para aplicación en contextos de señalétrca corporativa en las áreas de transportes y educación.

~

Desarrollo~ En los casos anteriores se ha elaborado un pequeño gr~~o de srgnos a partir de una sola variante de la familia tipogr~frca. En esta ocasión hemos diseñado una familia de signos mas extensa para convivir con la familia Asap en sus versiones Regular y Bold.

•

Q~ ~

-

¡

Secretaría Secretariat Papelería Stationery

Biblioteca Library Decanato Deanery

Pictogramas introducidos como parte de la fuente, para verificar su afinidad morfológica y valorar su posible aplicación en entornos de Señalética Corporativa. 1

114 115

..,.


tt

*tt r ~ ;,. ¡1 rt ~ & u* ~ ~ '"'.~.~

( IJ[J " la + g

g

g

e

00 ¿

,

.R

....

_~_

[[)

~

~

..

·~ q ~

x· >

~

.., ~ @ ®®®®®®
tt * ti r ~ ~ ¡1 rt ~ ~ tt t h ~ ~iJ 0

( ¡;J [J ff ~ OJ

~

.,

*?

--.. Joo

CJ lÍ!J rr;

1t

·~

...

X

~

'l

CD®®0

Para este proyecto contamos con la asesoría de los profesores

®®®®®®

(Facultad de Arquitectura, Diseño y

Urbanismo, Universidad de Buenos Aires. FADUIUBA)

116

~

--

desarrollándose en la actualidad.

Pablo Cosgaya y Marcela Romero

¿

~ggQI:J.R

,~~

La familia de pictogramas para Asap, con 57 mensajes, sigue

+ ~

117


•

•

~Q~co

it ~ ~ •

•

•

R~ ~

Pictogramas de origen tipográfico para Avenir, Helvetica

y Asap.

• • •

~·1

DIGITALIZACIÓN Y AJUSTES ÓPTICOS

Durante la etapa de bocetado habremos definido las características fundamentales de la familia de pictogramas y tendremos una idea clara de la misma, reflejada en un grupo de signos bas,. Por lo tanto, podemos comenzar la fase de digitalización.

Hoy en día, cada vez se diseñan más iconos y pictogramas que se presentan en forma de fuente (tipográfica) y no como un conjunto de imágenes individuales. Esto facilita su uso y mejora su calidad de reproducción.

El primer paso antes de comenzar el proceso de trazado o vectorización consistirá en seleccionar tos bocetos más adecuados para cada pictograma y después escaneartos para calcarlos en programas de dibujo vectorial o específicos para el diseño de tipos.

Cómo se crea una tipografía digital- Tutorial de FontLab, Unos tipos duros http://www.slideshare.net/unostiposduros/ tutorial-fontlab

Trazados de Bézier. Tal y como se explica en la publicación «Cómo crear tipografías. Del boceto a la pantalla», la digitalización «es el proceso de reconstrucción digital mediante líneas y curvas previa-mente dibujadas». La forma más habitual de digitalizar cualquier elemento gráfico es a través de tos trazados de Bézier. Podemos dividir estos trazados en dos tipos de puntos, puntos «en curva» (también llamados nodos o

pun~de anclaje) y puntos «fuera de

curva» (también denominados BCP, Bezter Con troJ PQínt, puntos de control, manejadores o manecillas), «que son invisibte?'y-que inftu~4 yen en el progreso de la curva pero que no forman parte de ella».

121

1 Henestrosa, Meseguer y Scaglione (2012, pp. 63-66)

DISEÑO DE ICONOS Y PICTOGRAMAS S. DIGITALIZACIÓN Y AJUSTES ÓPTICOS

PUNTOS FUERA DE CURVA (manejadores)

Colocaremos el menor número de puntos de anclaje, aunque debemos asegurarnos de que empleamos todos los necesarios para PUNTO EN CURVA (punto de anclaje o nodo)

no perder la esencia del dibujo. Salvo excepciones, estos nodos se colocarán respetando la ortogonalidad, en los «puntos en los extremos» (points in extrema). Es decir, en los puntos de tangencia verticales y horizontales del trazado. También se colocarán nodos en aquellos puntos en los que el trazado cambia de trayectoria.

En este ejemplo se puede observar que, la mayoría de los puntos del trazado

Los manejadores de cada punto deberán estar colocados de

coinciden con los puntos de

manera ortogonal, esto es, paralelos a la línea base (extremos

intersección de las líneas

verticales) y perpendiculares a la misma (extremos horizontales).

de la retícula.

Así mismo,

la ortogonalidad de los manejadores se corresponde con las líneas verticales, horizontales y diagonales de la misma. Los manejadores mantendrán una posición más

o menos equidistante del punto en el extremo.

o Letra o de la tipografía Avenir. 8 puntos de control situados

Puntos de anclaje y

en los extremos (arriba,

ortogonalidad de los

abajo, derecha e izquierda)

manejadores en el

y manejadores totalmente horizontales o verticales .

pictograma

«Aseo de

caballeros>> para la tipografía Avenir.

123

DISEÑO DE ICONOS Y PICTOGRAMAS S. DIGITALIZACIÓN Y AJUSTES ÓPTICOS

Módulos y derivación de formas. A medida que avanza el proceso de digitalización, veremos que algunos elementos se repiten en varios signos. Estos módulos, nos ayudarán a dar coherencia formal al sistema pictográfico. Del mismo modo, de unas formas podremos derivar otras realizando pequeños cambios quemantengan La esencia pero que se adapten a cada necesidad gráfica.

Ajustes ópticos. En Los iconos y pictogramas, aunque La retícula nos aporta coherencia formal, al seguir unas normas geométricas Y matemáticas, encontraremos una serie de formas que no serán percibidas como equilibradas por el ojo humano. Por esta razón, en todo proceso de diseño, incluído el de Los signos no verbales, es importante tener en cuenta una serie de adaptaciones formales, denominadas correcciones o ajustes ópticos .

•

•

•

Módulos y elementos que se repiten, con pequeñas variaciones, en los pictogramas para Helvetica.

Si analizamos Las formas geométricas básicas (cuadrado, triángulo equilátero Y círculo) encontramos una serie de aspectos estructuraLes que debemos modificar para que se perciban como formas del mismo tamaño.2 2 De Buen (2011, p. 137)

Formas y contraformas. También es imprescindible valorar el espacio interno del signo y su relación con el signo completo. Tan importantes son Las formas positivas como Los espacios que contienen. Cuando Los pictogramas encierran un espacio en su interior, debemos asegurarnos de que el contraste entre blancos y negros está equilibrado.

•

•

QQ

•

~

CP

1 1 1

1

1

T

1

1

••

Aunque las tres figuras tienen la misma altura, el cuadrado se percibe más alto que el círculo y el triángulo .

Solución: este efecto se compensa haciendo que los círculos y los triángulos rebasen los límites estructurales fijado s por las líneas rectas.

f"lJ1111as y contraformas de los signos diseñados para convivir con la tipografía Helvetica.

124

125 '"-t_· ~ ._ .

.,.- -. '

~-

- '

~ - - - ....

DISEÑO DE ICONOS Y PICTOGRAMAS 5. DIGITALIZACIÓN Y AJUSTES ÓPTICOS

3 y 4 Abdullah y Hübner

Así mismo, sabemos que una línea horizontal parece más corta

«Una de Las cosas más sorprendentes en el de por sí

que La misma barra colocada de manera vertical. Del mismo

sorprendente diseño tipográfico es que gran parte de

modo, una Línea diagonal también es percibida como más corta

la regularidad geométrica de las letras es aparente. En

que una vertical o una horizontal. 3

realidad, los diseñadores tipográficos se valen de una

(2006, p. 34)

variedad de engañifas para hacer creer al observador en La uniformidad de los rasgos y las dimensiones»s

S De Buen (2011, p. 136)

Aprendiendo de la tipografía. Si estudiamos esta cuestión dentro del proceso de diseño de tipos, podemos enumerar una serie de reglas útiles que nos ayudarán a que los trazos de Los pictogramas del sistema sean percibidos de manera equilibrada, con el mismo espesor: 6

~

Estudio de un mismo

l. Los círculos y los triángulos siempre parecen mas pequeños

trazo colocado de manera horizontal, vertical y diagonal.

que los cuadrados. Por esta razón, las curvas, los ápices y los Además, en La intersección de varias líneas se crea un punto en el

vértices rebasarán los Límites horizontales definidos por los

que se genera demasiado peso visual por Lo que debe ser manipu-

elementos rectos horizontales.

Lado para restablecer el equilibrio visual entre el espacio blanco y el negro.4

2. Para que parezcan del mismo espeso r, los trazos curvos deben ser más gruesos que los rectos.

Cuando se cruzan dos o más

Solución: manipulación de

trazos, se genera demasiado peso

los trazos para restablecer el

visual en el punto de intersección

equilibrio visual

Ejemplo de ajuste óptico en el ítem «Correo » (Avenir)

126

127

6 De Buen (2011, pp. 136-143) y Henestrosa, Meseguer, y Scaglione (2012, pp 56 y 69-71)

5. DIGITALIZACIÓN Y AJUSTES ÓPTICOS DI SEÑO DE ICONOS Y PICTOGRAMAS

3. Si queremos que los trazos verticales y horizontales parezcan del mismo espesor, los horizontales deben ser menos gruesos que

6. Las figuras más complejas deben dibujarse más livianas que las figuras simples.

los verticales. Las astas diagonales, deberán ser más delgadas a medida que se acerquen a la horizontalidad.

Esta lista se puede ver ampliada en cualquier momento del proceso de diseño, ya que podemos detectar incongruencias morfológicas nuevas y diferentes, a medida que trabajamos

lOO%

o dependiendo del tamaño al que diseñemos los signos. 95%

Es un trabajo complicado y exhaustivo pero, como dice Jorge de Buen, «las letras son así, y los diseñadores les tenemos tanto apego, que simplemente sonreímos y nos sometemos de buen grado a sus volubilidades y extravagancias». 7 Partiendo de la

7 De Buen (2011, p. 143)

premisa de que los diseñadores de pictogramas e iconos mo~ra 90%

mos la misma pasión y entusiasmo por nuestros signos, tengamos paciencia, observemos cada pequeño detalle y seamos rigurosos en el diseño de los mismos.

4. El ojo humano percibe las mitades superiores de las letras

En el signo «primeros auxilios» ha sido necesario hacer varios

como más grandes que las inferiores. Si nuestra intención es que

ajustes ópticos para que las astas parezcan del mismo grosor y para que el asta horizontal se vea centrada.

un trazo parezca estar en el centro geométrico del signo, éste se colocará un poco más elevado.

La última fase es la de verificación de nuestros signos. Antes de profundizar en este tema y para anticiparnos al mismo, podemos establecer una última analogía con el mundo del diseño tipográfico. El diseñador de tipos debe hacer una cantidad enorme de pruebas que han de ser revisadas y verificadas sucesivamente, hasta que, en palabras de Matthew Carter, «a veces, misteriosamente, haces estos cambios, sale una prueba de la impresora láser, la miras y dices, "Hola, tipografía"». 8 En la creación de

8 En Re (2011, p. 23)

pictogramas observamos el mismo proceso cíclico de creación, revisión y modificación para solucionar todos y cada uno de los

H

aspectos sintácticos de la serie.

H S. Los trazos deben hacerse más delgados al aproximarse a una conexión.

129 128


VALORACIÓN Para hacer una última revisión de nuestra familia de iconos o pictogramas, hemos elaborado tres tablas con criterios y preguntas de comprobación. Hemos tomado como base el rlfJdelo Semiótico y la investigación de AlGA para su sistema de pictogramas estandarizados.

En esta investigación, el proceso de evaluación consistía en la asignación de una calificación para las tres dimensiones interrelacionadas: semántica, sintáctica y pragmática. Los participantes tenían que contestar según unos criterios formulados a través de una serie de preguntas, marcando en una escala dell al S, siendo 1 el mínimo grado de efectividad (debilidad) y el S el mayor (vigor).l

1 Estas preguntas también se pueden consultar en la publicación: Pierce, T. (1996, p. 208) The Internacional Pictograms Standard.

133

DISEÑO DE ICONOS Y PICTOGRAMAS 6. VALORACIÓN

DIMENSIÓN SEMÁNTICA

DIMENSIÓN SINTÁCTICA

Criterio

Pregunta

Transmisión del mensaje

¿Comprenderán los destinatarios fácilmente y sin error

Forma lógica de los

el significado del icono/pictograma?

referentes

Criterio

¿Se asocia correctamente el signo al mensaje propuesto o

¿Tienen los iconos/pictogramas una forma fisonómica lógica para ser reconocido el objeto que representan? ¿Ha perdido el signo la configuración característica de su referente?

puede confundirse con otro mensaje? ¿Puede ser entendido por personas de distintas culturas?

Pregunta

Selección de rasgos

¿Llegarán a comprenderlo las personas de edad avanzada,

¿Tiene el pictograma demasiados o escasos rasgos de reconocimiento?

con menor agudeza visual o menor rapidez de reflejos?

¿Tiene los rasgos básicos para que la forma sea reconocible?

Vigencia formal

¿Será perdurable en el tiempo?

Codificación y adecuación

¿La referencia al color en relación con el mensaje es clara?

y coherencia formal del

cromática

¿Se utilizan códigos de color conocidos por todos

sistema (Compatibilidad

o de fácil aprendizaje?

sintáctica)

Coordinación gráfica

¿Tienen el mismo tratamiento gráfico?

¿~n que medida los _el~m,ntos .compositivos de ese signo se relaCionan con los demas 1conos/p1ctogramas de la serie?

Referente: elección adecuada

¿Es adecuado el referente elegido para la transmisión

¿Están los elementos integrantes (morfemas) en relación los unos con los otros?

y compatibilidad semántica

del mensaje?

¿Configuran una unidad estilística? i

¿Están elegidos los referentes de los signos del sistema con el

¿Están formalmente coordinados d'entro del sistema?

mismo enfoque? Jerarquía de los referentes

¿Los elementos más importantes son percibidos en primer lugar?

Elementos o rasgos esenciales

¿Contiene el icono/pictograma elementos que no están directa-

¿Se utiliza el mismo vocabulario gráfico en todos o casi todos los elementos de la serie? Cualidad del trazo

mente relacionados con el mensaje? Nivel de aprendizaje

Los pesos gráficos de las líneas o trazos de las figuras ¿son los adecuados?

¿El signo es fácil de aprender y de memorizar? ¿Ha sido difundido con anterioridad?

Color

¿Ha sido aceptado previamente por los destinatarios? Convenciones

¿Es el trazo similar en todos los iconos/pictogramas?

¿El código de color es el adecuado? ¿Está suficientemente contrastado el efecto figura-fondo?

¿Este signo contradice seriamente a las convenciones

Proporciones

ya existentes?

Sistematización

¿Están proporcionados sus elementos compositivos? ¿Podrán aplicarse los criterios de sistematización a nuevas necesidades de comunicación? Es decir, ¿podrá ampliarse la familia de signos en un futuro?

134 135


DIMENSIÓN PRAGMÁTICA Criterio

Pregunta

Visibilidad

¿El signo puede ser visualizado con facilidad?

Distancia de visibilidad

¿Este signo permanece visible con las distancias normalizadas de visión? ¿o con la velocidad?

Condiciones de percepción

¿Hay alguna interferencia en la percepc'ión del signo?

Vinculación entre la pieza

¿Este icono/pictograma puede estar seriamente afectado

y el entorno

por ángulos de visión oblicuos o por cualquier otra perturbación visual?

Condiciones de iluminación

¿Puede estar este pictograma seriamente afectado por malas condiciones de luz (directa/indirecta /natural/artificial)?

Colocación

¿El signo está colocado en el lugar adecuado?

Vandalismo

¿Es este pictograma especialmente vulnerable al vandalismo?

Reproducción

¿Puede ser fácilmente ampliado o reducido sin que se deforme? ¿Es difícil de reproducir? ¿Es la tecnología de reproducc ión adecuada? En los casos de iconos para interfaz en los dispositivos electrónicos, ¿se ha realizado el proceso de adaptación necesario para la pantalla?

Saturación visual

¿Hay demas iados iconos/pictogramas juntos en el contexto de aplicación? ¿Existe sobrecarga visual?

Material

¿Es el material adecuado?

rn

REFERENCIAS BIBLIOGRÁFICAS ABDULLAH, R. y HUBNER, R. (2002). Pictograms, lcons

HENESTROSA, C., MESEGUER, L., y SCAGLIONE, J. (2012).

& Signs. A guide to information Graphics. Londres: Ed .

Cómo crear tipografías. Del boceto a la pantalla. Madrid:

Thames & Hudson Ltd.

Tipo e Editorial

ABRIL, G. (2007). Análisis crítico de textos visuales .

HORA, M. (2005). Official Signs & lcons 2. Nueva York:

Mirar lo que nos mira. Madrid: Editorial Síntesis SL

Ultimate Symbollnc.

AICHER, O. (2004). Tipografía. Valencia: Campgrafic

KANE, J. (2005). Manual de tipografía. Barcelona : Editorial

Editors SL

Gustavo Gili SA

AICHER, O. y KRAMPEN, M. (1979) Sistemas de signos en

KLANTEN, R., MISCHLER, M. y BILZ, S. (2008). El pequeño

la comunicación visual. Barcelona: Gustavo Gili SA

sabelotodo. Barcelona : lndex Book SL

American lnstute of Graphic Arts (AlGA) (1984). Símbolos de señalización. Barcelona: Editorial Gustavo Gili SA

LIUNGMAN, C. (2004). Symbols. Encyclopediabof Western Signs and ldeograms. Estocolmo: HME Publishing

CHENG, K. (2005). Designing type . Londres: Laurence King

LUPTON, L. (2011). Pensar con tipos . Barcelona: Editorial

Publishing Ltd .

GustavC~fili SL

COSTA, J. (1987). Seña/ética. Barcelona: Ediciones Ceac

MEGGS, P. y PURVIS, A. (2009). Historia del diseño gráfico. Barcelona: RM Verlag

COSTA, J. (2007). Seña/ética corporativa. Barcelona : Costa Punto Com Editor

MOLES, A. y JANISZEWSKI, L. (1990). Grafismo Funcional. Barcelona: Edicione:; Ceac SA

CROW. D. (2008). No te creas una palabra. Una

introducción a la semiótica. Barcelona : Promopress

MORRIS, C. (1985). Fundamentos de la teoría de los signos. Barcelona: Paidós Comunicación

DE BUEN, J. (2008). Manual de diseño editorial. Gijón: Ediciones Trea SL

PIERCE, T. (1996). The lnternational Pictograms Standard. EEUU : Design Pacifica lnternational LLC

DE BUEN, J. (2011). Introducción al estudio de la

tipografía. Gijón: Ediciones Trea SL (Con la colaboración

POHLEN, J. (2011). Fuente de letras. Colonia : TASCHEN

de José Scaglione)

GMBH

DE LA TORRE, J. (1992). El lenguaje de los símbolos gráficos. México: Editorial Limusa SA

Baseline. lnternational Typographics Magazine,

RE, M. (2011). Matthew Carter: Tension and Typography;

no 60: 20-29 ECO, U. (1989). La estructura ausente. Introducción a la

semiótica. Barcelona: Editorial Lumen SA

ROBINSON, A. (1995). Historia de la escritura. Barcelona : Ediciones Destino

FRUTIGER, A. (1981). Signos. Símbolos. Marcas. Señales. Barcelona: Editorial Gustavo Gili SA

SMITSHUIJZEN, E. (2007). Signage Design Manual. Baden: Lars Müller Publishers

GONZALEZ-MIRANDA, E. (1994). El proceso de creación

y la evolución de los proyectos de Diseño Gráfico. Bilbao: Universidad del País Vasco/ Euskal Herriko

UEBELE, A. (2007). Signage Systems + lnformation Graphics. A professional sourcebook. Londres: Tames &

Unibertsitatea, Servicio Editorial!Argitalpen Zerbitzua

Hudson Ltd.

GONZALEZ-MIRANDA, E. (2010). Senderos de

investigación en Diseño Gráfico. Barcelona: Elsevier

UNGER, G. (2009). ¿Qué ocurre mientras lees? Tipografía y legibilidad. Valencia : Campgrafic Editors SL

GROUPE ¡.J (1993). Tratado del signo visual. Madrid:

VILLAFAÑE, J. (1985). Introducción a la teoría de la

Ediciones Cátedra SA

imagen. Madrid: Ediciones Pirámide SA

HALL, S. (2007). Esto significa esto. Esto significa aquello. Semiótica: guía de los signos y su significado. Barcelona: Art Blume SL

139


REFERENCIAS DE INTERNET Chaves, N. (2009), Diez principios del diseño gráfico http:// fo roa lfa.o rg/a rticu los/ diez -p ri nci pi os-d el-d iseno-gra fi co Publicado el3/ 08/ 2009 ERCO. Pictogramas de Otl Aicher http://www.piktogramm.de/ pictoserver/ homepage/ homepage/ start/de/ de_start.php

Familia de AIGA/ DOT (50 pictogramas) http://www.aiga.org/symbol-signs/ Gonzalez-Miranda, E. Seña/ética Corporativa para un centro de Formación : una propuesta de normativa para el Manual de

Identidad Visual http:// issu u.com/ elenagonza lezm ira nda/ d ocs/ sena letica_ corporativa_elena_gonzalez_ miranda lcon-language http://www.icon-language.com lnternational Standard Organization (ISO) http://www.iso.org/ iso/ home.html lsotype http://www.gerdarntz.org/isotype Japan Sign Design Association (150 signos) http://www.sign.or.jp/ english/ index.h tml

Ralf Herrmann: Wayfinding & Typography http:// opentype.info/ blog/ Unos tipos duros, Cómo se crea una tipografía digital- Tutoría! de FontLab, http://www.slideshare.net/unostiposduros/ tutorial-fontlab Zimmermann, Y. El diseño de un pictograma http://foroalfa.org/art iculos/ el-diseno-de-un-pictograma Publicado el27 / 01/ 2010

140

diseño de iconos y pictogramasGonzález-Miranda&Quindós

Recommend Documents