Diseño de Iconos y Pictogramas Elena González-Miranda y Tania Quindós

'

\ . ..,v . · -

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

campgrafic

ÍNDICE

Presentación

1

2

3

4

ICONOS Y PICTOGRAMAS

15

Semiótica y pictogramas

23

Principios básicos

33

EL PROCESO DE DISEÑO

39

Planteamiento del proyecto

46

Definición del referente

56

DESARROLLO DE ICONOS Y PICTOGRAMAS

61

Procedimientos sintácticos

68

La retícula

75

Caso práctico: «Precaución. animales salvajes» Caso de estudio: los pictogramas de los Juegos Olímpicos

81 84

ICONOS Y PICTOGRAMAS DE ORIGEN TIPOGRÁFICO

91

Análisis de la tipografía de origen

96

La estructura tipo-pictográfica

105

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

111

Caso práctico: Asap Symbol

127

S

DIGITALIZACIÓN Y AJUSTES ÓPTICOS

133

6

VALORACIÓN

147

7

REFERENCIAS BIBLIOGRÁFICAS

153

Esla nueva rdicion en la editorial Campgralic, ha sido corregida y ampliada. Conliene nuevos diagramas dldádicos y aparrados más e.rtensos qae completan las ensel'lanzas sobre los contenidos. Por una parlf se ha introducido un nuevo apa.rlado de análisis de los sistemas de pictogramas de los Juegos Olímpicos. Por otra parle, se han ampliado secciones como la del reftrenle y la de los ajustes ópticos.

PRESENTACIÓN Este libro trata del diseño de los signos que informan sin palabras. Su portada sintetrza la rdea 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 acceder al instante a grupos de contenidos o para superar barreras idiomáticas 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 srgnificado propio; iconos para la mterfaz de los productos y servicios de las nuevas tecnologías o pictogramas para la orientación de las personas en entornos señaléticos. Nuestro 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 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 necesano concebir signos de forma depurada y sobria, cuya función informativa es primordial para su destinatario.

9

DISEÑO 0 [ ICONOS Y PICTOGRAMAS

Diseñar un pictograma o una familia de pictogramas es una experiencia que requiere rigor metodológico y habilidades técnicas que solo se aprenden con la práct1ca. Se aprenden abordando de principio a fin proyectos de diferente complejidad y naturaleza. Proyectos en los que se parte de una necesidad para plantear el enfoque conceptual. en los que debemos configurar la forma precisa de cada s1gno partiendo de rJ:!ferentes adecuados. sin olvidar la creac1ón de conex1ones entre ellos, constantes visua les que harán que sean apreciados como de la misma familia. Tampoco debemos olvidar que estos mensajes tienen que llegar a cualquier tipo de receptor para que los perciba, los mterprete y los decodifique sin ambigüedad en un entorno concreto. Como en una orquesta, para lograr un conjunto armon1zado. es imprescindible comprender el concepto de sistematización y saber aplicarlo en una práctica ordenada El diseñador tiene que orga. nizar, clas1ficar y estructurar los integrantes de la serie. 1deando un o.rden 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 si mediante una serie de reglas sintáctiCas de construcción gráfica. Una vez conformados todos los s1gnos 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 s1stema, para satisfacer nuevas necesidades de comunicaCión.

PRESENTACIÓN

Los contenidos. Este libro contiene una introducción al estudio y diseño de los sistemas de iconos y pictogramas. Propone un modelo o metodología para resolver este tipo de proyectos. También hemos profundizado en los aspectos sintácticos de optimización formal de un pictograma, ya que con la sintaxis accedemos a lo más íntimo y esencial del objeto gráfico: se accede a la belleza de las soluciones. Los apartados más importantes engloban el desarrollo de familias de iconos y pictogramas, en general, y el diseño de sistemas de pictogramas de origen tipográfico, en particular. A lo largo de la publicación. hemos incluido casos de estudio y ejemplos didácticos enmarcados en diferentes contextos, desarrollados expresamente para explicar conceptos, como los que ilustran la aplicación de la retícula o el diseño de iconos y pictogramas a partir de tipografías concretas. En los últimos apartados exponemos diversas recomendaciones para comprobar si los signos están bien concebidos y bien ejecutados. Planteamos preguntas y cri t erios que nos ayuden a valorar la dimensión semántica. sintáctica y pragmática de los pictogramas. Estas recomendaciones están basadas en la semiótica y en la rigurosa investigación para la familia de los pictogramas estandarizados por el American lnstitute of Graphic Arts (AlGA). Por último. inclu imos a los autores que, a nuestro entender, han sido y son relevantes en el tema tratado en este libro así como las referencias de internet, fuentes que complementan y construyen el amplio abanico de conocimientos de esta área.

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 aplicación de los ajustes ópticos. El diseño de información es crucial para comprender procesos o conceptos. por lo que hemos elaborado 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 propio recorrido en la búsqueda de una solución a cuestiones 11

OIS~NO DE ICONOS Y PICTOGRAMAS

generales o concretas, según el planteamiento y los objetivos de su proyecto. Como ayuda didáctica, hemos diseñado una serie de iconos que señalan diferentes tipos de información: ~

~

m

Este icono mdico que podemos ampliar o complementar Jo mformoción mediante un enloce a uno direcc1ón de interne l. El libro ab1erro 1nd1ca una referencia b1bliogrófico con una breve reseña sobre su mterés en el remo rrotodo.

La flecha hacia la izqu1erdo md1ca una págma anlerior en lo que podemos localizar información que es convenienre revisar o recordar lo flecha hacia lo derecha ind1co uno página posrerior que exllende el conren1do que estamos leyendo o dirige el interés o un coso de estudio.

Elena González-Miranda (QMG, 1962) aporta su experiencia en la enseñanza y el diseño de pictogramas. Es diseñadora gráfica y profesora en el Grado en Creación y Diseño de la Facultad de Bellas Artes, de la Universidad del País Vasco 1Euskal Herriko Unibertsitatea (UPV 1EHU). Ha impartido asignaturas sobre metodología del proyecto gráfico, envase y embalaje, y señalética, durante más de veinticinco años, en la especialidad de Diseño Gráfico de la facultad. Ha colaborado en equipos de diseño e investigación para diversas entidades como el DZ-Centro de Diseño de la Diputación Foral (ahora Beaz, Agencia de Innovación de Bizkaia), Metro Bilbao, programa lingua de la Unión Europea, Enkartur y UPV 1 EHU. http://elenamiranda-bilbao.blogspot.com.es/ @ ElenaMira_Anda

Tania Quindós (Bilbao,1986) aporta una mirada práctica, basada en Los ensayos con pictogramas y tipografía realizados para el desarrollo de su tesis doctoral Procesos de configuración simbiótica

entre pictogramas y tipografía. Es licenciada en Bellas Artes por la Universidad del País Vasco 1 Euskal Herriko Unibertsitatea {UPV 1 EHU), donde se especializó en Diseño Gráfico. De forma paralela, realiza proyectos profesionales y personales en los que conviven y confluyen los territorios de la tipografía, ellettering, la caligrafía o la poesía visual. http://www.taniaquindos.com @TeQuinDos

12

PRlSI N IALION

Agradecimientos Deseamos dedicar nuestro más profundo agradecimiento a todos aquellos que de alguna forma, directa o indirecta, han contriburdo con sus ideas y conseJOS a que este l~bro se haga realidad. Son muchos los apoyos que hemos recibido de amigos. compañeros y familiares; les estamos agradecidas por su creciente interés en el tema y su contrrbución paralela en la preparación de este libro. Gracias a todos. Queremos agradecer especialmente a Pablo Cosgaya y Marcela Romero su inestrmable ayuda y generosidad, en las productivas sesiones de asesoría e intercambio de opiniones, a través del océano. A Elena Veguillas, por sus acertados consejos en la revi· sión del texto y la maquetación. Deseamos que pronto podamos compartir una deliciosa sopa. Sin olvidar a Guillermo, que durante la revisión de los textos ha descubrerto que los pictogramas son interesantes. aunque no se miren a través del microscopio. A Sergio por ejercer de chef de tres estrellas durante estos meses de arduo trabajo. Gracias a la Universidad del País Vasco 1 Euskal Herriko Unibertsi· tatea (UPV 1 EHU}, nuestra alma mater. por la concesión del Proyecto de Investigación EHUll 1 29 y de la beca de investigación de Tania Quindós. Nos es indrspensable expresar también nuestra gratitud a todos y cada uno de los estudiantes que han pasado por las aulas de la especialidad de Diseño Gráfico de nuestra unrver sidad, en especial a Juan Arrausi. El aula es un lugar donde tanto los alumnos como los profesores aprenden; este intercambio de experiencias es una fuente rnagotable de conocimiento. Por último, nuestro más sincero agradecimiento a la editorial Campgrafic. Gracias Félix, Xavier y José Lurs por vuestro interés, dedicación y por la oportunidad brrndada a este libro.

En Getxo, marzo de 201S

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, contenidos, acciones o servicios de interés para el 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, adquiere calidad de signo.1

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

los sistemas de iconos y pictogramas son valiosas herramientas 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

museos, hospitales o transportes públicos. En el área de diseño de información los encontramos en instrucciones de aparatos o en diagramas, en el diseño de producto en electrodomésticos, en el salpicadero de vehículos o en herramientas especializadas. En el diseño de la interfaz de usuario tenemos ejemplos en internet y en las diversas aplicaciones para los nuevos dispositivos electrónicos.

OJ

1 Herbert W Kapitzki. En Abdullah y Hlibner (2002, p.10}.

Pictograma: Del latín p1ctus, (pmtado), y grama {escrito o gráfico). Signo de la escritura de f1guras o símbolos. 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 Gilí. En este libro, los autores llevaron a cabo un amplio estud•o de investigación documental reuniendo 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 brallle.

17

Ol~lNO

or ICONOS Y PICTOGRAMAS

las raíces de los pictogramas son muy antiguas. Si profundizamos en la historia podemos comprobar que estaban presentes en el mundo antes que las letras. Miles de idiomas y escrituras han evolucionado desde un tnicio pictográftco de dibujos esquemáticos hasta su abstracción en forma de representación de sonidos. como se observa en los alfabetos occidentales. los signos logográficos iniciales eran pictogramas que representaban seres vivos, objetos o acciones. Se podría recorrer la historia de la humanidad a través de los múltiples sistemas de comunicación visual que han existido: desde la llamada protoescritura. hasta el desarrollo de las inscnpciones cuneiformes en la anttgua Mesopotamia o los jeroglíficos y 2 A1cher (2004). Fruuger {1981). Robmson {1995).

los ideogramas en la cultura egipcia.1 Un paso en la evolución de estos stgnos se puede ejemplificar con los pictogramas sumeri os primitivos o los jeroglíficos egipcios. que eran representaciones figurativas de objetos de la época,

3 Frut1ger (1981. pp 85 y 87).

animales o personas, cuyo significado era simple y directo. 3 Si observamos los ptctogramas estandanzados actuales, vemos que aún se conserva este sencillo proceso de interpretación de los mensajes, pero adaptado a la cultura material de nuestros días.

-*

~

Compatibilidad semántica l lncompatoboltdad semántica (un ob¡eto especifico (mezcla de objetos de cada entorno) y conceptos cienttlteos)

1

Sala de ordenadores

Ordenador

Molécula de agua

t

Esta nteria +Ratón de ordenador

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.

BietcletCL forma fisonómica lógtca

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

Bicicleta: faltan algunos rasgos esenciales para

reconocer el referente.

Aprendizaje inmediato. Si el1cono o pictograma es nuevo o no ha sido difundido antes, debe ser fácil de aprender y reconocer para el enunciado previsto. Por ejemplo, en la interfaz de las nuevas tecnologías de comunicación social. todos reconocemos la estrella como icono que representa el enunciado «favoritos» (contactos favoritos, páginas web favoritas o tuits favoritos, entre otros). De la misma forma, se ha generalizado el uso del símbolo «corazón» o el •pulgar hacia arriba• para representar el mensaje «me gusta• en las redes sociales.

Adaptación cultural Es imprescindible que cada uno de los motivos o referentes elegidos se adapte al contexto cultural y temporal del destinatario. la interpretación del significado de los pictogramas debe ser común para todos los usuarios. Un sistema pictográfico ideal debería ser universal y tendría que ser reconocido en todo el mundo por personas de diversas culturas. pero lograr este cometido es dificil 34

SI

tenemos en cuenta la diversidad cultural existente.

l. ICONO~ 'f PICTOGRAMAS

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

· ección de un modelo vigente. La transcripción gráfica del mensaje debe realizarse a partir de 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 más representativo de lo que las personas perdemos en la actualidad. Así mismo, poca gente compra pipas para regalo, un referente del pictograma «Tiendas». Sería más adecuado utilizar solo 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.

Au sencia de caracteres alfabéticos. Debemos evitar al máximo la utilización de caracteres alfabéticos porque son dependientes de un idioma concreto. Tampoco se añadirá un texto explicativo. para evitar redundancias en el mensaje. Sin embargo, en algunos sistemas de señalización, como en las señales de tráfico, es inevitable la utilización de números (para limitar la velocidad o establecer

®®

En algunos países se util1za la P de •Parking•, m1entras que en otros países hispanohablantes se emplea la E de •Estacionamiento•.

distancias) o de letras para identificar lugares.

t~ t

CC'"lcisión gráfica. La forma de cada pictograma tiene que estar depurada y reducida a lo esencial, con el fin de evitar el exceso de información visual irrelevante. Lograremos abstraer las formas esenciales de cada referente, mediante un proceso de síntesis y esquematización Además, deberemos reflejar solo las característi-

Paraguas: antes y después del proceso de sínteSIS.

cas genéricas y no las particulares del objeto. «El signo debe estar saturado, o sea. carente de zonas privadas de sentido. Si al eliminar un elemento nada se pierde, es porque ese elemento sobraba».18

18 Norberto Chaves (2009).

35

Ol~lNO

DE ICON05 Y PICTOGRAMAS

Convencionalidad. Tendremos que diseñar una forma convencio· nal 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 funetón (gafas 30 o gafas 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•. no estará bien solucionado si muestra una raza particular de perro.

1

............. ,~ ,-'',,

1

\

,

\

1

,o

o \

\

'

,

'o

1

'... ' ..... __ ...... ,'

Coherencia formal. Todos los signos de la familia, sean simples o compuestos, estarán diseñados sobre la base de unos mismos marcadores de identidad, con una estructura uniforme y un «vocabulario gráfico» unificado. Es:·uctura un1for1'1

Para que un sistema de pictogramas sea per·

cibido como una unidad visual armónica, todos los elementos que lo forman tendrán una estructura común o retícula. Si empleamos una retícula. será más fácil sintetizar y unificar los signos, ya que las proporciones, los ángulos y el grosor del trazo, estarán delimi· tados por la misma. ~ p . 75 Constantes v1sual

En cada sistema de pictogramas observamos

una serie de procedimientos sintácticos de relación entre sus com ponentes, que definen su identidad gráfica. Este vocabulario visual unificado debe aplicarse de manera sistematizada a todos los signos, para garantizar la coherencia formal entre ellos, tanto de manera individual como en relación a la familia o serie completa.

36

~ p. 68

1 ICONOS YPICTOC.RAMM

En los p1ctagramas de AlGA se establece un vocabulano v1sual reconocible con las s1gwentes caractensttcas: stmphi1Cac1on de las imágenes. numero de detalles reduc1do al mínimo. elimtnac1on de rasgos superfluos, linea del mtsmo grosor, ángulos suav1zados con curvas, bordes redondeados. rendenc1a a una conl1gurac1ón s1metrica y a un e¡e verttcal Ftnalmente. todos los piCtogramas se un1ftcan mediante su tntegración dentro de un m1smo formato un cuadrado con ángulos redondeados. (AlGA. 1984. p.l36)

t Bordes redondeados

111 Angulas suov1zados con curvas

t Tendenc1a a la s1metría y a un eje vertical

Formara un1l1cado

lompatibilidad cromática. La referencia al color en relación con el mensaje debe ser clara. Los códigos de color deben ser conoCidos por los destinatarios y decodificados de manera inmediata, Por medio del autoaprendizaje y la experiencia del usuano en el Propio entorno de aplicación. ~ p. 73

37

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 consiste en generar los pictogramas a partir de 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 s1gnos. 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 pictograma 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. En estos esquemas apreciamos etapas similares pero con algunos matices metodológicos adaptados a cada uno de Los dos enfoques.

41

Ul.3ti,.\J lll ll..V1"4U) f

t'II...IU~H.AI'1A~

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

DEFINICIÓN

l

DESARROLLO

PLANTEAMIENTO 1 BRIEF

J JUSTIFICACIÓN ¿Es necesano dtseñar un nuevo ststema de pictogramas? ) OBJETIVOS ,cual es el propósito de este SIStema' ENFOQUE CONCEPTUAL ,Cómo será la famtlta de ptctogramas' [ LISTA DE ENUNCIADOS ,Cuóntos pictogramas tengo que dtseñar'

J

íl

1'-

PLANIFICACIÓN 1 CRONOGRAMA ¿Cómo voy a organizar el trabajo a lo largo delttempo?

1

.)

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

DEFINICIÓN DE CADA ÍTEM ¿Cuál es el referente más adecuado para cado pictograma'

~

.)

.

Í

BOCETOS INICIALES Exploración prevía

r: ......

' '

r

BOCETOS Büsquedo de las formas óptimas

'-

f

DEFINICIÓN DE MARCADORES DE IDENTIDAD

' 1

f

...

,

PROCEDIMIENTOS SINTÁCTICOS Maso Línea PositiVo Negaltvo Combinación masa 1 línea Termtnaciones Conexiones Calidad de trazo Escalo 1

l

_)

42

-

ESTRUCTURA 1 RETÍCULA Definición de la estructura

.· . .:1 J........····

l.

~L ~KOlt~O

llt lll~l NU

VERIFICACION

..· ..··· ....····

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

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

AJUSTES ÓPTICOS

··.

1

/ r VERIFICACIÓN DEL SISTEMA Relac1ón de cada pictograma con el grupo morfologico al que pertenece y con la familia de pictogramas completa

Integración de los signos diseñados como •Sintagmas v1suales•

(

·..

... ...

········· ···nt ). Mensajes que hacen referencia

a procedimientos relevantes relacionados con los pasajeros. Como ejemplos podemos enumerar compra de billetes, aduana o salida de vuelos.

('l ,

ar

nt 1e Jr e· Estos mensajes comunican procedimientos

obligatorios. No fumar, estacionamiento prohibido o extintor

® ®

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

ClclSI 11l 1eió 1 segun

la fu ·íór del si no. Abdullah y Hübner propo-

nen la siguiente división de los

mensajes: 2

'"'·r lCion l ·s. Sirven para indicar algo. Por ejemplo, una señal de la localización de los aseos.

r'

2 Abdullah y Hubner (2002. p. 30).

tlt-+

X

Jvenencia o peligr'). Su función es la de avisar de un

peligro. Por ejemplo, peligro de incendio. '

r

Jl1c1tud Empleados para generar un tipo de comportamiento

concreto. Por ejemplo, tira la basura en la papelera.

r proh b1C1ór Tienen como objetivo que se cumpla una ley.

®

Por ejemplo, prohibido aparcar.

Clas

e on

.egun el gr 1d0 de aprendiza,t Para Adrian Frutiger

existen tres tipos de pictogramas según el grado necesario de aprendizaje por parte del receptor. 3

3 Frutiger (1981, p. 272).

l Signos que proceden de imágenes figurativas y que son comprendidos de manera inmediata por el observador. Estas imágenes no requieren aprendizaje. Es decir, cualquier receptor reconocerá el elemento representado, independientemente de su idioma, cultura o costumbres. Son ejemplos, teléfono, zona de fumadores o cafetería.

49

DI S! NO OE ICONOS Y PICTO

•

'1>!!!

Furgonetas Maquanaria

..,.. .." ~

Directono pnncipal

;:

j

::.

< r.·

~

"

~-

o

o -Q.

;:¡

~ ~

.. e.

' Qj. ::>

ñ' Qj

1

j 1

lnvest•gación Conservación de especies Aula de didácttca Sala de exposiciones Micología Herbano Banco de semtllas

.."

1 1 1

Arboretum Flora autóctona Jardín de Chtna Plantas acuátttas Jardín de rocalla Plantas medicinales Plantas carnivoras Plantas tropicales Frut1cetum Jardín de bulbos Jardín sistemático Plantas en peligro de exttnci6n Gramíneas Palmeral lnsectano Huerto escolar

....

,~ o"' ::; o "' Q

o

~

z

o

OISlNO DE ltONOS Y PICTOGRAMAS

Clastftc.actón segun la morfología de los stgn1 Otra manera de ordenar nuestra lista podría consistir en organizar los stgnos basándonos en su morfología. una vez que hayamos realizado la primera fase de bocetos. Para explicar esta opción podemos buscar su paralelismo en el diseño de tipos. Polhen plantea una clasificación de los caracteres alfabéticos en función de su forma y su estructura, tal y como podemos ver en las siguientes tablas.•

4 Pohlen (2011, p. 95).

CAJA ALTA mayúsculas

FORMA Redonda

Angulosa

T Redonda angulosa

rD~a¡onal

D1agonal / angulosa

+

En p1sos

~

GS

Lados abiertos

t :J

e

Ancha

lii w

Med1a

:J

.. EFH LT

..

a::

OQGS

EFLHT

Estrecha

CAJA BAJA minúsculas

~

:J

Con descendente Ancha

lii w

Med1a

a::

t BPROU

X X

KY KZY

w

M

VAX

NKZY

1J

FORMA Redonda

Redonda / vertical

Con ascendente

t :J

BPR

bdft g

1jpq

ceog

bdpq

Estrecha

Jft

52

Redonda 1 diagonal

---

rD~agonal k

hl

y

--+-

as

w

m

vyxkz

nhu 1

ilr

2. EL PROCESO OE DISEÑO

FORMA

PICTOGRAMAS AlGA

Redonda

Redonda 1 recta [Redonda 1 diagonal 1 recta

CtTI

1 ""

Diagonal 1 recta

~ 6.d~A'1tlo

Recta

~+

(1)®® Altura máxima

~ "!! $ii9 ~ ~

J?J! r ~

JEIÍI

t

~

;:) Altura mínima ;:)

a:: t;¡

Ancha

--~...e-

/+

-+~

~ d 6. lo "".,

~+

IÍIIJE

$ii9~~~"!!

~

=n®®

®~~

...e-

~~

yf Á~

"'

w

-

¿

¿¿?

~-+

/+

im

CtTI

Estrecha

Organización de los pictogramas de AlGA sobre la base de cntenos morfológicos aplicable a cualquier familia de signos.

P1c.

l nd

b'3s

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 el 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.

53

DISfNO 0[ ICONOS Y PICTOGRAMAS

Pl~nlficuión . Una vez que hemos especificado los objetivos y

hemos elaborado la lista de items con los que trabajar, podemos organizar el flujo temporal de trabajo y dividir el proyecto por etapas~ definición, desarrollo y verificación.

ENTREGAS

ENTREGA 1

ENTREGA 4

ENTREGA FINAL

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

E¡emplo de cronograma realizado para el sistema de ptctogramas asoctado a la t1pografía Asop.

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

~ p . 127

cronograma durante el desarrollo de nuestra familia de pictogra·

tengamos fecha de entrega, tenemos que ser flexibles y adaptar el mas. 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

~.

tl

t"'t'liV\..t.~V

Ut Ul)tNV

Documentación. No debemos olvidar que cada proyecto está s1empre acompañado de un proceso paralelo de recopilación y análisis de la documentación relacionada con los temas que tratamos en el trabajo o con otros de naturaleza similar que nos puedan resultar de utilidad.

Documentación para el proyecto de d1seño de pictogramas para la identidad visual de un ¡ardin botón1co.

Información sobre conceptos esenciales de botán1ca, tipos y div1sión del remo vegetal. así como de la flora representativa de la corn1sa cantábnca y del Pais Vasco. Información y documentación sobre los conceptos específicos que definen las diferentes áreas de un jardín botán1co. Documentación gráfica de representaciones vegetales asociada a diferentes áreas geográficas, en especial de la flora que puede servir como referente de cada pictograma · Documentación Significativa sobre series de pictogramas que aborden un enfoque conceptual similar o cercano al tema tratado. · Observación de modelos con procedimientos sintácticos de solución formal que ayuden en el proyecto. · Información sobre matenales, empresas, sistemas y soportes de señalización interior y exterior. · 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

SS

Ul>tNU Ut II..UNU> Y PI(. 1UuHAMA>

Definición del referente Una de las decisiones más relevantes en el diseño de un pictograma es la elección de un referente adecuado para cada enunciado. El referente es el vehículo necesario para que la interpretación del mensaje sea óptima. Algunos pictogramas Elección de un punto de vista favorable: la elección del punto de vista del referente también influirá en la identificación de sus rasgos. No es lo mismo representar un paraguas abierto que cerrado, una vista lateral de una flor o la misma flor vista desde arriba. o un animal de lado o en escorzo. Un punto de vista en escorzo impedirá posiblemente la decodificaCión inmediata del referente.

podrán solucionarse con un solo referente elegido expresamente para representar gráficamente el concepto. Otros, de manera excepcional, podrán articular varios referentes, según lo requiera la complejidad del mensaje. ~ p. 30 y p. 33

EJEMPLO l UN SOLO REFERENTE Enunciado

Referente

Aseos de mujeres

Mujer

Pictograma

1

1

•

MensaJe

Contexto

Aquí está el aseo para mujeres

'

EJEMPLO 2 VARIOS REFERENTES Enunciado

Referentes

Objetos perdidos

Signo de interrogación Un paraguas Un guante

56

Pictograma

?

j'>

Mensaje

~exto

Si usted ha perdido algo, diríjase aquí

.:!:J

2. EL PROCESO 0( DISENO

1. pas 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 concepUn mapa conceptual se

tuales. Estas técnicas nos permiten visualizar el mayor número posible de soluciones potenciales antes de tomar la decisión final. Por ejemplo, en el siguiente mapa conceptual podemos observar el despliegue de soluciones para elegir el referente del enunciado «Jardín de China», dentro de un jardín botánico.

elabora desplegando conceptos e 1mágenes en relactón con el tema tratado, consultando al cl1ente o a un experto en la matena

y estudiando el tema en fuentes especialtzadas.

En esta etapa, podemos realizar una primera fase exploratoria con bocetos para definir las formas básicas. Esta opción nos permitirá visualizar el concepto a t ravés del dibujo.

PARAÍSO EN EL MUNDO •

NATURALEZA IDEALIZADA

í

CARÁCTER MÁGICO O MÍSTICO <

QUIOSCOS

~ '

PAGODAS ~

1l ARCOS ~

AGUA

JARDÍN DE CHINA

ARQUITECTURA

l

/

MONTAÑA

ELEMENTOS FUNDAMENTALES

' SAUCE LLORÓN

ELEMENTOS DECORATIVOS

-

ESTANQUES

PUENTES

~

ICONOGRAFÍA ANIMAL Y VEGETAL

> LOTO

:>PLANTAS

__j ANIMALES

BAMBÚ

"

MITOLÓGICOS

~;1

ACUÁTICOS CARPA

~

1

-1 TORTUGA

___,...

4f&~

FÉNIX

t1

" DRAGÓN CHINO

~ ,¿ ,'1'

'~~ .L''~ !('"~

.

57

Otro modo de extender las posibilidades para encontrar un referente consiste en partir de las palabras o términos linguísticos clave del enunciado Con estos conceptos podemos elaborar listas conductoras. de modo que un término puede extenderse en otro

y este conducir a otro hasta localizar el referente adecuado.5 S Umberto Eco expl1ca las vana bies para la construcción de campos semánticos en La estructura ausente (1989, pp 83 y 101-104): connotación como stgn111c.ado defimc.ional (s1gnificados de defmic1ones comunes en dtCCionanos), connotactón de las un1dades semánticas que componen el signtftcado (de sol a masculino. de luna a femenmo), deftniCiones ideológicas, connotaciones emotivas, connotaciones de h1pomm•a (de tulipán a hor), hiperontmia (de flor a tulipán) y antommta (de mu¡er a marido). connotactones por traducción a otro sistema semtóttCo (de perro a piCtograma de perro). connotaciones por art1f CtO retónco (metáfora), connotaciones ret6ricoesttlisticas y connotactones axtologtcas globales (valores postltvos o nega!tvos en una cadena de connotaciones).

Tamb1én podemos indagar buscando en el d1ccionano las definiciones y anotando sinónimos. Así mismo, podemos focalizar la búsqueda de la iconografía teniendo en cuenta las tres dimensiones del s1gno enumeradas en el apartado cSem1ót1ca y pictogramas•; de esta manera localizaremos signos como iconos que representen el concepto, signos como indicios que sugieran el tema y signos como símbolos que pud1eran asociarse con el enunc1ado. La mayoría de los iconos que utilizamos en la mterfaz de nuestros dispositivos electrónicos pertenecen en mayor o menor medida 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 difundidos y asimilados por la cultura de las nuevas tecnologías. Otra forma de ampliar el repertorio iconográfico puede ser dirigir nuestra atención hacia algunas figuras retóricas como la metáfora. en la que existe una traslación de sentido por comparación (la estrella de favoritos), la metonimia, en la que se reemplazan referentes por sustitución (el engranaje para el mensaje de configuraCión) o la sinécdoque, en la que se representa el todo por la parte o lo importante por lo accesorio (la cabeza de un animal).

58

2. EL PROCESO Df DISlNO

Buscar nuevos enfoques. En el ejemplo que vemos a continuación, se estudian las diferentes alternativas que podrían emplearse como referente a la hora de crear los items «Aseo masculino• y «Aseo femenino•. Podemos examinar cada opción a partir del concepto y a su representación visual. valorando la viabilidad 0

Ftgura publicada en fa revtsra EME n 3 SÍMBOLOS. como parte del artículo •Una cuestión de anatomía el dtseno del ptcrograma asoCiado al género lemenmo• (Elena González·Mtranda y Tanta Qumdós. 2015).

la adecuación de los mismos al proyecto en el que estamos

trabajando. De este modo, podremos determinar cuál es el referente idóneo para el contexto de aplicación; no es lo m1smo d 1señar estos signos para una peluquería que para una tienda de deportes, un museo o un bar.

CONCEPTO

Stgno lmgufsttco

Stgro 1simbolo

Color

Cuerpo (anatomía)

Parte del cuerpo: cabeza 1 pelo

Parte del cuerpo órganos ~exuales

Ve~tuano

Vt$tuano zapatos

REFERENTE MUJER ML.JERE!.

SE:iiOR CIIICAS

ROSA

REFERENTE HOMBRE II0\1RIIES C\8!\IU.ROS CIIICO!>

cJ AZUL

t t o \¡7 n r-\

CONSIDERACIONES

¿Cómo decodtftcan el mensaje las personas que na hablan este idioma? Son símbolos de cultura occidental Símbolos btol6gtcos para mujer (espejo de Venus) y hombre (~udo y lanza de Marre)

¿Es un cóK r{( X X >K V ¿ .- ' ) >K >K ~ ~ /~ / ~ S /\, X f" X )( X )K ~ 7 /

1'-.

;

·._

1

~

>K _ ,ll\ X .>K ' "' ' X )f( f)t( / '

,

/ .\ / /~

--,

IX 1'\.. / /

~

1'·

l' / l'-1 r V

/ "\ /

[/

V V

>K """ X A v ' ·¿

rt

'\_ /

'*'

J : divide

elementos más pequeños y equilibrio visuaL diagonales que dividen cada unidad en cuatro fragmentos iguales. establecen el ángulo de

---

*X

referencia y aseguran un

., X

)\

·un•

ayuda al diseñador a crear

/

l'-

l

la retícula prtmaria en

'\_

/

/

f--

x

~/ / ~

diseño más preciso .

3 Abdullah y Hubner (2002, p. 33).

75

4 Costa (1987, p. 145}.

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 Múnich. 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 garantía de que todos los pictogramas del sistema que diseñamos guardan una coherencia formal y expresiva (función normativa

Retícula para los iconos de 10S 7

para la construcción de las figuras). 4

Ajuste a la retícula de los bocetos para •flora autóctona del País Vasco•. •jardín de bulbos•. •plantas acuáticas• e •insectario• de un jardín botánico.

''

'

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

'

''

''

''

''

~

C.._____y__L_.-_-_-_,-. '

76

3 DESARROLLO DE ICONOS Y PICTOGRAMAS

Grosor de la línea. La coherencia entre el grosor de las líneas con las que configuraremos el pictograma, garantiza una uniformidad de su estructura formal. Los grosores de la línea deben aplicarse sistemáticamente a partir de las unidades que forman la retícula en el caso de los pictogramas independientes. o sobre la base del grosor de las astas si trabajamos con pictogramas de origen tipográfico. ~ p. lOO Por ejemplo, si empleamos la retícula citada anteriormente.

S Abd ullah y Hubner

podríamos trabajar con los siguientes grosores:5

(2002. p. 35).

Media unidad

Una unidad

Dos unidades

A1

de protección. Además de las unidades y subunidades.

también marcaremos un área de protección. Esta á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.

r----------------,

----------------

________ Área de protección

77

Ol~lNO

OE ICONOS YPICTOGRAMAS

1

,

~

______ ...

L

-

~-------,

r

L

w

------- •

'

-

\0

r---1

_______ ,

Cb

-v--7 • ..

L

________

...

2

--,

r-----------,

1

~------------~

· ~ _ ...

.. -

<

.. -

3

Ejemplo de aplicación del área de proteccrón en rconos 1 pictogramas; 1 Area de protección respecto al fragmento de retícula que ocupa el signo dig1taltZado 2. Signo con grosor de línea corporativo y áreas de protección. 3. Oí5tancia entre piCtogramas respetando el área de proteCCrÓfl y a¡usre de manera manual.

78

3 DESARROllO OE ICONOS Y PICTOGRAMAS

La retícula puede construirse con un mayor o menor número de subdivisiones. Esta variable determinará también las posibilidades de construcción del pictograma.

Aunque la retícula constructiva de Otl Aicher es muy flexible y funcional, en algunos casos podemos proponer otras variaciones.

Angula de 45 •

Cuadricula

Ángulo de60

Angula de 30'

Propuestas de adaptación o la retícula del referente corzo para la señal • Precaución. animales salvajes•.

79

DISEÑO DE ICONOS YPICTOGRAMAS

Algunos elementos pueden liberarse de la retícula para aportar mayor coherencia o dinamismo al pictograma o para representar correctamente su morfología. Joan Costa nos advierte del «peligro de caer en excesos intelectuales o estéticos cuando se crea una pauta pretendida mente 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 real6 Costa (1987, p. 146).

mente puede asumir con eficacia».6

Dos posibilidades del proceso del trazado del stgno,

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

adaptación a la retícula y

localización y corrección de errores. En el segundo

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

e¡emplo, se dibujan las dos patas delanteras para aportar dinamismo a la f1gura.

80

3 OESARROll O 0( ICONOS Y PICTOGRAMA~

caso práctico: «Precaución, animales salvajes• Ob¡