Fundamentos Del Diseño Gráfico, Hipermedia

UNIVERSIDAD COMPLUTENSE DE MADRID
FACULTAD DE CIENCIAS DE LA INFORMACIÓN
Departamento de Comunicación Audiovisual y Publicidad II
TESIS DOCTORAL
Fundamentos de diseño gráfico hipermedia
Principios teóricos y aportaciones metodológicas
MEMORIA PARA OPTAR AL GRADO DE DOCTOR
PRESENTADA POR
Juan Ramón Dávila Urrutia
Director
Isidro Moreno Sánchez

Madrid, 2015
© Juan Ramón Dávila Urrutia, 2015

Fundamentos de
Diseño Gráfico
Hipermedia
Principios teóricos
y aportaciones
metodológicas
Tésis Doctoral

Dirigida por el Dr. Isidro Moreno Sánchez

Facultad de Ciencias de la Información
Universidad Complutense de Madrid
2 |
diseño gráfico hipermedia | 3
Fundamentos de
Diseño Gráfico
Hipermedia
Principios teóricos
y aportaciones
metodológicas
Tesis Doctoral

Dirigida por el Dr. Isidro Moreno Sánchez

Facultad de Ciencias de la Información
Universidad Complutense de Madrid
4 |
Agradecimientos
A Martha Rocha Presno por todo su apoyo

y el incondicional acompañamiento.
Al D. Isidro Moreno Sánchez, por su sabiduría

y la humildad con la que la transmite.
A mis compañeros profesores, de la Universidad La

Salle de México, de la Universidad Europea de Ma-
drid, de la Universidad Complutense de Madrid y de
la Universidad Nebrija en Madrid.
A mi familia en México y España que lejos y cerca

son pilar para mis proyectos.
A mis compañeros diseñadores; profesionistas, alum-

nos y profesores, pues junto con ellos he recorrido
este camino buscando aportar un poco a su creci-
miento.
6 | Resumen
Resumen
* Diseño gráfico
y el entorno hipermedia;
aspectos fundamentales
Durante el último par de décadas, la incorpora-

ción de los hipermedios como una espacio de comuni-
cación para el diseño gráfico ha provocado una serie de
transformaciones en la manera de enfrentar los proyectos
de diseño. Esta veloz incorporación de elementos técnico-
tecnológicos ha derivado en una gran cantidad de infor-
mación práctica que este trabajo de investigación teórica
busca equilibrar mediante el análisis de conceptos que han
sido base fundamental para el diseño gráfico desde sus
inicios y que en el transcurso de este trabajo se retoman
para analizarlos desde la óptica que la herramienta de los
hipermedios incorpora al terreno de la expresión visual.
Este escrito es una pausa que invita a reflexionar frente a

las constantes actualizaciones que vivimos en el ámbito
digital interactivo para buscar rescatar aquellos aspectos
esenciales que forman parte de la profesión del diseña-
dor, y que, independientemente del espacio de manifes-
tación, enriquecen la creatividad y apoyan la sustentación
teórica de proyectos. El diálogo que surge a raíz de las
reflexiones que este proyecto propone busca iniciar el
cuestionamiento sobre la relación entre los aspectos bási-
cos del diseño y su traslado al espacio hipermedia actual.
El proyecto de investigación presentado a continuación

se encuentra estructurado en siete secciones principales
que enumero con una breve introducción a manera de
preámbulo al análisis que presentaré posteriormente en
cada uno durante el desarrollo del presente documento.
8 | Resumen
a. Marco Teórico
La propuesta básica de esta investigación es la
síntesis de un modelo para el análisis de los aspectos teó-
ricos que ayuden a establecer fundamentos esenciales en
el diseño gráfico hipermedia, para encaminar la propuesta
de esta investigación se analizan a lo largo de este capí-
tulo modelos referenciales de acuerdo a tres variables: sus
antecedentes en base a referencias históricas (Bauhaus,
Basel), en base a referencias de relevancia tecnológica
(Escuela de Chicago, London Royal College of Art) y
como modelos de importancia por su desarrollo tecnoló-
gico (Politécnico de Milán, Aalto University), analizando
las aportaciones de sus características generales, la estruc-
tura de sus cursos y la relevancia particular que tuvieron
hacia el diseño, especialmente en su ramificación gráfica.
A la par de estas referencias y debido a su importancia

geográfica para el desarrollo del presente estudio se in-
cluye en esta sección el análisis de dos modelos adicio-
nales: el Español y el Mexicano para revisar la manera
en que el diseño gráfico se presenta desde su estableci-
miento como salida profesional plausible hasta el mo-
mento actual, completando así un panorama que cu-
bre un amplio conjunto sobre los diversos ámbitos del
campo de aplicación hipermedia en el diseño gráfico.
b. Diseño de la investigación
El capítulo que establece los parámetros funda-
mentales de la investigación revisa los objetivos, hipótesis
y metodologías que serán aplicados a lo largo de todo el
proyecto.
Al establecer los objetivos, se especifican los diversos ám-

bitos de aplicación que conlleva la premisa de la funda-
mentación teórica del diseño gráfico hipermedia, tanto
en el terreno de la propia investigación como en sus de-
rivaciones educativas y profesionales, abriendo el panora-

ma a estos dos ámbitos para completar el análisis dentro
de estos tres objetivos (investigación, educación, campo
profesional) de los fundamentos del diseño gráfico hiper-
media.
Definir la hipótesis central y las hipótesis secundarias es

el eje central de esta investigación y se aterriza en este
apartado para establecer los puntos de partida y los pasos
que desarrollará el seguimiento de estas premisas durante
la investigación doctoral.
Este capítulo finaliza con la presentación de la metodolo-

gía del proyecto, en ella se establecen los pasos concretos
que busca explorar la investigación, tanto cuantitativa-
mente como de manera cualitativa haciendo énfasis en
ésta última debido a la relevancia que supone la aplica-
ción académica de las conclusiones a desarrollar duran-
te el transcurso de la propuesta. El capítulo encamina
la presentación de mí conclusión particular de modelo,
desde su proyección genérica en el micromodelo, hasta su
síntesis didáctica integrada en el esquema del macromo-
delo, pasando por una versión práctico-profesional deri-
vada de la revisión del mesomodelo.
c. Desarrollo de los modelos

El capítulo que desarrolla el marco teórico de la
investigación es el más extenso ya que implica la revi-
sión a profundidad del modelo planteado por la inves-
tigación (Fig. B1) y examina a detalle los componentes
que agrupa la constitución de los fundamentos del diseño
gráfico hipermedia, haciendo a la vez una enumeración
práctica mediante ejemplos de proyectos hipermedia, a
manera de referencias que pueden ser revisadas fácilmen-
te y abordadas desde el punto de vista de la fundamenta-
ción del diseño para redescubrir aquellos aspectos esen-
ciales que integran la base teórica previa a la aplicación
práctica de un proyecto de diseño gráfico hipermedia.
10 | Resumen
Esta sección inicia con una introducción que con-

tinúa la definición tanto de los conceptos de diseño
gráfico como de aquellos relacionados con el espacio
hipermedia, para poder concluir con un modelo es-
pecífico orientado hacia la profundización de un con-
cepto que nos acerque a la acotación práctica de los
aspectos esenciales del diseño gráfico hipermedia.
La segunda parte inicia el análisis sobre los dos

primeros grandes bloques conceptuales corres-
pondientes a los fundamentos tradicionales del
diseño gráfico: forma y espacio, para desarrollar-
los y analizar mediante ejemplos visuales, su tra-
ducción e implicaciones en los hipermedios.
Para finalizar este capítulo, la tercera parte incorpora los

aspectos fundamentales que el terreno hipermedia aporta
al diseño gráfico; tiempo, acciones y atributos, haciendo
especial énfasis en la manera en que interactúan con los
dos conceptos anteriores (forma y espacio) para integrar
un conjunto de elementos que le otorgan posibilidades
adicionales al diseño gráfico en el entorno hipermedia.
En el centro de este análisis se ubica el aspecto tem-

poral, presente en el diseño gráfico tradicional en
aplicaciones que van desde la ilustración hasta los
multimedios, el tiempo funciona como puente para
abordar propiamente los aspectos que hacen referen-
cia a acciones y atributos, dos pilares de la concep-
tualización hipermedia que irrumpen en el diseño
a partir de los componentes que aporta este medio.
Mediante la revisión de estos cinco aspectos funda-

mentales se desarrolla el aterrizaje práctico del macro-
modelo; la utilización de ejemplos del entorno profe-
sional y la revisión de proyectos hipermedia permite
una aproximación didáctica de los fundamentos expli-
cados, comprobando al tiempo el traslado de los con-
ceptos básicos del diseño gráfico hacia el terreno hiper-
media y provocando la reflexión desde la identificación
visual de los conceptos planteados en esta sección.
d. Resultados
Para verificar los resultados planteados en la hipó-
tesis, el modelo presentado es llevado a sus diferentes ám-
bitos de aplicación, buscando así la comprobación de sus
correspondencias.
De manera inicial el modelo es comparado con las referen-

cias históricas, tecnológicas y de innovación que se seleccio-
naron en el capítulo dos, así como aquellas relevantes en el
ámbito geográfico, para analizar las características generales
y objetivos de cada uno de ellos, verificando la relación que
presentan con el planteamiento propuesto por esta tesis.
En una segunda revisión, se vincula el modelo propuesto con

el terreno académico; una serie de encuestas a alumnos del
grado de Diseño Gráfico y un conjunto de entrevistas con
profesores universitarios enfrentan el macromodelo con su
aplicación en el aula y revisan los aspectos que el mesomodelo
y micromodelo pueden aportar durante la enseñanza rela-
cionada con aspectos teóricos del diseño gráfico hipermedia.
La verificación de resultados termina llevando el modelo

propuesto al campo profesional. Utilizando específicamen-
te el mesomodelo, un grupo de agencias y diseñadores grá-
ficos identifican con ayuda del modelo la importancia de
sustentar sus proyectos hipermedia mediante el apoyo de
una herramienta teórica que aporte la solidez de una me-
todología específica aplicada al diseño gráfico hipermedia,
sin descuidar los aspectos prácticos que una ayuda de este
tipo debe aportar al desarrollo de proyectos profesionales.
e. Discusión
En el capítulo de la discusión, se comparan los
planteamientos iniciales con respecto a los resultados ob-
tenidos en la investigación, esta sección busca provocar un
diálogo que muestre el conjunto de conocimientos que la
12 | Resumen
investigación y su proceso han provocado, así como la

evolución que el seguimiento de los modelos y la me-
todología propuesta implica para el desarrollo de funda-
mentos vinculados hacia el diseño gráfico hipermedia.
f. Conclusiones, recomendaciones
y otras vías
Los capítulos 6, 7 y 8 revisan las conclusiones
a la investigación, analizando las relaciones del modelo
propuesto hacia los aspectos académico, de investiga-
ción y profesional como parte del aterrizaje formal de
los campos de aplicación del diseño gráfico hipermedia.
El capítulo 7 retoma especialmente el campo académi-

co de aplicación, para hacer un perfil orientativo en de-
sarrollos encaminados hacia estudios de diseño gráfico,
específicamente con miras hacia estudios de segundo
ciclo, con el objetivo de generar aportaciones de utilidad
para futuros programas como la propuesta de Máster
en Diseño Interactivo en la Escuela Mexicana de Ar-
quitectura, Diseño y Comunicación (EMADyC) de la
Universidad La Salle, México y orientaciones generales
hacia el establecimiento de apoyos para estudios parti-
culares en el área de la fundamentación del diseño gráfi-
co hipermedia. Este capítulo también sienta bases para
apoyar el desarrollo de proyectos hipermedia utilizando
el modelo propuesto, aplicándolo al campo profesional.
En el capítulo ocho, relacionado con las hipóte-

sis plausibles que surgen a raíz de la investigación,
se abordan cuestiones planteadas a lo largo del do-
cumento que proponen interesantes vías para futu-
ras investigaciones en el terreno del diseño gráfico
hipermedia o caminos abiertos hacia diversas vías
de investigación que, por el acotamiento inicial de
este trabajo de investigación no he podido desarro-
llar, pero que sin embargo encuentro especialmen-
te interesantes como cuestionamientos para la re-

flexión o planeamientos para investigaciones futuras.
g. Referencias y Anexos
Para una mejor organización de acuerdo a la na-
turaleza de esta investigación, las fuentes se encuentran
agrupadas en dos secciones: el primer apartado son las re-
ferencias bibliográficas utilizadas como apoyo en la pre-
sente investigación, citadas conforme a la nomenclatura
del APA (Association Physicologists American), el segundo
apartado es el grupo de referencias de diseño gráfico hiper-
media, que reúne los sitios que han sido utilizados como
ejemplos y piezas de análisis a lo largo de la investigación.
Debido a que los sitios de internet y referencias hiperme-

dia son de gran importancia para la ejemplificación y la re-
flexión que plantea el presente trabajo, es posible encontrar
estos ejemplos referenciados en dos espacios dentro del
documento: como una cita al margen en forma de URL en
las ilustraciones que acompañan los textos y en la sección
de referencias de diseño gráfico hipermedia agrupados en
orden de aparición. Los sitios web han sido revisados en
el mes previo a la publicación de este trabajo y de no en-
contrarse el sitio en línea se hace una referencia a su his-
tórico en la web de almacenamiento online “archive.org”.
En las referencias se incluyen, junto con las fuentes bi-

bliográficas, el conjunto de materiales analógicos e hi-
permedia utilizados para esta investigación; publicacio-
nes periódicas tanto impresas como digitales, ensayos,
artículos e investigaciones consultadas en bases de da-
tos especializadas o abiertas al ámbito académico que
suman también conceptos e ideas que han aportado
enormemente a la consolidación de esta investigación.
En el apartado de anexos se incluyen un conjunto de docu-

mentos importantes que no es posible obtener de manera
bibliográfica, y que han sido utilizados como referencia
14 | Resumen
para el desarrollo de este proyecto, de igual manera he-

rramientas y documentación que han sido generadas ex
profeso para esta investigación han sido añadidas a este
apartado. Los anexos se encuentran agrupados en las sec-
ciones académica y profesional para su óptima consulta.
Fig. B1. Macromodelo sobre los “Funda-

mentos del diseño gráfico hipermedia”,
presentado en el Capítulo 3.
Estilo
FORMA
DISEÑO GRÁFICO
Grados de abstracción
Variaciones primarias
Textura
Color
Tipografía
ESPACIO
Disposición
Posición
Tamaño
Interrealciones Ideas-Conceptos
Dirección
TIEMPO
Estructura
Manipulación
Transposición
Animación
Representaciones
ACCIONES
Interacción
HIPERMEDIA
Transformación
Información
ATRIBUTOS Metainformación
Programación
16 | Abstract
Abstract
* Graphic Design
and hypermedia environment;
Fundamental aspects
In the last few decades, the incorporation of hy-

permedia as a communication tool for the graphic de-
signer has caused many transformations in the way in
which designers face their projects. The fast incorpora-
tion of technical-technological elements has brought a
huge amount of practical information in the graphic de-
sign area, this investigation work tries to make a pause
and balance this practical information to the theoretical
and methodological tools along with the analysis of basic
concepts that have been essential for graphic design since
its origins, to establish the main group of fundamental
aspects that compose graphic design in the hyperme-
dia environment, and look at the fundamentals used in
traditional design from the perspective that hyperme-
dia incorporates to the visual expression field of design.
This writing is a dialogue that invites reflection on the

constant upgrades that we face in the digital environ-
ment, a pause that tries to rescue the essential aspects
that compose the graphic designer profession and that
-independently from their manifestation form- enrich
creativity and support theoretical sustentation of projects.
The dialogue that arises from the reflections that this proj-
ect proposes starts questioning the relations between the
18 | Abstract
basic aspects of design and its translations to the actual

hypermedia area. The proposal of my investigation proj-
ect is structured in seven main sections, I will enumerate
them with a brief introduction previous to their analy-
sis in the chapters of the investigation in this document.
a. Objectives, hypothesis and methodology.

In this first chapter, the objective of
the present investigation is outlined, sup-
ported by the main hypothesis of this work:
i. Transition of the graphic design fundamentals to

the hypermedia environment. The first hypoth-
esis proposes a revision of the essential theoreti-
cal aspects of graphic design to look at them from
the hypermedia point of view, confronting ana-
logic born fundamentals to their digital applica-
tion and interactive environments. This exercise
throws reflections on how traditional design is ap-
plied to new media and also on how new media
can incorporate the theoretical tools that analogic
graphic design has developed though its history.
ii. Multidisciplinary Convergences. The construction of

hypermedia graphic design means the convergency of
diverse disciplines, especially in the narrative, com-
munication and technology areas, from these conver-
gences the hypermedia graphic design is enriched and
transformed. The revision and study of practical exam-
ples through this work illustrate, reflect and guide on
the significance of this multidisciplinary interaction.
iii. Application Model. As a result of the analysis

made on the hypothesis, an application model of
the “Fundamental Aspects of Hypermedia Graphic
Design” is presented, this model supports the theo-
retical development of Hypermedia Graphic Design
projects, and the establishment of practical routes
for graphic designers immersed in hypermedia de-
velopment. This model is a didactic tool that facili-

tates the presentation of the concepts reunited by the
model, easing following up of projects and support-
ing academic activities related to the hypermedia and
graphic design components presented in the model.
b. Theoretical Framework.
The first methodology that is applied in this in-
vestigation is to create a theoretical framework to ana-
lyze concepts from diverse references related to hyper-
media graphic design; references related to its historical
evolution (Bauhaus, Basel), related to its technological
development (Chicago School, London Royal Col-
lege of Art) and linked to the graphic design’s innova-
tive establishment (Milan Polytechnic, Aalto Helsinki),
Two more references are added because of their geo-
graphical importance to this investigation: Spain and
Mexico; analyzing their contributions, main character-
istics and their course’s structure these references work
as a starting point for the model proposed by this study.
c. Development of the Models.

The chapter that develops in detail the theo-
retical framework reviews the components that group
the fundamentals of Hypermedia Graphic Design pro-
posed by the model (Fig. C1), and uses graphic pro-
fessional examples as references to rediscover those
aspects that compose the essence of Hypermedia De-
sign Projects. On a first approach the analog essentials
of Graphic Design are reviewed: Form and Space, ac-
companied by the third aspect of the model proposed:
Time, this third component links analog design funda-
mentals with interactive aspects, and works as a bridge
to the hypermedia environment. In a second approach
the fundamentals that are incorporated from the conver-
gence of new media are reviewed: Actions and Attributes.
20 | Abstract
From the analysis of these five main components the

model of the investigation is developed, graphic exam-
ples provide didactic approach and the visual immersion
in the fundamentals mentioned on the model verify the
transition of the analog aspects into the hypermedia en-
vironment, promoting dialogue, redefinitions and reflec-
tions on the fundamental aspects that the model proposes.
d. Results.
In order to verify the results of the hy-
pothesis and model proposal, the investiga-
tions are applied to different application scopes:
i. Model References. The model resulting from

the investigation is compared to the historic, tech-
nological and innovative references, as well as with
the geographic influence models revised, to ana-
lyze general characteristics and objectives, verify-
ing the tendencies and relationships to the proposal.
ii. Academic comparison. The model presented is re-

viewed in the academic area: interviews with stu-
dents and teachers suggest contributions on the
aspects that both micromodel and mesomodel can
provide to Hypermedia Graphic Design studies.
iii. Professional comparison. The model is also is

also applied to the professional area, comparisons
are made between the model proposal and the pro-
files of hypermedia graphic designers requested by
mainstream design agencies; this comparison is
accompanied by the analysis of human resources
department requests in the graphic and hyperme-
dia areas, and the results of specialized academic
database analysis provide direction to the fun-
damental aspects grouped in the model and ap-

plied to Hypermedia Graphic Design projects.
e. Discussion
In the chapter related to the discussion the initial state-
ments are compared to the results obtained through the
investigation, this section provokes a dialogue in which
the group of key elements that the investigation (and its
ramifications) provide can evolve, a dialogue that fol-
lows the methodology proposed in the different models
of this project, linking this process to the evolution of
graphic design in the hypermedia environment.
f. Conclusions, Recommendations and further

investigations
The conclusions of the investigation work are
reviewed from the academic, professional and investiga-
tion areas. The main contribution from the results ob-
tained in this work is a dialogue between the analog/
traditional aspects of graphic design and the digital/
technological inclusions from new media. This dialogue
promotes coherency between the professional, academ-
ic and investigation areas of Hypermedia Graphic De-
sign, and the model proposed serves as a starting point
to future dialogues and projects in the way of the theo-
retical establishment of Hypermedia Graphic Design.
i. Academic Conclusions. Academic theoretical sup-

port of Hypermedia Design Projects can help to bal-
ance the tendency towards practical-technological
focus in the hypermedia graphic design studies with
reflexive tools that promote creativity, communica-
tion skills and contribute to the added value that a
graphic design professional should provide to an
hypermedia project. The model proposed promotes
22 | Abstract
project analysis in early stages, looking forward to es-

tablish a methodology that supports the fundamen-
tal establishment of a Hypermedia Design project.
The diversification that design studies are sustaining

nowadays promote specialization and from the dy-
namic transformation of interactive media new tools
are added; digital languages and software evolve
increasingly. The establishment of common theo-
retical fundamentals enriches the methodology used
by the designer to sustain his practical proposals.
ii. Investigation Conclusions. The relevance of this

work for the investigation in Hypermedia Graphic
Design is verified in a first stage in the model pro-
posal, where the practical revision and study of hy-
permedia projects related to Graphic Design ques-
tions the present state of design in interactive
media and the paths that the evolution of design
should follow from the theoretical point of view.
In a second approach this work follows Ellen Lup-

ton’s project (2008), to explore the present con-
cept of design, reflecting on the profound changes
that technology and interactive social media pro-
vide towards the visual communication structures.
The resultant model proposed in this investigation

initiates a profundization in the subcategories that
compose the general aspects of Hypermedia Graphic
Design theory, establishing start-up references for
future investigation projects and encouraging design-
ers to develop future investigations in the evolution
of Graphic Design and Hypermedia environment.
iii. Professional Conclusions. The professional veri-

fication of the fundamental aspects reviewed in the
model proposal is one of the main objectives of this

investigation, with this goal in mind the analysis
has been made in three different professional areas:
- In a group of ten Hypermedia Graphic Design re-

lated agencies, taking this group as benchmark to
compare and link the concepts reviewed in the model,
as result important data is given about the skills that
add value to designers in the professional area and
the priorities that the professional market establishes
for hypermedia related projects on visual approaches.
- The analysis of the professional market has been ac-

companied with data from the main design business-
oriented online job search engines, to identify on the
requests of graphic areas the hypermedia related pro-
files that reveal a tendency in the employees’ require-
ments going further from just technical skills requests
to further vision and project management capabilities.
- Academic professors and students have provided

their feedback relative to Graphic Design and Hy-
permedia in a series of surveys and lectures. Their re-
quests align with the need to identify theoretical tools
that support design project analysis in the classroom.
The results provided by this investigation, in the aca-

demic and professional areas align with the basic con-
cepts provided by the model presented and point to
the same direction: hypermedia environment has gone
through a startup stage in which it has been identified
as an important tool for the graphic designer, this ini-
tial stage has pushed technical information and stud-
ies on graphic design and now the evolution needs to
move forward to a more balanced stage between theo-
retical and technical knowledge, supported by reflections
and analysis of the essential aspects that have been de-
veloped through the graphic design history, an evolu-
24 | Abstract
tion that Meggs (2009: p. 531) has been talking about:
...taking responsibility to adapt new technologies and

expressing the spirit of our times trough the inven-
tion of new forms and new paths to express ideas.
Posters and books were essential communication
tools for the industrial revolution, they will continue
to exist as art forms in the new electronic age and the
graphic designers will help to define and extend each
new generation of electronic communication media.
e. References & Annex

The references in this investigation are men-
tioned according to the APA (Association Physicologists
American) nomenclature. The hypermedia projects that
illustrate the investigation due to the importance that
they have as examples and references for this work have
been grouped in a separate index, along the investiga-
tion work they can be found in the text that accompa-
nies the illustration in each page, and in the final ref-
erences section they are reunited and grouped in order
of appearance. The websites that are referred to in this
document have been reviewed in the month previous to
the final version of this document and in the case of a
deleted website, a link in archive.org has been placed.
In the references section has been included the bib-

liographic sources for both hypermedia and ana-
log sources; periodical publications, articles, es-
says and online databases; sources that have been
vital for the development of the investigation.
The Annex section at the end of this chapter com-

piles a group of important documents and resourc-
es for the investigation process, they are grouped in
two sections: academic and professional references.
Fig. C1. Macromodel “Fundaments in

Hypermedia Graphic Design” presented
in this investigation (Cap. 3)
Style
FORM Abstraction Grades

GRAPHIC DESIGN
Primary Variations
Texture
Color
Typography
SPACE
Disposition
Position
Size
Interrelations Ideas-Concepts
Direction
TIME
Structure
Manipulation
Transposition
Animation
Representations
HYPERMEDIA
ACTIONS
Interaction
Transformation
Information
ATTRIBUTES Metadata
Programming
Índice
A. AGRADECIMIENTOS 4
B. RESUMEN: Diseño gráfico y el entorno hipermedia; aspectos fundamentales 6
C. ABSTRACT: Graphic design and hypermedia environment; fundamental aspects 16
1. INTRODUCCIÓN: Hacia una fundamentación del diseño gráfico hipermedia 34
1.1 DELIMITACIÓN DEL OBJETO DE ESTUDIO. . . . . . . . . . . . . 45

1.2 TERMINOLOGÍA BÁSICA. . . . . . . . . . . . . . . . . . . . . 47
1.2.1 Comunicación digital y análoga. . . . . . . . . . . . . . 47
1.2.2 Multimedios, hipertexto e hipermedios. . . . . . . . . . . 49
1.2.3 Interactividad e interfaces.. . . . . . . . . . . . . . . . . 51
1.2.4 Páginas y sitios de internet.. . . . . . . . . . . . . . . . 54
1.2.5 Usuarios y usabilidad. . . . . . . . . . . . . . . . . . . 56
1.2.6 Imágenes vectoriales y pixelares. . . . . . . . . . . . . . 58
2. MARCO TEÓRICO: Evolución del diseño gráfico hacia el entorno hipermedia:

modelos referenciales 60
2.1 MODELOS DE REFERENCIA . . . . . . . . . . . . . . . . . . . 62

2.2 MODELOS DE IMPORTANCIA HISTÓRICA. . . . . . . . . . . . . . 62
2.2.1 Alemania, Bauhaus. . . . . . . . . . . . . . . . . . . . 62
2.2.2 Suiza, Basel. . . . . . . . . . . . . . . . . . . . . . . 66
2.3 MODELOS DE IMPORTANCIA TECNOLÓGICA. . . . . . . . . . . . 68
28 | Índice
2.3.1 Chicago, USA . . . . . . . . . . . . . . . . . . . . . . . 69

2.3.2 Londres, Reino Unido . . . . . . . . . . . . . . . . . . . 70
2.4 MODELOS DE VANGUARDIA. . . . . . . . . . . . . . . . . . . 75
2.4.1 Milán, Italia . . . . . . . . . . . . . . . . . . . . . . . 75
2.4.2 Helsinki, Finlandia. . . . . . . . . . . . . . . . . . . . 80
2.5 MODELOS REFERENCIALES: COMPARATIVA . . . . . . . . . . . . 83
2.6 SITUACIÓN ACTUAL: ESPAÑA Y MÉXICO . . . . . . . . . . . . . . 86
3. DISEÑO DE LA INVESTIGACIÓN: Objetivos, Hipótesis y Metodología 94
3.1. OBJETIVOS 95
3.1.1 Investigación . . . . . . . . . . . . . . . . . . . . . . . 96
3.1.2 Educación. . . . . . . . . . . . . . . . . . . . . . . . 97
3.1.3 Profesionales . . . . . . . . . . . . . . . . . . . . . . . 98
3.1.4 Aportaciones adicionales. . . . . . . . . . . . . . . . . 98
3.2 HIPÓTESIS . . . . . . . . . . . . . . . . . . . . . . . . . . 99
3.3 METODOLOGÍA . . . . . . . . . . . . . . . . . . . . . . . . 101
3.3.1 Referencias bibliográficas. . . . . . . . . . . . . . . . . 102
3.3.2 Aspectos cualitativos. . . . . . . . . . . . . . . . . . . 104
3.3.3 Aspectos cuantitativos . . . . . . . . . . . . . . . . . . 104
4. PRESENTACIÓN Y DESARROLLO DE LOS MODELOS 106
4.1 MICROMODELO. . . . . . . . . . . . . . . . . . . . . . . . 110

4.1.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . 110

4.1.2 Presentación. . . . . . . . . . . . . . . . . . . . . . . 111
4.2 MESOMODELO . . . . . . . . . . . . . . . . . . . . . . . . . 112
4.3 MACROMODELO. . . . . . . . . . . . . . . . . . . . . . . . 119
4.4 MICROMODELO: DESARROLLO . . . . . . . . . . . . . . . . . . 123
4.4.1 Diseño gráfico: definiciones. . . . . . . . . . . . . . . . 125
4.4.2 Hipermedia: características. . . . . . . . . . . . . . . . 127
4.4.3 Diseño gráfico hipermedia: fundamentos. . . . . . . . . . 129
4.5 COMPONENTES DEL MICROMODELO. . . . . . . . . . . . . . . 131
4.6 FORMA. . . . . . . . . . . . . . . . . . . . . . . . . . 131

4.6.1 De lo realista a lo figurativo . . . . . . . . . . . . . . . . 132
4.6.2 De lo figurativo a lo abstracto. . . . . . . . . . . . . . . 132
4.6.3 Grados de abstracción . . . . . . . . . . . . . . . . . . . 133
4.6.4 Lo simbólico en la abstracción. . . . . . . . . . . . . . . 134
4.6.5 Variaciones primarias de la forma: . . . . . . . . . . . . . 135
4.6.6 Estilos expresivos de la forma. . . . . . . . . . . . . . . 136
4.6.7 Textura. . . . . . . . . . . . . . . . . . . . . . . . . 138
4.6.8 Color. . . . . . . . . . . . . . . . . . . . . . . . . . 139
4.6.9 Armonías de color.. . . . . . . . . . . . . . . . . . . . 142
4.6.10 Esquemas de color. . . . . . . . . . . . . . . . . . . . 143
4.6.11 El color en el contexto de la comunicación. . . . . . . . . 147
4.6.12 Significación y psicología cromática. . . . . . . . . . . . 150
4.6.13 Efectos del uso del color en el diseño gráfico hipermedia. . . 152
4.6.14 Tipografía. . . . . . . . . . . . . . . . . . . . . . . . 154
4.6.15 Anotaciones sobre la tipografía en el contexto hipermedia. 158
30 | Índice
4.7 ESPACIO. . . . . . . . . . . . . . . . . . . . . . . . . 161

4.7.1 Elementos de la composición.. . . . . . . . . . . . . . . 162
4.7.2 El punto como elemento compositivo . . . . . . . . . . . . 163
4.7.3 La línea como elemento compositivo. . . . . . . . . . . . 166
4.7.4 El plano como elemento compositivo. . . . . . . . . . . . 168
4.7.5 Sistemas de composición. . . . . . . . . . . . . . . . . 169
4.7.6 Sistemas de retículas. . . . . . . . . . . . . . . . . . . 172
4.7.7 Módulos y redes. . . . . . . . . . . . . . . . . . . . . . 175
4.7.8 Significación en la composición. . . . . . . . . . . . . . 175
4.7.9 La composición en el contexto hipermedia . . . . . . . . . 173
4.8 TIEMPO . . . . . . . . . . . . . . . . . . . . . . . . . 180

4.8.1 El control temporal. . . . . . . . . . . . . . . . . . . . 183
4.8.2 Estructuras temporales narrativas. . . . . . . . . . . . . 184
4.8.3 Manipulación temporal. . . . . . . . . . . . . . . . . . 186
4.8.4 Transposición temporal. . . . . . . . . . . . . . . . . . 189
4.8.5 El tiempo hipermedia. . . . . . . . . . . . . . . . . . . 190
4.9 ACCIONES . . . . . . . . . . . . . . . . . . . . . . . . 191

4.9.1 Animación 2D y 3D. . . . . . . . . . . . . . . . . . . . 195
4.9.2 Video . . . . . . . . . . . . . . . . . . . . . . . . . . 206
4.9.3 Animación hipermedia . . . . . . . . . . . . . . . . . . 210
4.9.4 Interacción. . . . . . . . . . . . . . . . . . . . . . . . 213
4.9.5 Transformación . . . . . . . . . . . . . . . . . . . . . . 219
4.10 ATRIBUTOS. . . . . . . . . . . . . . . . . . . . . . . 221

4.10.1 Información. . . . . . . . . . . . . . . . . . . . . . . 222
4.10.2 Metainformación . . . . . . . . . . . . . . . . . . . . 228
4.10.2 Estructuras metainformativas. . . . . . . . . . . . . . . 231
4.10.3 Programación . . . . . . . . . . . . . . . . . . . . . . 234
4.11 Anotaciones adicionales al desarrollo futuro del micromodelo. 244
5. RESULTADOS, Grado de verificación o no verificación de las hipótesis 248
5.1 COMPARATIVA DE MODELOS 250

5.1.1 Características generales del modelo. . . . . . . . . . . . 250
5.1.2 Relación de las características generales con los modelos referenciales 253
5.1.3 Objetivo general del modelo . . . . . . . . . . . . . . . . 257
5.1.4 Relación de los objetivos propuestos con los modelos referenciales
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
5.2 SESIONES DE GRUPO . . . . . . . . . . . . . . . . . . . . . . 259
5.3 COMPARATIVA PROFESIONAL. . . . . . . . . . . . . . . . . . 264
5.4 ANÁLISIS DE CAMPO. . . . . . . . . . . . . . . . . . . . . . 273
5.5 DISEÑO GRÁFICO HIPERMEDIA E INVESTIGACIÓN. . . . . . . . . 275
6. DISCUSIÓN, La evolución de los fundamentos del diseño gráfico hipermedia 283

32 | Índice
7. CONCLUSIONES DE LA INVESTIGACIÓN 290

7.1 CAMPO ACADÉMICO. . . . . . . . . . . . . . . . . . . . . . 292
7.2 CAMPO INVESTIGADOR . . . . . . . . . . . . . . . . . . . . . 296
7.3 CAMPO PROFESIONAL. . . . . . . . . . . . . . . . . . . . . 299
8. APLICACIONES DE LA INVESTIGACIÓN 305

8.1 MODELO DE APLICACIÓN ACADÉMICA. . . . . . . . . . . . . . 306
8.2 APLICACIONES PRÁCTICAS HACIA LA INVESTIGACIÓN. . . . . . . . 310
8.3 APLICACIONES PRÁCTICAS PROFESIONALES. . . . . . . . . . . . 311
8.4 ORIENTACIONES PRÁCTICAS ADICIONALES. . . . . . . . . . . . 312
9. HIPÓTESIS PLAUSIBLES Y OTRAS VÍAS DE INVESTIGACIÓN 314
9.1 HIPÓTESIS PLAUSIBLES . . . . . . . . . . . . . . . . . . . . . 316

9.2 OTRAS VÍAS DE INVESTIGACIÓN. . . . . . . . . . . . . . . . . 317
10. REFERENCIAS 324
10.1 REFERENCIAS BIBLIOGRÁFICAS. . . . . . . . . . . . . . . . . 325

10.2 REFERENCIAS DE DISEÑO GRÁFICO HIPERMEDIA. . . . . . . . . 342
11. ANEXOS 352

Introducción
| 35
Introducción
1 Hacia una fundamentación

del diseño gráfico
hipermedia
♦♦ En la era de la información, todos nosotros tenemos

que manejar un nuevo lenguaje visual, por lo que es po-
sible que tengamos que redefinir por completo los princi-
pios que guiaban nuestro diseño tradicional.
W. Wong (2004, p. 25)
L
a inquietud por este proyecto de investigación
forma parte de una búsqueda que tiene sus orí-
genes en la tesis para la obtención de mi licencia-
tura en el grado de diseño gráfico, durante las etapas de
su desarrollo la perspectiva de internet se perfilaba como
un maravilloso paraje, virgen e inexplorado para mí, y
en realidad de igual manera para mis contemporáneos;
en aquel proyecto trataba de visualizar las posibilidades
que presentaba el territorio recién descubierto para los
diseñadores gráficos y experimenté a lo largo de la in-
vestigación con sus aplicaciones prácticas en un proyecto
profesional en torno a las posibles derivaciones del dise-
ño hacia las nacientes aplicaciones gráficas para internet.
Casi veinte años después, este nuevo paraje de internet

y de los multimedios interactivos en general ha evolu-
cionado para consolidarse en un campo de trabajo co-
tidiano, he adquirido experiencia durante mi vida pro-
fesional como diseñador en este terreno y he regresado
a la academia posteriormente como docente para llevar
estas inquietudes de vuelta a sus orígenes: el diálogo con
36 | Introducción
alumnos y profesores ha alimentado las inquietudes que

adquirí al desarrollar mí tesis profesional. Durante esta
experiencia académica, he identificado herramientas y
elementos que he echado de menos durante las primeras
etapas de mi vida profesional y he podido reflexionar en
torno a cuestiones en las que colegas y amigos del ám-
bito del diseño hemos estado discutiendo durante años;
el aterrizaje teórico de los conceptos tecnológicos que
revisan los programas universitarios actualmente es es-
caso y poco formal; los fundamentos teóricos del diseño
divergen y se mantienen alejados de su posible aterrizaje
al momento de aplicarles al terreno de los hipermedios,
las bibliografías apuntan a señalar aspectos técnicos y
el dominio de las herramientas digitales sigue siendo el
área de interés común, aislándose del enriquecedor mun-
do de los elementos fundamentales del diseño gráfico.
En el año 2002, la Universidad La Salle de la Ciudad

de México me dio la oportunidad de integrarme a su
plantilla de docentes, desde el primer curso busqué par-
ticipar en áreas del diseño vinculadas a los medios digi-
tales e interactivos, para trabajar y profundizar durante
los años subsecuentes en la enseñanza de asignaturas en
tres de mis ámbitos de experiencia; el área de marke-
ting, impartiendo las asignaturas de “Gestión del dise-
ño II” y “Mercadotecnia” en el sexto y séptimo semestre
de la carrera; el área de Diseño, impartiendo el “Taller
de formación básica” y el “Taller de color” en el primero
y segundo semestre de la carrera y en el área de hiper-
medios, impartiendo ”Diseño gráfico por computado-
ra”, “Tecnología de los sistemas de impresión”, “Mul-
timedios” y “Lenguaje de Hipermedia”, en los grados
de Diseño Gráfico y Comunicación respectivamente.
Como parte de la reestructuración formativa mexicana,

se incorporaron demandas en el 2003, para incrementar
el nivel de calidad docente, por ello, durante ese año se
solicitó al profesorado de la Universidad realizar estudios
de grado superior al obtenido hasta ese momento, esa
solicitud motivó a directivos y académicos a desarrollar
nuevos proyectos; personales e institucionales, para alcan-

zar las metas de profesionalismo académico planteadas.
Revisando las áreas académicas en las que me había invo-
lucrado, no fue difícil identificar el naciente terreno de los
hipermedios como un área de especial interés para seguir
profundizando en ella y buscar el desarrollo de herramien-
tas que apoyasen mis labores profesionales y académicas.
Así mismo, de esta propuesta académica de mejora surge

la inquietud dentro de la Escuela Mexicana de Arquitec-
tura, Diseño Gráfico y Comunicación -EMADyC- de la
Universidad La Salle, de iniciar un plan de trabajo para
el establecimiento de estudios de segundo ciclo propios,
orientados hacia los terrenos de aplicación tecnológicos,
de manera que se revisasen los ámbitos de especializa-
ción relevantes para las tres carreras pilares de la Fa-
cultad: Arquitectura, Diseño Gráfico y Comunicación.
Durante el año 2003, tuve la oportunidad de involu-

crarme en el desarrollo de los nuevos planes de estudio
de la carrera de Diseño Gráfico, proponiendo líneas
curriculares y modificando planes de estudio en con-
junto con la academia universitaria, esta experiencia
fue muy importante para mí y me llevó a buscar inte-
grarme al equipo de trabajo para el desarrollo de estu-
dios de Maestría en EMADyC que proyecta su for-
malización dentro de la Universidad más allá del 2015.
Desde el año 2004 mudé mi residencia a España, donde

he tenido oportunidades para participar como profesor
en asignaturas que de manera reconfortante se presen-
taban como propuestas de análisis o talleres de estudio
en donde la práctica tecnológica buscaba compensarse
con la fundamentación teórica. El énfasis que se hace
en España para apoyar la investigación y el alto grado
de preparación en el ámbito académico le confiere a ca-
rreras nacientes relacionadas con el Diseño Gráfico un
conjunto de positivas ventajas, como he podido verificar
durante mi estancia en la Universidad Europea de Ma-
drid, pionera en el establecimiento del grado de Diseño
38 | Introducción
y que ha optado por un modelo de fuerte carga teórica

sin minimizar la participación práctica de sus alumnos;
en los cursos de 2009 y 2010 colaboré en la asignatu-
ra de “Historia y teoría de los multimedios interactivos”
desarrollando junto con los alumnos de los primeros
cursos importantes puntos de partida para entender y
cuestionar la evolución del diseño y su papel dentro del
entorno hipermedia contemporáneo, la experiencia por
supuesto fue enriquecedora y me permitió llevar al aula
universitaria varias de las inquietudes que me había es-
tado planteando durante mi vida profesional, así como
abordar los primeros pasos de mi investigación doctoral.
Después de esta experiencia, a partir del año 2009 inicié

mi participación en la Universidad de Nebrija, específi-
camente en la Facultad de Bellas Artes, en donde este
grado, de reciente establecimiento, busca diferenciarse
de los estudios impartidos en otros centros mediante un
enfoque de aplicación práctica, con énfasis en el uso de
las tecnologías actuales a favor de las posibilidades que
puede plantearse el artista dentro de una sociedad que
percibe, consume y frecuenta el arte en terrenos más allá
de las galerías o espacios museográficos tradicionales;
en las diversas posibilidades que el terreno hipermedia
ofrece a la expresión plástica. Mi participación, desde la
primer generación del grado en Bellas Artes en 2009, ha
sido focalizada en asignaturas con enfoque tecnológico
(Programación Web, Modelado y Animación 3D) y des-
de el punto de vista del grado en Bellas Artes el plantea-
miento de este enfoque ayuda a una nueva generación de
artistas a que se sientan cómodos con las herramientas
tecnológicas, motivándoles a experimentar con las nuevas
tecnologías para utilizar estos canales de comunicación
en las diversas propuestas que generan y pasan a formar
parte del acervo artístico en el terreno hipermedia. En la
Universidad de Nebrija he podido participar en asigna-
turas planteadas prácticamente como talleres, pero que,
aún bajo este formato de praxis, buscan potenciar el he-
cho de su inserción en el grado universitario para ir más
allá, estableciendo parámetros teóricos complementarios

que ayuden a fundamentar los proyectos que finalmente
se llevarán a cabo en el aula; es así como la asignatura
de “Programación Web” revisa aspectos fundamentales
de composición, elementos teóricos de interactividad y
usabilidad, complementando con documentación his-
tórica relacionada con la evolución de los medios inte-
ractivos, para forjar de esta manera no sólo técnicos ex-
pertos en una herramienta sino profesionales con una
visión integral, capaces de sustentar proyectos hiperme-
dia globales, profesionistas capaces de administrar tareas
a grupos interdisciplinares, especialistas cada uno en sus
funciones, pero con metas claras gracias a la unificación
inicial de parámetros y definiciones proyectuales que
permiten ejecutar de manera concisa una idea creativa.
La experiencia de otra asignatura tecnológica; “Princi-

pios de animación y modelado en 3D” se ve igualmente
beneficiada de hacer un alto inicial para tomar el tiem-
po necesario a definir conceptualmente los proyectos a
ejecutar, reflexionando en el tipo de tecnologías a em-
plear y buscando utilizar herramientas de investigación
y organización que optimicen finalmente la manera en
que un proyecto de gran envergadura, como lo es una ani-
mación o un modelado en 3D, es llevado a la realidad.
Esta serie de experiencias, unidas a mi labor cotidiana

como diseñador -en la que paulatinamente los proyec-
tos interactivos se fueron sumando, hasta dejar de ser
novedad para transformarse en una más de las necesi-
dades cotidianas de mis clientes- derivó en la relevancia
que finalmente significó para mí trabajar en la puesta en
práctica del diseño gráfico en los terrenos de aplicación
hipermedia, inquietud que me ha llevado a revisar el es-
tado actual de la cuestión para poder plantearlo desde un
punto de vista investigador, de forma que pudiese mejorar
las herramientas profesionales y académicas que utilizo
día a día, siguiendo la inquietud por generar aportaciones
sobre bases sólidas para la evolución de un terreno que es
40 | Introducción
ya fértil para los diseñadores gráficos en la actualidad; el

campo hipermedia, y a la par desarrollar este proyecto en
la búsqueda de conclusiones investigadoras para mi tesis.
Al día de hoy, la participación del diseñador en hiper-

medios ya no es solamente cotidiana, el semanario espa-
ñol Latino, en el cual participé durante varios años como
Director de Arte, mantuvo un proceso de trasformación,
volcando su estrategia de marketing desde los medios im-
presos hacia internet, con miras a transformarse de un
semanario con una web informativa más bien pequeña
a un portal informativo de referencia para el mundo la-
tinoamericano en España con el añadido de un sema-
nario impreso como complemento. Esta estrategia con-
tinúa transformando diversos medios de comunicación
tradicionalmente impresos y muchos de ellos han pasado
de ser medios análogos a digitalizarse en su totalidad,
la masificación de las tabletas gráficas y los smartphones
han potenciado este efecto y tanto revistas como publi-
caciones electrónicas en formato interactivo comienzan
a superar a sus hermanas análogas o analógicas, como
suele denominarse en España, en mercado y usuarios.
Ante este panorama, la participación formal del diseñador

gráfico hipermedia se ha convertido en cotidiana y cobra
suma importancia para lograr resultados a largo plazo en
un terreno competitivo que repunta a partir de necesida-
des económicas tangibles. La evolución del diseño gráfico
durante el último par de décadas ha sido vertiginosa, en
poco tiempo las diferencias entre lo que se enseña en el
aula y lo que los alumnos llevan a la práctica en su vida
profesional ha dejado de ser un hueco para convertirse en
un gran abismo que las aulas de estudios universitarios
siguen sorteando, aún ahora, cuando este proceso parece
iniciar su descenso de la cúspide de la innovación, para
convertirse en lugar de encuentro común. La evolución
del diseño gráfico hacia los hipermedios es el principal
motivo de ramificaciones, redefiniciones y nacimiento
de nuevas variables que forman parte del reto cotidia-
no que los diseñadores enfrentan en su vida profesional.
Durante el 2011 tuve la oportunidad de incorporarme a

Apple Retail, participando especialmente en procesos for-
mativos; sesiones de aprendizaje personalizadas, talleres,
asesorías tecnológicas. El hecho de estar dentro de una de
las grandes transnacionales punteras en los terrenos tanto
del hardware como el software que está transformando
la comunicación en nuestra sociedad, me ha permitido
también tener la perspectiva profesional y de primera
mano sobre los espacios en donde el diseñador realizará
grandes aportaciones gracias a sus conocimientos teó-
ricos puestos en práctica. Es por ello que, durante mis
experiencias profesionales, he buscado una implicación
investigadora, para llevar más allá mis labores profesio-
nales y aprovechar mis experiencias para analizarlas me-
diante las herramientas que han dado forma finalmente
a las propuestas de modelo presentadas en este proyecto.
En enero del 2012, Apple inició una transformación en el

medio editorial similar a la que protagonizó en la década
de los ochenta, llevando el Desktop Publishing (DTP) a
los procesos de producción impresa; en este caso recien-
te, la transformación apuntó hacia la digitalización to-
tal del proceso, uniendo hardware (iPads, iPhones, iPods,
Ordenadores) con software (Pages, iBooks, iBooks Author),
para crear un proceso que va de la creatividad del profe-
sorado autor hacia la facilidad de uso y aprendizaje por
parte de los alumnos que reciben sus libros electrónicos
con menor intermediación y mayor rapidez, en disposi-
tivos que cotidianamente emplean tanto para aspectos
lúdicos como comunicativos, y que suman una alternati-
va a la publicación educativa tradicional, apoyada por la
posibilidad de compartir experiencias en la investigación
y el desarrollo a través de plataformas como iBooks y iTu-
nes U, todos estos elementos conllevan una participación
del diseñador para potenciar sus contenidos, para opti-
mizar el flujo de trabajo y para presentar los elementos
visuales que apoyan a los contenidos teóricos, es una vez
más un área de oportunidad para los diseñadores gráfi-
42 | Introducción
cos en el terreno hipermedia de aplicar conocimientos

y habilidades que no son nuevos, sino que simplemen-
te se transforman y adaptan al pulso de las herramien-
tas con las que trabajamos en este entorno hipermedia.
Gui Bonsiepe (1999, p. 32) ya advierte sobre el proce-

so de esta transformación mencionando como en los
años setenta el discurso del diseño se fundamentaba en
categorías lingüísticas que lo concebían atenido a su
materialidad, en cambio hacia la década de los noven-
ta, identifica el surgimiento de un nuevo lenguaje, que
proviene de las tecnologías de la información y los mul-
timedios, y que, generando aportaciones hacia los fun-
damentos redescubren al diseño como “interface de
usuario humano”. Gui Bonsiepe sostiene que esta nueva
conceptualización está borrando las líneas divisorias en-
tre Diseño Gráfico y Diseño Industrial y solicita urgen-
tes modificaciones en la formación de los diseñadores.
Ante este incremento en la transformación del diseño,

Guy Julier (2008, p. 209) recalca el efecto que ha tenido
en el diseño la velocidad incremental del desarrollo de las
diversas plataformas para el diseño digital, provocando
como consecuencia dificultades para el propio diseñador
hacia el establecimiento de discursos críticos y lenguajes
referidos al desarrollo de esta práctica en particular. Raquel
Pelta (2004, p. 98) añade abordando el tema de la evolu-
ción del diseño en internet a la manera en cómo el dise-
ñador enfrenta la necesidad de elaborar discursos críticos
para asumir el papel de intermediario entre lo tecnológico
y lo cultural, participando de esa manera como un activo
contribuyente en la formación de contenidos de alta rele-
vancia en el terreno de la comunicación contemporánea.
Llevar estas inquietudes desde mis proyectos académicos

y profesionales en México a otro espacio geográfico para
evolucionarlas hacia mi proyecto de investigación docto-
ral me permitió analizar un universo más vasto de varia-
bles; la elaboración y visualización de modelos durante el

proceso de documentación me permitió profundizar en la
evolución de mi profesión de una manera científica con
la diversidad de perspectivas que confluyen en las Facul-
tades de Bellas Artes y Ciencias de la Información de
la Universidad Complutense de Madrid para conjugar e
integrar una visión más global vinculada a este espacio
hipermedia del diseño gráfico, que en realidad rompe ba-
rreras en su propia concepción para significar en sí mismo
la evolución de una nueva dinámica de comunicación.
El presente trabajo de investigación intenta explorar de

manera práctica el cuestionamiento de la fundamentación
teórica orientado hacia el diseño gráfico en el entorno hi-
permedia, se aleja, en lo posible, de los cambiantes térmi-
nos técnicos del medio para aterrizar herramientas con-
ceptuales de mayor atemporalidad que puedan ser llevadas
a su aplicación práctica en la vida laboral del diseñador.
En España, el ámbito del diseño se está transformando

rápidamente, la demanda de diseñadores ha sido satis-
fecha hasta hace un par de años por estudios no regla-
dos y de carácter técnico, sin embargo en la convergen-
cia educativa del espacio europeo y tras los acuerdos de
Bolonia se ha formalizado la evolución estratégica de las
Bellas Artes hacia el terreno del diseño como licenciatu-
ra, valorándose favorablemente para ingresar a la oferta
de estudios ofrecidos a nivel de grado académico en el
país, esta acción representa un cambio sustancial en el pa-
norama de diseño gráfico nacional ya que su traducción
en estudios universitarios es la base para la formación de
las primeras generaciones de diseñadores gráficos titula-
dos, el Libro blanco del diseño (2004) reúne el trabajo
realizado desde las primeras evaluaciones e inquietudes
en abril del 2003, hasta su aprobación por unanimidad
en junio del 2004, la amplitud de este documento abarca
los lineamientos generales para la estructuración de es-
tudios de diseño gráfico en España y contempla en sus
propuestas y modelos la aplicación del diseño en el terre-
no hipermedia; en el capítulo introductorio se menciona
44 | Introducción
en el apartado B (pp. 23 y 24) la valoración general que

supone la evolución de las Bellas Artes en España hacia
el terreno de las nuevas tecnologías, demostrando la ver-
satilidad de una titulación orientada a los hipermedios:
En los ámbitos relacionados con las nuevas tecnolo-

gías y los nuevos medios electrónicos, se detecta una
demanda creciente. El campo de las nuevas tecnolo-
gías pide realizadores multimedia y de audiovisuales,
expertos en imagen digital y, sobre todo, una gran de-
manda en alza en todo lo referente a la creación en el
entorno visual relacionado con Internet. Las empre-
sas ligadas a los nuevos medios,crean constantemente
nuevas demandas profesionales, cuyo perfil es de un
creativo innovador dentro del ámbito de la comunica-
ción visual y en dirección artística. Nuestros alumnos
formados en los talleres de creación artística de video-
creación, videoarte, arte-digital, etc, tienen muchas
veces la formación idónea para este tipo de trabajos.
La convergencia es uno de los temas principales al ha-

blar del aspecto hipermedia en el diseño gráfico, por
ello la integración multidisciplinar, la visión global y
las aportaciones históricas se suman a este proyecto de
investigación buscando complementar el análisis de
los aspectos fundamentales en el recorrido de un cami-
no especialmente útil para los diseñadores que, como
en mi propia experiencia, encuentran la irrupción de
los hipermedios como una oportunidad y una vez re-
visados los conceptos técnicos de este proceso busca-
mos ahora profundizar en la investigación teórica para
equilibrar la evolución del diseño gráfico hipermedia.
1.1 Delimitación del objeto de estudio

El acotamiento de los parámetros que esta in-
vestigación abarca ayuda a una mejor identificación de
los temas, convergencias y evoluciones que el estudio
plantea. Para ello es de vital importancia tener clara la
visión particular del diseño que el terreno gráfico y su
posterior traslado hacia el entorno hipermedia conllevan.
Orientados hacia una definición del diseño Flusser (2002,

p. 23) empieza su Filosofía del diseño aclarando las bases eti-
mológicas sobre las cuales asienta el terreno de esta materia:
En inglés la palabra design funciona indistinta-

mente como sustantivo y como verbo. Como sus-
tantivo significa, entre otras cosas, intención, plan,
propósito, meta, conspiración malévola, conjura,
forma, estructura fundamental. Como verbo (to
design) significa entre otras cosas proyectar, bos-
quejar, coonformar, proceder estratégicamente. La
palabra en cuestión es de origen latino y contie-
ne en sí el término signum, que significa lo mismo
que nuestra palabra alemana Zeichen, signo, dibujo.
Ambas palabras, por lo demás tienen un origen co-
mún. Diseñar, por lo tanto, si lo traducimos sig-
nifica etimológicamente algo así como “de-signar”.
Julier (2008, p. 63) apoya sus definiciones de diseño en las

afirmaciones de Papanek (1985), para proponer la afirma-
ción de que diseñar es la práctica que otorga un valor aña-
dido a las cosas, las imágenes o los lugares; y agrega igual-
mente la vinculación económica y cultural que Bourdieu
(1996) articula y que Lash y Urry (2000) unen también a
la orientación gráfica del diseño al hablar del traslado de
la producción de objetos hacia la elaboración de signos.
Jorge Frascara (2000, p. 123) al hablar de di-
seño gráfico y comunicación concluye la defi-
nición de diseño en su aterrizaje gráfico como:
46 | Introducción
Esquema 1. Modelo de Royo (2004) sobre La actividad de concebir, programar, proyectar, y rea-
el Diseño Gráfico Hipermedia
lizar comunicaciones visuales, producidas en gene-
ral por medios industriales y destinadas a transmitir
mensajes específicos a públicos determinados. Un
diseño gráfico es un objeto creado por esta actividad.
Aspectos
visuales Van der Velden (2006), habla del diseño como valor
agregado, y de la forma en que diseñadores se lanzan en
+ masa hacia los deseos en mucho mayor medida que hacia
Usabilidad las necesidades, para buscar con esta reflexión orientar la
definición del diseño hacia la perspectiva de la búsqueda
+ de soluciones para necesidades objetivas.
Royo (2004, p. 177) adelanta un paso adicional la evo-
Programación lución del diseño para situarlo en el contexto hiper-
media y así habla del diseñador hipermedia como una
mezcla equilibrada de aspectos funcionales y estéticos;
apuntando al diseñador digital como un “visualizador
de sistemas de información invisibles, que debe con-
juntar aspectos de usabilidad con los componentes vi-
suales y estéticos propios de la formación profesional”.
El modelo propuesto por Royo (Esquema 1) para el
perfil del diseñador en este terreno involucra tres ángu-
los: los aspectos visuales, en análisis sobre las caracterís-
ticas de usabilidad y la parte técnica de programación
necesaria para poder ejecutar los proyectos planteados.
Precisamente en el marco que delimitan el conjun-
to de áreas de conocimiento involucradas en este tra-
bajo se funden los aspectos que parten de la actividad
básica de diseñar, este diseño plasma específicamente
en el terreno gráfico su expresión visual y se potencia
con las posibilidades que el panorama hipermedia di-
versifica para la actividad propia del diseñador gráfi-
co. Por ello podemos acotar una aproximación de cara
a la presente investigación dentro de la fundamen-
tación del diseño gráfico en el terreno hipermedia.
1.2 Terminología básica
Más que un extenso glosario, la definición de tér-

minos básicos del ámbito hipermedia ayudará a clarificar
las definiciones y evitará confusiones a lo largo del pre-
sente documento. A continuación una definición de los
principales términos que son susceptibles a confundirse
concretando hacia la manera en que son aplicados actual-
mente en el diseño gráfico hipermedia de forma específica
para convenir así su uso a lo largo del presente documento.
1.2.1 Comunicación digital y análoga
Paul Watzlawick (1997, p. 27) define los concep-

tos digital y análogo en el terreno de la comunicación y
sus conceptos son aplicados a las dos grandes categorías de
lenguaje que utilizamos, segmentados en una doble rami-
Tabla 1.1 Comunicación Digital y Análoga
Tipo de Comunicación Relación con la Ejemplos

información
Análoga Idéntico o semejante Retrato ilustrado, película

a la fuente fotográfica
Digital Codificación de la Lenguaje informático binario,

fuente fotografía escaneada
48 | Introducción
ficación; el lenguaje analógico, definido como el que es

idéntico o semejante al representado -por ejemplo, una
pintura del Dr. Atl, con respecto al paisaje que repre-
senta-, por oposición al lenguaje digital, fundamentado
en la codificación de la información que contiene -por
ejemplo los signos informáticos binarios; 1 y 0, con res-
pecto a la interpretación informatizada de una imagen
fotográfica-. Watzlawick explica que la comunicación
analógica tiene sus raíces en períodos más arcaicos de la
evolución humana, y que por tanto encierra una validez
mucho más general que el modo digital de la comu-
nicación, relativamente reciente y de carácter abstracto.
Como analógico es referido todo lo no verbal, desde los
movimientos corporales -kinesia-, posturas, gestos, ex-
presiones hasta las mismas inflexiones de la voz,elementos
reveladores que dan información inmediata, de manera
que es muy difícil llevar una mentira al campo analógico.
Resumiendo, Watzlawick comenta que, el aspecto
del contenido se transmite en forma digital, mientras
que la relación comunicativa es siempre analógica.
Lev Manovich (2001, p. 42), hace una importante acla-
ración sobre el mito de la digitalización informática,
pues a menudo se relaciona este proceso con la calidad
de la información, siendo que por ejemplo una fotogra-
fía efectuada con una cámara análoga puede contener
una indefinida cantidad de información, que, al codifi-
carse digitalmente se torna mensurable, generando en la
mayoría de los casos una fuerte pérdida de información,
por lo tanto no se puede hablar de una “mejor” comuni-
cación utilizando para ello este tipo de relaciones, más
bien es necesario identificar claramente cada una de ellas
para tomar sus ventajas y aplicarlas de la mejor manera.
A efectos prácticos estaremos empleando los térmi-
nos analógico y digital (Tabla 1.1) como dos dicoto-
mías que especifican el proceso de creación de ele-
mentos visuales, adjudicando un origen físico a los
elementos analógicos y un nacimiento informatiza-
do de carácter decodificativo a los aspectos digitales.
1.2.2 Multimedios, hipertexto e hipermedios
Antonio Fernandez-Coca (2005, p. 29) define

multimedia de la siguiente manera: “la unión de varios
medios como la imagen, el texto o el sonido, integra-
dos en un mismo soporte, entendiendo por tal cualquier
soporte físico o no que pueda gestionar esta unión”.
El termino “multimedia” se vinculó desde los años ochen-
ta y hasta principios del 2000 a la informática, cuando en
realidad la mezcla de medios para enfatizar un mensaje ha
venido siendo utilizada desde los albores de la humanidad
en rituales, acontecimientos sociales o simplemente en su
aspecto lúdico. Antonio Moreno (2000, p. 39) realiza un
recorrido histórico en su libro sobre Diseño ergonómico
de aplicaciones hipermedia, en donde revisa la evolución
del hipertexto, desde la conceptualización de Vanne-
var Bush (1945) y sus enlaces asociativos al describir su
propuesta de sistema de almacenamiento “Memex”, que
posteriormente influiría a Doug Engelbart, inventor del
ratón, para trabajar en su proyecto Augment (1962), en
el cual propone desarrollar diferentes herramientas para
aumentar la capacidad y productividad humana, automa-
tizando oficinas y procesadores de textos en su traducción
práctica. Posteriormente Ted Nelson retomará conceptos
esenciales de Engelbart para su proyecto Xanadú, en el
que trabaja desde 1965, y que busca disponer un reperto-
rio de la literatura humana escrita, contemplando el hi-
pertexto como un medio literario que debe interrelacionar
todo contenido existente. Profundizando en este concep-
to de Nelson, Lippman y su equipo del MIT (Massachu-
sets Institute of Technology) Architecture Machine group,
crean “Aspen” (1978) una aplicación en videodisco inte-
ractivo que permite hacer un paseo virtual a través de la
ciudad de Aspen utilizando un ordenador, este sistema
sienta las bases de los aspectos interactivos basados en la
combinación de medios, conformando la base de lo que
podemos denominar “hipermedios”, término utilizado a
raíz del concepto generado por Nelson desde 1987 para
describir sistemas hipertextuales que incluyen múltiples
medios; texto, imagen, sonido, audio y vídeo, posterior-
50 | Introducción
mente el término fue extendido por diversos autores para

cubrir las posibilidades informáticas interactivas de las
aplicaciones multimedia, desarrollando sistemas como
el Symbolics Documents Examiner (1985), el Note-
Cards de Xerox (1984) o el Hypercard de Apple (1987).
Vaughn (2001, p. 190) apunta a la transformación del
término multimedia en hipermedia en cuanto el dise-
ñador provee una estructura de elementos vinculados a
través de la cual el usuario puede navegar e interactuar.
El programa Hypercard de Apple fué
uno de los primeros sistemas basados
en posibilidades interactivas exitosos Los sistemas hipermedia se caracterizan por tres aspec-
como software de autoría hipermedia tos: en primer lugar son interactivos, es decir, abren sus
desarrollado para el público general.
posibilidades participativas a la acción del lector; como
segunda característica hay que mencionar la variedad
combinatoria que el sistema ejecuta sobre el conjun-
to de medios y que integra en una sola exposición de
acuerdo a la participación del usuario; finalmente es im-
prescindible su particular carácter no lineal, de manera
que los sistemas hipermedia estructuran la información
contenida en sistemas complejos basados en las estruc-
turas de almacenamiento y decodificación que emplea
nuestro cerebro, accionando y desactivando accesos
como si fuesen impulsos eléctricos de redes neuronales.
Podemos concluir una definición de hipermedios o hi-

permedia como aquel sistema de comunicación digi-
tal multimedia que ofrece aspectos interactivos para
el usuario, con la finalidad de transformarle, como
apunta Isidro Moreno (2002, p. 96), en lectoautor.
Hacia esta definición converge Antonio Moreno (2000,

p. 194) describiendo hipermedia como “el hipertexto
interactivo con capacidades multimedia”. Complemen-
tando un poco más esta definición podemos abordar de
manera adicional el término anglosajón de Rich Media
-medios enriquecidos- como sinónimo de multimedios
interactivos trasladados al terreno digital, para englobar
no sólo al hipertexto sino a las diferentes posibilidades hi-
permediáticas que el entorno ofrece para combinar audio,
imágenes, animaciones, vídeo o sus diversas integraciones
unidas a sus capacidades múltiples y a la participación del
lectoautor en su narrativa. A lo largo de este documento

y para efectos prácticos se utilizará el término de multi-
medios cuando no existan posibilidades interactivas y se
empleará el término de hipermedios en cuanto se incor-
poran posibilidades interactivas a un conjunto de medios.
1.2.3 Interactividad e Interfaces
La interactividad en los hipermedios se entiende

como la descripción de un sistema digital en el que las
aportaciones del usuario afectan directamente al sistema,
infiriendo automáticamente en su comportamiento o en
los resultados que se comunican de manera inmediata
al individuo. Para hablar de una taxonomía sobre la in-
teractividad y poder así también clasificar las interfaces
empleadas en el proceso interactivo, es necesario aco-
tar esta acción dentro de un proceso de comunicación.
Dolores Cáceres (2003, p. 47) habla sobre la “comuni-

cación como un intercambio”, lo que supone remitir su
ámbito al universo de los comportamientos, de las for-
mas de conducta que lleva a cabo la especie humana y
más concretamente, a los comportamientos que gene-
ra la interacción, haciéndose necesaria la existencia de,
al menos dos comunicantes para que sea posible dicho
intercambio. Hablar de este intercambio supone que
la comunicación excede la mera transmisión de datos.
Comunicar es intercambiar y, por consiguiente, es

imprescindible enfatizar el procesamiento cognitivo
de la información por parte de los actores. Dicho en
otros términos, los actores procesan la información
atribuyéndole un significado y un sentido precisos.
Para ello es necesaria la utilización de sistemas de co-
dificación que permiten el uso de significados com-
partidos, por consiguiente, comunicar implica necesa-
riamente procesos de codificación y descodificación.
A esta conexión funcional entre los sistemas de co-
dificación y decodificación, que apoyan y facilitan el
52 | Introducción
proceso interactivo los denominaremos interfaces.

En segundo lugar, hablar de intercambio remite al he-
sitúa todo el proceso de comunicación.cho de que éste
El manejo se lleva apermite
de códigos cabo entre actores humanos
establecer una conexión entre
en el caso de procesos de comunicación general, por
nuestras representaciones cognitivas del
lo mundo y laactores
que dichos conducta de las
deben ser personas
capaces dealreferirse
compartira significa-
dos con ellas. las cosas utilizando algún tipo de código; verbal, ges-
tual, proxémico, etc., este código es componente fun-
damental de las interfaces y será de gran utilidad para
Los procesos de comunicación abarcanrealizar
principalmente dos tipos:
una clasificación de acuerdo a su fundamento.
Como última consideración, la interactividad trata de un
! Procesos de comunicación enintercambio
los que existe mediación tecnológica;
de información, por ejemplo
es decir, de signos que re- los proceso
miten a algo distinto de sí mismos. En la comunicación
de comunicación de masas
se intercambian mensajes a propósito de objetos de re-
ferencia, sin que ellos sean afectados materialmente en
! Procesos de comunicación nolos procesos tecnológicamente;
mediados de comunicación, ni por
tengan que estar
ejemplo suje-
la comunicación
tos a la condición de existencia real. Las cosas resultan
interpersonal. únicamente evocadas o designadas, es decir referidas o
expresadas. Y en esto consiste precisamente la especifi-
dad decomo
Existe un tercer grupo de procesos híbridos la comunicación frente a otras
las teleconferencias, enformas
dondedelosinter-
actores no son
cambio de información: el nivel referencial en el que se
accesibles el uno a otro, pero los procesos
sitúason
todoreferenciales
el proceso dea la comunicación
comunicación. El interpersonal
manejo de por el
diálogo y la orientación de los sujetos. códigos permite establecer una conexión entre nuestras
representaciones cognitivas del mundo y la conduc-
Esquema 1.1 Comunicación interactiva
Esquema 2. Comunicación interactiva

ta de las personas al compartir significados con ellas.

Los procesos de comunicación abarcan principalmente
dos tipos:
• Procesos de comunicación en los que existe me-

diación tecnológica; por ejemplo los procesos de
comunicación publicitaria en un canal de TV.
• Procesos de comunicación no media-

dos tecnológicamente; por ejemplo la comu-
nicación interpersonal durante una charla.
Existe un tercer grupo de procesos híbridos como las video-

conferencias, en donde los actores no son accesibles el uno a
otro, pero los procesos son referenciales a la comunicación
interpersonal por el diálogo y la disposición de los sujetos.
Mencionando el tema de la hipertextualidad como la
posibilidad de mayor interacción del usuario en un me-
dio de comunicación, Guillermo López García (2005,
p. 48) analiza en sus modelos de comunicación en in-
ternet la evolución de este interesante medio desde sus
bases telefónicas hasta las interfaces visuales, y estudia la
manera en cómo el hipertexto intenta ser un modelo de
comunicación lo más cercano posible a la estructura de
la mente humana, basada en una continua relación en-
tre ideas e información a través de estructuras comple-
jas y en apariencia aleatorias, haciendo referencia a un
modelo abierto que proporciona al receptor un poder
de selección sobre la información que desea consumir.
Las interfaces a las que se hace referencia dentro del te-
rreno hipermedia heredan su traducción de las “human
computer interfaces” partiendo desde el hecho digital del
proceso y en el que el hardware y software interactúan
con un ordenador o “sistema hipermedia”. Estas han
progresado de manera significativa desde su nacimiento a
lo largo de varias generaciones iniciando como reconfigu-
raciones físicas de ordenadores para ejecutar programas
específicos, pasando por la traducción de procesos pri-
54 | Introducción
El éxito del Navegador Mosaic conjugó marios de procesamiento -tarjetas perforadas-, las inter-
el aprovechamiento de las posibili-
dades interactivas de los hipervíncu-
faces de comandos -sistema DOS- hasta las actuales in-
los a una presentación visual de los terfaces gráficas de usuario -GUIs, Guide User Interfaces,
elementos de interfaz.
por sus siglas en inglés- como es el caso de los sistemas
operativos Windows y Macintosh. La evolución de las
interfaces ha desembocado en sistemas del tipo inmersi-
vo, con desarrollos que explotan las capacidades de la rea-
lidad virtual o aumentada y las tecnologías de simulación.
Baggerman (2000, p. 11) entiende las interfaces como

aquellos espacios virtuales en el contexto hiperme-
dia, que naturalmente parecen intuitivos, no de ma-
nera exclusiva al diseñador de la interfaz sino espe-
cialmente al usuario final que debe lograr percibir
finalmente este espacio como útil. Una interfaz debe
estar compuesta por elementos que sirven a un propó-
sito claro y debe tener un enfoque en la funcionalidad.
El equipo evaluador de AWWWARDS (2013), define
el objetivo de una interfaz como la manera de presentar
información al usuario en una forma confortable y eficaz,
utilizando métodos y técnicas que provean diferenciación
y exclusividad. Los controles de las interfaces deben ser
intuitivos y sencillos de utilizar, el usuario debe ser capaz
de moverse, entender e interactuar sin la necesidad de ex-
plicaciones o preparativos previos tanto como sea posible.
1.2.4 Páginas y sitios de internet
De la interconexión militar de cuatro ordenadores

para su uso militar en 1969 hasta nuestros días, inter-
net ha evolucionado y se ha transformado por completo,
uno de los momentos culminantes de la escalada de la
World Wide Web -www- sucede en 1994, cuando se in-
troduce el navegador Mosaic (Berners-Lee, 1999, p. 64),
que permite visualizar no sólo el texto utilizado cotidia-
namente ya por los programadores, sino que aporta un
elemento adicional, la incorporación de estructuras de
navegación visuales muy sencillas que permitían dar for-
mato al texto e integrar imágenes para componer algo
similar a una pieza impresa con posibilidades interacti- Las diversas interfaces del terreno hip-
vas: nacieron en ese entonces las “paginas” de internet, y ermedia son los sistemas que permiten
al usuario participar e interactuar con
a pesar de su evolución todavía hoy día se les aplica ese el hardware y software.
denominativo, aún cuando después de más de 20 años
han incorporado todas las posibilidades multimedia de
imagen, sonido, audio y video, pasando también a apro-
vechar, mediante elementos hipertextuales, metadatos e
interfaces interactivas un conjunto mucho más amplio de
las posibilidades de este medio que evoluciona rápida-
mente y cuyas acciones se multiplican continuamente; un
nombre más adecuado para este estado actual de la infor-
mación de cara al usuario en internet, es el de verdaderas
“sedes” o “espacios virtuales”; sitios que funcionan como
escenografías para montar complejas puestas en escena.
Internet como apunta Fernandez-Coca (2002, p. 56), es
un conjunto de protocolos -www, FTP, RSS, Gopher,
etc.- y aunque la labor del diseñador gráfico se ha vis-
to delimitada exclusivamente a un par de ellos, es im-
portante conocer su continua evolución y analizar las
maneras en que el diseño gráfico actual se traduce ha-
cia su integración en las posibilidades de aplicación
que estos espacios virtuales de comunicación generan.
Actualmente internet es sinónimo de la World Wide
Web, es el espacio en donde se desarrollan la mayor parte
de las interacciones digitales dependientes ya no de ma-
nera exclusiva de ordenadores, pues a ellos se han unido
diferentes dispositivos tales como teléfonos móviles, ta-
bletas y un sinnúmero de aparatos que utilizan internet
como espacio de intermediación para generar comunica-
ción con sus usuarios: relojes, neveras, estaciones meteo-
rológicas, etc. En la mayoría de los casos estos diferentes
dispositivos se apoyan igualmente en una interfaz gráfica
para lograr una comunicación más inmediata y efectiva.
Internet es un espacio en donde se generan interac-
ciones humanas, pero también en donde nuestros apa-
ratos y dispositivos intercambian información Cisco
(IoT, 2011) estima el nacimiento de la “Internet de las
cosas” (Internet of Things) entre 2008 y 2009, cuando
el número de cosas o dispositivos conectados a la red
mundial superó el número de personas y estima para
56 | Introducción
el 2015 un promedio de 3.47 dispositivos conecta-

Los hábitos de compra online son dos online por cada uno de los habitantes del planeta.
un indicativo de la manera en que
internet es utilizado en diferentes
dispositivos.
Ambos actores; usuarios y dispositivos componen pues el
Fuente: e-strategy trends, 2012. panorama actual de internet y demandan continuamente
el desarrollo de interfaces que más allá de las sedes o si-
tios web generan procesos de comunicación e interaccio-
nes entre los diferentes partícipes alrededor del mundo.
1.2.5 Usuarios y usabilidad
Así como todo proceso de comunicación culmi-

na en un receptor la expresión hipermedia necesita de
un elemento dinamizador que accederá a su contenido
provocando distintos grados de interacción, este actor es
el usuario y, mediante su participación da sentido y pro-
pósito al esfuerzo hipermedia; la RAE (Real Academia
Española) define el término de usuario como aquel que
“usa ordinariamente algo”, en el terreno de los hiperme-
dios Baggerman (2000, p. 9) habla sobre el usuario como
aquella persona que “accede a un producto interactivo con
un propósito”, mencionando que si no somos capaces de
cumplir con el propósito estos visitantes se alejarán de
nuestra información. Vaughn (2001, p. 446) alerta sobre
dos tipos de usuarios que se diferencían claramente con
respecto a su relación con la tecnología, de manera que
esta clasificación de usuarios es especialmente importante
para la conceptualización inicial de los contenidos y las re-
laciones que se generarán posteriormente con los lectoau-
tores, en los casos más extremos las aplicaciones hiperme-
dia permiten al usuario identificar su nivel de experiencia
con respecto a la interfaz y, como lo demuestran regular-
mente los videojuegos de consola, seleccionar el modo en
el que el usuario solicita que la interfaz interactúe; novato,
intermedio, experto, etc. Otro tipo de interfaz que per-
mite a usuarios novatos la inmersión en un proyecto hi-
permedia son las herramientas de ayuda o las referencias
rápidas, elementos que introducen aspectos básicos de
funcionalidad y ayudan a un participante novel a familia-
rizarse rápidamente con el entorno. De la misma manera
el hecho de poder saltar controles y ayudas de este tipo

posibilita a los usuarios expertos el acceso directo a los
contenidos y su rápida inmersión en el proyecto a recorrer.
Gran parte del éxito durante el origen de los hi-
permedios tuvo que ver con la utilización de in-
terfaces gráficas para el usuario, pues ayudó a los
lectoautores a comunicarse y navegar por los am-
bientes virtuales creados en los espacios digitales. Es común que videojuegos como el
de Alice Madness, permitan al usuario
Desde los experimentos con hipertexto en el Stanford seleccionar el nivel de experiencia
Research Institute, hasta los sistemas operativos Win- que tiene con respecto al juego y así
personalizar la experiencia.
dows y OSX que, a través de la utilización de iconos e
interacciones simplificados, semejan la realidad de ma-
nera cercana, facilitando la comunicación entre el orde-
nador y sus usuarios. Jakob Nielsen (2000, p. 380) habla
sobre la “capacidad de facilitar al usuario la navegación
e interacción con las interfaces de un hipermedia” de-
finiendo así el concepto fundamental de la usabilidad;
para acotar establece cuatro conceptos fundamentales
al hablar sobre usabilidad; el contenido de gran calidad,
la actualización regular, el tiempo mínimo de descarga y
la facilidad de uso, Nielsen habla de la usabilidad como
esta capacidad de un hipermedia de ser “amable” con sus
usuarios para permitirles interactuar con sus interfaces
sin mayor dificultad, en una segunda revisión el mismo
Nielsen (2006, p. 17) se refiere a la usabilidad como la
“rapidez con que se puede aprender a utilizar algo, la efi-
ciencia al utilizarlo, cuán memorable es, cuál es su grado
de propensión al error y cuánto le gusta a los usuarios”.
Krug (2005, p. 24), en un lenguaje muy coloquial
apunta sencillas reglas de usabilidad para los hiper-
medios, haciendo énfasis en complicar en la menor
medida la comunicación con el usuario: “crear pági-
nas fáciles de entender se asemeja a tener un comercio
con un buen sistema de iluminación: todo tiene mejor
aspecto. Utilizar un sitio que no nos haga pensar en
cosas irrelevantes parece natural, fluido, pero el des-
concierto de las cosas que no nos interesan terminará mi-
nando energía y entusiasmo (igual que nuestro tiempo)”.
La usabilidad ha derivado también en accesibilidad, que es
el conjunto de posibilidades de los sistemas informáticos de
58 | Introducción
ser más transparentes hacia los usuarios con alguna barrera

o discapacidad de cara al consumo de información digital.
1.2.6 Imágenes vectoriales y pixelares
Durante el desarrollo de los modelos menciona-

ré un conjunto de características de la imagen, vincula-
da esencialmente a la manipulación de las formas en el
terreno hipermedia, buscando dejar claros los dos gran-
des grupos a los que se hace referencia en el terreno di-
gital tomo un par de descripciones que en referencia a
esta taxonomía hacen dos autores. Tay Vaughan (2001,
p. 246) menciona el primer conjunto de imágenes, las
imágenes bitmap como “aquella matriz de descripción
de puntos individuales que forman los elementos míni-
mos de resolución en la pantalla de un ordenador, pro-
yector o elemento de impresión”; y el segundo grupo, las
imágenes vectoriales, “provenientes de la visualización
gráfica de ecuaciones matemáticas complejas y que nor-
malmente el diseñador desarrolla en base a programas
de diseño CAD”; Lupton y Phillips (2012, p. 26) agre-
gan a esta definición el hecho de que el diseño vectorial
forma parte de la cotidianidad del diseñador pues nos
hemos acostumbrado a trabajar con vectores y manipu-
larlos en base a sus anclajes y puntos de control, de tal
forma que los investigadores del MIT Casey Reas y Da-
vid Fry (2001) han utilizado esta asimilación por parte
del colectivo de diseñadores para aplicar su lenguaje de
programación Processing, enfocado hacia la aproximación
de la programación para los manipuladores de imágenes,
con resultados inmediatos traducidos en gráficos vecto-
riales y la posibilidad adicional de vincularse con Phy-
sical Computing como en el caso de las tabletas Arduino.
Las imágenes bitmap o mapas de bit tienen la importan-
te restricción de depender de la resolución a la cual han
sido creadas o capturadas de manera que si se amplían
o reducen demasiado pierden calidad y muestran bordes
dentados o pixelados; en contraparte con respecto a las
imágenes vectoriales que al ser representaciones matemá-
Patrón Interactivo
Imágenes Vectoriales responden
al movimiento del cursor
Pattern, processing.org
ticas no tienen esta limitación y dependen únicamente

de la capacidad de procesamiento del ordenador, cotidia-
namente se mezclan este tipo de imágenes como en el
caso de representaciones tridimensionales con elemen-
tos adicionales de textura, iluminación y movimiento,
-como sucede al manipular modelados de alta resolución
tridimensionales-, y estas combinaciones también pue-
den llegar a ser bastante demandantes para el ordenador.
Cotidianamente labores como la manipulación tipográ-
fica, la ilustración bidimensional o la animación basada
en planos tipo Flash no implica ningún esfuerzo para el
común de los procesadores debido a su naturaleza vecto-
rial y por ello han sido opciones preferenciales al desa-
rrollar imágenes digitales desde cero en los hipermedios.
60 | Marco Teórico
Marco Teórico
2 Evolución del diseño gráfico

hacia el entorno hiperme-
dia: modelos referenciales
♦♦ La capacidad para mantenerse en estrecho contac-

to con su tiempo es un requisito indispensable para
quien trabaje en la comunicación visual y muchos de
los conceptos más innovadores (...) han surgido de su
capacidad para conocer y responder a las personas y los
acontecimientos de su época.
P.B. Meggs (2009)
E
l desarrollo de un modelo de trabajo para el di-
seño gráfico en el entorno hipermedia conlleva
importantes vinculaciones hacia la evolución
histórica del diseño y sus técnicas, por ello, como pri-
mer paso en la búsqueda de una fundamentación bási-
ca que ayude a alimentar los aspectos teóricos del mo-
delo he tomado una ruta que lleva por un conjunto de
modelos referenciales, de entre los cuales, se extraen
características clave para traerlos a análisis; se buscan
sus correspondencias, diferencias, o huecos en el espa-
cio hipermedia, para revisar entonces la evolución que
este medio interactivo plantea para el diseño gráfico.
Acotando la denominación geográfica al ámbito europeo

y tomando los programas académicos universitarios rela-
cionados con la enseñanza del diseño gráfico y sus aspectos
técnico-teórico-tecnológicos, los modelos de referencia
han sido seleccionados de acuerdo a tres criterios: aquellos
modelos que poseen una relevancia histórica especial, los
modelos de referencia asociados a un desarrollo tecnoló-
gico importante y finalmente los modelos referenciales en
62 | Marco Teórico
el campo de la vanguardia del diseño, uniendo estos tres

grupos se integra un conjunto amplio del espectro del de-
sarrollo del diseño gráfico en el panorama europeo desde
sus inicios en el siglo XX y el recorrido que han marcado
sus últimas vanguardias en el panorama europeo bajo los
acuerdos de Bolonia en la primer década del siglo XXI.
2.1 MODELOS DE REFERENCIA

En este apartado serán revisados un
conjunto de fundamentos básicos del diseño, aplicados en
modelos educativos relevantes, relacionados con la evolu-
ción del diseño gráfico y por tanto su traducción hacia los
hipermedios, la finalidad de este recorrido es identificar
el empleo de los conceptos y las aportaciones que han
derivado al ser desarrollados en programas universitarios
funcionales, así como establecer los objetivos particulares
de sus estudios y revisar sus características globales, de
manera que estos elementos retroalimenten la propuesta
propia de modelo aterrizada con respecto a la ubicación
del diseño gráfico dentro de la evolución específica de su
expresión en el entorno hipermedia, para ello los aspec-
tos históricos, tecnológicos y de vanguardia fungen como
una referencia de especial relevancia. Adicionalmente es-
tos modelos de referencia guardan importantes relacio-
nes con la unificación del grado de diseño en Europa y
marcadas referencias para la evolución de los estudios en
América, por tanto son raíces imprescindibles para iniciar
el estudio sobre la transformación actual del diseño.
2.2 MODELOS DE IMPORTANCIA HISTÓRICA

2.2.1 ALEMANIA, BAUHAUS
1919
La Staatliche Bauhaus (Casa de la Construcción Estatal)

es el modelo por antonomasia del diseño gráfico, en sus

aulas y con su intención de reformar la educación artística
de la época la Bauhaus sentó las bases del diseño gráfico y
por ello el es primer referente histórico a considerar. Para
su análisis el Libro Blanco del diseño resume su importan-
cia en relación a la evolución actual del diseño:
i. Características
Probablemente, éste es el país que, históricamente,

ocupa un puesto más destacado en el panorama y
la historia de la Educación Superior en Diseño. Su-
mamente conocida es la experiencia de la Bauhaus
(1919-1933) y el efecto fundador que tuvo esta es-
cuela en todo el mundo. Su radio de influencia des-
pués de la II Guerra Mundial pronto se extendió por
Occidente hasta ser conocida en el resto del mundo,
incluso en la Alemania de posguerra. No se debería
olvidar que la Bauhaus era en su origen (1919) una
escuela superior de artes aplicadas, Bellas Artes y Ar-
quitectura unidas que querían encontrar una vía de
mediación entre las necesidades productivas de la in-
dustria tomada en general y la potencialidad proyec-
tiva y creativa de las artes, lo cual dio como resultado
la noción moderna de diseño.
Después de la II Guerra Mundial fué también Ale-

mania donde se fundó la institución, una escuela de
Arte y Arquitectura que quería ser la nueva Bauhaus,
que acabó siendo la más influyente en su época en la
enseñanza del diseño a nivel superior... la Hochschule
für Gestaltung de Ulm (1951- 1968). Ulm no sólo es-
tableció los programas estándares para la enseñanza
del diseño sino que también impuso un concepto de
diseño que pronto se convirtió en el ortodoxo y ha
estado vigente en todo el mundo hasta bien entrada
la década de 1970. Por esa razón, Ulm ha inspira-
do a la mayoría de instituciones dedicadas a la en-
señanza del diseño surgidas en todo el mundo en la
64 | Marco Teórico
segunda posguerra, con la excepción de las escuelas

inglesas ya existentes. Los diseños de México, Brasil
y Argentina, pero también del Japón, son herederas
directas de Ulm así como también lo fueron los pri-
meros planes de estudio hechos en España para im-
plementar la enseñanza del diseño: es el caso de las
primeras escuelas de Barcelona nacidas alrededor de
los años sesenta pero también del experimento hecho
por Miguel Duran Lóriga en Madrid. Aún se nota
su influencia en los planes de estudio aprobados por
el Ministerio y muchas Comunidades Autónomas
para los Estudios Superiores en diseño LOGSE. Fi-
nalmente, las recientes Facoltà di Design italianas son
también herederas, esta vez herederas muy directas,
de la HfG de Ulm aunque también hayan incorpo-
rado las lecciones de la experimental Domus Academy.
Desaparecida la HfG de Ulm en 1968, su magiste-

rio se desperdigó por toda Alemania constituyén-
dose en el referente obligado para la programación
de los cursos de diseño impartidos en Hochschules,
Fachhochschules y Universität, a veces conviviendo y
compartiendo espacios docentes con otras enseñan-
zas artísticas (como por ejemplo, la HdK Berlin y sus
dos escuelas de Bellas Artes y de Diseño), otras veces
siendo la única y específica titulación del centro (Fa-
chhochschule Augsburg o Offenbach para citar algunos
casos que normalmente pasan desapercibidos), pero
siempre trabajando en torno a un tronco disciplinar
unitario que surge del desarrollo de los presupuestos
de Ulm constantemente actualizados y adaptados a la
realidad del país (Libro Blanco, p. 513).
Los cursos preliminares de la Bauhuas, llevados a cabo

por Johannes Itten (1978), eran parte de la educación bá-
sica del aparato institucional, su objetivo era introducir a
los estudiantes a las características fundamentales de los
materiales, revisar herramientas compositivas y estudiar
el color.
Uno de los conceptos clave a lo largo del curso era el re-

conocimiento y la experimentación con el contraste, el
cual era elaborado en diversas formas y materiales. Itten
consideraba que el contraste entre luz y sombra era uno
de los elementos de la creación más valiosos y expresi-
vos. Los estudiantes recorrían diversos niveles de con-
traste, desde los materiales naturales y sus texturas hasta
el terreno de la escultura libre. La experimentación con
contrastes de materiales era llevada a su representación
gráfica para redimensionarla y observar sus posibilidades
expresivas.
Las características de la abstracción de la forma fue otro

capítulo importante en el fundamento conceptual de los
estudios básicos. El uso de formas geométricas y estudios
basados en líneas estaban cargados de significantes y se
le confirieron un especial énfasis a la disposición de los
elementos en el espacio.
Los estudios naturales tuvieron como objetivo la com-

prensión de los objetos en su “valor tonal y forma es-
pecífica”, con la intención de reproducirlos de una for-
ma precisa en el dibujo. El estudio del color enfatizó
la experiencia emocional con los objetos y la dinámica
del trabajo en el arte mediante el estudio de los “viejos
maestros”.
Los instrumentos de trabajo favoritos incluían carbon-

cillo, el collage y el trabajo escultórico tridimensional.
Las principales aportaciones de la Bauhaus en el terre-

no del diseño fueron el iniciar una vinculación de los
aspectos teóricos del arte y la arquitectura con los avan-
ces tecnológicos de la época, con la intención de que su
aplicación fuera más útil a la sociedad para así buscar
que el diseñador tomase conciencia de su responsabili-
dad hacia la comunidad que le rodea y reflejar esta con-
ciencia en sus creaciones, dotándolas de una evidente
utilidad social.
66 | Marco Teórico
ii. Objetivo general
El objetivo multidisciplinar de la Bauhaus fue su sello

característico, las habilidades de sofisticación para la pro-
ducción, la alta calidad y funcionalidad de los proyectos
de la escuela fueron claves en la competencia con una
Norteamérica rica en recursos. La institución tuvo como
objetivo principal recuperar todas las artes del aislamien-
to en que se encontraban educando a artesanos, pinto-
res, escultores, arquitectos y diseñadores hacia un futuro
de proyectos cooperativos donde diferentes habilidades
eran combinadas. El manifiesto de la Bauhaus procla-
maba: “No hay una diferencia esencial entre el artista y
el artesano”(Gropius, Bauhaus Archiv). La enseñanza y
educación tuvo lugar en talleres, no en estudios como en
la mayor parte de las escuelas de arte de la época. Los
talleres educaban a los practicantes en reflexiones sobre
su práctica creativa y su papel en la comunidad moviendo
al diseñador hacia la unidad del arte y la tecnología al
servicio de la gente.
2.2.2 SUIZA, BASEL

1960
i. Características
Desde la década de los sesenta, la Escuela de Diseño de

Basel en Suiza ha cobrado una importancia fundamental
en la comunidad internacional del diseño gráfico; bajo la
dirección de Armin Hofmann y Emil Ruder se desarro-
llaron cursos iniciales de diseño y tipografía que se con-
virtieron en modelos a seguir en la educación relacionada
con el diseño.
El concepto educacional de la escuela se basó durante

más de 30 años en una Clase Avanzada de Diseño Grá-
fico, edificada bajo la firme convicción de que un estudio
intensivo de los principios básicos del diseño y una pers-
pectiva amplia de la forma en relación con el diseño eran
necesarios para resolver problemas complejos de diseño.

Un curso inicial de un año el Vorkurs, se centraba en los
aspectos fundamentales, con especial énfasis en la per-
cepción manual directa y el análisis visual. Los talleres
incluían el análisis de elementos como el dibujo, el diseño
espacial, la tipografía y el color.
El uso de sistemas de retículas fue otro de los elementos

clave en la aproximación del diseño al espacio, mediante
su uso, se buscó la disposición lógica de la tipografía y las
imágenes en la página.
El Vorkurs inicial ha sufrido transformaciones a lo largo

del tiempo y ahora integra un programa con asignaturas
diversas:
• Principios teóricos
• Color
• Diseño tridimensional
• Forma y concepto
• Tipografía
• Imagen
• Dibujo
• Arte y diseño
• Talleres
El curso avanzado busca lograr un alto nivel de compe-

tencia mediante el desarrollo de herramientas prácticas y
teóricas. La investigación en el campo de la iconicidad es
uno de los discursos de gran importancia entre los tópicos
de la maestría. El curso aborda como premisa en el campo
profesional la diversificación del diseño hacia la comuni-
cación visual: el diseño gráfico, el diseño de comunicación
y el diseño de medios, y busca resolver su existencia en el
mercado trabajando con su base en común: el trabajo con
la imagen. Frente a este panorama propone el desarrollo
de conocimientos teóricos y contextuales en el área de
68 | Marco Teórico
la imagen, el desarrollo de la experiencia profesional de

los diseñadores en esta área y la obtención de habilidades
técnicas y sociales como parte integral de la formación
del diseñador.
Las áreas del curso se concentran en las siguientes áreas

temáticas:
• Teoría de la imagen
• Percepción y creación de la imagen
• Diseño de medios
• Tipografía
La escuela de Basel establece entre los objetivos de sus

programas el alcanzar un elevado nivel en los aspectos
prácticos y teóricos de las competencias del diseño, así
como la investigación y el desarrollo icónico/tipográfico.
Durante los cursos los estudiantes están en contacto con
los discursos de vanguardia, con la teoría de la imagen y
con la investigación orientada al diseño.
Durante el desarrollo de los programas se enseña a los

estudiantes una metodología de trabajo de investigación
basada en el diseño, igualmente se potencia el desarrollo
de habilidades en el campo de la semiótica.
Las habilidades de escritura, metodología de investiga-

ción, desarrollo de presentaciones y comunicación tanto
social como transcultural son así mismo parte fundamen-
tal de los cursos.
2.3 MODELOS DE IMPORTANCIA

TECNOLÓGICA
2.3.1 CHICAGO, USA

1944
i. Características
El Instituto de Diseño, en Chicago, Illinois -IIT- fué

fundado por Laszlo Moholy-Nagy después de su exilio
de Alemania, y tras un par de esfuerzos individuales que
no terminaron de resultar, finalmente se une al grupo de
empresarios de la Asociación de Artes de Chicago para
establecer la escuela y continuar la carrera que había ini-
ciado en Alemania, buscando modernizar el panorama
industrial y cultural de la ciudad a principios del S XX.
El programa académico de la escuela incluía un curso de
cuatro años en el que los alumnos llevaban un conjunto
de clases básicas sin importar su educación o experiencia
previa: Fundamentos visuales básicos, Taller y diseño bá-
sico eran algunos de los retos con los que los estudiantes
se encontraban al inicio de su carrera, algunas de las de-
más asignaturas incluían gráficas, tipografía, escultura y
diseño textil. Uno de los programas más aclamados de
la escuela fue el de fotografía. Desde la década de los 70
el programa sufre fuertes modificaciones por parte de Jay
Doblin quien acerca los estudios del centro al campo de
desarrollo profesional haciendo el diseño más relevante
para la estrategia comercial de las empresas de negocio.
Actualmente el IIT está enfocando el desarrollo de sus

estudios buscando potenciar un conjunto de áreas de gran
interés para el diseño: el establecimiento de teorías fun-
damentales y marcos de trabajo para el desarrollo del
diseño, la interacción en su rol de incorporar la tecnolo-
gía al contexto humano, los prototipos, tanto físicos como
virtuales, el diseño estratégico, la investigación de usua-
rios y la visualización de información. Estos elementos
indican claves sobre las problemáticas proyectuales que
enfrenta el Instituto en sus aulas y los intereses que cru-
zan los diferentes programas que se ofrecen, entre los que
se encuentran temáticas como el Digital Media, Usability
Methods, Data Visualization, Observing Users, Managing
70 | Marco Teórico
Complexity, Information and Interface Architecture o el De-

sign Workshop: Data Visualization, planteamientos del di-
seño inscritos en la cotidanidad de su relación con el en-
torno hipermedia y sus usuarios para buscar comprender
mejor sus interrelaciones y lograr proyectos que se ajusten
a la medida del mundo profesional.
El IIT dedica sus esfuerzos a humanizar la tecnología y a

mejorar los procesos de innovación, desarrollando y ense-
ñando una aproximación del diseño centrada en el hom-
bre más que en respuesta a la tecnología, mercadotecnia o
la moda. El Instituto cree en iniciar la verdadera innova-
ción utilizando las necesidades del cliente y resolviendo
mediante métodos confiables, y un conjunto de teorías y
herramientas que crean soluciones a la problemática del
consumidor.
2.3.2 LONDRES, REINO UNIDO

1896
El Royal College of Art, además de ser una institución de

larga tradición, ha sabido mantenerse en el pulso del di-
seño durante el curso del tiempo, sus innovaciones tanto
en temarios y variedad de estudios, como en la incorpora-
ción de las herramientas tecnológicas de la época a la ex-
perimentación en el aula, le colocan como un importante
referente que, una vez más, el Libro Blanco del Diseño re-
visa de acuerdo a su evolución:
i. Características
La historia de los estudios de diseño en Inglaterra

empieza hace mucho tiempo y ha pasado por innu-
merables vicisitudes desde aquella antigua School of
Design ubicada en la Sommerset House y fundada
en Londres en la década de los años 30 del siglo XIX
hasta llegar al actual Royal College of Art. Muchos

capítulos de la historia del diseño van ligados a esta
historia antes y después de la fundación de la Bau-
haus en la Alemania de entreguerras.
La proliferación de centros dedicados a la enseñanza

del diseño por todo el territorio de la Gran Bretaña
respondió desde buen principio a una política de los
Gobiernos correspondientes para proveer de diseña-
dores capacitados, creativos y técnicamente compe-
tentes a los centros productivos de cada región. Con
la creación de las New Universities en 1972, es decir,
la reconversión de los antiguos politécnicos dedica-
dos a la formación de técnicos en diseño y procedi-
mientos para la industria, Inglaterra ha conseguido
dar un salto adelante muy importante para la actua-
lización del diseño y de sus estructuras académicas.
En efecto, por una parte el diseño se ha convertido
aun más en un perfil académico perfectamente defi-
nido en sus rasgos esenciales, que tiene varias espe-
cialidades y campos de estudio propios, construido y
desarrollado en la continuidad de los estudios en los
tres niveles o grados de los estudios superiores según
el modelo de Bolonia, a saber, el grado, el postgrado
y el doctorado.
Hay que señalar que los centros ingleses dedicados

a las enseñanzas artísticas iniciaron su implementa-
ción de los estudios de doctorado más o menos por
la misma época que lo hicieron las Facultades de
Bellas Artes españolas (1983-1984). Sería muy con-
veniente, aunque no sea éste el lugar adecuado para
hacerlo, llevar a cabo un estudio comparado entre los
programas de doctorado para la obtención del DEA
puestos en marcha en España y los Másters of Philoso-
phy o Másters of Research impartidos en Gran Bretaña
como preparación para el doctorado porque tienen
entre sí más coincidencias de las que podría parecer
a primera vista.
72 | Marco Teórico
Por lo que se refiere a los estudios de grado y post-

grado, lo primero que llama la atención es esa política
tan especial de las universidades inglesas debida muy
probablemente al hecho de que sean las propias uni-
versidades las que deciden el carácter y el contenido
de la titulación que imparten y por lo tanto pueden
decidir autónomamente el carácter y a orientación
de los cursos ofertados pudiendo incluso modificar
los estándares en cuanto a contenidos y descripto-
res. Una mirada rápida a las tablas comparativas de la
situación de las enseñanzas artísticas por países eu-
ropeos para después contrastarla con los programas
de grado que estos centros británicos anuncian en la
web permite darse cuenta del fuerte grado de espe-
cialización que, por lo general, adoptan los centros
ingleses para sus titulaciones de grado (Libro Blanco,
pp. 501-502).
El Royal College of Art, en la ciudad de Londres, fue du-

rante los inicios del siglo XIX la escuela más grande del
medio en Europa. La escuela contó con un sistema diver-
sificado de facultades y departamentos: Artes Visuales,
Diseño Gráfico, Diseño Industrial, Ingeniería y la Facul-
tad de Estudios Generales. Con alumnos como Barbara
Hepworth y Henry Moore, el RCA se fue transformando
en la referencia de una institución altamente especializa-
da y de carácter profesional indiscutible.
Una serie de documentales en el año de 1999 exploran

la vida y las propuestas del Colegio con perspectivas al
siglo XX, posteriormente alrededor de 50,000 visitantes
mensuales son atraídos a las instalaciones y el centena-
rio del establecimiento formal del RCA es festejado con
un conjunto de eventos que colocan al Royal College of
Art como epicentro del mundo del diseño; publicacio-
nes como Designing 21 st. Century (Taschen, 2005) hace
una revisión de alrededor de cien de los diseñadores con-
temporáneos más importantes, casi la mitad de ellos con
estudios en el RCA.
Actualmente el centro cuenta con los siguientes estudios

en la categoría de Master of Arts:
• Animación
• Arquitectura Cerámica y vidrio
• Comunicación y diseño Conservaduría Curador
• Diseño de interacciones
• Diseño de productos
• Moda
• Trabajo de metales
• Historia del diseño
• Diseño Industrial
• Pintura
• Fotografía
• Impresión
• Escultura
• Textiles
• Diseño de vehículos
• Cine y televisión
De este conjunto el MA en Diseño de Interacciones es

especialmente interesante para su revisión, pues dirige
sus esfuerzos a trabajar con las posibilidades expresivas
y comunicativas de las tecnologías digitales, empleando
tácticas y métodos de diseño para la aproximación a las
soluciones del conjunto de temáticas posibles. En parale-
lo a las habilidades técnicas, se exploran las consecuencias
éticas, sociales y culturales de las tecnologías emergentes,
haciendo cuestionamientos y experimentando a través del
diseño con aproximaciones que buscan ser relevantes y
significativas en la actualidad.
74 | Marco Teórico
El primer año se desarrollan un conjunto de proyectos

que investigan el contexto del diseño, así como las aproxi-
maciones y los roles del diseñador. Durante los proyectos
se pueden introducir las habilidades necesarias para su
consecución, abordando las perspectivas particulares de
cada necesidad.
En el segundo año los estudiantes inician sus proyectos

individuales y se busca que desarrollen la capacidad de
construir sus estructuras de proyectos para reflejar en un
contexto profesional la manera en que desean llevar a la
práctica sus conocimientos.
El curso tiene tres áreas principales que se relacionan mu-

tuamente:
- Tecnología como medio: Explorando los aspectos po-

tenciales tanto funcionales como estéticos de las nuevas
tecnologías a través de la experimentación y manipula-
ción.
- Tecnología como producto: Imaginando nuevos servi-

cios y productos, y considerando como ellos contribuirían
a los sistemas existentes en las áreas sociales, culturales,
económicas y en los sistemas tecnológicos.
- Tecnología como crítica: Construyendo las implica-

ciones sociales, culturales y éticas de las nuevas tecnolo-
gías de una forma tangible y por lo tanto debatible.
El departamento de Interacción Digital del RCA identi-

fica a los usuarios y consumidores como individuos, y es
en esta dimensión, observando al diseñador mismo como
un individuo, donde propone una revisión de la comple-
jidad de la persona en un entorno igualmente complejo,
mediatizado tecnológicamente y en un escenario consu-
mista.
La búsqueda se fundamenta en la necesidad de desarro-

llar productos y sistemas que sean aproximables y dis-

frutables así como útiles, con un enfoque centrado en las
posibilidades comunicativas y expresivas de la tecnología
digital, para explorar las interacciones individuales del di-
seño con las personas de cara hacia las relaciones futuras
y las implicaciones en otros campos y ciencias.
2.4 MODELOS DE VANGUARDIA

2.4.1 MILAN, ITALIA
1954
El Politécnico de Milán es la referencia puntera en la

vanguardia del diseño; las diferentes ramificaciones pri-
marias (gráfico, industrial, moda, interiores, producto) y
secundarias (social networking, transporte, lujo, ilumina-
ción...) marcan los modelos educativos que son retoma-
dos posteriormente por los centros de enseñanza en dise-
ño internacionales, el Libro Blanco del Diseño destaca esta
diversidad e innovación educativa:
i. Características
La Facoltà del Design nació adscrita al Politecnico di

Milano en 1999 y desde entonces ofrece cursos di
Laurea en Diseño para la Industria en cuatro especia-
lidades: Design del prodotto (Product Design), Design
della Comunicazione (Diseño gráfico y de la comuni-
cación), Design degli Interni (Interiorismo) y Design
della Moda (Fashion Design). También tiene progra-
mada una Laurea Specialistica y estudios de doctorado
en Diseño (PhD). Cada una de estas especialidades
se compone de una Laurea y de una Laurea Specialis-
tica, la cual, como su nombre indica, se especializa en
un ámbito más restringido de la práctica profesional.
Así por ejemplo, la especialidad de Design del prodotto
se compone de un Corso di Laurea en Diseño Indus-
trial y de varios Corsi di Laurea Specialistica en Diseño
76 | Marco Teórico
Industrial, Diseño de mobiliario y Diseño Textil. La

misma continuidad entre ambos niveles de estudio se
observa en relación al ámbito del diseño gráfico o De-
sign della Comunicazione: a un Corso di Laurea in Di-
segno Industriale della Comunicazione le corresponde
un Corso di Laurea Specialistica en Design Industriale
della Comunicazione (Libro Blanco, p. 511).
La Escuela Politécnica de Milán ha sido un centro de

gran importancia para el diseño desde su fundación en
1954, fue el primer centro educativo dedicado a la ense-
ñanza del diseño y la comunicación en Italia, su fundador
Nino Salvatore, pintor y escultor de origen, reunió artis-
tas, diseñadores y teóricos de la talla de Bruno Munari,
Gio Ponti, Max Huber y Pino Tovaglia.
Los cursos inician con un taller de diseño básico que se

centra en un tema único, buscando aproximaciones inte-
gradas que provoquen el ejercicio de herramientas me-
todológicas y fundamentos culturales operativos, como
una base sólida para su aplicación posterior en cursos
avanzados de diseño visual o diseño web. Este curso bus-
ca consolidar los aspectos básicos del terreno visual del
diseño, fomentando el acercamiento crítico del aprendiz,
se desarrollan estudios de fundamentos históricos, cultu-
rales y científicos para enfocar los acercamientos visuales,
apoyándose de igual manera en estudios teóricos y apro-
ximaciones psicológicas. De esta manera los estudiantes
construyen metodologías de diseño propias a partir del
conjunto de asignaturas presentado. El entrenamiento
práctico provee herramientas tecnológicas y técnicas, así
como habilidades lingüísticas para la profundización pos-
terior del estudio de la comunicación visual.
Durante el curso avanzado se desarrollan talleres de co-
municación visual centrados en identidad e información,
revisando aspectos de persuasión y emotividad, abar-
cando aplicaciones que van desde el diseño de posters y
empaques, hasta aplicaciones editoriales. Los cursos de
entrenamiento en los aspectos visuales del diseño inte-

gran una amplia variedad de disciplinas; psicología de la
percepción, semiótica, color, multimedia, identidad cor-
porativa, publicidad, análisis de la forma y su configura-
ción. Actualmente la enseñanza clásica representada por
los conceptos básicos que instituyó Pino Tovaglia se une
con las más avanzadas tecnologías que le dan a la carrera
una perspectiva más amplia para expresar significados y
reflejar la naturaleza multidisciplinaria de la comunica-
ción actual.
El diseño gráfico es interpretado como una interfaz entre

el mensaje y su audiencia, por esta razón se incorporan
al panorama de estudios asignaturas relacionadas con el
manejo de la percepción y la mecánica visual. El análi-
sis de los signos y la forma se ejecuta mediante ejercicios
concretos y proyectos que preparan a los estudiantes para
la profesión.
Asignaturas:
I. Curso Básico
• Arte del siglo XX
• Visuales informáticos básicos
• Diseño de visuales básicos
• Laboratorio de tipografía
• Laboratorio de forma y color
• Diseño geométrico y técnico
• Tecnologías gráficas
• Ilustración
• Signos Alfabéticos
• Fotografía
• Ciencia de la visión
• Teoría de la forma
78 | Marco Teórico
II. Curso Avanzado
• Publicidad
• Color
• Diseño gráfico informático
• Dreamweaver
• Flash 1 y 2
• Historia del diseño visual
• Tipografía
• Taller de diseño visual 1 y 2
• XHTML
Existe también actualmente la posibilidad de hacer un

curso avanzado dirigido especialmente al terreno web
y multimedia, enfocado hacia la experiencia práctica de
crear diseño web con alto nivel de usabilidad; inmediato
y efectivo. Los estudiantes abordan asignaturas relaciona-
das con las diversas etapas del desarrollo de un proyecto
hipermedia: diseño de interfaz, diagramación, diseño de
herramientas de navegación, administración de elemen-
tos multimedia. El curso busca equilibrar los aspectos de
creatividad y tecnología frente a un lenguaje que cambia
constantemente.
El curso incluye las siguientes asignaturas:
• Dirección de arte
• Color
• Diseño web informático
• Diseño CSS
• Dreamweaver
• Flash 1 y 2
• Diseño en movimiento
• Conceptos de internet*
• Tecnologías web
• XHTML
* Por su relación e importancia para este trabajo profun-

dizaré un poco más en la asignatura de “Conceptos de
internet”, pues es una de las propuestas pioneras en la
materia y uno de los ejemplos de teoría de hipermedios
aplicados al campo del diseño.
El apartado de “Conceptos de internet” desarrolla una

metodología de diseño propia, centrada en el enfrenta-
miento del diseñador con la problemática de un proyec-
to de canales múltiples, se revisan las diversas etapas de
un proyecto en internet, desde su definición conceptual
y presentación inicial hasta las habilidades necesarias
para poder llevar a buen término los aspectos creativos
del proyecto. Involucra integralmente a las profesiones
y recursos de los que toma mano el diseño para ejecu-
ciones ambiciosas. La revisión de el concepto de diseño
revisa metodologías de interactividad y sus diversas áreas
de aplicación. Se reconoce a la comunicación interactiva
como un punto medio entre las estrategias de diseño, el
poder de la visión tecnológica y la riqueza expresiva del
diseño. El punto clave del curso se centra en torno a la
definición de la “experiencia del usuario” como premisa
conceptual para la definición de contenidos, arquitectura
de información y diseño visual y dinámico. Se abordan los
principios del manejo de contenidos en el diseño interac-
tivo: conceptualización, producción, administración y ac-
tualización. Dentro de la arquitectura de diseño se revisan
principios básicos, metodologías de aplicación, usabilidad
y creación de prototipos.
Otro aspecto importante dentro del curso general es la

mercadotecnia y publicidad aplicada a los proyectos en
línea que toma principios de segmentación, consumo,
competencia e información del usuario para mirarlos con
80 | Marco Teórico
la perspectiva de internet y desarrollar estrategias de di-

seño específicas, planes de marketing adecuados al medio,
así como innovadoras estrategias tomando ventaja de la
comunicación virtual, tales como: marketing viral, comu-
nitario, marketing basado en correo electrónico, etc. Los
estudiantes aprenden a coordinar las diversas etapas del
diseño gráfico con sólidas bases metodológicas que desa-
rrollan su cultura visual, sin perder la atención a la forma,
el manejo de los procesos de percepción y promoviendo
habilidades para manejar la composición y el color.
El SPD contempla los estudios de segundo ciclo como un

espacio de creatividad donde se proyecta identidad, infor-
mación y cultura visual. En los talleres se unen diseño,
comunicación y tecnología. El objetivo de estudio es la
construcción de sitios, productos y servicios hipermedia
funcionales y basados en usabilidad, siendo necesaria la
convergencia de la cultura visual, las aproximaciones es-
tratégicas, el aterrizaje formal y la eficacia expresiva. Otro
conjunto de objetivos clave son la gestión de proyectos
y la vinculación con el mundo profesional. El trabajo en
equipo es un elemento adicional que se persigue como
parte de la sinergia que provoca el trabajo en proyectos
integradores como lo es un sitio web.
2.4.2 HELSINKI, FINLANDIA

1973
i. Características
Existen 8 Facultades relacionadas con el diseño en

todo el país en las que, además de las Bellas Artes,
se ofrecen cursos en artes aplicadas y de diseño en
sus especialidades habituales (producto, gráfico, au-
diovisual o multimedia, textil...) Con todo, por lo que
concierne al diseño, la peculiaridad finlandesa está en

la fuerte conexión establecida en concepto, prácticas
profesionales y modelo de enseñanza entre el dise-
ño y las artes aplicadas (caso de la UIAH de Hel-
sinki. Hay una razón histórica muy potente de esta
situación como es la evolución seguida por el diseño
industrial finlandés como desarrollo natural de sus
raíces artesanales muy bien afincadas (Libro Blanco,
p. 494).
De entre las escuelas nórdicas, la Universidad de Arte y

Diseño de Helsinki, hoy la Aalto University School of Arts
and Design, destaca por la tradición que recoge y sus lo-
gros en el campo del diseño en las últimas décadas.
Iniciando como una Escuela de Escultura y Arte, se esta-

blece como universidad pública en 1973, recogiendo una
tradición artesanal que data de 1871; durante su historia
ha contado con la presencia de estudiantes que han crea-
do hitos dentro del diseño escandinavo y mundial: Tapio
Wirkkala, Armi Ratia, Stefan Lindfors, entre otros. En
la actualidad es la escuela más grande de arte y diseño en
europa y se ha posicionado dentro del ranking las cinco
mejores a nivel mundial. Posee un marcado enfoque hacia
estudios de segundo y tercer ciclo y agrupa seis escuelas:
Diseño, Media Lab, Imagen en Movimiento, la Escuela
de Cultura Visual Pori, Cultura Visual y Educación en
el arte.
El Media Lab es uno de los centros clave de la experi-

mentación y enseñanza del diseño en nuevo medios, ofre-
ce una maestría en Nuevos Medios y provee enseñan-
za e instrucción en contenidos, diseño de información,
narrativa interactiva, ambientes virtuales y soluciones de
medios para el futuro. El programa del máster en New
Media tiene una duración de dos años y se enfoca en el
diseño para los medios digitales interactivos. La educa-
ción está orientada a proyectos, cada uno de los módulos
correspondientes enfatiza el trabajo interdisciplinario y
colaborador.
82 | Marco Teórico
La estructura del curso se divide en:
Estudios obligatorios y cursos optativos que incluyen;

Comprensión del diseño de medios, Cursos introductorios,
Aplicaciones de internet enriquecida, Clínica de produc-
ción, Técnicas de video digital, Animación 3D, Diseño de
interfaces, Fundamentos de drama, Introducción a la visua-
lización, Técnicas 3D, Investigación en diseño, Análisis de
juegos, Proyectos de TV interactiva, Producción avanzada,
Creatividad, Autoría multimedia, Sonido, Visualización
dinámica del diseño, Escritura académica, Locación, Dra-
ma avanzado, Procedimientos narrativos, Diseño de inte-
racciones electrónicas, Proyectos audiovisuales interactivos,
Visuales en tiempo real, Diseño de información, Aplica-
ciones móviles, Prototipado de interfaces, Edición de video,
Técnicas y tecnologías de internet, Estilos visuales.
También se incluyen talleres de trabajo digital de medios

y estudios avanzados, que se orientan hacia la produc-
ción de un proyecto final de tesis. Existen tres áreas de
especialización hacia donde se dirigen los estudiantes del
curso a lo largo de sus estudios:
- Diseño de visuales dinámicos: Desarrolla competen-

cias clave en la visualización como un aspecto fundamen-
tal del diseño digital, con el objetivo de desarrollar una
narrativa visual y utilizar estas habilidades en la creación
de productos de comunicación efectivos.
- Narrativa visual interactiva: persigue el objetivo de ge-

nerar entendimiento y habilidades para crear narrativas
en el ámbito audiovisual interactivo.
- Investigación en medios y diseño: enfocado hacia la

construcción de conexiones entre la práctica del diseño,
los discursos teóricos y los caminos de la investigación
práctica en el campo de los nuevos medios.
Como punta de lanza de la evolución del diseño el Media

Lab Helsinki encabeza la dinámica de la Facultad; como
principales objetivos destaca el explorar, descubrir y com-
prender las nuevas tecnologías digitales y su impacto en

la sociedad para encontrar y explotar las posibilidades que
ésta abre hacia la comunicación, la interacción y la ex-
presión, para evaluar, entender y poder manejar los retos
que estas tecnologías enfrentan hacia el diseño y la pro-
ducción creativa. El Media Lab y la Facultad viven con
el pulso de los hipermedios participando cotidianamente
de redes sociales, publicaciones digitales y proyectos de
investigación punteros en el terreno del diseño.
2.5 MODELOS REFERENCIALES:

COMPARATIVA

Para finalizar el análisis de los mode-

los de referencia se han vinculado los datos previamente
recopilados junto con los programas de diseño gráfico de
cada una de las universidades que conllevan una proximi-
dad con su aplicación hacia el entorno hipermedia para
resumir sus aspectos básicos, históricos, tecnológicos y de
vanguardia en una tabla que ayude a comparar estos ele-
mentos (Tabla 2.1).
En esta tabla es importante destacar algunas de las coinci-
dencias y relaciones que surgen de la puesta en común de
los diversos modelos presentados. En relación a los con-
ceptos básicos se identifica la relación que tiene cada una
de las escuelas con sus raíces teóricas, de forma que mien-
tras algunas conservan aspectos fundamentales heredados
de las artes aplicadas y los procesos artesanales, algunas
otras parten del desarrollo teórico de aspectos posteriores
como la tipografía, la fotografía o la comunicación y teorías
de la forma y el color; este aspecto se enfatiza al revisar los
aspectos históricos de cada una de las escuelas y es impor-
tante hacer mención en este apartado de que los aspectos
sociales van a ser una marcada influencia para la evolución
de los objetivos y estándares de los diferentes departamen-
tos en que se irán organizando a lo largo del tiempo en
cada una de las escuelas.
84 | Marco Teórico
Tabla 2.1 Modelos de Referencia: Históricos, Tecnológicos y de Vanguardia
Referentes Conceptos Básicos Aspectos históricos Aspectos tecnológicos Aspectos de vanguardia

Bauhaus • Artes Aplica- • Concepto de • Funcionalidad • Equilibrio entre
das diseño y diseño • Trabajo con mate- productividad y
• Multidiscipli- gráfico riales creatividad
naridad • Estándares para • Técnicas composi- • Utilidad social del
la enseñanza del tivas diseño
diseño • Color • Trabajo en talleres
• Propagación del • Contraste
magisterio (y la • Abstracción formal
disciplina del • Geometría
diseño) • Disposición espacial
• Carboncillo
• Collage
• Escultura
Basel • Diseño y tipo- • Desarrollo teórico • Incorporación de • Estudios de la iconi-

grafía del diseño con habilidades técnicas cidad
• Teoría de la énfasis en la ex- para los alumnos • Comunicación
forma periencia visual • Estructuras de pro- visual
• Teoría de la • Refinamiento de cesos de diseño • Aspectos discursi-
imagen los procesos y las vos del diseño
formas • Comunicación so-
cial y transcultural
Chicago • Vinculación • Multiculturalidad • Incorporación de la • Optimización de

profesional • Estudios de post- tecnología al con- procesos de diseño
• Fotografía grado texto humano • Innovación
• Marketing • Cotidanidad en el • Enfoque teórico/
uso de herramientas tecnológico
tecnológicas
• Metodologías de
diseño interactivo
Londres • Actualización • Organización • Impulso al desarro- • Fuerte influencia en

post-industrial por facultades y llo de prototipos el desarrollo mun-
de la enseñan- departamentos • Tecnología como dial del diseño
za del diseño • Influencia en la medio, como pro- • Investigación en el
• Fuerte grado cultura popular ducto y como crítica diseño con enfoque
de especializa- • Enfoque en crea- • Diseño insertado humanista
ción tividad y empresa en la mediatización • Diseñador como
tecnológica individuo
• Vinculación con
otros campos y
ciencias

Milán • Ejercicio de • Primer centro • Incorporación de • Integración multi-
herramientas educativo dedi- herramientas tecno- disciplinar
metodológi- cado al diseño en lógicas de punta • Proyectos integrales
cas Italia • Asignaturas centra- • Incorporación de
• Diseño como • Unión de diseño, das en el desarrollo cursos avanzados
interfaz entre comunicación y técnico-tecnológico
mensaje y tecnología • Conceptos de
audiencia internet aplicados
a la enseñanza del
diseño
Helsinki • Fuerte rela- • Alumnos destaca- • Enfoque en el dise- • Marcado enfoque

ción entre dos pioneros de ño para los medios hacia estudios de
diseño y artes la vanguardia del digitales interacti- segundo y tercer
aplicadas diseño escandina- vos ciclo
• Es la escuela vo y europeo • Áreas de especiali- • MediaLab integrado
de diseño y • Importante refe- zación en: Diseño a la Facultad
arte mas gran- rencia mundial de visuales dinámi- • Educación orienta-
de de Europa en las últimas cos, Narrativa visual da a proyectos
décadas interactiva, Investi-
gación en medios y
diseño
Ya los aspectos tecnológicos demuestran un paralelismo

de las herramientas teóricas y técnico-tecnológicas con
las asignaturas ofertadas y las áreas de especialización
en las que se subdividirán a lo largo de su historia los
diversos centros. La influencia se acentúa conforme nos
aproximamos en el tiempo a los cursos mas recientes, en
donde la prominencia tecnológica opaca en algunas oca-
siones al análisis teórico y a la investigación fundamental.
Los aspectos de vanguardia rescatan la interacción social

y buscan equilibrar los aspectos teórico tecnológicos es-
pecialmente en los estudios de segundo y tercer ciclo, en
donde la presencia reflexiva es mucho mayor. Otro as-
pecto a destacar del análisis es la continua presencia de
asignaturas multidisciplinares que promueven la conver-
gencia, el desarrollo de proyectos horizontales y la vin-
culación tanto con la diversidad de estudios académicos
como con las correspondencias del ámbito profesional.
86 | Marco Teórico
2.6 Situación actual: España y México

La situación del diseño gráfico en

España tiene una particular evolución, con una tradición
de diversidad en el colectivo, compuesta por diseñado-
res provenientes de un conjunto de especialidades muy
dispares y más bien especializados en el terreno gráfico.
La enseñanza del diseño ha estado durante muchos años
supeditada a las carreras técnicas, cursos especializados o
programas de maestrías muy específicos.
En el 2001 la Federación Española de Entidadades de

Promoción del Diseño (FEEPD), realiza actividades de
investigación y difusión sobre el diseño que concluyen de
manera significativa en la publicación de el estudio es-
tratégico “El diseño en España”, en esta obra se apunta
sobre el diseño gráfico en particular: “
Se observa una creciente integración vertical de

las imprentas que ofrecen servicios de diseño a sus
clientes medianos y pequeños, aunque muchas ve-
ces se trata más de un servicio formal que real.
Se trata en todo caso, de un sector fuertemente ato-
mizado (circunstancia favorecida por la proliferación
de herramientas informáticas sofisticadas de diseño a
un coste muy asequible), en el cual priman las relacio-
nes personales a la hora de efectuar la contratación.
El diseño gráfico está cambiando a una velocidad
vertiginosa con la introducción de las nuevas tecno-
logías y, sobre todo, con la explosión de internet y la
demanda masiva de servicios de diseño de páginas
web. El nuevo diseñador necesita poseer una sólida
preparación informática para un producto con una
dinámica muy propia y muy distinta al soporte tradi-
cional (Estudio Estratégico 2001, p. 32).
Este rápido cambio que menciona el estudio en 2001,

llegaría ciertamente a gran velocidad y un conjunto de
aspectos no sólo de índole tecnológica, sino también en la
modificación de planes de estudio, propuesta de grados y

acuerdos tanto nacionales como internacionales colocaría
al diseño gráfico en España en un momento de trans-
formación, las convergencias de Bolonia han apurado el
camino académico del grado y las primeras generacio-
nes de diseñadores gráficos universitarios se encuentran
realizando los primeros ciclos formativos en los centros
de enseñanza universitaria nacionales durante la segunda
década del siglo XXI.
Entre las muchas razones que han decidido a la Con-

ferencia de Decanos de las Facultades de Bellas Artes
españolas a proponer la creación de una titulación de
grado en Diseño, la más importante es una conse-
cuencia directa de la comparación con la situación
de que gozan los estudios superiores de diseño en la
mayoría de países del resto de Europa –y también del
resto del mundo– de acuerdo con una tendencia que
se va consolidando a medida que avanza el proceso
de convergencia europea. Mirando hacia el extranjero
se constata cómo se va desarrollando cada vez con
más fuerza un sistema educativo potente dirigido a
la formación de diseñadores preparados para ocupar
puestos de trabajo en todas las escalas laborales y em-
presariales del sector.
Más allá de los argumentos repetidamente esgrimi-

dos para demostrar el potencial económico del di-
seño en la nueva economía –de hecho, son los mis-
mos argumentos que ha utilizado repetidamente el
Ministerio de Industria en sus planes de promoción
del diseño o en las exposiciones organizadas a través
de su Sociedad Estatal para la promoción del diseño
DDI–, la cuestión más urgente ahora es de carácter
académico (Libro Blanco, p. 491).
Adicionalmente España enfrenta hoy día un proceso de
transformación social que tiene importantes incidencias
en el terreno del diseño, en su texto sobre Diseño Gráfi-
co y Migraciones Ibéricas Contemporáneas, Raquel Pel-
ta (Bonsiepe, 2008, p. 262) apunta al fenómeno que ha
88 | Marco Teórico
transformado a España de un país que emigra a un país

que acoge, y en este sentido a la integración con el colec-
tivo latinoamericano en particular:
Las últimas dos décadas del siglo XX y los comien-
zos del XXI, son momentos de acogida. Dispersos
por toda España, pero especialmente concentrados
en Barcelona y Madrid, los diseñadores gráficos la-
tinoamericanos constituyen un importante núcleo
de profesionales, cuya proximidad nos impide ahora
juzgar cuál será su aporte al diseño gráfico español.
Nombres como los del mexicano Eric Olivares, los
argentinos Eduardo Manso, Paula Seré, Meri Ian-
nuzzi y Hernán Ordoñez, entre otros, tienen todavía
muchas cosas que decir. A ellos, sin duda, tendremos
que estar atentos, conscientes de que ya no es posible
constituir una historia del diseño sin tener en cuenta
las mutuas influencias.
De esta manera la carrera del diseño gráfico en España
alza, paradógicamente, un inicio en la formación univer-
sitaria reglada, apoyada, sin embargo con todo el acervo
Logotipo Spanair
Rousselot + José Miguel Alonso
histórico de su desarrollo “informal” nacional. Se suma

a este impulso la experiencia europea del diseño gráfico,
que ayuda a contextualizar y encamina la perspectiva de
este lanzamiento en un espacio regional mucho mayor.
Puntualmente para el entorno hipermedia es una ventaja
adicional el hecho de que esta convergencia suceda en un
momento en el que la aplicación digital interactiva del
diseño gráfico se encuentre en un momento de gran de-
sarrollo y expansión. De esta manera el diseño gráfico en
España está renaciendo naturalmente con la convicción
de que el espacio hipermedia forma una parte integral Catálogo de Exposición
de la aplicación del diseño y regularmente, importantes IED
Eric Olivares
esfuerzos en áreas de investigación y teoría buscan igua-
lar el desfase que ha significado el veloz avance de las
aplicaciones tecnológicas frente a su análisis teórico, este
proceso será de vital importancia para la definición de los
próximos pasos del diseño gráfico hipermedia español.
Inmerso en el espacio latinoameri-

cano, el diseño gráfico mexicano forma parte induda-
blemente del colectivo que agrupa a la región, no sólo
por su geografía, sino también por su historia y su cultura
compartidas. Debido a ello le son otorgadas al diseño
latinoamericano particularidades endémicas que lo dife-
rencian ampliamente del diseño europeo; en este sentido
Gui Bonsiepe, en su reflexión sobre el diseño latinoame-
ricano (2008, p. 11) menciona:
La identidad del diseño latinoamericano, siempre

presente por ejemplo en las reflexiones sobre la exis-
tencia o no de un diseño mexicano, brasileño, chileno,
etc., que se puede desglosar en cuatro aspectos: una
determinada configuración formal y cromática (en
resumen un conjunto de stilemi); un parque de pro-
ductos diferentes (por ejemplo, el mate de calabaza,
originario de la cultura guaraní); el uso de materiales
locales que en otro contexto son clasificados como
“exóticos” (este recurso es utilizado sobre todo en lo
que se llama etnodesign), y, por fin, una metodología
90 | Marco Teórico
particular del diseño partiendo de una vivencia arrai-

gada en la región, en lo local. Mas adelante conclu-
yendo este análisis Bonsiepe agrega: “Escribiendo so-
bre la historia del diseño en América Latina se hace
inevitable insistir en el proyecto entendido como
una acción para la autonomía o, más modestamen-
te, una acción para la reducción de la heteronomía.
Una sociedad que abdica al derecho de participar en
el proyecto de la cultura material y comunicacional
contemporánea, soslaya sus posibilidades de futuro.
Sin diseño no hay futuro y sin enseñanza nueva no
hay diseño para este futuro.
En contraparte, la licenciatura en diseño gráfico imparti-

da en México vive ahora un período de madurez, que re-
clama evoluciones, especialmente en la oferta de especia-
lidades para el segundo y tercer ciclos relacionados con el
diseño y vinculados también con la migración del diseño
gráfico hacia el entorno hipermedia.
La carrera de diseño gráfico se fundó en México en

un clima de júbilo y emoción. Los Juegos Olímpicos
de México en 1968 desencadenaron un furor gene-
ralizado por la práctica del diseño gráfico; un nuevo
lenguaje se generaba: nuevas formas, estilizaciones,
tipografía, sistemas gráficos, iconos que representa-
ban deportes o actividades culturales, etc. Esta ex-
plosión de formas y colores contrastaba con la grave
situación que acababa de superar el país. Decenas de
estudiantes habían sido asesinados en la Plaza de las
Tres Culturas en Tlatelolco después de una protesta
estudiantil pacífica. Fue la aniquilación de un movi-
miento estudiantil que buscaba libertades y flexibili-
dades. Esta protesta estuvo enmarcada en un ámbito
internacional de gran desazón, haciendo eco a las re-
beliones en París y en los Estados Unidos, recrudeci-
das por la invasión soviética a Checoslovaquia.
En este marco internacional se fundaba la carrera

de Diseño Gráfico en México, posiblemente como
un contrapeso a la inestabilidad y el autoritarismo del

momento. Unos años antes se había fundado Diseño
Industrial en la Universidad Iberoamericana (UIA),
que aportó alumnos y profesores para participar en el
diseño corporativo de los Juegos Olímpicos, y sin darse
cuenta se vieron involucrados en uno de los proyectos
más ambiciosos de la época (Tipográfica, Nov. 2005).
Sobre la evolución del diseño gráfico en México, María

González de Cossío hace una reflexión importante en la
compilación elaborada por Gui Bonsiepe (2008, p. 199):
A través de los años, el desarrollo del diseño gráfi-
co en México ha logrado grandes avances, desde una
profesión prácticamente nueva en los sesenta a los
logros significativos en los años 2000. La disciplina
se inició con gran aceleración por el ambiente crea-
do por los Juegos Olímpicos de México en 1968 y las
primeras generaciones de diseñadores se dedicaron a
abrir camino y convencer al público de los beneficios
variados que traía el diseño. Sin embargo se percibe
un decrecimiento de velocidad de la profesión en los
últimos años debido a varias razones: la proliferación
Marca País. 1999.

2005. Diseño: Design Associates.
Consejo de Promoción Turística de
México
92 | Marco Teórico
de diseñadores, la débil preparación, la competen-

cia desleal en el campo de trabajo, la preparación
técnica de escuelas no profesionales y, sobre todo,
el dominio generalizado del uso de la computadora.
Si bien la tecnología ha desafiado a los diseñado-
res, por otro lado el mercado del diseño se ha ido
ampliando a distintos campos de acción, impresos
y digitales. Asimismo, los diseñadores van intervi-
niendo paulatinamente en posiciones de decisión y
se ha fomentado lentamente la idea de que el diseño
gráfico ofrece un plus a cualquier producto o servi-
cio. Las diferentes crisis económicas han afectado el
desempeño de muchos profesionales del diseño, pero
otros han logrado apoyar a las empresas nacionales
y transnacionales de consumo diario que no han re-
ducido su producción y su necesidad de innovación.
En la profesión aún falta crear mayor número de em-
pleos, profesionalizar la práctica académica y profe-
sional y, sobre todo, desarrollar el diseño relacionado
con la vida cotidiana, en el que el valor del autor se
minimiza para darle mayor importancia a la interac-
ción con el usuario.
Frente a este panorama, el ámbito del diseño gráfico en
México presenta un panorama de renovación, en el que
las nuevas tecnologías y en particular el entorno hiper-
media se colocan como un espacio de particular impor-
tancia para la aplicación práctica de la profesión del dise-
ñador gráfico, especialmente en este sentido profesional,
en donde los apoyos teóricos y la fundamentación bien
elaborada, contribuyen a la evolución de este terreno in-
teractivo, otorgando la credibilidad a proyectos e investi-
gaciones que dejan bases sólidas hacia el establecimiento
de puntos de partida para el trabajo cotidiano del diseño
gráfico en los hipermedios.
My Price, App mexicana desarrollada

por Antonio Macías compitió en el
2013 por lo mejor de los Mobile Pre-
mier Awards
Tabla 2.2 Modelos: España y México

España • Establecimien- • Hereda una im- • Rápida evolución y • Importante pre-
to como grado portante escuela adaptación en las sencia en la vitrina
reciente de artes plásticas últimas décadas internacional del
• Histórica diver- aplicadas • Renacimiento del diseño desde 1992
sidad artesana • Adaptación a diseño reglado inser- • Concentrador de
en el colectivo partir de conve- tado naturalmente la gráfica hispana
nios Europeos, dentro del espacio con importantes
vinculaciones hipermedia como vía influencias latinoa-
geográficas y natural de expresión mericanas
lingüísticas • Importantes incur-
siones en investiga-
ciones teóricas en el
terreno hipermedia
durante las últimas
décadas
México • Identidad pro- • Primer Facultad • Constante evolución • Rescate de tradicio-

pia vinculada al de diseño de la tecnológica por la nes y arte popular
colectivo lati- región (1968) cercanía y el inter- aplicados al diseño
noamericano • Vive en la actua- cambio con EEUU • Integración de
• Equilibrio de lidad un período • Fuerte carga técnica aspectos folklóricos
tradición y de madurez y con importantes y materiales endé-
tecnología transformación, lastres teóricos micos
con ofertas • Rápida adopción de
nacientes en se- tecnologías nacien-
gundos y tercer tes incorporadas al
ciclo diseño
• Evoluciones
cíclicas debido
a crisis econó-
micas
94 | Marco Teórico
Diseño de la
investigación
3 Diseño de la investigación:
Objetivos, Hipótesis y
Metodología
♦♦ Las ideas cambian y evolucionan. Sus transforma-

ciones se producen como consecuencia de la oposición de
ideas contrarias o por la oposición de una nueva infor-
mación con ideas viejas.
De Bono (1970)
3. Diseño de la investigación
El proceso de desarrollo de la investigación bus-
ca abarcar los ámbitos de influencia para el diseñador
gráfico hipermedia, tocando áreas educativas, de inves-
tigación y profesionales, con el objetivo de reunir un pa-
norama en el cual se puedan revisar las hipótesis pre-
sentadas en esta investigación y su desarrollo mediante
los modelos presentados en este proyecto. A continua-
ción se especifican los objetivos, las hipótesis y la me-
todología que componen el diseño de la investigación.
3.1 OBJETIVOS
El objetivo principal de esta investigación con-
cuerda con el cuestionamiento que plantea la cita de
Wucius Wong (2004, p. 25) al iniciar el capítulo primero;
96 | Introducción
en esta frase Wong reflexiona sobre la dirección del dise-

ño hacia su evolución en los multimedios y la interac-
tividad. Tomando como punto de partida esta reflexión,
la presente investigación busca sumarse a este momento
paradigmático para el diseño gráfico del que habla Wong
e intenta dar orientaciones a la pregunta lanzada por él.
Como diseñador profesional, trabajando cotidianamen-

te en el terreno hipermedia, he sentido la necesidad de
retomar los conceptos fundamentales del diseño gráfico,
para investigar y analizar la manera en que se trasladan a
su aplicación hipermedia, de estos primeros análisis y su
evolución surgieron los planteamientos de esta tesis y la
búsqueda de sustentaciones teóricas en el espacio digital
interactivo es un objetivo que se suma al planteamiento de
la investigación en la búsqueda de aportar orientaciones
prácticas que ayuden a establecer estos conceptos básicos.
El camino de esta investigación realiza el recorrido que
ha sufrido el diseño gráfico hacia su expresión digital
y hacia el aterrizaje práctico de proyectos en el espacio
hipermedia, un objetivo adicional en relación a este re-
corrido es profundizar en la búsqueda de la evolución
de nuestros conceptos fundamentales para así redimen-
sionarlos y, dado el caso, redefinirlos, intentando de esta
manera elaborar tanto referentes como puntos de par-
tida para el establecimiento de un conjunto de aspec-
tos teóricos básicos del diseño gráfico hipermedia, par-
tiendo de sus raíces en las diferentes teorías del diseño
gráfico histórico y, al mismo tiempo utilizando la ópti-
ca de los hipermedios para visualizar la manera en que
el diseño gráfico ha evolucionado en este novel terreno.
Es posible dividir los objetivos de la investigación de
acuerdo a tres variantes en sus ámbitos de aplicación:
3.1.1 Investigación
Mediante el proceso de desarrollo teórico y a lo lar-

go de la etapa de investigación se pretenden identificar los
conceptos eje de la teoría del diseño gráfico y su traslado

a los hipermedios, retomando los elementos fundamen-
tales del diseño convencional para observar su evolución
hacia el diseño gráfico hipermedia y de esta forma revi-
sar finalmente sus posibles implicaciones y aplicaciones.
El proceso de investigación inicia con los referentes teó-

ricos históricos, identificando elementos y conceptos que
avanzarán hacia la aplicación interactiva del diseño, pos-
teriormente se establecen parámetros para lograr trasladar
esta serie de conceptos al contexto contemporáneo; situán-
doles especialmente en los espacios geográficos de España
y México; esta base teórica servirá como fundamento para
presentar los modelos de aplicación y estudio y establecerá
los elementos básicos sobre los cuales han de desglosarse
los diversos componentes y ejemplos que ayudan a com-
prender la dinámica de los conceptos básicos del diseño
tanto en procesos teóricos de fundamentación hiperme-
dia como en la práctica durante la ejecución de estos con-
ceptos en proyectos cotidianos que los llevan a la práctica.
3.1.2. Educación
i. Lograr una descripción operacional para el

terreno académico. La definición y el aterrizaje con-
ceptual y teórico del diseño gráfico hipermedia estará
dirigido a su posterior aplicación en la academia, por lo
que sus tonos y maneras estarán acotados a este princi-
pio. Esta investigación busca acotar los conceptos funda-
mentales del “diseño gráfico hipermedia” para su utiliza-
ción posterior en el aula, desmembrando los conceptos
originales del diseño gráfico y analizando su evolución
hacia los hipermedios, así mismo será importante men-
cionar los empleos y convenciones de este conjunto de
términos, así como las acepciones a las que han derivado.
ii. Orientaciones académicas. La oferta aca-

démica y la vida profesional se han retroalimentado de
98 | Introducción
manera cotidiana desde el nacimiento del diseño. En las

últimas décadas, la demanda profesional ha detonado la
oferta académica y el diseño ha sufrido una diversificación
muy vasta. Analizar estas ramificaciones desde el mundo
profesional y seguir su camino hacia la academia es de vital
importancia para poder establecer rutas hacia la formali-
zación de los estudios que demanda el campo práctico. Las
necesidades de empresas y usuarios en general no son ne-
cesariamente determinantes, pero si representan señala-
mientos y orientaciones en el camino, importantes a tener
en cuenta para seguir en ruta hacia la evolución del diseño.
3.1.3 Profesionales
i. Aplicación profesional. La retroalimentación

del sector profesional ofrecerá una aportación de la fiabi-
lidad de los conceptos aplicados a terrenos de la praxis,
por lo que el punto de vista del gremio profesional es
importante para comprobar el aterrizaje de los modelos
propuestos, el diálogo abierto desde la identificación teó-
rica hasta la aplicación del conjunto de conceptos revi-
sados es un interesante camino que provoca la reflexión
y la retroalimentación, y una buena oportunidad para
mantener la correspondencia viva entre ambas partes.

ii. Apoyos teóricos. Los materiales resultan-
tes de la investigación desarrollada contendrán infor-
mación de valor hacia la óptica profesional, los mode-
los propuestos buscarán encaminarse como material
didáctico o de apoyo a la fundamentación teórica de
proyectos profesionales, de manera que puedan ser una
aplicación práctica de uso cotidiano para el diseñador
gráfico hipermedia en la elaboración de sus proyectos.
3.1.4 Aportaciones adicionales

i. Reflexión. Investigar y experimentar con las

posibilidades del espacio hipermedia para el diseña-
dor gráfico es de por si una gran satisfacción, tomar el
tiempo para reflexionar sobre el papel de nuestra pro-
fesión en un vasto terreno genera posibilidades muy
diversas para aplicarse y continuar investigándose. Mi
intención es aportar un sendero más para que se siga
construyendo el camino en la profesión del diseña-
dor gráfico como un solucionador de las necesidades
de comunicación e información en la sociedad actual.
ii. Retroalimentación. Durante el proceso de

elaboración de la investigación, el contacto con las di-
versas fuentes; investigadores, profesores, académicos,
estudiantes y usuarios es una fuente de retroalimenta-
ción por sí misma para los objetivos planteados en este
estudio, los comentarios, charlas y cuestionamientos a
lo largo del camino funcionarán como marcadores de
próximos pasos y proyectos por realizar, puertas de gran
interés que pueden ser objeto de futuras investigaciones
o sugerencias para otros colegas interesados en el tema.
3.2 HIPÓTESIS
♦♦ Hoy en día la gente espera mucho de los sitios web, y

cada vez son menos tolerantes con el mal diseño.
Nielsen, 2006
La necesidad de retomar los aspectos funda-

mentales del diseño gráfico hipermedia es el pun-
to central de la hipótesis de esta investigación, de esta
manera las teorías del diseño gráfico serán el sopor-
te que sustenta esta evolución, que se verá retroali-
mentada a su vez de las diversas disciplinas que con-
100 | Introducción
vergen en el terreno hipermedia. La hipótesis abarca

tres planteamientos que son el motor de este proyecto:
i. Traslado de los fundamentos teóricos del diseño

gráfico al entorno hipermedia
La primera hipótesis que plantea este trabajo de in-
vestigación gira en torno a la necesidad de retomar los
conceptos básicos de la teoría del diseño gráfico con-
vencional para dimensionarles en el terreno hipermedia,
retroalimentándose de la praxis en este campo de apli-
cación, confrontando las propuestas que un nacimiento
en terrenos analógicos y medios pasivos suponen frente
a su posterior desarrollo en aplicaciones digitales y te-
rrenos totalmente interactivos; adicionalmente se con-
siderará evaluar las adaptaciones necesarias o, dado
el caso, las sugerencias de redefiniciones para su em-
pleo teórico-práctico en el diseño gráfico hipermedia.
ii. Convergencias multidisciplinarias en el diseño

gráfico hipermedia
En el diseño gráfico hipermedia se producen una serie de
convergencias multidisciplinarias, especialmente en los
terrenos de la narrativa, la comunicación y la informática,
de las que se incorporan elementos que enriquecen los fun-
damentos funcionales, expresivos y estéticos de la práctica
del diseño gráfico en este nuevo entorno de aplicación;
del análisis de estas convergencias y su ejemplificación
práctica en casos profesionales de diseño gráfico hiper-
media se obtendrán aspectos fundamentales que podrán
servir como guía para el diseñador interesado en involu-
crarse de manera profesional en el entorno hipermedia.
iii. Modelo de aplicación

Como resultado del análisis a los incisos mencionados
anteriormente se obtendrá un modelo fundamental so-
bre los elementos básicos del diseño gráfico hipermedia,
que apoyará la necesidad de sustentación teórica en las
áreas de desarrollo de proyectos de diseño gráfico hiper-
media y que conducirá hacia el establecimiento de ru-

tas prácticas para el trabajo cotidiano del diseñador en
el área gráfica, inmerso específicamente en el terreno
digital interactivo, así mismo el modelo debe contem-
plar aspectos didácticos que faciliten el planteamiento,
seguimiento y la enseñanza de los elementos del mismo
en los diversos campos de aplicación del diseño gráfico.
3.3 METODOLOGÍA
Efectuando esta revisión de conceptos teóri-
cos fundamentales en el diseño gráfico, se analizará la
manera en que son aplicados al entorno hipermedia,
así como las posibilidades que se generan al estudiarse
su traslado y evolución. Al reunir y organizar estos ele-
mentos en un modelo de análisis teórico y de aplica-
ción práctica se obtendrá un panorama general de los
fundamentos básicos del diseño gráfico hipermedia.
A efectos prácticos se llevará a cabo mediante:
i. La recopilación de los términos fundamenta-

les utilizados en la teoría básica del diseño gráfi-
co, sus principales referencias, así como las defini-
ciones de uso académico y profesional cotidianos.
ii. La descripción de estos términos para acotar su sig-

nificado y la revisión que tradicionalmente se hace
de ellos en el campo del diseño gráfico convencional.
iii. El análisis del conjunto de elementos, tanto en el área

del diseño gráfico tradicional, como durante su traslado
hacia el terreno hipermedia. Este análisis se acompaña
de la ejemplificación práctica para lograr una aterrizaje
más didáctico de los conceptos y sus diversas aplicaciones.
102 | Introducción
iv. La exploración sobre las posibilidades y la aplicación

de estos fundamentos en el campo hipermedia y de ser
necesaria la redefinición o ampliación de sus definiciones.
Estos cuatro pasos son trasladados a la presentación del

micromodelo de la investigación, para ser desglosados y
estudiados mediante proyectos profesionales de diseño
gráfico hipermedia, su revisión permite acotar y ampliar
la escena fundamental de los conceptos aplicables al dise-
ño gráfico hipermedia, y permitirá trasladar este modelo
amplio hacia el mesomodelo y micromodelo relacionando
los aspectos fundamentales del diseño gráfico hipermedia
con sus áreas específicas de educación y vida profesional.
3.3.1 Referencias bibliográficas
Para lograr compilar una bibliografía que parte

de la interdisciplinariedad se han abordado fuentes que
abarcan conjuntos temáticos relacionados con las di-
versas áreas que se conjugan en el terreno hipermedia:
diseño, comunicación, narrativa, interactividad y las aco-
taciones técnicas necesarias para el desarrollo del tema,
desde las nociones básicas para la construcción del es-
queleto hipermedia en códigos informatizados, has-
ta las herramientas de armado final y retoque con pro-
gramas informáticos como Photoshop o Dreamweaver.
El origen de las fuentes es diverso, las investigaciones en
castellano de autores como Fernández-Coca (1998), Isi-
dro Moreno (2002; 2003) y Raquel Pelta (2004) han he-
cho importantes aportaciones al desarrollo de esta tesis;
los textos en inglés indudablemente son punta de lanza
en el terreno hipermedia y autores como Nielsen (2000,
2007), Baggerman (2002) o Paul Kahn (2001) han ayuda-
do a sentar bases desde disciplinas aledañas que han ter-
minado por influir de manera decisiva en la evolución del
diseño hacia su digitalización interactiva. Las publicacio-
nes periódicas impresas o digitales aportan un pulso par-
ticular del mundo hipermedia, deconstruyendo continua-

mente el backstage de este dinámico entorno revistas como
Wired, MacLife o Computer Arts, aportan al diseñador he-
rramientas e información de un gran valor con una pers-
pectiva práctica profesional pues generan su información
de manera práctica desde el propio terreno hipermedia.
El universo hipermedia es el campo más fértil al ha-
blar de fuentes sobre el tema en sí; investigaciones
como las de la Yale Art School o el Viz Lab de la Uni-
versity of Minnesota, publicados en iTunesU alimentan
continuamente la información disponible sobre la van-
guardia en el espacio hipermedia; los equipos de tra-
bajo reunidos en laboratorios de Internet como el Me-
diaLab Prado y el Museum I+D+C de la Universidad
Complutense son fértiles semilleros de interesantes pro-
yectos hipermedia, en ellos talleres como el “FabLab” o
proyectos integrales como el seminario internacional de
“ArTecnología” colaboran en la construcción de espa-
cios tanto informativos como experimentales donde se
conciben los próximos pasos para integrar al diseño grá-
fico a las aplicaciones interactivas del futuro inmediato.
Los propios sitios web, Apps y videojuegos residentes en
el entorno hipermedia constituyen puntos de partida y
proyectos de análisis de sumo interés, el desarrollo de este
trabajo hubiese sido mucho menos gráfico sin la posibili-
dad de describir los ejemplos prácticos que ofrecen sitios
de experimentación abierta como el de Yugo Nakamura
(yugop.com), la estructura interactiva del sitio promocio-
nal para el film Memento (otnemem.com) o las innovacio-
nes que representan las descripciones de las CSS3 (www.
css3.info) y la evolución que para el diseño representa el
lenguaje Html (www.w3.org/TR/html5) en su quinta
versión, todos ellos lenguajes y propuestas que aterrizan
de manera puntual los diversos conceptos que el análisis
de este proyecto de investigación requiere, adicionalmente
la visualización de estas construcciones hipermedia apo-
yan de manera referencial a los conceptos teóricos que se
revisan en los modelos y permiten identificar claramen-
te cada uno de los elementos que el análisis menciona.
Finalmente, las diversas investigaciones publicadas en re-
vistas digitales o compiladas en bases de datos, aportan el
104 | Introducción
punto de vista académico y una prospectiva teórica sobre

el espectro hipermedia que se ha seleccionado para la re-
visión de resultados a efectos de este estudio y aportan un
análisis formal de gran actualidad debido al dinamismo
que el trabajo en línea y a menudo colaborativo involu-
cra con respecto a estos medios, a los que adicionalmente
centros de estudios como la Universidad Complutense
o las propias bibliotecas comunitarias ofrecen con acce-
sos abiertos para consultar fuentes de gran especializa-
ción y profundidad y que se suman a las posibilidades
inherentes a las que Internet ofrece al usuario básico.
3.3.2 Aspectos cualitativos
Una vez desarrollados los modelos serán trasla-

dados para su comprobación a los espacios académicos
y profesional; mediante el análisis puntual de sus co-
rrespondencias y la ejemplificación práctica se retomará
la revisión de los conceptos fundamentales del diseño
gráfico utilizados, para llevarlos de nuevo a su origen
teórico y ahí analizar su traslado al terreno hipermedia,
el estudio de casos se ha acercado a cada una de las par-
tes que corresponden a la definición de los conceptos
que el modelo involucra, buscando de esta manera de-
mostrar de forma práctica lo revisado en el análisis teó-
rico, llevándolo de igual manera al terreno cotidiano del
entorno hipermedia para contemplar su aplicación final.
Éste análisis práctico acompaña el análisis escrito con
imágenes y ejemplos visuales, situado en los extremos de
las páginas de este documento para su rápida referencia
y vinculación con el análisis de los aspectos teóricos que
se van mencionando en el cuerpo de texto durante el re-
corrido temático. Esta ejemplificación, más que una re-
ferencia exhaustiva es un apoyo inmediato que clarifica
conceptos, detonando también cuestionamientos rela-
cionados con las aplicaciones hipermedia del diseño que
bien pueden ser motivo de posteriores investigaciones.
3.3.3 Aspectos cuantitativos

La comprobación cuantitativa de los modelos

propuestos está vinculada a sus diversas aplicaciones en
los diferentes ámbitos de interés para el desarrollo de esta
investigación; en el terreno académico, la integración de
opiniones de profesores y alumnos en jornadas de trabajo
universitarias, apoyadas por la revisión de fundamentos
expresados en este trabajo de investigación, y especial-
mente del grupo meta de este proyecto, es decir ubicados
geográficamente en la Ciudad de México, específicamen-
te en grados universitarios de diseño y con una partici-
pación activa en los períodos que comprenden tanto el
trabajo y los conceptos básicos de diseño gráfico, así como
el estudio de los hipermedios como campo de aplicación,
es decir entre el segundo y cuarto semestre de la carrera.
En el terreno profesional se llevarán a cabo un conjun-
to de encuestas y sesiones de grupo dirigidas a profesio-
nales diseñadores, inmersos en el desarrollo cotidiano
de la vertiente hipermedia de su profesión, estos resul-
tados servirán como controles para darle sustento a los
puntos expuestos en los modelos, y revisar la practicidad
de los elementos que aterriza el modelo propuesto, ve-
rificándolos o lanzando opciones de experimentación y
redefinición de acuerdo al análisis de sus posibilidades.
La conclusión en el desarrollo de modelos de aplicación
práctica vinculados al terreno académico y profesional
arrojará resultados de uso paralelo a la teoría desarrollada,
llevando el análisis a casos puntuales se desglosará en di-
ferentes niveles para que puedan ser utilizados con mayor
facilidad dependiendo de la necesidad de aplicación, ya
sea en el terreno profesional o en una situación de análisis
académico.
Los modelos serán comparados en el campo profesional
con los resultados obtenidos por el análisis de un con-
junto de datos obtenidos por agencias referenciales en
el ámbito del diseño gráfico hipermedia, datos sobre los
perfiles de búsqueda de estas principales agencias y de los
buscadores en línea especializados en el área hipermedia
y finalmente con datos obtenidos por referencias en bases
de datos relacionadas con la investigación en el terreno
hipermedia del diseño gráfico.
106 | Modelos
Modelos
4 Presentación y desarrollo
de los Modelos
♦♦ Design is the fundamental soul of a human-made

creation that ends up expressing itself in successive outer
layers of the product or service.
Steve Jobs
L
a evolución histórica del diseño ha ido acompaña-
da de la evolución histórica de sus herramientas,
desde la experimentación con técnicas y materia-
les artesanales durante los inicios del “Arts and Crafts”
en la Bauhaus, hacia la integración del Desktop Publishing
y la revolución de los medios impresos al final del siglo
XX, hasta la integración total del Computer Asisted De-
sign y su progresión al Physical Computing; las herramien-
tas influyen en la técnica y sus posibilidades expresivas.
La primer orientación que es posible obtener a partir de la

información recopilada en el segundo capítulo de esta in-
vestigación (Tablas 2.1 y 2.2) es que mientras el conjunto
de conocimientos y asignaturas vinculados a las técnicas,
procedimientos y tecnologías ha tenido una diversifica-
ción muy amplia, las asignaturas que revisan los aspectos
teóricos y fundamentales del diseño gráfico se mantienen
en un conjunto estable y permanecen como esencia tanto
en los primeros cursos académicos como al avanzar hacia
los semestres finales del grado o la especialidad desarro-
llados en las Universidades seleccionadas. En la Tabla 4.1
tenemos una comparativa de la evolución del conjunto de
asingaturas relacionadas con aspectos teóricos y prácti-
108 | Modelos
cos y la forma en como han ido modificándose dentro de

sus respectivos programas desde el origen de la carrera en
cada uno de los centros correspondiente hacia las etapa
final del Siglo XX y durante el período inicial del siglo
XXI, con la ayuda de esta información podemos identifi-
car cómo la carga de asignaturas teóricas se ha ido equi-
librando hacia el final del siglo XX para ser rebasada por
los estudios técnico-tecnológicos en las primeras décadas
del siglo XXI; a pesar de que el cuestionamiento de este
proceso no es parte del objetivo de este estudio no deja
de de ser un resultado que abre importantes interrogantes
sobre el peso que actualmente poseen los estudios relacio-
nados con la técnica y la tecnología en los centros de estu-
dio universitarios, y, fuera de el ejemplo excepcional de la
Escuela de Basel hoy en día la experimentación del dise-
ño en el terreno digital ocupa un gran porcentaje durante
el desarrollo de los estudiantes de las diversas carreras de
diseño, este resultado será uno de los añadidos a las hipó-
tesis plausibles, de especial interés para alguna investiga-
ción relacionada con el estudio de la evolución del diseño
gráfico dentro de los espacios de estudio universitarios.
Con estos datos por delante el cuestionamiento que vincula

hacia el objetivo del presente estudio es la verificación de
las interrelaciones que tienen en la actualidad los aspectos
teóricos, con su evolución pausada y estable a lo largo de la
historia del diseño y su contraparte en la acelerada marcha
de los conceptos tecnológicos que han vivido su desarrollo
a un ritmo vertiginoso, la manera en como la evolución
del campo tecnológico ha afectado al establecimiento de
bases teóricas se identifica, inicialmente a raíz de esta in-
formación, como una importante cuestión para analizar.
Los modelos propuestos en esta investigación retoman

los aspectos teóricos fundamentales empleados en los re-
ferentes del capítulo 2 para desarrollarlos, analizarlos y
revisar la manera en que han sido trasladados junto con
sus respectivas proyecciones al empleo de técnicas y tec-
nologías digitales, específicamente aquellas que desem-
bocan finalmente en proyectos hipermedia, esta revisión
mediante los diferentes niveles de modelos empleados

es un ejercicio de reflexión y experimentación que busca
orientaciones sobre la correspondencia actual de la teoría
y la técnica en el diseño gráfico hipermedia. El proceso
en sí del desarrollo de los modelos ha sido una experien-
cia enriquecedora para mí perspectiva como diseñador
y para mis paradigmas en el terreno de la enseñanza,
intentaré llevar estas experiencias a su expresión sinté-
tica mediante los modelos expuestos en este capítulo.
Tabla 4.1 Número de materias Teóricas y Tecnológicas en los programas de Diseño Gráfico
referenciales; promedio de evolución histórica
Referentes Etapa Inicial del Centro Período 1985-1995 Posterior al 2010

Teórico Tecnológico Teórico Tecnológico Teórico Tecnológico
Históricas 3 3 5 7 10 16
Tecnológi- 5 4 10 12 14 18
cas
Vanguar- 7 5 12 15 13 16
dia
España 3 3 11 12 15 18
México 7 5 12 15 16 20
110 | Modelos
4.1 MICROMODELO
4.1.1 Introducción
La vinculación de los aspectos teóri-
cos de la producción hipermedia con respecto a la aplica-
ción práctica de las herramientas y técnicas informáticas
del entorno digital interactivo es una de las asignaturas
pendientes en la enseñanza actual del diseño, especial-
mente cuando el análisis de los conceptos fundamenta-
les del diseño en los primeros semestres del grado rom-
pe su vinculación con cursos posteriores que abordan el
trabajo práctico del diseño gráfico hipermedia sin que se
identifique el entramado que vincula estos conocimien-
tos técnicos con los fundamentos esenciales previamen-
te revisados, lo cual deja un hueco metodológico en el
acompañamiento hacia el traslado conceptual desde los
principios teóricos hasta la búsqueda de su traducción
visual, generando regularmente elaboraciones a posterio-
ri des aterrizajes intuitivos sobre las aproximaciones que
ejecutan los diseñadores involucrados en el proceso, per-
diendo la oportunidad de afianzar vinculaciones e identi-
ficar nuevas oportunidades de interrelación. Este proceso
acentúa subjetividades en la sustentación teórica de los
proyectos de diseño académicos provocadas por la esca-
sez de procesos formales en la identificación de los com-
ponentes del diseño gráfico hipermedia, situación que se
pone de manifiesto cotidianamente en el seguimiento,
aterrizaje y evaluación de las propuestas elaboradas por
los alumnos, en donde a menudo los parámetros no son
del todo claros y las herramientas se limitan al campo tec-
nológico, minimizando la valoración de los fundamentos
y apoyos teóricos, este proceso se acentúa con el auge de
las materias tecnológicas en detrimento del análisis teó-
rico y posteriormente se traslada tal cual a la elaboración
de proyectos en el campo profesional.
El modelo que se propone en esta investigación es una

aproximación para afrontar esta problemática, apoyando

metodológicamente el análisis de conceptos básicos de
diseño gráfico y su aplicación en proyectos, buscando co-
laborar en el desarrollo global de los aspectos fundamen-
tales de un proyecto hipermedia y proponiendo un punto
de partida para hacer referencia a los aspectos teóricos de
la construcción del diseño.
El micromodelo pretende abarcar un conjunto de ele-

mentos suficientemente vasto como para poder aplicarse
a un esqueleto de programación educativo orientado ha-
cia temarios académicos relacionados con estudios sobre
“Fundamentos del diseño gráfico hipermedia”.
4.1.2 Presentación
Antes de iniciar con la primer parte
del modelo es fundamental centrar las definiciones co-
rrespondientes al diseño gráfico, y al espacio hipermedia.
Estas definiciones que han sido introducidas previamen-
te son desarrolladas en los apartados 4.4.1 y 4.4.2.
A partir de la sección 4.4.3 se inicia el estudio de los

componentes del modelo de fundamentación del dise-
ño gráfico hipermedia en éste capítulo son detallados sus
componentes fundamentales heredados de las principa-
les corrientes teóricas revisadas en las secciones inicia-
les sobre los modelos referenciales, esta primer dualidad
de conceptos Forma y Espacio, se ha consolidado como
base de la teoría tradicional del diseño desde sus oríge-
nes y por lo tanto es imprescindible para su revisión y
traslado al terreno hipermedia. En un segundo grupo,
tenemos un elemento que traslapa los elementos tradi-
cionales y la convergencia plena hacia la interactividad; el
Tiempo, que se añade como variable fundamental para
el diseñador durante la incorporación de los multimedios
a las posibilidades expresivas del diseño gráfico y es po-
tenciado en el espacio hipermedia con la manipulación
interactiva y el traslado autoral durante la integración di-
112 | Modelos
gital interactiva. Ya inmersos en los componentes de los

fundamentos hipermedia, las Acciones y Atributos que
componen la base este entorno, forman parte del reto que
hoy en día los diseñadores enfrentan con innovadoras
propuestas, al mismo tiempo que con limitadas referen-
cias orientadas hacia los apoyos teóricos que es posible
encontrar para enfrentar la profundización conceptual
que estos retos significan.
El micromodelo es desarrollado a detalle a partir del ca-
pítulo 4.4 de esta sección, pues forma parte del núcleo
central del análisis presentado en esta investigación, con
lo cual su desarrollo combina la revisión teórica, la expe-
rimentación conceptual y los cuestionamientos prácticos.
4.2 MESOMODELO
El mesomodelo cumple dos objeti-

vos, por una parte es un desarrollo del macromodelo, con
el desglose esquemático de los elementos que lo compo-
nen, de forma que es posible visualizar en la tabla (Tabla
4.2) las relaciones que los elementos fundamentales del
diseño gráfico hipermedia llevan con respecto a sus cate-
gorías y derivaciones, este desarrollo del modelo permite
visualizar una construcción ampliada del macromodelo
que será desarrollada a detalle en el micromodelo. El
segundo objetivo es su aterrizaje práctico en cuanto a
la traducción hacia el terreno profesional del micromo-
delo; resume el micromodelo revisado para integrar una
herramienta de aplicación en el terreno profesional de
la propuesta, tomando como estructura las categorías en
los componentes fundamentales tanto del diseño gráfico
tradicional como en el diseño hipermedia, este modelo
busca apoyar al diseñador profesional durante el estable-
cimiento fundamental de un proyecto mediante una guía
que puede ayudar a contemplar los componentes básicos
que el micromodelo ha revisado con mayor extensión y
que el mesomodelo aplica a la práctica, permitiendo al

diseñador generar propuestas en base a su formación y
experiencia e incorporando las derivaciones posibles para
cada uno de los componentes que forman la parte esen-
cial de sus proyectos hipermedia.
Tabla 4.2 Mesomodelo: Componentes del Diseño Gráfico / Hipermedia
Diseño Componente Categorías Derivaciones

Gráfico Fundamental
FORMA 1. Evolución formal • Realista
• Figurativo
• Abstracto
FORMA 2. Grado de abstracción • Representacional

• Abstracto
• Simbólico
FORMA 3. Variaciones primarias • Redondo

de la forma
• Angular
• Dentado
• Difuso
• Concreto
FORMA 4. Estilos expresivos •Definición de pares opuestos

de la forma (grande vs. pequeño, grueso vs.
delgado, real vs. aparente, etc.)
FORMA 5. Estilos expresivos • Formas Primitivas

artísticos
• Clásicas
• Embellecidas
• Expresionistas
• Abstractas
114 | Modelos

FORMA 6. Texturas • Táctiles
• Ópticas
FORMA 7. Tonalidades de color •Valores de clave cromática

(según el modelo HSB del 0
al 359)
FORMA 8. Saturaciones de color •Valores del 0 al 100%
FORMA 9. Luminosidad •Valores del 0 al 100%
FORMA 10. Armonías de color • Monocromática

• Complementaria
• Análoga
• Triaxial
• Complementaria-Análoga
• Doble complementaria
• Complementaria tetraxial
FORMA 11. Esquema de color • Cálidos
• Fríos
• Suaves
• Obscuros
• Vívidos
• Apagados
• Impactantes
• Tranquilizadores
• Excitantes
• Naturales
• Juveniles
• Femeninos
• Sorpresivos

FORMA 12. Intencionalidad cromá- •Aspectos significativos
tica
•Teoría psicológica
•Aspectos sociales
FORMA 13. Psicología del color •Aspectos significativos

FORMA 14. Tipografía • Familia

• Cuerpo
• Espaciado
• Legibilidad
• Correspondencia
• Organización
ESPACIO 1. Disposición •Aspectos significativos

ESPACIO 2. Posición • Centrado

• Arriba
• Abajo
• Izquierda
• Derecha
ESPACIO 3. Relaciones • Pequeño

elementos-formato
• Mediano
• Grande
• Sobrepasado
116 | Modelos

ESPACIO 4. Interrelaciones de la • Separación
forma
• Tensión
• Tranquilidad
• Fusión
• Equilibrio
• Flotación
• Opresión
ESPACIO 5. Sistemas de composición •Simétricos

(Geométricos, Sección áurea,
reticulares)
• Modulares
• Irregulares
ESPACIO 6. Aspectos significativos • Herramientas de

de la composición organización
• Retórica visual
Gráfico Componente Categorías Derivaciones

/ Hiper- Fundamental
media
TIEMPO 1. Estructuras • Lineales
• Contrapunto
• Ruptura temporal
• Fresco
• Coral
TIEMPO 2. Transposición • Objetiva

• Subjetiva
• Abierta
TIEMPO 3. Posibilidades hipermedia • Multicronicidad

• Reversibilidad
• Velocidad incremental
ACCIONES 1. Animación • Vídeo

• Pixelar
• Vectorial
• Mixta
• Por programación
ACCIONES 2. Interacción • Gestión (autogestionadas, de
gestión externa, mixtas)
•Nivel interactivo (pasivo,
participativo, transformativo,
creativo)
ACCIONES 3. Estructuras interactivas •Lineal o directa (con intrain-

teractividad, con metaestruc-
turas interactivas o subsidia-
rias, iterativas)
•No lineales o indirectas
(dendrítico circulares, poliden-
dríticas, abiertas, semiabiertas
y convergentes)
118 | Modelos
Gráfico Componente Categorías Derivaciones

/ Hiper- Fundamental
media
ACCIONES 4. Vinculación • Baja
• Media
• Alta
ACCIONES 5. Contexto • Aspectos sistemáticos

• Coherencia
ACCIONES 6. Transformación • Instantánea

• Secuencial
• Aleatoria
• Participativa
• Independiente
ATRIBUTOS 1. Información • Secuencial

• Hipertextual
• Jerárquica
ATRIBUTOS 2. Metainformación • Autoreferencial

• Multireferencial
• De referencia externa
• Metadatos formales
• Metadatos descriptivos
ATRIBUTOS 3. Programación • De marcación

• Scripts
• Lenguaje de programación
El mesomodelo bien puede ser un documento de trabajo

cotidiano, una propuesta de este tipo ha sido añadida a la
sección de anexos, está orientada al análisis de proyectos
para identificar de manera puntual los componentes de
un proyecto de diseño gráfico hipermedia, resumiendo en
un solo formato las piezas con las que el diseñador cons-
truye para generar sus propuestas de solución. El formato
presentado como mesomodelo ha sido utilizado durante
la etapa de comprobación para identificar su utilidad en el
campo profesional, retroalimentándose a su vez de las su-
gerencias y experiencias que diseñadores trabajando co-
tidianamente en el terreno hipermedia me han aportado.
Para optimizar su formato y manejo, el documento del

mesomodelo aplicado al campo profesional ha sido in-
cluido en la sección de anexos (Anexo II, Formato de
Mesomodelo) y como un archivo digital en versión Pdf
en el disco de acompañamiento.
4.3 MACROMODELO
El macromodelo (Fig. 4.3) es una vi-

sión sintética y didáctica del núcleo central de los fun-
damentos del diseño gráfico hipermedia, en él se pueden
observar dos grandes bloques: el conjunto de componen-
tes correspondientes al conjunto del diseño gráfico tradi-
cional y aquellos elementos fundamentales que el dise-
ño hipermedia ha aportado, funcionando en el esquema
como pilares centrales. De cada uno de ellos se derivan a
su derecha los componentes esenciales, quedando hacia
la media horizontal del diagrama el concepto temporal
como eslabón entre los dos grandes bloques para mos-
trar también visualmente la evolución del diseño gráfico
en este punto en especial, en el que se pueden encontrar
tanto aplicaciones tradicionales con aspectos temporales
120 | Modelos
-una presentación audiovisual, por ejemplo- como

evoluciones hacia el terreno hipermedia propiamente,
tal como sería el caso de un sitio web.
En un tercer nivel, las categorías muestran sus prin-

cipales derivaciones, que se manifiestan regularmente
en el caso del primer bloque (Forma y Espacio) hacia
los conceptos e ideas del diseño gráfico y en el segun-
do (Acciones y Atributos) hacia las representaciones
propias del diseño hipermedia, al unir estos resultantes
se puede hablar de una solución o propuesta de diseño
gráfico hipermedia ante una problemática de comuni-
cación determinada, al utilizar esta metodología se pro-
mueve el diálogo entre el conjunto de ideas y concep-
tos básicos que sustentan un proyecto y sus expresiones
manifestadas mediante representaciones que tienen
cabida en el entorno hipermedia. Este diálogo lo ela-
bora e interioriza el diseñador gráfico hipermedia y es
la herramienta con la cual genera propuestas creativas
de cara al aterrizaje de una solución puntual de diseño.
Esta versión sintética del modelo pretende ser una vi-

sión clara del conjunto de elementos que se han desa-
rrollado a lo largo de esta investigación y que concluye
con un modelo esquemático y preciso, de fácil entendi-
miento y explicación para poder ser utilizado tanto en
al aula como durante el desarrollo de proyectos.
Estilo
FORMA
DISEÑO GRÁFICO
Grados de abstracción
Variaciones primarias
Textura
Color
Tipografía
ESPACIO
Disposición
Posición
Tamaño
Interrealciones Ideas-Conceptos
Dirección
TIEMPO
Estructura
Manipulación
Transposición
Animación
Representaciones
ACCIONES
Interacción
HIPERMEDIA
Transformación
Información
ATRIBUTOS Metainformación
Programación
Fig 4.3 - Macromodelo de los

“Fundamentos del diseño
gráfico hipermedia”.
122 | Modelos
4.4 MICROMODELO: DESARROLLO

Desde la aparición, hace ya más de treinta
años, del ordenador como herramienta de apoyo para el
diseñador gráfico muchas cosas han cambiado en la labor
de nuestra profesión. La diversificación actual de las es-
pecialidades del diseño es una muestra de los segmentos
resultantes tras la inserción, no sólo de una nueva herra-
mienta de trabajo, sino de un nuevo conjunto de posi-
bilidades de comunicación que se iniciaron a la par del
desarrollo de esta herramienta de manipulación digital.
Ya en la década de los sesenta, diversos grupos acadé-
micos intercambiaban información sobre sus investiga-
ciones del este al oeste norteamericanos, tal como ahora
podemos intercambiar información sobre nuestra em-
presa establecida en América hacia algún cliente poten-
cial en Asia, de manera que hoy en día el común de la
gente tiene a su alcance las posibilidades de comunica-
ción que abren las redes informáticas, interfaces gráficas
y transmisión en tiempo real de datos, pero ¿Cómo ha
enfrentado el diseñador gráfico esta vorágine?; ¿Cuál es
el resultado de esta integración para el diseño gráfico?
La respuesta está a la vista, en miles de sitios de inter-
net, newsletters corporativos enviados por correo men-
En el museo digital de Londres
sualmente, revistas impresas acompañadas online de sus se exhiben galerías de arte formadas
homólogas digitales cargadas con información hiper- por diferentes piezas de diseño gráfico
hipermedia, como en esta galería de Wim
media adicional, la respuesta está en las descargas onli- Crouwel, que trabaja con el diseño y la
animación aplicados a una App para dis-
ne de ebooks, revistas digitales y apps para dispositivos positivos móviles disponible en descarga
móviles que viven una curva de crecimiento incremental. online.
Como muestra están a la vista diversos títulos de vi- https://designmuseum.org/designers/wim-

deojuegos publicados por países que en poco tiempo se crouwel
han colocado a la vanguardia de su diseño: India, Brasil,

Indonesia. Hay sedes como la del Design Museum de
Londres (www.designmuseum.org) que poseen galerías
en línea con colecciones completas de dinámicos dise-
ños, listando logros destacados en esta breve historia del
camino andado por el diseño en el mundo hipermedia.
Frente a este panorama, ¿Porqué regresar a los orígenes

124 | Modelos
del diseño para su revisión fundamental? La respuesta

surge al momento de comparar al hermano grande del
diseño con sus nóveles hermanos digitales, una mirada
superflua a cualquier kiosco de revistas sirve como ejem-
plo: un porcentaje mayoritario de las publicaciones que
podemos encontrar de manera cotidiana integran un di-
seño editorial adecuado, atractivo y maduro, se utilizan
para su elaboración un conjunto de herramientas tecno-
Aunque el sitio de quo.es está saturado de informa-
lógicas pero el resultado no exhibe de manera onerosa su
ción, el impacto visual de la portada en su versión tecnología, más bien, permite expresar correctamente las
impresa nada tiene que ver con la página inicial del
sitio de internet, el intenciones de reporteros, fotógrafos, ilustradores, edito-
traslado de contenidos hace caótico el seguimiento riales y diseñadores dirigidas a un púbico que regular-
de notas y las adiciones multimedia
poco aportan en realidad a la versión en línea de esta mente compra estas publicaciones por su contenido. Si
publicación mensual; los resultados: de esa misma publicación visitásemos el sitio de internet
más de tres residseños en cinco años y estadísticas
de visita que no terminan de ser satisfactorias en o la versión digital de la publicación, en pocas ocasiones
relación a las ventas de la revista.
podríamos hablar de una correspondencia de calidad ade-
quo.es cuada. Lo que le falta comúnmente a estos hermanos pe-
queños es la misma dedicación, formalidad e importancia
que se le da a una pieza impresa con respecto a una digi-
tal, conclusión que suma al tomar como punto de partida
tan un par de las aplicaciones posibles del diseño gráfico
tradicional y su traducción en terrenos hipermedia, a la
izquierda se ejemplifica el sitio web de la revista Quo,
modificado y relanzando en más de tres ocasiones en los
últimos cinco años no termina de encontrar su identi-
dad digital. Otro ejemplo; el servicio online de iTunesU
a pesar de lo visualmente atractivo y el interés académico
El espacio académico de iTunesU es todavía caótico que despierta la visualización de charlas y conferencias
y demasiado complicado para el usuario regular, las
aportaciones tienen calidades dispares y la experien-
de diferentes docentes no logra ser una experiencia que
cia de uso resulta frustrante a menudo. iguale a la publicación de artículos y revistas de divulga-
ción y se pierde en la mar de su inmensidad, con recursos
de calidades dispares y dificultades para navegar, encon-
trar y desplegar la información adecuada a cada usuario.
Estos sencillos ejemplos son una primer muestra so-
bre lo mucho que tiene una disciplina raíz por enseñar
a sus ramificaciones, a lo largo de este capítulo se revi-
sarán muchos más casos prácticos que denotan la im-
portancia de retomar los aspectos fundamentales del
diseño para observarlos bajo la lupa de una perspecti-
va que tiene mucho todavía por definirse; la perspecti-
va hipermedia con las sólidas raíces del diseño gráfico.
4.4.1 Diseño gráfico: definiciones
El capítulo 1.1, al delimitar el objeto de estudio

inicia con un conjunto de aproximaciones a la definición
de diseño, diseño gráfico y un primer aterrizaje hacia su
traslado hipermedia, para concretar la definición de di-
seño gráfico en este apartado se mencionarán algunas
definiciones adicionales que han ayudado a construir
el concepto actual del diseño en su faceta gráfica inte-
grándose a su manifestación en el entorno hipermedia.
Hacia 1920 Dwiggins acuñó el término “diseño gráfico”
definiéndolo como una actividad intelectual, técnica y
creativa involucrada no solamente con la producción de
imágenes sino con el análisis, la organización y los méto-
dos de presentación de soluciones visuales a los problemas
de comunicación, acotando de esta manera la tarea del di-
señador gráfico hacia proveer las respuestas correctas a los
problemas de comunicación visual de cualquier orden en
cualquier sector de la sociedad. Como estudiante de Fre-
deric Goudy durante el cambio de siglo, Dwiggins pudo
ser considerado el último gran remanente del movimiento
de Artes & Oficios, de manera que su definición del dise-
ño va muy asociada a la técnica y se llega a trasladar hacia
el terreno del arte. En las décadas siguientes, la influencia
de la Bauhaus marcará la definición del diseño gráfico de
manera permanente; los conceptos de “coherencia, eco-
nomía y simplicidad” se integran a la naturaleza concep-
tual del diseño, relacionados en todo momento con los
ideales de funcionalidad y belleza. Los movimientos de
vanguardia en los 50 enfatizan el carácter de simplicidad
y la abstracción general de las formas empleadas por el
diseñador; desde la ilustración hasta la tipografía. Entre
las décadas 60 y 70, una doble vertiente mantiene dife-
rencias significativas en las piezas de diseño de la época,
por una parte la continuidad con la simplicidad, unida a la
geometría y el orden como se puede comprobar en el di-
seño de las fuentes tipográficas de Adrián Frutiger (1968)
y en la segunda vertiente, la expresividad y la tendencia
La simplicidad, geometría y orden son representados
orgánica como en los carteles de Wes Wilson (1966). por la fuente tipográfica diseñada por Adrián Fruti-
ger en 1968 para el aeropuerto Charles De Gaulle,
Ya en la década de los ochenta, Jorge Frascara (1988, p. en París.
126 | Modelos
20) habla de la labor del diseñador gráfico como aquella

en la que se trabaja en “la interpretación, el ordenamiento
y la presentación visual de los mensajes.” Unido a esta
definición aporta su experiencia en la comunicación para
recordarle al diseñador gráfico que debe conducirse por
la “efectividad, la belleza y la economía de los mensajes”.
Swann (1990, p. 11) define al diseño gráfico como:
La conjunción de diversos elementos en una misma
área con objeto de lograr una interacción que trans-
mitirá un mensaje dentro de un contexto determina-
do, el mensaje puede comunicarse e incluso modifi-
carse mediante una cuidadosa manipulación visual de
los elementos que van a ser utilizados dentro del área
del diseño.
Como un profesional inmerso en la etapa madu-
ra del diseño gráfico, Swann incorpora elemen-
tos del marketing a la definición del diseño y se-
para por completo la funcionalidad de la estética.
S. De Pietro (2010, p. 22) explica al diseño en una de-

finición forjada a través de los movimientos críticos,
surgidos en situaciones complejas, desde lo económico
y social. Sitúa sus antecedentes entre el “Arts and Cra-
fts”, “L’Art Noveau”, “De Stijl”, el “Constructivismo ruso”,
La “Deusche Werkbund” y el movimiento de la “Bauhaus”
como grandes referencias clásicas; De Pietro conclu-
ye su aportación a la definición del diseño apuntándo-
lo como intrínsecamente vinculado a la innovación, y
considerándolo como la esencia de éste, implicándolo en
la formalización de un producto en forma de prototipo.
En un contexto contemporáneo, y aterrizando en la era

del diseño digital, Bob Gordon (2002, p. 10) habla del
diseño gráfico como el “producto del intelecto creativo
soportado por el uso innovador de sofisticadas herra-
mientas digitales.” Atribuyendo de esta manera un fuerte
peso de nuevo al dominio de la técnica. Lewandowsky y
Zeischegg (2005, p. 6) coinciden en mencionar al objetivo
del diseño como la “transmisión de información visual”;
haciendo hincapié en la selección adecuada del medio de
transmisión de la información, de los elementos a utilizar
y de su correcta disposición. De manera que a lo largo de

las definiciones históricas del diseño podemos encontrar
tres elementos comunes que se mantienen en el tiempo:
• El carácter primordialmente visual del diseño gráfico
• La manipulación de los componentes fundamentales
del diseño a través de herramientas teórico-prácticas
para lograr resultados asertivos
• La intención comunicativa del proceso de diseño
gráfico.
Estos aspectos esenciales han tenido sus propias manifes-
taciones y modas de acuerdo a la época, pero su constan-
cia ha permitido identificar al diseño gráfico como tal y
separarlo claramente de otras áreas de conocimiento que
cotidianamente vinculan al diseño en extremos hacia las
bellas artes y oficios artesanos o su contraparte técnico-
tecnológica de la arquitectura o la producción industrial.
4.4.2 Hipermedia: características
La diversificación de la información es una ca-

racterística de la comunicación actual, la amplia gama de
publicaciones en un kiosco o el zapping de un televidente
lo demuestran de manera instantánea, sin embargo en el
terreno de los hipermedios este proceso llega a su máxima
expresión. Vaughan (2001, p. 190) parte de los multime-
dios para redactar su definición de Hypermedia:
Los multimedios; la combinación de textos, gráficos,
y elementos de audio en una sola presentación, se
convierte en multimedia interactiva cuando se le da al
usuario algún tipo de control sobre lo que va a visua-
lizar y cómo lo visualizará, multimedia interactiva se
convierte en hipermedios cuando el diseñador provee
una estructura de elementos vinculados a través de la
cual un usuario puede navegar e interactuar.
En el terreno hipermedia se generan opciones para el usua-
rio que otros medios no tienen posibilidad de desarrollar,
tal es el caso de la ruptura de la linealidad generada con el
128 | Modelos
empleo del hipertexto, que dio origen a una amplia gama

de aplicaciones y herramientas que poco tiempo des-
pués de su nacimiento se integrarían en los hipermedios.
El inventor de la WWW, Tim Berners Lee (1999), de-

fine este espacio virtual como “una información legible
por los seres humanos vinculada entre sí de manera no
obligatoria”, este concepto trasladado a la diversidad de
mensajes e información mezclados en la multiplicidad
de medios posibles a utilizar en los multimedios interac-
tivos, le confiere a los hipermedios una estructura más
abierta, más cercana las posibilidades de la mente huma-
na en sus complejidades estructurales y aparentemente
aleatorias. Completando la definición del entorno hiper-
media iniciada en el capítulo 1.2.2, hablando sobre los
sistemas hipermedia Moreno, A. (2000, p. 46) menciona
la aproximación arquitectónica que Campbell y Good-
man elaboran en 1988 distinguiendo tres niveles en la
estructura hipermedia:
- La capa superior, o nivel de presentación; formada por
la interfaz de usuario.
- La capa intermedia o nivel HAM (Hipertext Abstract
Machine), que determina el formato normalizado para el
sistema hipertextual, basado en diagramas, contexto, no-
dos, enlaces y atributos.
- La capa inferior o base de datos, que gestiona el al-
macenamiento y el acceso distribuido a la información
almacenada de una manera rápida, eficaz y segura.
La naturaleza abierta de los hipermedios los convierten
en susceptibles de ser enriquecidos y más aún, modifica-
dos de manera continua por el emisor. Lo interesante de
este proceso también es cuando el usuario se convierte en
parte integral del proceso, de manera que puede llegar a
invadir los espacios autorales o a colocarse a un nivel co-
participativo con el autor.
Adicionalmente, la posibilidad de interrelación de los
hipermedios, los enriquece mutuamente, afectándose
entonces unos a otros, de acuerdo a las intenciones de
comunicación del entorno, o de manera combinatoria, un
ejemplo de este enriquecimiento lo constituyen los mo-
tores de búsqueda de internet, los directorios virtuales o

las enciclopedias en línea, que se alimentan y vacían su
información en la propia red.
Joan Costa (Costa, p. 2007) al hablar sobre el lenguaje
específico de internet menciona que:
los medios gráficos, sonoros y audiovisuales tienen su
lenguaje.Pero éste tiene una característica común ya que
todos ellos son unidireccionales, masivos, y la relación
de los individuos con ellos es reactiva, no interactiva.
El lenguaje de internet difiere substancialmente de
estos media, porque su lenguaje es bidireccional: per-
sonal, coloquial, dialogal, conversacional; y el indi-
viduo es actor, no un receptor pasivo. Este cambio
radical del paradigma interactivo, implicaría forzosa-
mente un cambio en los modos de comprar y en el
modo de relación de los consumidores con las marcas
y los productos.
Esta serie de conceptos y apuntes nos sirven para acotar
la implicación del espacio hipermedia en el terreno del
diseño como aquel espacio de comunicación interactiva
en donde el diseñador comparte junto con el usuario/lec-
toautor la experiencia final del diseño y su uso.
4.4.3 Diseño gráfico hipermedia: fundamentos
Los componentes básicos del diseño gráfico han

sido heredados al terreno hipermedia, y sin embargo
este cambio de estado ha sido objeto de poco análisis,
dándose por sentado, generalmente, que la manera de
aplicarse del uno hacia el otro es transparente. Dentro
del terreno hipermedia Frascara (2006, p. 159) prefiere
hablar de “diseño para medios electrónicos” y reflexiona
sobre la importancia de las asignaturas pendientes en
usabilidad e interfaces, en donde “diferentes grupos de-
dicados a factores humanos aplicables a este problema
están trabajando en el desarrollo de criterios de diseño”.
Bonnie Sadler Takach, del departamento de Arte y
Diseño, en colaboración con Jason Daniels y Con-
130 | Modelos
nie Varnhagen del departamento de Psicología de

la Universidad de Alberta, testearon los efectos
del uso de metáforas y textos en sistemas de na-
vegación, en términos de su efecto en la facilidad
de uso y en la memorización de procesos de sitios
web. El trabajo interdisciplinario es indispensa-
ble en este campo, requiere diseñadores que tengan
conocimiento de investigación de campo, así como
psicólogos y otros especialistas en factores huma-
nos que tengan un conocimiento básico de diseño.
Los diseñadores estamos dedicados a la produc-

ción de objetos. Los investigadores, por otra par-
te, son agudos observadores, y conocen sofistica-
dos métodos. Necesitamos crear situaciones en
las que sea posible la integración del diseño con
la investigación, rompiendo la tradicional sepa-
ración que es tan común en las universidades.
Existen lenguajes visuales y convenciones que han
sido desarrollados para explicar visualmente las es-
tructuras de sitios web y CD-ROMs, y los corredores
a seguir en esos ambientes virtuales. Nuevas conven-
ciones de movimiento y representación permiten in-
teractuar usando lenguajes visuales híbridos, desarro-
llados tanto en medios impresos como electrónicos.
En suma, las interfaces en los medios electrónicos de-
ben mostrar claramente los contenidos de sus bases
de datos, la organización jerárquica de sus contenidos
y las herramientas de navegación. En general, deben
permitir que la gente actúe intuitivamente, mirando
y adivinando.
En otra aproximación Ellen Lupton (2012, p. 9) reaccio-
na a la redefinición del diseño en el entorno hipermedia
volviendo a los fundamentos, específicamente retomando
los aspectos esenciales de la Bauhuaus debido a su signifi-
cado universal que aplica de manera ideal a la descripción
del nuevo lenguaje que los proyectos interactivos suponen.
En los próximos apartados se abordan los componentes
primarios del diseño, para revisarlos y analizar con más
detalle su traducción al terreno de los multimedios in-
teractivos, en base a este traslado conceptual surgen diá-

logos hacia la identificación o redefinición de los con-
ceptos mencionados orientados a su aplicación práctica
en proyectos profesionales de diseño gráfico hipermedia.
4.5 COMPONENTES DEL MICROMODELO

Los elementos que componen al micromodelo par-
ten de los aspectos fundamentales en torno a los cuales son
aterrizadas la mayor parte de las teorías básicas del diseño
gráfico: la forma y el espacio, aspectos primarios con los que
el diseñador ha trabajado desde la aplicación práctica de las
artes y oficios hasta las tendencias actuales en la materia.
En un siguiente plano, el tercer componente a revisar; el
tiempo, es el integrante que comparte aspectos abordados
tradicionalmente en el diseño de aplicaciones multimedia
y ha incrementando su importancia conforme se aproxi-
ma al diseño en sus vertientes interactivas. Finalmente,
ya asentados en el terreno hipermedia los componentes
esenciales de acciones y atributos completan la propues-
ta del modelo y profundizarán en las áreas que esta in-
corporación involucra para las posibilidades del diseño.
4.6 FORMA
María Acaso (2006, p. 54) define una clara apro-
ximación a la forma entendida en el contexto del lengua-
je visual, explicándola como la “determinación exterior
de la materia, o los límites exteriores del material visual”.
Mediante el empleo de la forma y espacio, el diseño
gráfico es traducido al plano físico bidimensional o tri-
dimensional; el empleo de las propiedades espaciales
de longitud, anchura y profundidad permiten modi-
ficar las unidades mínimas del diseño; por ejemplo el
punto, al modificarle sus propiedades físicas, puede ser
transformado en líneas, superficies o volúmenes; ele-
mentos constitutivos de la composición como objetivo.
132 | Modelos
Para emplear la forma es necesario identificar sus diver-

sas manifestaciones, una manera de hacerlo es a través
de sus representaciones históricas, mediante esta práctica,
además, se puede identificar un patrón reiterativo en el
que el ciclo de la abstracción y el realismo se suceden y
dan origen a los diversos grados taxonómicos que el di-
seño emplea en la práctica para generar comunicación.
El uso de formas realistas, permite la clara comuni-

cación de los mensajes corporativos, dejando poco
margen para dudas y confusiones, es útil especial-
mente en el caso de conceptos poco claros o suscep- 4.6.1 De lo realista a lo figurativo
tibles a interpretaciones y en el caso de un catálogo
de productos como el de Swatch; imprescindible.
swatch.com Sergio Bermejo (1980, p. 27) habla sobre la

evolución de la forma en sus ciclos de desarrollo his-
tórico, haciendo un recuento de sus etapas desde:
el mimetismo y descriptivismo de las formas de la
naturaleza, pasando seguidamente por el expresionis-
mo formalista -i.e. románico, gótico y romanticismo-
para desembocar en el humanismo moderno de crea-
ciones absolutamente funcionales y mecánicas.
El resultado de éste proceso histórico desemboca en la
posibilidad de trabajar con la forma en el diseño median-
te diversos grados de realismo, desde la aproximación más
cercana a la visión como en el caso de una fotografía, de-
rivando hacia ilustraciones y bocetos claramente realistas.
La utilización de formas realistas en el diseño gráfi-
co hipermedia generalmente va asociado al impacto
visual y a la contundencia de los mensajes. Una ima-
gen realista lleva un mensaje cercano a nuestra expe-
riencia espacial y puede comunicar claramente el men-
saje a expresar si es empleada de manera adecuada.
El Camino de lo realista a lo figurativo va restando

4.6.2 De lo figurativo a lo abstracto
elementos a la forma e incorpora estilos cargados de
significación. Los mensajes pueden ser claros, pero
su evidencia va cargada de significantes resultantes
de la manipulación de los elementos.
La evolución histórica de la representación no se
mikeymccleary.com
detiene en lo figurativo, la transformación de la forma
desde lo figurativo hacia lo abstracto sigue un largo cami-
no en la historia, desde el cisma con el arte en la revolu-

ción industrial, pasando por la búsqueda de caminos du-
rante los siglos XIX y XX en las gráficas populares, hasta
el movimiento de las artes y oficios y hacia el Art Noveau
y los ismos de la época moderna. Los estilos formales se
suceden dando origen a un amplio abanico de estilos y
representaciones que culminan con la abstracción de la
imagen conceptual y el diseño posmodernista en la era de
la revolución digital. La abstracción de formas hacia lo
La manipulación de las formas en
figurativo incorpora gradualmente el elemento concep- la transición de lo figurativo hacia
tual, que enriquece las posibilidades comunicativas de un la abstracción permite la introduc-
ción de aspectos estéticos de la
proyecto hipermedia; eliminando o agregando elemen- forma muy particulares y origina-
tos de manera selectiva el diseñador gráfico enfatiza las les, colaborando a la transimsión
de estilos e identidad y comuni-
intenciones a comunicar durante la elaboración de las cando mensajes de gran complejidad.
distintas propuestas que desarrolla. Adicionalmente, el elusivetuesday.com
terreno digital, rico en aplicaciones de manipulación de
la imagen permite ir sumando modificaciones que parten
de lo icónico y mediante la suma o resta de elementos
evoluciona la imagen inicial de acuerdo a las necesidades - El simbólico. Con una amplia gama de posibilidades este nivel va desde la versión simplificada de
imagen hasta la atribución compleja de un sistema de significados, como en el caso del alfabeto.
de comunicación del proyecto.
4.6.3 Grados de abstracción

- El simbólico. Con una amplia gama de posibilidades este nivel va desde la versión simplificada de la
imagen hasta la atribución compleja de un sistema de significados, como en el caso del alfabeto.
TresTres
grados
grados dedeabstracción
abstracción dede la forma
la forma se identifican
se identifican claramente en cada uno de los sitio
claramente en cada
ejemplificados; uno de los sitiosel ejemplificados;
en www.ideiadelas.com empleo de formas representacionales permite
en www.pizzerialastazione.it
identificación del público meta con el empleo
el sitio de formas
de internet, en www.verat.it la interfaz de ele-
representacionales
mentos abstractos permite permite la visualizar
al usuario identificaciónclaramentede diversos
la elementos en un ento
clientela
no complejo con los productos
y recargado en el sitio
de información; de internet,
finalmente la abstracción simbólica de element
enenwww.verat.it la interfaz de permite
el sito de www.zubvector.com elementos abstractos
la manipulación de los componentes de la inter
permite
faz para laaltransmisión
usuario visualizar
de complejosclaramente diversos
conceptos visuales.
elementos en un entorno complejo y recargado de
información; finalmente la abstracción simbólica de
elementos
2.2.1.4 Lo el sito deenwww.zubvector.com
ensimbólico la abstracción permite
la manipulación de los componentes de la inter-
“La abstracción hacia el simbolismo requiere de una simplicidad última, la reducción del detalle vis
faz para la transmisión de complejos
conceptos
al mínimo irreductible. Un símbolo para ser visuales.
efectivo, no sólo debe verse y reconocerse, sino tambié
recordarse y reproducirse.” Wong (2004: 88).
Tres grados de abstracción de la forma se identifican claramente en cada uno de los sitios La traducción de un elemento visual desde lo figurativo hacia lo abstracto no siempre es un camino
ejemplificados; en www.ideiadelas.com el empleo de formas representacionales permite la fácil, pero cuando se logra de manera adecuada el resultante es una imagen muy rica conceptualmen
identificación del público meta con el sitio de internet, en www.verat.it la interfaz de ele- y que a pesar de su gran carga comunicativa, visualmente tiene una expresión de gran sencillez.
mentos abstractos permite al usuario visualizar claramente diversos elementos en un entor-

134 | Modelos
A efectos prácticos, la clasificación

de Wong (2004) para los grados de abstracción es parti-
cularmente útil, Wong propone una taxonomía que parte
de la asociación conhttp://www.culinor.com/
la pintura y escultura del siglo XX,
pero contempla las posibilidades
La abstracciónde icónica
la formabien
de acuerdo
eje- a
su función, dividiendo los múltiples
cutada niveles de
va acompañada deexpresión
visual en tres grupos principales:
simplicidad y sencillez; la inter-
- El representacional.fazComo el nivelresulta
hipermedia más eficaz y detalla-
benefi-
do en la transmisión de información, este nivel es un in-
ciada de estos atributos y la
forme realista de lo que percibimos a través de la visión.
usabilidad de la pieza se
- El abstracto. Nivel de exploración y experimen-
maximiza.
tación, con una naturaleza de libertad que per-
http://www.culinor.com/
La abstracción icónica bien eje-
mite abordar la expresión visual y el trabajo de
cutada va acompañada de
las yideas
simplicidad sencillez; asociadas
la inter- a la reproducción gráfica.
faz hipermedia resulta benefi-
- El simbólico. Con una amplia gama de posibilida-
ciada de estos atributos y la
des deeste
usabilidad nivel
la pieza se va desde la versión simplificada de
2.2.1.5 Variaciones primarias de lamaximiza. la imagen hasta la atribución compleja de un sis-
forma:
tema de significados, como en el caso del alfabeto.
Esabstracción
La el aspecto de individualidad
icónica de los elementos, reconocible a la vista, de acuerdo a sus variaciones
bien ejecutada va acompa-
ñada de simplicidad y sencillez; la interfaz hiper-
media resulta los
primarias beneficiada
podemos de estos atributoscomo:
encontrar y la
usabilidad de la pieza se maximiza.
2.2.1.5 Variaciones primarias de la forma:
culinor.com
• Redondo, suave 4.6.4 Lo simbólico en la abstracción
Es el aspecto de individualidad de los elementos, reconocible a la vista, de acuerdo a sus variaciones
primarias los podemos encontrar como:
• Angular, agresivo La abstracción hacia el simbolismo requiere
• Redondo, suave de una simplicidad última, la reducción del detalle
•agresivo
Dentado, inestable visual al mínimo irreductible. Un símbolo para ser
• Angular,
efectivo, no sólo debe verse y reconocerse, sino tam-
• Dentado, inestable
• Difuso, indefinido bién recordarse y reproducirse Wong (2004, p. 88).
• Difuso, indefinido La traducción de un elemento visual desde lo figurati-
• Concreto
• Concreto vo hacia lo abstracto no siempre es un camino fácil, pero
cuando se logra de manera adecuada el resultante es una
imagen muy rica conceptualmente y que a pesar de su gran
Variaciones primarias de la forma.
Mediante el correcto empleo de las propiedades específicas de la forma de acuerdo a sus variaciones primarias podemos establecer pará-
metros básicos para el tipo de imágenes o iconos que deben ser empleados dentro de la interfaz; desde lo geométrico hacia lo orgánico,
recorriendo un camino que puede terminar en formas muy concretas para ejecutar interfaces simbólicas o textuales.
Variaciones primarias de la forma.
La selección del tipo de forma a emplear tiene un

impacto directo en la lectura de las imá-
genes y el contenido de un proyecto hipermedia,
en los ejemplos anteriores se han utiliza-
do formas suaves (www.pejola.com), angulares
(www.insidepiet.com), difusas
(www.unowhy.com/) y concretas (www.andreas-
saxer.com) ; cada una de ellas contribuye a co-
carga comunicativa, visualmente tiene una expresión de municar mensajes particulares y les alínea con las
gran sencillez. En el entorno hipermedia la velocidad de intenciones expresivas para cada uno de
éstos sitios de internet.
transmisión del los mensajes es una de las prioridades; ve-
locidades de conexión, saturación de contenidos o la am-
plia gama de ofertas informativas son sólo algunos de los
componentes que enfrentan a los diseñadores con la nece-
sidad de impactar a la vez que comunicar de manera clara
y directa; la abstracción en este sentido es una de las herra-
mientas que cobran mayor relevancia para lograr la tarea.
4.6.5 Variaciones primarias de la forma
Es el aspecto de individualidad de
los elementos, reconocible a la vista, de acuerdo a sus
136 | Modelos
variaciones primarias los podemos encontrar como:
• Redondo, suave
• Angular, agresivo
• Dentado, inestable
• Difuso, indefinido
• Concreto.
4.6.6 Estilos expresivos de la forma
Al evolucionar las formas hacia va-

riaciones más complejas, podemos identificar estilos que
tienen características propias y que en determinados mo-
mentos han marcado la pauta de los elementos a utilizar
en una composición, aunque las taxonomías de la expre-
sión de la forma son muy variadas, algunos de los siste-
mas más utilizados dentro del diseño basan su aproxima-
ción en la definición de pares opuestos, así tenemos los
El contraste de estilos expresivos a menudo apoya
las metas de comunicación de un proyecto hiper-
contrastes simultáneos de Bruno Munari (1993, p. 131),
media, en el caso de este ejemplo su contrapo- que le otorgan expresión a la forma mediante su diferen-
sición de elementos realistas y figurativos realza
las fotografías, limpia la interfaz y provee de un ciación.
espacio lúdico para el recreo del usuario.
jobysessions.com
Grande Pequeño
Grueso Delgado
Creciente Decreciente
Suspendido Apoyado
Normal Insólito
Real Aparente
Vacío Lleno
Estrecho Ancho
Continuo A Trozos
Liso Rugoso
Un conjunto de sitios ejemplifica el uso de contrastes

simultáneos. Del contraste de texturas
rugosas vs. lisas en el sitio de www.furrypuppet.com
al contraste de elementos sintéticos
vs. naturales en www.tensheep.nl. En la línea inferior se
puede apreciar el contraste simul-
táneo de elementos obscuros vs. elementos claros en
www.senseidj.com y el contraste de imá-
genes reales vs. la imagen aparente de
www.taxistudio.co.uk
Claro Obscuro
Vertical Horizontal
Paralelo Cruzado
Ligero Pesado
Preciso Vago
Cóncavo Convexo
Redondez Angularidad
Sólido Líquido
Natural Sintético, Etc.
138 | Modelos
Otro conjunto de expresiones de la forma viene here-

dado de aproximaciones artísticas, que han dotado a la
forma y sus manifestaciones de particulares estilos, entre
ellas:
• Formas Primitivas, rasgos rescatados de las pri-
meras manifestaciones artísticas humanas, desde
el simbolismo religioso en las cuevas de Altamira,
hasta los geométricos trazos de las figuras textiles
Incas. También atribuidos a los primeros trazos
en la etapa de desarrollo infantil.
• Clásicas, haciendo referencia a los cánones griego
y romano este tipo de formas toman su expresión
de los modelos artísticos históricos para su cons-
trucción y justificación.
• Embellecidas, decoradas, formas ampliadas y en-
riquecidas mediante la adición de elementos or-
namentales.
• Expresionistas, donde los rasgos formales buscan
promover la manifestación emotiva
• Abstractas, Reduciendo las formas a su esquema
esencial, buscando la expresión máxima con el
mínimo de elementos.
Las texturas visuales se traducen en sensaciones

percibidas por el usuario, los elementos de frescura 4.6.7 Textura
y limpieza son aprovechados en este sitio (www.
christinalauer.net) para reforzar los principios bajo
los cuales se rige la diseñadora de este espacio. La textura es el carácter más super-
ficial de los elementos de diseño, ya sean bidimensio-
nales o tridimensionales, es la expresión de su aparien-
cia y mediante su manipulación se pueden estructurar,
dimensionar y construir los elementos para articular el
espacio y buscar la generación de superficies y planos. La
textura añade riqueza y dimensión a la forma. Lewan-
dowsky (2005, p. 122) explica que hay tan sólo un paso
mínimo de la luminosidad a la estructura y a la textura,
pues para ser exactos, la luminosidad se expresa en la
textura. La representación en pantalla de una imagen
que contenga valores tonales se expresa en píxeles de lu-
minosidad diversa; en otras palabras nos enfrentamos a
una estructura de píxeles. Si se imprime la imagen, los
valores tonales se convierten en un patrón de medios to-

nos o una estructura de puntos. En las formas bidimen-
sionales, las fronteras entre estructuras y texturas pueden
resultar poco claras puesto que, a fin de cuentas, la textura
original se convierte en una superficie plana al pasar por
el escaneado o cualquier otro proceso de reproducción.
Podemos hablar de texturas táctiles u ópticas: naturales o

mecánicas. Puede ser ordenada, en la que identificamos
tramas que modulan racionalmente el espacio, o caótica,
desordenada en formas al azar.
Las texturas aportan elementos de sensibilización y con-

tribuyen a hacer diferenciaciones figura-fondo. Los pa-
trones son una clase de textura visual que tiene especial
interés para el diseño gráfico, se logra al repetir un módu-
lo compuesto por uno o varios elementos, creando ritmos,
luces y sombras o dimensión a la superficie.
Entre la diversidad de texturas que podemos encontrar

en el mundo físico y que registramos de manera táctil po-
demos mencionar algunas de las colecciones registradas
en la “Tabla Táctil” de Moholy-Nagy (1963) a manera de
ejercicio sensorial: Orgánico, uniforme, disgregable, esta-
ble, poroso, sintético, artificial, intrincado, tejido, agrieta-
do, pedregoso, permeable, áspero, oxidado, impermeable,
suave, espinoso, húmedo, documental, suave, oscuro, ar-
quitectónico, agitado.
4.6.8 Color
Entrar en el terreno del color es lle-
gar a un vasto universo de esquemas y teorías, el diseña-
Las paletas de color basadas en los sistemas RGB -Red, Green, Blue- (izq.) y HSB -Hue, Saturation, Balance- (der.)
definen los sistemas de color más empleados en el entorno hipermedia.
140 | Modelos
dor gráfico a lo largo de su carrera estudia en profundidad

diversos modelos y experimenta cotidianamente con lu-
ces y pigmentos cargados de color. El espacio hipermedia
acota sin embargo, el empleo de los modelos de color a
aquellos fundamentados en el uso de la luz, pues su mani-
festación final se verá visualizada mediante el empleo de
proyecciones, monitores o pantallas de algún tipo.
La agencia D10studio hace uso de una paleta

En el terreno de los colores luz, el sistema fundamental
monocromática a favor de una imagen sólida y para su comprensión y manejo es el modelo RGB, acróni-
consistente.
mo de las siglas en inglés Red, Green, Blue y que descom-
d10studio.com.mx pone el color en este espectro que al combinarse resulta
en luz blanca. El sistema RGB está incorporado en la
mayoría de los programas informáticos de manipulación
de imagen y sus valores se expresan en una escala que va
del 0 (negro) al 255 (blanco), este modelo se apoya en las
dimensiones del color para describir adecuadamente los
colores resultantes, estos tres aspectos o dimensiones se
describen en el modelo HSB -Hue, Saturation, Bright-
ness-, establecido por Munsell en la década de 1920, y
que conforma el primer modelo tridimensional del color,
empleado hoy día por la facilidad intuitiva de uso, sus
componentes se definen de la siguiente manera:
i. Clave cromática (Hue), se describe como la longi-

tud de onda determinada que resulta en un tono o
matiz específico, de manera que podemos separar
claramente un rojo de un anaranjado. Su valor es
definido en el perímetro de una circunferencia con
valores expresados en grados del 0 al 359, iniciando
en el grado 0 con el matiz rojo.
ii. Saturación (Saturation), es el grado de pureza

del color, presente en una tonalidad determinada
expresado en valores del 0 al 100% en donde 0%
es la ausencia de color y el 100% es una saturación
completa.
iii. Luminosidad (Brightness), de acuerdo a la can-

tidad de luz un color se puede atenuar la luz si es
que hay una luminosidad muy acentuada y se puede
obscurecer si la ausencia de luz se pronuncia. Estos
valores se expresan también en un porcentaje del 0
al 100, en donde 0% es la ausencia total de lumino-

sidad y el 100% es la presencia lumínica máxima.
Estos dos modelos de color ayudan a comprender la

manera en que es posible seleccionar tonalidades y va-
riar sus aspectos para otorgarles luces, sombras y pro-
fundidad.
Estas herramientas ayudan al diseñador a seleccionar

colores específicos y a normalizar su uso en las diferen-
tes aplicaciones hacia las que sea emigrado un determi-
nado valor cromático, de manera que su expresión sea lo
más exacta posible.
Otro modelo muy utilizado en los sistemas digitales es

el propuesto por Richard Hunter en 1942, su modelo
Lab combina la teoría del color de Munsell con una
teoría de color basada en oposición de contrarios, de
manera que la “L” de Lab representa el valor del brillo,
desde negro hasta el blanco, donde, en un modelo tridi-
mensional ocupa la vertical, los valores a y b forman una
circunferencia en torno a esta vertical con valores en “a”
de rojo a verde y en “b” de azul a verde.
Al empezar a utilizar colores y combinarlos, el diseñador

se enfrenta a los primeros problemas de la teoría del co-
lor: ¿Qué tonalidad utilizar?, ¿Cuántos colores es mejor
emplear?, ¿Cómo combinarlos entre sí?, ¿Qué colores
son compatibles?, ¿Qué resultados se pueden esperar de
las diferentes combinatorias?
Siendo estas interrogantes cuestiones que se han abor-

dado desde los primeros experimentos con la manipula-
ción del color, podemos tomar ventaja de los resultados
arrojados por las combinatorias desde los experimentos
con pigmentos de Goethe (Ed. 2009) hasta la revisión
posterior de diseñadores como Hideako Chijiiwa (1987)
o Tina Sutton (2004) que aplican y expanden de manera
práctica estos conceptos en diferentes modelos de armo- Dos tonalidades analógicas generan armónicos
contrastes en la sede de Resatlantico
nías de color aplicados a la creación de paletas tonales resatlantico.pt; Empleando una paleta de colores
con multiplicidad de valores y connotaciones. complementarios, el restaurante Pho Grill, www.
pho-grill.com destaca inmediatamente y genera a
los pocos segundos de visita una imagen distintiva;
El conjunto de matices seleccionados en el sitio de
www.multiways.com, parte de una armonía triaxial,
lo que produce un resultado de contraste extremo.
142 | Modelos
4.6.9 Armonías de color
Desde la división del espectro en sie-

te colores descrita por Newton (Ed. 1947), la clasifica-
ción y nomenclatura de las diversas gamas cromáticas ha
tenido como finalidad por una parte, entender mejor éste
proceso de la naturaleza, pero también al esquematizar
facilitamos la manera en que podemos utilizar los con-
ceptos, de ahí que ya con los primeros diagramas de color,
se concluyan maneras de combinar las tonalidades que se
ubican distribuidas a lo largo del espectro.
La rueda de pigmentos del Renacimiento estaba basada

en el sistema sustractivo, con las tonalidades roja, amarilla
y azul, combinados entre sí para formar los colores secun-
darios y combinados de nuevo para incluir a los terciarios,
Equilibrando el contraste complementario median-
con un total de doce colores esta rueda no resultaba muy
te el peso visual, en la sede virtual de adecuada para la combinación partitiva y era necesario
www.augustea.com se suaviza aún más el efecto
mediante el uso de tonalidades análogas para agregar el verde como cuarto primario. Albert Munsell
conseguir un resultado más equilibrado. Una (1858-1918) en el siglo XX mejora este esquema agre-
armonía complementaria bien seleccionada puede
traducirse en una paleta cromática que apoye a la gando un quinto primario, el violeta.
identidad de un sitio de internet, como se demues-
tra en www.lizwolfe.com, que siendo un espacio El resultante final de la evolución de los esquemas cro-
fotográfico, se apoya en este tipo de contrastes
complementarios para enfatizar los efectos de sus máticos es el estudio de sus componentes de los cuales se
imágenes.
extraen las armonías cromáticas que el diseño gráfico ha
incorporado como parte de su teoría del color:
i. Armonía monocromática: Selección de una to-

nalidad única, con variaciones en la saturación y
luminosidad. Este tipo de armonía, produce imá-
genes sofisticadas y suelen dominar las tonalidades
oscuras para equilibrar la composición, sin embar-
go se corre el riesgo de resultados monótonos.
ii. Armonía complementaria: Dos tonalidades que

se encuentran en puntos opuestos de la rueda cro-
mática -i.e. rojo y verde-, ese tipo de armonía ge-
nera fuertes contrastes y posee tonalidades que se
diferencian de manera acentuada en peso, tempe-
ratura.... por lo que es necesario equilibrarlos en
cantidades desproporcionales o realizando varia-
ciones en la saturación y luminosidad.
iii. Armonía análoga: Dos o más tonalidades que se

encuentran de manera adyacente en la rueda cro-
mática -i.e. amarillo y verde limón-, este tipo de
armonía posee tonalidades balanceadas aunque ge-
neralmente una de ellas predomina.
iv. Armonía triaxial: Tres colores espaciados de ma-

nera uniforme alrededor de la rueda cromática -i.e.
amarillo, magenta y cyan-, este tipo de armonía
produce brillantes contrastes por o que suelen em-
plearse las armonías triaxiales basadas en las tona-
lidades secundarias o terciarias.
v. Armonía complementaria-análoga: Se utilizan

colores complementarios pero de alguna de las dos
tonalidades se seleccionan sus análogos, este resul-
tado provee menos contraste, suavizando los resul-
tados de la selección cromática.
vi Armonía doble complementaria: Utilización de

dos pares de tonalidades complementarias situadas
en puntos opuestos de la rueda cromática.
vii. Armonía complementaria tetraxial: Armonía

doble complementaria consistente en cuatro tona-
lidades equidistantes entre sí.
4.6.10 Esquemas de color
Los esquemas de color son un con-

junto de tonalidades acotadas por características cromá-
ticas ya sean de brillo, saturación o contraste; al agrupar-
las es posible utilizarles de manera puntual y particular
o combinarlas para lograr resultados novedosos. El esta-
blecimiento de esquemas de color apoya las característi-
cas compositivas de una paleta cromática determinada,
afectando considerablemente las posibilidades de diseño, La selección de un esquema de colore cálidos
afecta a la atmósfera que se crea en un sitio web,
la selección de un esquema de color determinado puede tal es el caso del sitio de www.mwk.pt que ajusta la
influir en las percepciones espaciales; afecta los aspectos paleta cromática a las emociones de sus usuarios,
generado contrastes personalizados de acuerdo
de equilibrio y proporción; enfatiza o neutraliza los ele- a la respuesta por parte del visitante en una sola
pregunta inicial.
mentos empleados y unifica los aspectos compositivos.
144 | Modelos
i. Esquema de colores cálidos
La gama de colores que va del rojo al amarillo, incluyendo

tonalidades anaranjadas, marrones y violáceas, son agru-
padas dentro del esquema de colores cálidos. De hecho la
vibración de onda del color rojo se acerca mucho a la de
la radiación infrarroja que transmite el calor. Los colores
cálidos son brillantes y agresivos, atraen la vista humana y
nuestras emociones. Regularmente se usan para llamar la
atención dando resultados alegres y exuberantes.
ii. Esquema de colores fríos
La gama de tonalidades del verde al violeta, incluyendo

azul y sus sombras de gris, son agrupados dentro del es-
quema de colores fríos, con el efecto opuesto a los colores
cálidos, las tonalidades frías tranquilizan el metabolismo
humano, pueden llegar a parecer obscuras y opresivas
pero a menudo incitan a una atmósfera positiva y fresca.
iii. Esquema de colores suaves
Las tonalidades de color con baja saturación y alto bri-

llo se agrupan en el esquema de tonalidades suaves, su
carácter etéreo recrea con facilidad atmósferas fantásti-
cas. Este tipo de tonos son utilizados frecuentemente por
los diseñadores de interiores y son populares en la moda,
para su uso en los hipermedios a menudo es necesario
combinarlos con un tono contrastante para dar el efecto
llamativo necesario. Sin embargo un esquema basado en
tonalidades suaves puede llamar la atención en un entor-
no saturado por colores brillantes y llamativos.
iv. Esquema de colores obscuros
Cuando los colores llevan un alto porcentaje de negro en

su composición y una alta saturación, se les puede agrupar
dentro del esquema de tonalidades obscuras, colores fuer-
tes y sólidos, asociados a menudo con la industria, la rea-
Un esquema de colores oscuros para las tona- leza y los altos cargos tienen un aura de poder y dignidad.
lidades del fondo contrasta con el esquema de Este esquema se emplea a menudo en la ropa formal y en
tonalidades vívidos seleccionados para elementos
puntuales, el efecto de figura-fondo se enfatiza y mobiliario de alta calidad. En diseño se emplean este tipo
los visuales tienen un impacto acentuado para el de colores como acento, destacando mensajes particulares,
visitante de este sitio web.
combinándolo con tonos más suaves y convencionales.
bacardi.com
v. Esquema de colores vívidos
Los colores vívidos tiene una alta saturación y a menudo

no se contaminan de otras tonalidades, tienen una per-
sonalidad fuerte y al combinarlos se puede producir un
efecto de cacofonía, juntos se utilizan en juegos infantiles
y restaurantes de comida rápida, su efecto de saturación
cansa rápidamente la vista y hace perder su inicial llama-
da de atención.
vi. Esquema de colores apagados
Al agregar gris a una tonalidad de saturación media, el

color se apaga, así como su personalidad, resultando un
esquema de colores vagos y difusos, que recrean ambien-
tes borrosos y difuminados. Los colores apagados pueden
ayudar a reducir la tensión y pueden traducirse en tonali-
dades meditativas e imaginativas.
vii. Esquema de colores impactantes
La combinación de colores primarios y secundarios de

alta saturación produce un esquema de alto impacto, en-
tre ellos el rojo y sus tonos próximos, sus combinaciones
se usan en señalización para llamar la atención y destacar
de su entorno. Este esquema contrasta armónicamente
con un esquema de tonalidades obscuras destacando aún
más sus propiedades al combinarlos.
viii. Esquema de colores tranquilizadores
La combinación de colores fríos de bajo contraste y sa-

turación crea un esquema de propiedades naturales, tran-
quilizador y moderno. Este tipo de esquemas atraen por
su familiaridad y carácter expansivo. Este tipo de esque- La utilización de un esquema de colore excitantes
afecta a la atmósfera que se crea en un sitio web,
ma acentúa las propiedades de formas curvas y otorga la tal es el caso del sitio de www.mah.com.sg que me-
pausa justa para una prolongada contemplación. diante tonalidades rojas y contrastadas demuestra
el dinamismo del motociclismo. Un esquema de
colores naturales reproduce tonalidades relacio-
ix. Esquema de colores excitantes nadas con aspectos tranquilizadores y armónicos
que minimizan la inquietud del acercamiento a
Contrastando colores de gama roja con inusuales tona- una clínica (clinicario.pt) el empleo de esta paleta
de color favorece la aproximación de los usuarios
lidades secundarias como amarillo-anaranjado, verde y acentúa visualmente los contenidos. El uso de
pálido, morado o magenta, se obtiene un esquema que esquema de colores impactantes aunque sólo
sea en uno de los elementos como es la fotogra-
provoca excitación por el choque de sus tonos, resaltando fía principal del sitio de www.dcdecorators.com
propiedades de movimiento y tensión, características que provoca de inmediato un área destacada que llama
la atención y atrae la vista.
146 | Modelos
se acentúan con la vibración que poseen los colores en

pantalla.
x. Esquema de colores naturales
Un esquema de colores naturales incluye una compleja

combinación de tonos terciarios que al unirse pueden pa-
recer un poco apagados y estáticos, por lo que a menudo
se introduce un tono un poco más brillante para equili-
brar la composición.
xi. Esquema de colores juveniles
A pesar del cambio constante de la moda existe un con-

junto de tonalidades que se pueden agrupar dentro del
carácter juvenil, aquellos tonos que salen de la saturación
y el brillo medio para colocarse en combinaciones más
bien extremas; contrastes muy brillantes o extremada-
mente pálidos, energía de contrastes primarios o mono-
tonía total de blancos y negros. En resumen conjuntos de
colores que destacan y otorgan personalidad individual
por su propio uso destacado.
xii. Esquema de colores femeninos
Es imposible hacer una categorización exclusiva de un

esquema de tonalidades femeninas, sus características
vienen definidas por convenciones sociales; las tempora-
das de moda cambian de color una tras otra y seleccionan
La saga de apps y juegos de Angry Birds, se apoya en una paleta cromática consistente que se identifica claramente desde los iconos de la
aplicación hasta los personajes y entornos de los videojuegos. Utiliza armonías complementarias y esquemas tonales juveniles, con colores
vívidos e impactantes que le dan fuerza y diversión a los dibujos. Las propiedades denotativas de saturación e iconicidad cromática apoyan
el uso de esta paleta en un conjunto muy amplio de medios digitales e impresos.
el tono vinculado a la feminidad de acuerdo a sus propias

conveniencias. Pero el carácter femenino se puede apre-
ciar en detalles recurrentes; contrastes intensos suelen
evitarse a favor de contrastes menos acentuados en to-
nalidades adyacentes. Cuando son combinados diferentes
grupos de colores el valor de luminosidad tiende a per-
manecer similar, la neurociencia está intentando clarificar
estas convenciones (Purves, 2001).
xiii. Esquema de colores sorpresivos
Lo que define el carácter sorpresivo de un esquema de

color es su originalidad en comparativa al entorno en el
que es empleado. De inicio este tipo de combinaciones
pueden provocar extrañeza y rechazo, pero esa es también
la clave de su éxito. Se puede empezar con un esquema
alejado de la naturaleza, y posteriormente utilizar combi-
naciones en luminosidad o saturación poco comunes.
4.6.11 El color en el contexto de la comunicación
Al emplear el color como elemento

expresivo en el diseño gráfico, lo dotamos de intenciones
que ayudan a comunicar los contenidos del cliente filtra-
dos a través de las habilidades cromáticas del diseñador,
para ello se emplean diferentes contextos de color.
i. El color denotativo
Cuando el color es utilizado como representación de la

figura, es decir, incorporado a imágenes realistas como la
fotografía o la ilustración de manera que podemos hablar
del color como un atributo realista para un entorno na-
tural de figuras u objetos. En el color denotativo se pue- El color logra comunicar de diversas maneras al
emplear las paletas cromáticas en contextos espe-
den encontrar tres subcategorías; color icónico, saturado y cíficos, en el caso de la joyería Bayco www.bayco.
fantasioso, pero su relación forma-iconicidad debe man- com el uso denotativo de los colores permite real-
zar las piezas que fabrican y ayuda a que el usuario
tenerse constante y reconocible. pueda identificarlas en su contexto claramente;
en contraparte el uso de tonalidades saturadas
ii. El color denotativo icónico dota de expresividad y apoya el carácter narrativo
de www.vectordefenders.com, y en el caso del
sitio de www.insiemeperibambini.it una paleta de
En este caso la expresividad cromática ejerce una fun- colores icónicos ayuda a generar una consistente
ción de aceleración identificadora; un cielo de color azul, identidad visual y a destacar los elementos mas
importantes de la interfaz.
148 | Modelos
Algunas de las Apps mas exitosas se apoyan en el

uso consistente de paletas cromáticas para lograr
identificarse claramente de entre el vasto universo un follaje de color verde, una manzana roja, El color se
de opciones en las tiendas online, tal es el caso de comporta como elemento esencial de la imagen realista
Vine que se apropia de una paleta monocromática
y realiza combinaciones con tonalidades vibrantes aportando información que enriquece el efecto de la rea-
y juveniles para contrastar dentro de la interfaz. lidad permitiendo una rápida verificación de la identidad
de los elementos.
iii. El color denotativo saturado
El color saturado exalta la realidad, transformándose en

pregnancia. El color saturado es un resultado de la com-
petitividad de las imágenes y busca resolver de una mane-
ra cromática el enfrentamiento de las formas creando un
espectáculos visual hiperbólico en el entorno cotidiano.
Aplicaciones que van desde el cine y la fotografía hasta el
diseño de carteles y embalajes utilizan este recurso para
exaltar las propiedades visuales a comunicar y dirigir la
atención del espectador hacia su eufórico mensaje.
iv. El color fantasioso
La manipulación cromática de carácter realista provoca

una forma expresiva renovada, en la que la representación
se torna fantasía. La forma permanece, pero el color se
altera de manera que en ocasiones la forma queda irreco-
nocible tras la expresividad cromática. La manipulación
del color en las obras impresionistas de Monet transfor-
Los estudios psicológicos de Wright (1995) arrojan interesan- Azul- positivo: inteligencia, comunicación, verdad, eficacia,
tes indicativos sobre el uso del color de acuerdo a su carácter serenidad, deber, lógica, tranquilidad, reflexión y calma; ne-
emotivo y social. gativo: frialdad, reserva, falta de emoción y hostilidad.
Gris- positivo, neutralidad psicológica; negativo: falta de se- Rojo- positivo: valor físico, fuerza, calidez, energía, instinto de
guridad, desaliento, depresión, hibernación y falta de ener- supervivencia, combate o huida, estimulación, masculinidad
gía. y emoción; negativo: desafío, agresión, impacto visual y ten-
Marrón- positivo: seriedad, calidez, naturaleza, temperamen- sión.
to práctico, confianza y apoyo; negativo: falta de humor, pe- Verde- positivo: armonía, ponderación, frescura, amor uni-
sadez, falta de sofisticación. versal, descanso, restablecimiento, seguridad, conciencia
Violeta- positivo, conciencia espiritual, contención, visión, medioambiental, equilibrio y paz; negativos: aburrimiento,
lujo, autenticidad, verdad y calidad; negativo: introversión, estancamiento, falta de fuerza y enervación.
decadencia, supresión e inferioridad. Amarillo- positivos: optimismo, seguridad, autoestima, ex-
Negro- positivo: sofisticación, elegancia, seguridad, segu- troversión, fuerza emocional, amistad y creatividad; negati-
ridad emocional, eficacia y sustancia; negativos: opresión, vos: irracionalidad, miedo, fragilidad emocional, depresión,
frialdad, amenaza y pesadez. angustia y suicidio.
ma sus representaciones en fantásticas visiones cromáti-

cas que tanto exageran como suavizan las variaciones del
color de las formas en que inciden.
v. Color connotativo
La connotación de factores no descriptivos -psicológicos,

simbólicos, estéticos, etc.- suscitan atmósferas y subjetivi-
dades, este componente afecta las sutilezas perceptivas de
la sensibilidad y posee un amplio abanico de variaciones
sociales. Tal es el caso de las obras tardías de Goya que
por su manejo de color resultan a menudo cargadas de
obscuros significados y misteriosos simbolismos.
vi. Color esquemático
Al extraer el color de su contexto denotativo e icónico,

para considerarlo así sólo en cuanto a su materia cromá-
tica; podemos hablar entonces de un color esquemático.
De esta manera el color se convierte en una propiedad
autónoma, utilizable en el caso del diseño para objetos y
mensajes gráficos.
150 | Modelos
4.6.12 Significación y psicología cromática
Una de las aportaciones más impor-

tantes de la teoría del color de Goethe (Ed. 2009) con
respecto a las conclusiones de Newton (1947), fue el con-
siderar no sólo como su predecesor las propiedades físicas
de la luz, sino teniendo también en cuenta los aspectos
de percepción visual y mental del proceso. Goethe expe-
rimentó con estas posibilidades, detectando la ausencia
de una teoría neurológica detallada e intentó aclarar los
efectos del color en el observador, abriendo de esta mane-
ra un campo muy amplio para los psicólogos que estudia-
rían posteriormente esta relación del color con la mente
humana. Actualmente la neurociencia estudia estas rela-
ciones para descifrar la relación entre las convenciones
sociales y la física tanto del ojo, como color en sí (Purves,
2001).
El adecuado uso del color en un proyecto hiper-

media logra convertir una paleta determinada en
un elemento útil traducible, por ejemplo, hacia
un sistema de codificación de información y
navegación, como en el caso del Digraph (www.
digraph.it)
Max Luscher (1923), jefe del Instituto de Diagnóstico

Psicomédico de Lucerna, Suiza, es uno de los psicólogos
más prestigiosos en el estudio de los colores, mediante un
sistema de tarjetas cromáticas desarrolló un estudio que
arroja resultados sobre los aspectos de personalidad del
paciente. Para Kandinsky (1978), el color es un medio
para ejercer una influencia directa sobre el alma y define
la manera en que los colores actúan anímicamente en el
hombre.
Son muy diversos los esquemas desarrollados hoy en día

sobre los aspectos psicológicos del color, desde los estu-
dios de Itten (1970) en la Bauhaus hasta el sistema de
afectivo de Angela Wright (1998); algunas de las conclu-
siones prácticas más actuales sobre el color quedan supe-
ditadas a la influencia del entorno en características tan
fundamentales como la cultura, religión, familia o viven-
cias individuales. En el diseño gráfico tradicional se reto-
man estos estudios como guías que apoyan las tomas de
decisión sobre el color en donde sea importante conocer
cómo influye un color en el estado de ánimo y los gustos
del cliente, como en el caso de proyectos de diseño de
envase o en trabajos de interiorismo; en el entorno hiper-
media aportan orientaciones hacia las tomas de decisión
cromática en factores de comportamiento y psicología.
Los resultados de algunos estudios psicológicos del color

(Wright, 1998) arrojan aspectos positivos y negativos que
son susceptibles de identificarse.
Gris: positivo, neutralidad psicológica; negativo: falta de

seguridad, desaliento, depresión, hibernación y falta de
energía.
Marrón: positivo: seriedad, calidez, naturaleza, tempera-

mento práctico, confianza y apoyo; negativo: falta de hu-
mor, pesadez, falta de sofisticación.
Violeta: positivo, conciencia espiritual, contención, visión,

lujo, autenticidad, verdad y calidad; negativo
Negro: positivo, sofisticación, elegancia, seguridad, segu-

ridad emocional, eficacia y sustancia; negativos, opresión,
frialdad, amenaza y pesadez.
152 | Modelos
Azul: positivo, inteligencia, comunicación, verdad, efi-

cacia, serenidad, deber, lógica, tranquilidad, reflexión
y calma; negativo, frialdad, reserva, falta de emoción y
hostilidad.
Rojo: positivo, valor físico, fuerza, calidez, energía, ins-

tinto de supervivencia, combate o huida, estimulación,
masculinidad y emoción; negativo, desafío, agresión, im-
pacto visual y tensión.
Verde: positivo, armonía, ponderación, frescura, amor

universal, descanso, restablecimiento, seguridad, con-
ciencia medioambiental, equilibrio y paz; negativos,
aburrimiento, estancamiento, falta de fuerza y enerva-
ción.
Amarillo: positivos, optimismo, seguridad , autoestima,

extroversión, fuerza emocional, amistad y creatividad;
negativos, irracionalidad, miedo, fragilidad emocional,
depresión, angustia y suicidio.
4.6.13 Efectos del uso del color en el diseño

gráfico hipermedia
Al trabajar con el color en sus posi-

bilidades de expresión, significado y emotividad se inci-
de en el proceso de comunicación con las variables que
ofrece este amplio abanico resultante. El valor de los
significados se adscribe simbólicamente y los elementos
se cargan de información cromática que porta en sí mis-
ma mensajes que aprovecha el diseñador para manipular
en la composición y crear así contenidos enriquecidos
que aportan realmente al proceso de codificación y de-
codificación del mensaje.
El control y la manipulación cromática son de vital im-
portancia para el diseñador hipermedia, conscientes Durante el proceso de diseño gráfico en el entorno hi-
de ello Adobe Systems ha creado una App llamada
Kuler (de la palabra creole para color), que permite permedia es importante considerar la importancia del
trabajar con esquemas, armonías y paletas cromáticas
cómodamente desde dispositivos móviles.
color en la expresión de los proyectos ya que de acuerdo
a lo revisado anteriormente podemos trabajar incorpo-

rando aspectos que aportan:
- Emotividad al proceso visual, al trabajar con un ele-

mento tan subjetivo como el color, pues logra añadir
los elementos expresivos necesarios para reforzar la
información visual presentada.
- Atracción, generada por la correcta manipulación de

los aspectos cromáticos del proyecto y que dadas las
circunstancias puede emplearse hasta para generar
un sensaciones opuestas como el rechazo.
- Movimiento, el correcto uso del color aporta a las
propiedades dinámicas de la imagen apoyando sen-
saciones de movimiento o funcionando como un ele-
mento de apoyo para procesos como la animación.
- Significado, al incorporar el aspecto cromático a los

diseños hipermedia se les dota automáticamente de
un conjunto de significados, tanto consciente como
inconscientemente por lo que es importante que el
diseñador tome este elemento a su favor para evi-
denciar sus intenciones sumando los significados
que se añaden a los demás aspectos generales del
diseño.
Nomenclatura de los componentes formales en

referencia al tipo y su estructura base.
154 | Modelos
La tipografía como componente de iden- 4.6.14 Tipografía

tidad marca aspectos corporativos que
van desde el propio logotipo empresarial
hasta las fuentes empleadas en los sitios
de internet o en las Apps correspondien-
tes, un vistazo a sedes como Facebook,
Kayak o Linkedin permiten identificar el La tipografía ha sido un elemento
uso de la tipografía como un valor en la imprescindible en los hipermedios desde su origen, de
comunicación corporativa.
hecho muchas de las aplicaciones hipermedia que usamos
hoy en día se desarrollaron para manipular y configurar la
tipografía de acuerdo al avance tecnológico de las necesi-
dades de comunicación en un período determinado. De la
necesidad de digitalizar los sistemas de impresión surgió
el DTP -Desktop Publishing- y la informatización de las
familias tipográficas para su uso virtual en el ordenador,
en un inicio se tradujeron las principales fuentes tipo-
gráficas utilizadas en los medios impresos, más adelante
diseñadores como Jean François Porchez (www.typofon-
derie.com) han retomado la preocupación por la migra-
ción hacia los medios digitales, creando fuentes tipográ-
ficas diseñadas de manera específica para su aplicación en
sistemas digitales, tanto impresos como virtuales.
Es importante considerar los elementos tipográficos den-

tro de los proyectos hipermedia como componentes bá-
sicos de la misma, para durante el proceso de diseño y
selección tipográfica tomar en cuenta sus características
expresivas, buscar apoyar desde los aspectos tipográficos
la correcta transmisión de ideas y conceptos. Incorporar
las características de una fuente determinada permite su-
mar elementos al diseño para ejecutar un uso adecuado
de ella; incidiendo en propiedades como la legibilidad,
leibilidad y claridad de los textos que se emplean en los
trabajos de diseño y que faciliten la experiencia del usua-
rio, pues unido a los aspectos estéticos es necesario con-
siderar la eficacia de la composición tipográfica, ya que la
comunicación será efectiva en cuanto se una a la estética
la efectividad en la transmisión de los mensajes.
Las principales características tipográficas con las que el

diseñador se enfrenta al trabajar con tipos en el terreno
hipermedia no son demasiado diferentes a su composi-
ción en un medio impreso, sin embargo dentro de estos
conceptos es necesario tener algunas consideraciones
especiales para lograr sistemas realmente ajustados a la
ergonomía del usuario, de este conjunto de conceptos se

destacan:
i. Tipo o forma de la letra
Correspondiente a la familia seleccionada y las varia-

ciones de tipo de la misma, pudiendo seleccionarse por
ejemplo una tipografía de la familia Garamond en su
versión Bold Italic. De la selección tipográfica derivarán
los tonos y maneras del proyecto hipermedia, es decir la
fuente tipográfica seleccionada determina un estilo visual
en sí, por lo que es importante no desligar este concepto
del conjunto global de aspectos de diseño.
ii. Cuerpo o tamaño del texto
Se mide en puntos y es importante considerar sus valo-

res para una adecuada lectura por parte del usuario, la
experiencia hipermedia, manifestada físicamente en una
pantalla la mayoría de las veces, incide en consideraciones
especiales para la selección de tamaños tipográficos iden-
tificables al momento de la lectura, usualmente el lector
de pantalla, especialmente en ordenadores, conserva una
distancia mayor con respecto al texto que el lector de una
pieza impresa, por lo cual los tamaños tipográficos hiper-
media consideran este aspecto para resolver la lectura con
tamaños de mayor puntaje. Los dispositivos móviles tales
como tabletas y smartphones mantienen una distancia
menor al usuario con lo cual se aproximan a las conside-
raciones propias de un medio impreso.
iii. Espaciado tipográfico
El correcto uso de los espacios permite el equilibrio ade-

cuado para lograr una óptima legibilidad, el kerning (in-
terínea) y el track (interletrado) son dos propiedades re-
lacionadas con el espacio entre caracteres y palabras. Al
hablar de kern se hace referencia al espacio entre pares
de caracteres y su manipulación conlleva la modificación
de sus relaciones espaciales para corregir errores de per-
cepción; de cercanía o lejanía excesiva de caracteres, el
kern es proporcional al espacio “eme” -la unidad en la que
está basada esta medida- teniendo el mismo tamaño en
puntos que el cuerpo de caracteres, por lo cual en un tex-
156 | Modelos
to de 12 puntos el kern mide 12 puntos; el track ajusta

la densidad visual del texto, actuando globalmente sobre
la tipografía, abriendo los caracteres cuando se trata de
cuerpos pequeños y aproximándolos cuando se vuelven
más grandes.
Adicionalmente a estos espaciados hay que considerar el

espacio entre palabras que se puede modificar de acuerdo
al tipo de alineaciones a las que estén sujetos los párrafos y
que es importante controlar cuando se utilizan alineacio-
nes justificadas, para evitar el molesto espaciado de “ríos”
que atraviesan los párrafos dificultando su adecuada lec-
tura.
El espaciado entre líneas, leading, es un tercer elemento a

considerar, regularmente se toma un interlineado que con
un 20% con respecto al tamaño del cuerpo de texto pro-
porciona un buen ritmo de lectura, pero este factor puede
variar de acuerdo a la fuente seleccionada y la cantidad de
texto utilizado, de igual manera que con el tamaño de la
fuente, los interlineados más espaciados logran una mejor
lectura en pantalla y reducen la posibilidad de un efecto
de corte. Trabajar con interlineados muy ajustados impli-
ca un mayor esfuerzo de lectura pero enfatiza connota-
ciones específicas, siendo utilizado a menudo mas bien de
forma decorativa.
Un sistema simétrico de composición ayuda a estruc-

turar los diferentes elementos que contiene el des-
pliegue de pantalla, ordenando la lectura del usuario
para contener grandes bloques de contenido, como
en el caso del fanzine digital de Egolactante (www.
egolactante.com) que aplica un sistema simétrico de
repetición horizontal.
iv. Posición y organización del texto
Ubicar el texto dentro de la composición es un gran reto

para todo diseñador, los módulos cuadriculares han fun-
cionado en el terreno editorial con gran éxito; basados en
el uso de márgenes, la maquetación basada en columnas
y medianiles organiza los elementos tipográficos y pic-
tóricos de una página unificando todas las partes de un
diseño. Este tipo de organización es normalmente tra-
ducida al terreno hipermedia mediante el uso de tablas
para estructurar los elementos sobre la composición, sin
embargo con la libertad de nuevas herramientas y aplica-
ciones cada vez es más común la incorporación de otros
sistemas de diagramación, como los mencionados en el
capítulo 4.7 al hablar sobre espacio y su organización.
v. Longitud de línea
Siguiendo la norma de legibilidad editorial, las líneas de

texto demasiado extensas son difíciles de leer, sumando
a esta consideración la posibilidad de que exista un corte
hacia la derecha de una línea demasiado extendida por
la limitación de la pantalla del navegador, por ello de-
ben evitarse anchos pronunciados, una herramienta útil
es tomar ventaja de la maquetación basada en columnas o
bloques tipográficos que ayudan a contener la lectura de
manera que el usuario necesita lo mínimo posible despla-
zarse por fuera de la pantalla para seguir y completar su
lectura.
Mario García (2002, p. 47) resume un conjunto de re-

comendaciones tipográficas que aplica cotidianamente
en sus proyectos de diseño de información y que son es-
pecialmente útiles al aplicarlas al entorno hipermedia en
general.
i. Facilidad de lectura
Desde la afirmación de Tschichold (1995) en la década

de los treinta del siglo pasado, sobre la transición orna-
mental de la vieja tipografía hacia la claridad de la nueva
generación tipográfica, la facilidad de lectura ha sido la
intención central de las fuentes utilizadas en la actuali-
dad, haciendo hincapié al tratarse de cuerpos de texto, la
158 | Modelos
facilidad de lectura debe ser una consecuencia fundamen-

tal de un enfoque hacia el lector.
ii. Contraste
Las variaciones de una familia tipográfica están diseña-

das para lograr contrastes y jerarquizar información, la
combinación de estas variaciones da dinamismo a la lec-
tura y destaca lo importante en una mancha tipográfica.
El suavizado de pantalla puede reducir el contraste tipo-
gráfico natural, haciendo que se necesiten contrastes más
acentuados para lograr un resultado óptimo sobre fondos
de color, siempre un contraste mayor quiere decir mejor
legibilidad.
iii. Correspondencia
El uso de determinada fuente para un proyecto le da per-

sonalidad e imagen, relacionar este aspecto de individua-
lidad mediante la tipografía habla de la profesionalidad
del diseñador y aterriza la vinculación conceptual-tipo-
gráfica de un proyecto de diseño, esta puntualización es
particularmente útil para el desarrollo de proyectos onli-
ne, que hasta hace poco contemplaban el uso particular
de un conjunto muy reducido (pero universal) de fuentes
tipográficas, sin embargo con la evolución de html hacia
su quinta versión y las hojas de estilo en su tercer gene-
ración, estos obstáculos cada vez son salvables de mejor
manera y garantizan la correcta correspondencia de la
identidad de un sitio web con respecto a sus tipografías.
4.6.15 Anotaciones sobre la tipografía en el contexto

hipermedia
En el tratado sobre tipografía virtual

Hillner (2009, p. 166) explica que:
El éxito de la tipografía virtual radica también

en el foco de atención del espectador, que pue-
de verse afectado por las distracciones que lo ro-
dean. Aun así, respecto a la comunicación visual,

puede aceptarse que en parte este foco es condi-
cional. La mayoría de las producciones digitales
en el contexto de la comunicación visual se dan
en pantalla. Aunque las pantallas adoptan for-
mas diversas (dispositivos manuales, vallas pu-
blicitarias u ordenadores), casi nunca se perciben
como medios ambientales. Las pantallas captan
la atención del espectador y, como si fueran una
ventana, aumentan las expectativas de la infor-
mación que encierran. La tipografía virtual soca-
va estas expectativas porque su definición imper-
fecta, su inconclusión, entra en conflicto con los
principios de los sistemas digitales. El concepto
de un dígito desafía toda la noción de transición.
En oposición a la analógica, la información digi-
El adecuado tratamiento del texto integra la identidad de un sitio con los demás
componentes visuales, generando resultados que le dan solidez a una marca o
producto, como en el caso de este sitio de apoyo al marketing de Asics (www.
stopatnever.com) y favorecen la comunicación apoyando legibilidad y leibilidad
tipográfica. El sitio ilustra esta capacidad con un apoyo tipográfico identificativo
y consistente durante toda la navegación.
160 | Modelos
tal significa simplemente ‹‹sí›› o ‹‹no››, ‹‹encendi-

do›› o ‹‹apagado››, ‹‹verdadero›› o ‹‹falso››, etc. Los
sistemas digitales imponen medidas absolutas a
valores relativos. En su perfección cuantitativa,
las tecnologías de la comunicación no permiten
zonas cualitativas grises. Estas zonas grises, o es-
tadíos de transición, son precisamente lo que se
debería procurar restituir al producir tipografía
virtual.
Esta reflexión abre el panorama dual de la experiencia

tipográfica en los hipermedios, por una parte se encuen-
tran los aspectos restrictivos que limitan la creatividad en
el empleo tipográfico, como sucede con la utilización de
las fuentes “seguras” en internet, que supone el empleo
de un pequeño conjunto de familias tipográficas para
asegurar su correcto despliegue en la pantalla del usuario
final, independientemente del sistema informático que
esté utilizando, y por contraparte todas las posibilidades
que el entorno hipermedia abre para el trabajo tipográ-
fico: el hipertexo, la sustitución, el empleo de tipografía
como imágenes, la animación, transiciones y hasta los
aspectos temporales que unidos al empleo tipográfico
generan diversos grados de conciencia en el lectoautor.
Por una parte existen ciertas restricciones que poco a
poco se van eliminando del panorama, el uso de pro-
gramas que permiten mayor control tipográfico online
como Muse o la implementación de códigos más flexi-
bles al uso tipográfico abierto como el HTML 5 ofrecen
mayores libertades al diseñador gráfico para seleccionar
y emplear tipografías en sus proyectos hipermedia, sal-
tando las restricciones que en un principio el medio ha
autoimpuesto. El trabajo y la experimentación tipográ-
fica todavía tienen un largo camino en este entorno y
es importante no perderlo de vista pues es uno de los
pilares en la construcción de la comunicación gráfica.
2.2.2.1 Elementos de la composición.
Los elementos primarios; punto, línea y plano, poseen un conjunto de características que cotidiana-
mente son empleadas en el diseño gráfico aplicado a medios editoriales e impresos, pero que al trasla-
darse a la aplicación hipermedia son pasados por alto.
PUNTO. Esta unidad compositiva es la mínima posibilidad de representación gráfica. Al aumentar de
tamaño puede convertirse en un plano o superficie y pasar de ser forma a convertirse en el fondo. Las
4.7 Espacio
relaciones más importantes entre estas unidades son:
- Disposición; Propiedad mediante la cual se modifica la percepción de los elementos, dando orígen a
jerarquías,Alorden,
hablar de espacio
simetrías, etc. en diseño se
hace referencia a aquella área en al cual se van a distribuir
los elementos de la•composición,
Dispersión en esta demarcación los
elementos conviven y son manipulados para comunicar
• Agrupación
mensajes en un contexto determinado. Después de una
adecuada selección de formas, en el espacio se posiciona-
• Exclusión
rán los elementos, les serán conferidos en relación a éste
sus adecuadas proporciones, y se interrelacionarán los ele-
• Equipo, jerarquía
mentos, agregando posibilidades de color, proponiendo
jerarquías y creando puntosmovimiento
• Huida, focales, imprescindibles para
atraer la atención y ordenar la lectura final de la pieza.
La disposición de los elementos en un formato

determinado, modifica la manera en que
percibimos
La disposición de los elementos en el sitio de www.hotmonkeydesign.com sus relaciones
emplea de mane-
ra contundente propiedades de agrupación, exclusión y jerarquía para generar un impacto
La disposición de los elementos envisual.
un formato determinado, modifica la manera en que
percibimos sus relaciones
! 29
La disposición de los elementos en el sitio de www.hotmonkeydesign.com emplea de mane- La disposición de los elementos en el sitio de www.
Otro ejemplo de diseño mediante la adecuada disposición de los elementos, en este caso
ra contundente propiedades de agrupación, exclusión y jerarquía para generar un impacto
hotmonkeydesign.com emplea de mane-
se enfatizan los aspectos de dinamismo y movimiento, generando posibilidades de entrada
visual.
ra contundente propiedades de agrupación, exclu-
y salida de elementos con respecto al formato de la interfaz. www.inol3.com
sión y jerarquía para generar un impacto
visual.
Otro ejemplo de diseño mediante la adecuada
disposición
- Posición; Relación entre los elementos y el plano en donde sede los elementos, en este caso
ubican
se enfatizan los aspectos de dinamismo y movi-
miento, generando posibilidades de entrada
! y salida de elementos con respecto al formato de 30la
interfaz www.inol3.com
Otro ejemplo de diseño mediante la adecuada disposición de los elementos, en este caso
se enfatizan los aspectos de dinamismo y movimiento, generando posibilidades de entrada
162 | Modelos
4.7.1 Elementos de la composición

• Centrado, estático

• Arriba: activo, distante, flotación Los elementos primarios; punto, lí-
nea y plano, poseen un conjunto de características que
• Abajo: pasivo, próximo, en reposo cotidianamente son empleadas en el diseño gráfico apli-
cado a medios editoriales e impresos, y que al trasladarse
• Izquierda: dinámico, entrada a la aplicación hipermedia ofrecen herramientas enrique-
cedoras para optimizar la comunicación y establecer los
• Derecha: dinámico, salida
Diferentes posiciones de acuerdo a la relación del elemento y su ubicación

Diferentes posiciones de acuerdo a la relación del
elemento y su ubicación
La posición de los elementos en esta composición, enfatiza el efecto de cercanía de sus componentes que ayu-
dado la relación que guardan los elementos con respecto al espacio le confiere sustancia y peso a los elementos
principales, la disposición unida al énfasis de color genera puntos de tensión. (www.thechocolatebullet.com)
La posición de los elementos en esta composición, enfatiza el efecto de flotación de sus
componentes que ayudado con la animación le da actividad y dinamismo a la presenta-
ción.
mensajes que tanto el diseñador como el cliente y/o emi-

sor necesitan transmitir.
4.7.2 El punto como elemento compositivo

• Pequeño, estático
• Mediano, de forma perceptible, equilibrio

Esta unidad compositiva es la mí-
nima posibilidad de representación gráfica,
• Grande, como Hofmann
superficie o plano
(1996, p. 15) define ampliamente el punto como “toda
• Sobrepasado, rompimiento, interacción positiva-negativa
Arriba: Relaciones tamaño - formato

Arriba: Relaciones tamaño - formato
El rompimiento de las relaciones espaciales entre los diferentes elementos

que forman parte de una composición causa sorpresa en el usuario y es utili-
zado por la comunicación para dar pie a mensajes puntuales que aprovechan
este elemento sorpresivo pues adicionalmente otorga un énfasis particular a
los gráficos empleados en la composición. www.mrsm.org.my
El rompimiento de los elementos por su tamaño en relación al formato apoya la comunica-
ción de mensajes y les da énfasis a los gráficos utilizados. www.tusem-basketball.de
164 | Modelos
aquella figura plana que posea un centro y que se perci-

ba como forma cerrada, incluso cuando un punto que se
extiende sigue siendo un punto, la mera ampliación de
un elemento no basta para transformarlo esencialmente.
Al aumentar de tamaño puede convertirse en un plano o
superficie y pasar de ser forma a convertirse en el fondo”.
• Tensión
Las relaciones más importantes entre estas unidades son:
• Tensión
• Tranquilidad - Disposición; Propiedad mediante la cual se modifi-
• Tranquilidad ca la percepción de los elementos, dando origen a
••Tensión
Fusión jerarquías, orden, simetrías, etc.
• Fusión
••Tranquilidad
Equilibrio • Dispersión
••Equilibrio • Agrupación
Fusión
• Flotación
• Exclusión
••Flotación
Equilibrio
• Opresión
••Opresión
Flotación
• Opresión
Relaciones
Relaciones entre entre
cada uno de los elementos
cada uno de entre
los elementos entre sí y con respecto al formato en el que se
Relaciones entre
sí y con respecto cada uno
al formato de se
en el que los elementos entre sí y con respecto al formato en el que se
encuentran
encuentran situados.
situados.
encuentran
Relacionessituados.
entre cada uno de los elementos entre sí y con respecto al formato en el que se
encuentran situados.
Las
Las
Las relaciones
relaciones
relaciones entre
entre las formas
las formas
entre las formas compositivas
compositivas generan
generan diferen-
compositivas diferentes
generan dinámicas
diferentes que van
dinámicas que de
vanla de la
tes
Lasdinámicas que vanentre
relaciones de la tensión y flotación compositivas
las formas en el ejemplo generan diferentes dinámicas que van de la
tensión
tensión
de y yflotación
flotaciónen en el
elalejemplo
www.aguycalledbilly.com, ejemplo
equilibriode
y lawww.aguycalledbilly.com
de www.aguycalledbilly.com
estabilidad al equilibrio y la estabilidad
al equilibrio y la estabilidad
que
que conforman
tensión el conjunto de
y flotación
conformanlos enelementos y su disposición
el ejemplo
loselementos
elementos de en
de www.aguycalledbilly.com al equilibrio y la estabilidad
que conforman
el sitio de www.happydogband.com. de www.happydogband.com.
www.happydogband.com.
que conforman los elementos de www.happydogband.com.
LINEA. Este elemento primario del diseño agrega una posibilidad compositiva adicional, la longitud,
LINEA. Este elemento primario del diseño agrega una posibilidad compositiva adicional, la longitud,
esta propiedad enfatiza las emociones abordadas anteriormente. La línea genera dinamismo y define
estaLINEA. Este
propiedad elemento
enfatiza primario abordadas
las emociones del diseñoanteriormente.
agrega una posibilidad compositiva
La línea genera adicional,
dinamismo y define la longitud,
• Equipo, jerarquía
• Huida, movimiento
- Posición; Relación entre los elementos y el plano

en donde se ubican
• Centrado, estático
• Arriba: activo, distante, flotación
• Abajo: pasivo, próximo, en reposo
• Izquierda: dinámico, entrada
Adicionalmente, la línea separa planos, lo que permite crear diferentes niveles y volú
• Derecha: dinámico, salida do y delimitando las áreas compositivas.
Adicionalmente, la línea separa planos, lo que permite crear diferentes niveles y vo
Inicialmente las líneas se pueden clasificar en rectas y curvas, clasificación que retom
- Tamaño; Relación entre los elementos y el for-las áreas compositivas.
do y delimitando
mato que los contiene de diseño para aprovechar las propiedades vectoriales de las curvas de Bezier, basada
matemáticas vectoriales
Inicialmente las líneas sey pueden
que permiten describir
clasificar líneas
en rectas rectas oclasificación
y curvas, curvas modificables
que retod
• Pequeño, estático
muy
de intuitiva.
diseño para aprovechar las propiedades vectoriales de las curvas de Bezier, basa
• Mediano, de forma perceptible, equilibrio
matemáticas vectoriales y que permiten describir líneas rectas o curvas modificable
• Grande, como superficie o planoTambién es posible clasificar las líneas de acuerdo a:
muy intuitiva.
• Sobrepasado, rompimiento, interacción
- Posición y dirección; Relación entre las líneas y el plano en donde se ubican, pudie
positiva-negativa También es posible clasificar las líneas de acuerdo a:
tal, vertical, ascendente, descendente, saliente, entrante, decadente, en caída.
- Posición y dirección; Relación entre las líneas y el plano en donde se ubican, pud
- Interrelaciones de la forma; al combinar dos o
tal, vertical, ascendente, descendente, saliente, entrante, decadente, en caída.
más elementos y las variaciones anteriormente
Variaciones de la línea por posición y dirección; horizontal, vertical, saliente
Variaciones de la línea por posición y dirección; horizontal, vertical, salien
Variaciones de la línea por posición y dirección;

horizontal,
Variaciones de la línea por vertical,
posición y saliente, ascendente,
dirección; entrante,
entrante, caída, ascendente
caída, ascendente, decadente,
ascendente inverso, decadente inverso.
Variaciones de la línea por posición y dirección; entrante, caída, ascenden

166 | Modelos
Variaciones de la línea recta por su forma; horizon-

tal, vertical diagonal; angular; angular en ángulos
regulares; angular irregular; de grosor variable; revisadas, se crean relaciones entre ellos que pro-
semicircular, ondulada, espiral, libre, mixta.
vocan determinadas emociones en el espectador y
comunican contenidos compositivos particulares.
• Separación
• Tensión
• Tranquilidad
• Fusión
• Equilibrio
• Flotación
• Opresión
notoveruntilitsdone.com 4.7.3 La linea como elemento compositivo

La utilización de líneas en la composición permite
incluir un conjunto de variaciones que se suman a
las intenciones de significación de los contenidos,
ordenan la interfaz y pueden llegar a formar parte Con respecto a la línea, Hofmann (1996, p. 17) re-
de la navegación, como en el caso de esta agencia
de diseño en donde las lineas finalmente armoni- toma el concepto del punto como unidad, que al enlazar
zan unificando la pieza de diseño.
con otro punto más forma líneas, ya sean o no perceptibles:
fuerzas autónomas dan la ordenación de puntos escasa-
mente separados o invisibles en el caso de la separación ex-
cesiva de los puntos de referencia. Agrega adicionalmente
al movimiento como la característica primordial de la línea
y su fundamento de contraste con respecto al punto pues
es susceptible de dinamizar la línea y prolongarla de ma-
nera indefinida. Este elemento primario del diseño agrega

una posibilidad compositiva, la longitud, esta propiedad
enfatiza las emociones mencionadas.
La línea genera dinamismo y define direccionalmente la
composición de la que forma parte; crea tensión y afec-
ta a los diferentes elementos que conviven con ella, puede
definirse también como un punto en movimiento o como
la historia del movimiento de un punto. Los renglones de
texto también pueden ser clasificados como líneas y pro-
ducen efectos visuales bidimensionales muy similares a los
de una línea.
Planos geométricos: regulares, irregulares y planos

libres: regulares e irregulares
Los planos van de lo geométrico (www.heimat-

museum-charlottenburg.de) a lo orgánico (www.
tacticbikes.com) organizando y distribuyendo el
espacio de una composición
168 | Modelos
Adicionalmente, la línea separa planos, lo que permite

crear diferentes niveles y volúmenes; definiendo y deli-
mitando las áreas compositivas. Inicialmente las líneas se
pueden clasificar en rectas y curvas, clasificación que re-
toman los programas de diseño para aprovechar las pro-
piedades vectoriales de las curvas de Bezier, que basadas
en operaciones matemáticas vectoriales permiten descri-
bir líneas rectas o curvas modificables mediante contro-
ladores de una manera muy intuitiva.
También es posible clasificar las líneas de acuerdo a:
- Posición y dirección; Relación entre las líneas y el
plano en donde se ubican, pudiendo ser horizontal,
vertical, ascendente, descendente, saliente, entrante,
decadente, en caída.
- Forma: Horizontal, vertical, diagonal, angular, de
grosor variable.
4.7.4 El plano como elemento compositivo
Al cerrarse en un mismo punto el trazo de una

línea se crea el plano, articulándose así la complejidad del
contorno. Este cierre crea tensión entre el espacio y sus
límites provocando atracción hacia la línea. En diseño el
plano inicia generando anchura y longitud y puede evo-
lucionar hacia la simulación de profundidad para generar
efectos tridimensionales. Los planos crean contornos bá-
sicos que se clasifican de acuerdo a su forma:
• Geométricos regulares: Planos regulares y estruc-

turados; círculo, cuadrado, triángulo...
• Geométricos irregulares: Planos estructurados de

geometría no axial; triángulo escaleno, trapezoi-
de...
• Libres regulares e irregulares: Trazos libres o natu-

rales, con o sin propiedades axiales.
4.7.5 Sistemas de composición
“La finalidad primordial de la retícula es es-

tablecer orden en donde hay caos.” Jute (1996, p. 7).
Componer es adecuar los diversos elementos gráficos

dentro de un espacio visual acotado, su combinatoria
debe aportar a las intenciones del significado a comuni-
car, transmitiendo un mensaje claro y atractivo al recep-
tor del mensaje. La combinación adecuada y coherente;
estudiada de manera previa de cada una de las imágenes,
textos, ilustraciones, animaciones, videos, etc... dentro de
un composición permite al diseñador otorgar dimensión
y protagonismo a los elementos, asignar órdenes de lectu-
Los sistemas de retículas, heredados del diseño

editorial comprueban su eficacia en sitios con alto
porcentaje de información textual y en los que el
usuario necesita recrear una experiencia de lectura
ordenada. El sitio de www.cvmas.net ejemplifica
este caso utilizando un sencillo sistema de reticu-
lación.
170 | Modelos
ra y dirección espacial, experimentar variaciones de signi-

ficado y equilibrar los diversos componentes a favor de la
eficacia en la comunicación y el impacto visual por par-
te del diseño. En relación a los sistemas de composición
podemos encontrar un amplio conjunto de herramientas
que podemos agrupar en tres bloques:
Operaciones simétricas: Al momento de iniciar el bo-

cetaje de un diseño el primer elemento compositivo a
considerar con relación al espacio debe ser el formato,
sus proporciones delimitarán en diversos aspectos la dis-
tribución de los elementos que de dispondrán sobre la
composición. Al desempeñar cada elemento una función
Sistemas de redes basados en módulos geométricos;

cuadrados, hexágonos y triángulos.
Tomando ventaja de un sencillo sistema aplicado a

una red el sitio de www.barcelona.webpunt.nl con-
struye una galería fotográfica de fácil navegación.
determinada dentro de la composición, las elecciones de

disposición, tamaño y forma serán cruciales para definir
sus atributos. La distribución simétrica del espacio puede
ser una primera manera de aproximarse a la resolución
de los problemas espaciales que plantea un proyecto de
diseño. Al distribuir simétricamente el espacio se eviden-
cian relaciones como el mayor peso visual de las secciones
superiores y derechas frente al menor peso de los espacios
inferiores y a la izquierda.
Ley de los tercios: Los sistemas de composición basados Utilizar adecuadamente sistemas de diagramación
en retículas de 3x3 corresponden a la regla de los ter- y reticulación no implica un resultado rígido e
inflexible, el sitio del grupo argentino Falso Primer
cios que menciona: “Cuando un cuadrado o rectángulo Ministro (www.falsoprimerministro.com.ar) es
un buen ejemplo de sistema reticulado flexible y
se divide en tres tanto vertical como horizontalmente, los dinámico.
cuatro puntos de intersección resultantes en el interior de
la composición son los puntos focales óptimos” (Elam,
2004, p. 13). La ley de los tercios es un sistema amplia-
mente utilizado en el mundo de la fotografía y es uno de
los sistemas de composición que ayuda a concentrar la
atención visual de manera natural.
Sección áurea: Frente a la problemática de distribución

acertada del espacio existen un par de normas que ayudan
al diseñador a indicarle caminos correctos a seguir, entre
ellas, la división del espacio mediante la regla áurea es
uno de los más empleados. Esta norma, basada en la dis-
tribución compositiva de la naturaleza, proporciona efec-
tos estéticos agradables y eficaces. Utilizada en cánones
griegos y romanos como herramienta de construcción
arquitectónica, secciona los espacios en terceras partes,
biseccionado un cuadro base y usando la diagonal de una
de sus mitades como radio para ampliar las dimensiones
del cuadrado hasta convertirlo en “rectángulo áureo” con
la proporción a:b = c:a.
Situando los elementos de una composición sobre las lí-
neas de esa estructura se crea una conciencia del equili-
brio creado entre estos elementos y el resto del diseño.
Otros sistemas matemáticos similares son, por el ejemplo,
el ideado por Le Corbusier en 1946;
172 | Modelos
Para el rediseño de la versión iOS 7 del sistema

operativo de los dispositivos móviles de Apple,
Jhonathan Ive y su equipo de diseño decidie-
ron empezar desde los fundamentos básicos,
diseñaron una retícula referencial y aplicaron esta
diagramación como base para recontsruir iconos,
la propia interfaz del sistema y más allá, distribu-
yeron esta retícula base a los desarrolladores para
que pudiesen ajustar su diseño a estas especifica-
ciones, construyendo de esta forma un ecosistema
de hardware y software muy consistente a través
de una diversidad de dispositivos y aplicaciones.
www.apple.com/ios/ios7/design
El arquitecto suizo-francés Le Corbusier (1887-

1965), creó un modelo de patrones de dimen-
siones armónicas a escala humana, aplicadas a
la Arquitectura y al Diseño Industrial, denomi-
nado por el autor El Modulor, el cual era una
aproximación entre el sistema métrico emplea-
do en Francia y Alemania o el sistema inglés, de
pulgadas, usado en Inglaterra y Estados Unidos.
Asimismo, el Modulor pasó a determinar alturas
y larguras para el desempeño de varias activida-
des domésticas y de trabajo, siendo ampliamente
adaptado por arquitectos y diseñadores indus-
triales de todo el mundo.
4.7.6 Sistemas de retículas
Los sistemas reticulares han sido un gran apoyo

para el diseño editorial, su formalización permite cen-
trarse en el papel de la composición dentro de un orden y
una estructura para analizar detenidamente el espacio, de

manera que sea posible percibir coherencia y unidad en
una composición.
Los elementos que se ubican dentro del espacio poseen
dirección, su forma está cargada de horizontales y ver-
ticales que modifican el recorrido visual de la informa-
ción acentuando o dificultando la lectura de una pieza
de diseño. Un sistema reticular recrea esta dinámica para
estudiar sus relaciones.
Un sistema de retículas no debe ser necesariamente com-
plejo, en fotografía, por ejemplo, se utiliza el sistema
reticular de 3x3 que ofrece suficientes posibilidades de
variación, pues respondiendo de manera adicional a a ley
de los tercios, que enuncia que -cuando un rectángulo o
cuadrado se divide en tercios vertical y horizontalmen-
te, los cuatro puntos de intersección resultante son los
puntos focales óptimos en la composición- (Elam, 2004
p. 13) de manera que el diseñador se puede servir de la
ubicación y la proximidad para determinar la importan-
cia jerárquica de estos puntos y jugar con la tensión que
su efecto provoca en la composición.
Al trabajar con un sistema de retículas existen una serie
de consideraciones que es importante destacar para tener
en cuenta:
- Proporción de los elementos: identificar el formato
de partida ayuda a centrar la atención en los ele-
mentos y en la composición. Seguidamente identi-
ficar las jerarquías de tamaño ayuda a seguir una ló-
gica compositiva para obtener resultados coherentes.
Modelos escrtucturales: cuadrícula de superficie,

cuadrícula de perspectiva, división axial del plano,
cuadrícula tridimensional.
174 | Modelos
- Agrupamientos: Trabajando con mensajes visuales

surge el agrupamiento de elementos, lo que trans-
forma sus relaciones, creando propiedades como
el ritmo y la repetición. La composición se puede
simplificar mediante los agrupamientos de elemen-
tos, potenciándose el espacio blanco e intensifican-
do la sensación de orden visual.
- Espacio negativo: El espacio que no esta ocupado
por los elementos de la composición, no es sola-
mente un espacio blanco, su forma y composición
condiciona directamente el modo en que el usuario
percibe la pieza de diseño.
- Relaciones axiales: Cuando los elementos se colo-
can dentro de la estructura reticular se crean rela-
El poder de las técnicas visuales aplicadas a los ciones axiales, estas relaciones proporcionan un
hipermedios tiene interesantes ejemplos en el
empleo de la retórica visual, en acompetencia.es
orden visual y crean ejes, en cuanto mayor es el nú-
la repetición conforma el fondo de este sitio y es mero de elementos que lo establecen, más potente
marketing al mismo tiempo; para la agencia de
mousewillplay.co.uk la personificación de su propia será dicho eje.
identidad es parte fundamental de la interfaz; la
diseñadora barbarawille.de emplea la elipsis en la
inquietante imagen que da la bienvenida a su sitio,
y el sitio de klon2.dk se apoya en la hipérbole para
enganchar a los visitantes desde la página de inicio.
4.7.7 Módulos y redes
Otro sistema de composición es aquel que emplea

la forma misma para dividir el espacio, interrelacionando
elementos que permiten jugar con la composición en un
doble nivel; distribuyendo y ordenando los espacios del
formato para en segundo lugar ubicar los elementos de
la composición de acuerdo a las normas y estructuras que
establece esta base.
Las posibilidades que ofrecen módulos y redes son infi-
nitas y algunas de ellas han sido estudiados de manera
puntual como puntos de partida básicos para la compo-
sición. En su análisis sobre estructuras Lewandowsky
(2004, p. 188) les identifica como una cuadrícula invisible
que ofrece un punto de apoyo para la composición. Al
igual que cuando se colocan objetos en estantes y arma-
rios, los elementos de diseño individuales se ajustan en
la cuadrícula. Todo se coloca con cuidado de forma que
las esquinas queden alineadas y los bordes de los relieves
describan la línea correcta.
Los módulos y redes se crean a partir de formas básicas,
que al repetirse forman un mosaico, mediante la manipu-
lación de las formas básicas y su deformación se pueden
crear módulos más complejos denominados supermódu-
los, el supermódulo es un grupo de módulos organiza-
dos que se repiten para transformarse en una forma más
compleja. Ese módulo a su vez puede estar compuesto
por elementos más pequeños denominados submódulos
que se repiten a su vez dentro de las redes, la estructura
determina la relación entre las formas, así como la posi-
ción de las mismas y su orden.
4.7.8 Significación en la composición
Las intenciones de comunicación

unidas al empleo de diferentes sistemas de composición
permiten trabajar con una meta en mente de manera que
176 | Modelos
es posible hablar de una significación en la composición,

guiada por el diseñador gráfico y apoyada por diversas
técnicas visuales que le permiten anclar de forma práctica
los conceptos que busca provocar mediante la manipula-
ción de los elementos en un espacio determinado.
Las técnicas visuales parten de las variaciones e interre-

laciones de la forma y su formato, por lo que podemos
tener propiedades de ritmo, dirección, tensión, equilibrio,
proporción, escala, tamaño, atracción, agrupamiento,
acento, etc. La relevancia de este proceso radica en que
el diseñador sea consciente de las herramientas teóricas
que apoyan la significación para que se identifique el uso
claro de estas técnicas durante el proceso como un apoyo
a la sustentación del proceso de diseño.
En el caso de los hipermedios a menudo la carga tecnoló-

gica de los proyectos debilita el análisis compositivo y sus
propiedades significativas se ven disminuidas frente a la
espectacularidad que produce la unión mediática interac-
tiva. Utilizar cotidianamente en los proyectos de diseño
hipermedia los apoyos compositivos y aprovechar la car-
ga significativa de las técnicas visuales genera un apoyo
positivo hacia piezas de comunicación mejor logradas y
exitosas.
María Acaso (2006) agrupa en su análisis del lenguaje

visual al grupo de herramientas de ordenación espacial
como herramientas de organización, pues son precisa-
mente aquellas que colaboran en la ordenación y jerar-
quización de los elementos compositivos, Acaso propone
una subdivisión en dos grandes grupos:
i. Herramientas de organización; Aquellas que ordenan

el lenguaje visual dentro del espacio que abarca los lími-
tes del soporte mediante un sistema jerárquico que pre-
tende transmitir un significado.
Como recursos a esta herramienta menciona: En com-

posiciones reposadas- constantes, simétricos, rectos, cen-
trípetos, completos, centrados; en composiciones diná-
micas- inconstantes, asimétricos, oblicuos, centrífugos,
incompletos, descentrados.
ii. Retórica visual; utilizándole como una herramienta de

organización que interconecta los distintos significados
de los componentes visuales del producto.
La retórica visual es un sistema que se emplea para trans-

mitir un sentido distinto al que propiamente le corres-
ponde a un concepto, existiendo entre el sentido distinto
y el propio alguna conexión, correspondencia o semejan-
za.
Como recursos a esta herramienta menciona: Sustitución-

metáfora, alegoría, metonimia, trampantojo, personifi-
cación; comparación- oposición, paralelismo, gradación;
adjunción- repetición, epanadiplosis (introduciendo el
factor temporal), hipérbole, préstamo; supresión- elipsis.
4.7.9 La composición en el contexto hipermedia
En su libro sobre Layout, Glenwright

La combinación de html 5 y hojas de estilo
(2001) apunta a las semejanzas y diferencias de la diagra- CSS 3 permite llevar documentos y diseños desde
mación entre los sistemas impresos e internet; el formato su vertiente impresa hacia diferentes dispositivos
digitales buscando conservar el máximo de caracte-
pasa de ser un tamaño de pliego a una resolución de pan- rísticas esenciales de diseño
178 | Modelos
talla y las relaciones espaciales conllevan interrelaciones

entre los diferentes componentes similares a sus versio-
nes analógicas: especificaciones básicas que, combinadas,
producen la retícula base sobre la que construir un di-
seño coherente. Sin embargo al profundizar en aspectos
prácticos, Glenwright nos enfrenta con diferencias im-
portantes en el terreno de la composición que requieren
respuestas innovadoras por parte del diseñador para su
óptimo aprovechamiento: el deslizamiento de las páginas
hacia la derecha o hacia el inferior de los documentos, as-
pectos de legibilidad y leibilidad con respecto a los fondos
empleados, el uso de textos como imágenes, la navegación
con mapas de imágenes y la propia interactividad de los
elementos que les otorga nuevas dimensiones espaciales
dentro de una composición que ya no es plana, sino que
incorpora niveles de interactividad, de control temporal y
de participación para un usuario que colabora en la pro-
ducción de las piezas de diseño.
Otra importante variable sobre el formato en el terreno

hipermedia es el traslado de las publicaciones tradiciona-
les hacia su vertiente digital-interactiva; la evolución que
iniciaron en la década de los 90, lecturas interactivas en
CDs y el formato portátil PDF culminaron con la defini-
ción de un concepto que reúne lo mejor de ambos forma-
tos, integrándolos bajo el formato EPUB; diseñado para:
Permitir a los autores crear contenido escalable que
puede ser desplegado en cualquier dispositivo elec-
trónico y con cualquier software que soporta el for-
mato EPUB, tales como Barnes & Noble Nook,
Kobo eReader, iBooks de Apple para iPad, iPhone;
el Sony Reader y el software de ediciones digitales
de Adobe. Debido a las variaciones en el tamaño
de los diversos dispositivos, el contenido fluye en
una sola y continua vertiente; el tamaño inicial de la
maquetación no se corresponde con ningún tamaño
inicial de pantalla. De esta manera el hecho de que
la publicación inicie con 21.5 x 28 cms. es debido a
su tamaño de impresión original, no debido a nin-
gún requerimiento particular del formato EPUB.
(Adobe Creative Team, 2012, p. 118)
El formato EPUB es uno de los ejemplos que muestra

las repercusiones que el entorno hipermedia significa
hacia los aspectos espaciales del diseño; al ser dinámi-
co rompe el paradigma que el formato fijo posee en
los medios impresos y da origen a dos vertientes de
diagramación para el entorno hipermedia:
La primera de ellas es la diagramación fluida, tam-

bién conocida como líquida (fluid), este tipo de dia-
gramación a diferencia de la estática tradicional se
ajusta a las dimensiones de la ventana que permite su
visualización, utilizando principalmente los valores
de anchura por porcentaje; la diagramación fluida se
adapta a diferentes resoluciones y la variedad de dis-
positivos de visualización, pero puede ser problemáti-
ca en el caso de que no se hayan considerado anchos
muy grandes y los elementos sobre el espacio sean
escasos o cuando al contrario existen demasiados ele-
mentos sobre un espacio reducido.
Para contrarrestar este efecto surge el espacio de dia-

gramación sensible (responsive) que ofrece el control
de un diseño fijo habilitando la posibilidad de que
las paginas se reorganicen para mostrarse de manera
óptima en cada uno de los formatos en qwue se vi-
sualizan, este tipo de diagramación se ha incorporado
en estilos CSS3 y ha iniciado una rápida adopción
por parte de los navegadores debido al correcto con-
trol que permite y a sus resultados en la visualización
final de las piezas de diseño. (genbetadev.com, 28 de
septiembre 2011)
Aunque la traducción del término responsive apunta ha-

cia la palabra sensible, podría también traducirse como
adaptativo, pues el hecho de modificarse de acuerdo al
dispositivo en el cual se visualiza es clave para esta ca-
racterística. Otros autores abordan el tema del flujo de
diagramación, Johnson (2013) apunta a la tendencia de
revertir las pautas para iniciar con la maquetación para
dispositivos móviles de pantalla pequeña (teléfonos, ipo-
ds), para en base a esta base construir las adaptaciones al
resto de las pantallas, para de esta manera lograr mejores
resultados en el diseño gráfico hipermedia, pues el control
180 | Modelos
que puede obtenerse en este tipo de flujo permite ir de

menor a mayor , apuntando a dispositivos específicos y
optimizando los contenidos de acuerdo a la visualización
final, es en realidad una labor de síntesis que conforme el
espacio lo permite se adapta para mostrar más contenidos
y da origen a la tendencia Mobile First , que junto con
el Responsive Design integra los elementos básicos de la
diagramación dirigida a hipermedios.
4.8 Tiempo
La irrupción del navegador de internet Mosaic
en 1994 tomó por sorpresa a los diseñadores gráficos;
algunos de ellos intuyeron inmediatamente nuevas po-
sibilidades para la acción, una buena parte lo tomó con
calma y esperó a que el medio evolucionara un poco para
entrar de lleno en su propuesta visual, otros más siguie-
ron su camino y decidieron no involucrarse de manera
directa en su desarrollo. Lo que no es posible negar es
que después de un par de décadas, Internet y las aplica-
ciones paralelas que han surgido a partir de su evolución
forman parte ya de nuestra vida cotidiana, son necesarios
para el trabajo de millones de personas y una gran canti-
dad de diseñadores trabaja el día de hoy exclusivamente
en el desarrollo de soluciones relacionadas con los hiper-
medios. Tras la etapa inicial de experimentación técni-
ca, podemos intuir que hay bases suficientes como para
empezar a abordar el tema con formalidad en el terreno
del diseño, cada día más académicos escriben una teoría
de los hipermedios aplicada al diseño, existen foros, ci-
clos de conferencias y discusiones laborales sobre cómo
afrontar los problemas a los que se enfrenan los diseña-
dores hipermedia, ya no sólo con las herramientas que
utilizan, también se habla sobre las futuras posibilidades
del medio, la evolución que ha sufrido y las transforma-
ciones que ha aportado; después de la vertiginosa carre-
ra que implicó el despegue de los medios interactivos en
el diseño es, quizá, momento de mirar atrás y observar
cuáles han sido las repercusiones en nuestra profesión.
El diseñador gráfico tradicional posee un abanico de co-

nocimientos que le apoyan en su proceso de elaboración
de imágenes para, por ejemplo, tomar decisiones en el
uso de una ilustración con respecto a una fotografía en
la portada de un libro; o al editar una secuencia de video
para seleccionar los fragmentos óptimos para una pre-
sentación adecuada; así también, para el diseñador grá-
fico hipermedia es necesario profundizar en las acciones
y atributos que dan representación a los aspectos básicos
que el diseñador echa a andar en el terreno hipermedia.
Una interesante reflexión sobre el diseño y su rela-
ción con tiempo en el espacio hipermedia, la publica el
blog de Marco Creativo (marcocreativo.es, 4-08-2009):
Hace poco la revista Gentleman publicó la entrevista
del arquitecto David Fisher presentando el proyecto
Rotating buildings. Se trata de unas torres rascacielos
cuyos pisos podrán dar vueltas alrededor del eje del
edificio independientemente unos de otros. La idea
nace, según cuenta el mismo Fisher, de la decisión de
incorporar al diseño la cuarta dimensión: el tiempo.
Dicha decisión no es tanto un invento revoluciona-
rio como un cambio de actitud hacia la noción de
tiempo. Como concepto el tiempo es en realidad
una magnitud que expresa y valora el cambio y el
cambio no ha sido siempre visto con buen ojo. Du-
rante siglos se ha relacionado con el envejecimien-
to, el desgaste, la desaparición, lo irreversible, por
lo que la humanidad construía, esculpía, pintaba e
imprimía para perdurar, para vencer lo que el tiem-
po tiene de destructivo. Solíamos transmitir ideas
y grabarlas para la eternidad, venerábamos la belle-
za y la retratábamos, rendíamos culto a la juventud.
Pero… Parece que hoy ha llegado otro tiempo que
quiere y merece llevar el protagonismo. Y no se trata
de la idea modernista – el culto a la metamorfosis –
ni tampoco de una idealizada evolución, sino de un
proceso que nos hace a todos un poco de “creativos”.
La semilla de este “hoy” ha sido el diseño interactivo,
el diseño que hace al consumidor partícipe del cam-
bio e introduce nuevas reglas en el proceso comuni-
182 | Modelos
Un sitio que ha roto con los paradigmas de la

comunicación en internet www.youtube.com, su
Como una biblioteca virtual, la sede del Internet propuesta sin embargo, integra elementos funda-
Archive (www.archive.org) contiene en su acervo mentales de la evolución de internet: Instantanei-
sitios web, imágenes en movimiento, archivos de dad, universalidad y posibilidades de almacena-
audio y textos digitalizados. miento en línea.
cativo consumidor-publicidad-producto o consumi-

dor-producto. Partimos del encanto de la pantalla
multitouch para aspirar a diseñar un cambio impre-
decible. El cambio es ahora paso a lo nuevo y lo nue-
vo o “nunca visto” ya no es temible sino valor último.
Esta reflexión nos ayuda a introducirnos en el siguien-

te aspecto conceptual del diseño; el tiempo, para ana-
lizarlo igualmente desde la perspectiva del diseño y
trasladarlo al entorno hipermedia; el concepto tem-
poral, presente desde los orígenes del diseño tradi-
cional funcionará en el presente estudio como un
puente que une los aspectos previamente analizados:
forma y espacio, para dotarles de una nueva dimen-
sión en la cual actuar y generar renovadas posibilidades.
La manipulación del tiempo que el diseñador gráfico em-
pleaba para desarrollar la narrativa en un cartel o la secuen-
cia lineal que comparten revistas y proyectos audiovisuales
tiene nuevas reglas y condiciones al migrar a las posibilida-
des narrativas del espacio multimedia y se expande al entrar
de lleno en las variables de la manipulación hipermedia.
4.8.1 El control temporal
El diseño gráfico tradicionalmente

funciona mediante el manejo de dos componentes prin-
cipales; forma y espacio, sus posibilidades transformativas
permiten las aplicaciones visuales que resuelven proble-
mas de comunicación a través de creativas propuestas, sin
embargo un tercer componente: el tiempo, se manifiesta
en las piezas de diseño gráfico desde sus inicios y evolu-
cionará junto con el propio diseño y sus aplicaciones.
En las primeras décadas del diseño, la influencia de los

“ismos” del arte hacia este movimiento gráfico anuncia la
experimentación temporal; en especial cubismo y futuris-
mo introducen aspectos de movimiento y dinamismo, así
como velocidad y la energía a obras plásticas (Balla, Di-
namismo de un perro con correa, 1912) que serán funda-
mentos base para la experimentación en la Bauhaus; ésta
experimentación temporal se traslada también a terreno
como la fotografía y el cine, que junto con la musicaliza-
ción introducen la combinatoria de medios a las posibi-
lidades de comunicación del diseño y no tardan en surgir
comerciales publicitarios en los medios de comunicación
nacientes como el cine y la televisión
La irrupción del diseño en los hipermedios generará una

importante transformación en la conceptualización del
tiempo para el diseñador, con la participación instan-
tánea por parte del usuario se incorpora un importante
elemento adicional; la posibilidad del control temporal
-para sí- lo que otorga una tercera dimensión al diseño
confiriéndole nuevas posibilidades. El tiempo había sido
un elemento lineal, estático, de control absoluto para el
diseñador, pues la variable del tiempo durante los proyec-
tos tradicionales transcurre en paralelo con el tiempo real;
el diseño gráfico hipermedia separa estas líneas temporales
para que el autor confiera al proyecto su propia dimensión
temporal de manera que el usuario puede adscribirse a ella
o bien controlarla por completo.
184 | Modelos
El diseñador hipermedia establece ciertas bases temporales

del proyecto, pero el usuario final es el que autodetermina
la manera en que se mueve a través de esta dimensión.
López García (2005, p. 40), menciona algunas de las carac-

terísticas que posibilitan la superación de las restricciones
espacio-temporales de los medios tradicionales, apuntando
hacia la evolución del tiempo en el terreno hipermedia:
• Instantaneidad. La alta velocidad en la transmisión

de datos permite que el desfase en la emisión de
contenidos quede reducido al mínimo en los medios
digitales.
• Ruptura de la periodicidad. Además de la ruptura

temporal, la posibilidad de ser actualizados en “tiem-
po real” permite que los contenidos rompan con la
idea de medios como el diario o el periódico.
• Universalidad. Al ser superadas las coordenadas espa-

ciales por una difusión tan amplia como la de inter-
net se evidencía un carácter esencialmente global de
los contenidos, de manera que un medio de comu-
nicación puede ser concebido como local, regional,
generalista, específico, etc.; pero sin tener una restric-
ción inicial constrictiva.
• Almacenamiento. La posibilidad digital de los me-

dios interactivos les permite acceder a un almacena-
miento inmediato y accesible, suprimiendo distan-
cias y expandiéndose en los medios inherentes a las
tecnologías digitales.
4.8.2 Estructuras temporales narrativas

El control temporal ha sido una
obsesión humana desde la mágica manipulación de las
pinturas rupestres; la narrativa llevó a la perfección esta
posibilidad y sirve como punto de referencia en cuanto
abordamos el tema del control temporal en los hiperme-
dios, pues estamos tan acostumbrados este tipo de con-
tenidos que recurrimos a sus estructuras de manera au-
tomática en nuestra manera de abordar sus posibilidades

transformativas. Las estructuras narrativas temporales
primarias se pueden agrupar en:
1. Estructuras lineales o cronológicas
Aquella estructura en la que el tiempo fluye secuencial-

mente; de atrás hacia adelante, del pasado al presente y
de éste al futuro, los acontecimientos ordenados siguen
una estricta secuencia lógica. El manejo de las estructuras
lineales tiene un éxito comprobado y es el alma de piezas
de comunicación como es el caso del documental, don-
de la narración avanza en una progresión integrada por
tres partes: planteamiento, desarrollo y desenlace. Existe
en un segundo plano, una subestructura más compleja,
la estructura lineal alterada o en paralelo, que tiene un
desarrollo estrictamente cronológico, pero con alteración
aparente de la linealidad porque intercala secuencias que
parecieran alejarse de la progresión central, sin embargo
se respeta el esquema global de secuencia lógica temporal
y a raíz de la comparación, las secuencias se pueden refor-
zar mutuamente.
ii. Estructuras dc contrapunto
Este tipo de estructura yuxtapone acciones que terminan El portal de www.amazon.com permite al usuario
revisar historiales, el estado de los pedidos en
uniéndose en una sola línea narrativa, entre éstas existe tiempo real, crear cuentas personalizadas, así como
un diverso conjunto de herramientas personaliza-
una correspondencia temporal estricta, pues ocurren en das; su objetivo comercial moldea todas estas po-
el mismo momento, como la armonía de diversas melo- sibilidades de acuerdo participación en el tiempo
del usuario con el portal.
días, pero su presentación es alternada. El significado sólo
puede darse con la unión final, tal como en una entrega
de varios capítulos, cuya historia se completa hasta tener
la totalidad de las piezas.
iii. Estructuras de ruptura temporal
El dinamismo de este tipo de estructuras les permite ini-

ciar con la conclusión del tema o interrumpir en determi-
nado momento la narrativa para avanzar hacia adelante o
hacia atrás en el tiempo buscando promover vinculacio-
nes diversas, a menudo reiteran en el punto de partida, En el sitio de Yugo Nakamura www.yugop.com se
demuestra la importancia de la experimentación
el clímax o en el momento previo a la conclusión para temporal en una transposición abierta que sirve
finalmente como incubadora de ideas.
enfatizar las intenciones narrativas. El manejo temporal
186 | Modelos
puede ser muy variado, incluso cíclico, se altera el orden

del relato en provecho de una temporalidad subjetiva, en
busca de mayor dramatismo.
iv. Estructura de fresco
Relacionando su nombre con las obras pictóricas de este

tipo, las estructuras de fresco contienen un núcleo central
alrededor del cual hay una serie de núcleos secundarios
que explican y complementan al central, estilo que deriva
en una sensación de atemporalidad.
v. Estructura coral
En esta estructura narrativa se reúnen un conjunto de nú-

cleos que tienen la misma importancia para dar sentido
al conjunto, como en un coro donde las voces aportan la
armonía de la pieza ejecutada. Puede abarcar una diversi-
dad de temas reunidos bajo un común denominador.
4.8.3 Manipulación temporal
La manipulación del tiempo sufre transformaciones en

el espacio hipermedia, la posibilidad de controlarlo em-
La experiencia de un
juego como Minecraft,
une las restricciones au-
torales de trabajar con
bloques a la libertad del
jugador para construir
e interactuar en un es-
pacio de transposición
subjetiva que tiene un
alto potencial lúdico.
puja al diseñador a trabajar con la relación temporal de

sus proyectos en mente, para ello es necesario conocer los
fundamentos vinculados al tiempo en los medios interac-
tivos. Javier Royo (2004, p. 41) realiza una taxonomía de
estas posibilidades de acuerdo a la siguiente clasificación:
• Multicronicidad. La multiplicidad de internet permea

no sólo a los medios e interacciones de internet, sino que
también hace referencia a los diferentes tiempos que se
conjugan para la emisión, transporte y decodificación de
los mensajes, de manera que “es necesario que exista una
sincronía, un encuentro en el tiempo entre usuario y arte-
facto” esto dará origen a múltiples posibilidades tempora-
les, que al coincidir permiten al usuario efectuar acciones
determinadas; contestar un conjunto de correos electró-
nicos almacenados, visitar el sitio de internet de una pelí-
cula a estrenarse próximamente o recuperar información
publicada alguna vez en la red y que sin embargo en el
presente no se encuentra disponible ya -i.e. www.archi-
ve.org-. De esta forma es posible hacer coincidir en el
presente virtuales tiempos pasados o futuros, o más aún,
múltiples tiempos presentes para efectuar transacciones
informáticas simultáneas.
• Reversibilidad. La capacidad de deshacer acciones en el

terreno digital permite navegar en los sistemas informá-
ticos con mayor soltura y confianza, esta posibilidad apli-
cada al diseño gráficos de interfaces permite, por ejem-
plo, borrar los campos de un formulario para ingresar o
corregir información; recuperar direcciones de sitios de
internet al momento de navegar o revisar un historial de
acciones efectuadas durante una sesión determinada.
• Velocidad incremental. Las barreras impuestas por los

límites físicos de la velocidad se transforman continua-
mente en el espacio virtual, en breves períodos salen al
mercado versiones más veloces de procesadores infor-
máticos, la velocidad de las conexiones informáticas se
multiplica, etc., el espacio mismo de internet evoluciona
ahora hacia versiones más veloces de sí misma, (www.in-
ternet2.edu). El reto para los diseñadores es “adecuarse
continuamente a estos ritmos de procesamiento de la
información, teniendo en cuenta que al fin y al cabo el
188 | Modelos
usuario será siempre el mismo, con su velocidad huma-

na de lectura y de compresión de la información” Royo
(2004, p. 43).
Este concepto de velocidad suma la propiedad de otor-

gar poder al usuario como una consecuencia intrínseca, lo
que hace complejo su manejo e introduce variables éticas
en la manipulación de un elemento que puede recortar
libertades, como queda demostrado a manera de juego
mediático en los reality shows, en donde la variable tem-
poral de la transmisión instantánea somete a los perso-
najes, integrados por completo a la interfaz, a una carrera
de sobreexposición para que en poco tiempo los usuarios
puedan identificarse con la naturalidad de las reacciones
Diversas maneras de entender el tiempo... mediante programación en Processing

se han llevado a cabo interesantes ejemplos y ejercicios en torno a la visualiza-
ción temporal, tal es el caso del proyecto C-Clocks de Henk Lamers, que busca
representar el paso temporal mediante cantidades gráficas, en vez de numéricas.
http://www.loftmatic.com/_pages/Research/CClocks/CClocks_01.html
cotidianas de los sujetos; llegando a publicarse en la red

genuinas intromisiones en la intimidad individual, tales
como diarios, cartas, etc.
4.8.4 Transposición temporal
Cuando el autor traslada el control

temporal y parte de la responsabilidad autoral al usuario,
se lleva a cabo una transposición para que el lector trans-
forme su rol hacia el de un lecto-autor, esta transposición
es una acción cotidiana en el terreno hipermedia y se pue-
de efectuar en tres niveles:
i. Transposición objetiva En un sitio como en el del grupo musical Radio-

head (http://www.radiohead.com/deadairspace/)
Cuando el creador hace el traslado autoral con pautas es- la experiencia del usuario es lo importante, de
manera que la experiencia musical ha sido trasla-
tablecidas y delimitadas de manera que “guía” al lector en dada a una App que mediante una básica interfaz
se transforma de acuerdo al recorrido del usuario
su recorrido para que pueda cumplirlos. Isidro Moreno para entregar una vivencia personal más que una
(2002, p. 165) apunta, haciendo una interpretación del comunicación concreta.
análisis de Genette (París, 1930), cómo este traslado está
delimitado por las variables de: orden -mediante anacro-
nías retrospectivas y prospectivas-, duración -tanto de la
propuesta por el autor como de aquella desarrollada por
cada lectoautor- y frecuencia -iteratividad, o repetición
de los mensajes-.
ii. Transposición subjetiva
En este tipo de transposición los objetivos no son defi-

nidos en su totalidad por el autor, por lo que se abre la
experiencia a que el lector integre los suyos y forme junto
con el autor un objetivo común. El resultado final es una
experiencia única que combina las experiencias de ambos.
iii. Transposición abierta.
El último tipo de transposición carece de restricciones

temporales y de una meta como tal, fundamenta su ri-
queza en la experiencia y funciona como un espacio de
190 | Modelos
descubrimiento, en el que las conclusiones obtenidas no

habían sido siquiera imaginadas por el autor o el lectoau-
tor, más bien se descubren a lo largo del camino que abre
o cierra posibilidades sin concluir en ninguna de manera
específica.
4.8.5 El tiempo hipermedia
El tiempo es el componente funda-

mental que enlaza las aplicaciones tradicionales del diseño
gráfico hacia su evolución plena en el terreno hipermedia.
La variante temporal, como se ha revisado previamente,
muestra una diversificación en las posibilidades de mani-
pulación, transposición y control desde sus orígenes bási-
cos en los proyectos audiovisuales, hasta su manifestación
en el diverso abanico de la temporalidad en hipermedios.
La variable temporal añade una dimensión que abre la

puerta de exploración para el diseñador hipermedia y se-
ñala el camino para los fundamentos que añade al pro-
ceso de diseño el entorno digital interactivo: Acciones y
Atributos. El tiempo, como se visualiza en el macromo-
delo propuesto es la variable que vincula los conceptos
tradicionales con las aportaciones del nuevo medio, por
ello conserva características de ambos bloques y ayuda a
entender los elementos cuando trabajamos en cualquie-
ra de los ámbitos, o como suele suceder en los proyectos
hipermedia, cuando se combinan ambos para lograr una
mayor proyección.
Lupton (2008, p. 215) habla sobre la variable temporal

con especial vinculación hacia el movimiento, señalando
la diversidad que sus combinaciones implican con respec-
to a los conceptos que se han revisado previamente de
forma y espacio, pues permiten añadir nuevas manipula-
ciones a estos elementos: entradas y salidas; cambios de
escala, transparencia, color, uso de capas, etc. Es impor-
tante incidir en este punto, pues la revisión individual de
los fundamentos del diseño gráfico hipermedia no puede
implicar su separación, por el contrario, la intención del

presente trabajo es que las diferentes partes del análisis y
del modelo propuesto se sumen para lograr finalmente
tener una perspectiva integral que enriquezca el proceso
de diseño y para ello la labor vinculante del aspecto tem-
poral es de vital importancia.
Frente a la incorporación de estos aspectos básicos, el di-

señador gráfico hipermedia puede beneficiarse de pen-
sar en su pantalla de despliegue final como si fuese una
cambiante superficie, así como un escenario neutral en
el cual los personajes pueden ser llamados y sacados a
conveniencia. El factor temporal acerca al diseñador a la
labor del director de teatro, que debe organizar previo a
la ejecución de la obra, la manera en que todos los com-
ponentes deben cambiar e interactuar entre sí y junto con
el público para lograr una puesta en escena correcta.
4.9 Acciones
La posibilidad de trabajar con el

tiempo en el diseño gráfico se renueva tras la experi-
mentación formal y tipográfica de las primeras décadas,
con la introducción de elementos primero fotográficos
y posteriormente audiovisuales, sin embargo la mani-
pulación temporal se estanca en controles lineales has-
ta la llegada de un aspecto que potencía y le da nuevas
posibilidades a este control temporal; la interactividad.
Este componente formará parte de las acciones que per-
mitirán la manipulación de medios para trabajar con la
dinámica y las relaciones de los elementos de un pro-
yecto, de manera que el diseñador emplea un amplio
conjunto de atributos para cada uno de los elementos
de su obra, manejando las relaciones entre estos ellos y El ejemplo de Cálico Electrónico es la demostra-
sus consecuencias en la participación del usuario. Este ción del impacto persuasivo de la animación bien
ejecutada: de ser una cortinilla para la web de una
universo de acciones que aporta el entorno hiperme- empresa tecnológica ha pasado a ser un popular
personaje con serie animada propia.
192 | Modelos
dia es un amplio territorio poblado de elementos que

enriquecen la labor del diseño en la comunicación.
Entrar al terreno de las acciones en el espacio hipermedia

significa involucrarse plenamente con los aspectos parti-
culares del entorno digital, de los cuales el diseñador grá-
fico que busca ser experto en el medio debe empaparse.
Veen (2001, p. 111) relata en su propia experiencia lo que
debe significar para un diseñador gráfico entrar al cien
por cien en los hipermedios:
Cuando empecé a trabajar en la revista Wired, re-
cuerdo haber tenido una larga conversación con los
directores creativos sobre el proceso por el que ha-
bían pasado. Estaban haciendo cosas asombrosas con
el diseño impreso, impresión a ocho colores, tintas
metálicas y fluorescentes. ¿Saben cómo podían ob-
tener estos resultados asombrosos? Con un profun-
do conocimiento de la tecnología que hay detrás del
diseño impreso. Podían hablar durante horas sobre
puntos ganados con la tinta X en el papel Y y cómo
esto funcionaba a la luz natural pero no a través de
Richard Williams utiliza el ejemplo de una pelota

al caer para explicar los fundamentos básicos de la
animación: tiempo o ritmo y espaciado, con-
ceptos que tanto la animación tradicional como
digital aprovechan para lograr resultados fluidos y
veraces.
los monitores que teníamos en ese momento. Podían

contar los resultados de innumerables pruebas que
habían efectuado en la prensa que imprimía la revis-
ta. No me lo puedo imaginar diciendo: “Oh, no ne-
cesito saber nada sobre la imprenta. Porque limitará
mi creatividad”.
¿Podemos pensar que pueda ocurrir el mismo pen-

samiento en la Web? Es un equilibrio tenue y com-
plicado. Por una parte una de las razones por las que
muchos de los primeros sitios tuvieron éxito puede
deberse a una rebelión de la gente. HTML (Hiper-
text Markup Languaje) era excesivamente limitado,
especialmente si se lo comparaba con las ricas he-
rramientas gráficas que estaban disponibles para los
diseñadores acostumbrados a imprimir un trabajo.
Como resultado los primeros diseñadores web hi-
cieron retroceder las limitaciones básicas de la web.
Mientras que unos se lamentaban de la “decoración”
de un “sistema de hipertexto rico” otros pedían una
web que acomodase arte y ciencia. Los resultados
fueron, a menudo, imponentes ejemplos de diseño
194 | Modelos
visual creados como hacks puros para las intenciones

iniciales del HTML y de la web.
Analizando el origen de la evolución del diseño hacia

los hipermedios podemos encontrar como la dinámi-
ca del hipertexto revoluciona las interfaces informáticas
en los años 70, produciendo un alud de aplicaciones que
serían trasladadas posteriormente a los hipermedios. El
hipertexo fue el punto de partida de un nuevo sistema de
información y como apunta Royo (2004, p. 106) “Es el
sistema que ha permitido integrar de un modo más activo
imágenes y lenguajes no alfabéticos. El hipertexto es el
elemento clave que ha dotado al ciberespacio de multi-
culturalidad y multilingüismo.”
Las estructuras hipertextuales han sido comparadas con

la manera en que nuestras sinápsis se comunican y es su
rompimiento con la linealidad lo que dota de mayores
posibilidades a los sistemas de comunicación en internet.
La evolución -y combinación- de los sistemas hipertex-
tuales hacia los hipermedios se encuentra todavía en una
fase de transición, hasta ahora la denominación de “pá-
ginas” de internet sigue teniendo un fuerte peso y conti-
nuamos pensando en el diseño de hipermedios desde la
perspectiva lineal de la letra impresa, los esfuerzos en el
desarrollo y clarificación de las teorías de la interactivi-
dad, usabilidad e interfaces, así como de los lenguajes y
estructuras predominantes en este medio dotan al diseña-
dor de herramientas y nuevas perspectivas para atacar los
problemas de comunicación que el terreno hipermedia
demanda.
Si el tiempo funciona como un puente de transición entre

el diseño gráfico tradicional y su traslado al terreno hiper-
media, la posibilidad de generar acciones entre las formas,
su espacio y el usuario mismo es el componente que sitúa
al diseño en un terreno fértil para evolucionar y generar
nuevas maneras de aproximarse a las soluciones de co-
municación visual que demanda la dinámica hipermedia.
La posibilidad de interactuar con el usuario le confiere a

los componentes del diseño gráfico hipermedia una cua-
lidad fundamental de acción. Mediante la acción de los
componentes fundamentales el usuario puede generar un

amplio conjunto de relaciones para seleccionar elemen-
tos, vincular unos con otros, otorgarles movimiento, ha-
cer que desplieguen información, ayudar a que el sistema
interprete sus datos o generar una cadena de acciones que
aprovecha por ejemplo, una interfaz unida a una base de
datos.
Dentro de este conjunto de acciones, encontramos tres

variaciones primarias que conforman los pilares de las in-
terrelaciones hipermedia básicas: animación, interacción
y transformación.
4.9.1 Animación 2D y 3D
La animación utiliza secuencias de imá-
genes fijas para crear la ilusión óptica de movimiento.
El cerebro retiene imágenes por una fracción de se-
gundo más de lo que permanecen actualmente frente
a nosotros, resultando en la ilusión de movimiento al
aparecer numerosas imágenes un una rápida sucesión,
este fenómeno es conocido como persistencia de la
visión. Lewandowsky (2010, p. 223)
La animación en el terreno hipermedia es heredera de

los sistemas de animación tradicionales, desde los zootro-
pos y fenaquistiscopios del siglo XIX hasta las cortinillas
El sitio de Kennedy and
Castro incorpora unn
conjunto de anima-
ciones a si sitio web
que forman parte de
la interfaz, de los ele-
mentos visuales y de los
mensajes que en cada
una de las secciones
desean comunicar.
www.kennedyandcas-
tro.com
196 | Modelos
animadas de Cálico Electrónico (www.calicoelectronico.

com) los fundamentos siguen siendo los mismos: crear la
ilusión de movimiento continuo producido por el des-
pliegue de una serie de imágenes fijas a un ritmo de más
de 15 cuadros por segundo.
Vaughan (2001, p. 282) habla de la animación en el te-

rreno digital como heredera de la lógica y los procedi-
mientos de la animación cuadro por cuadro tradicional;
de esa forma hablamos de pintura en términos de colores
o gradientes aplicados a los rellenos de las figuras, de tin-
tas como valores RGB que permiten combinar y mezclar
tonalidades para producir transparencias, posterizados y
efectos especiales; de fotogramas clave, cuadros de ani-
mación, capas y un vasto conjunto de términos que la
animación en acetatos lleva empleando durante toda su
carrera.
La animación en un proyecto hipermedia provee la forma

y el contenido de un sistema dinámico. Iniciando con los
cuatro cuadros necesarios para la animación de un botón
interactivo en un sitio web hasta las millones de imágenes
necesarias para unos segundos de la introducción en un
videojuego, la animación tiene una amplia gama de posi-
bilidades en el terreno hipermedia.
Para iniciar el trabajo de animación en el entorno hiper-

media es necesario partir de un trazo o imagen original,
estas imágenes en el espacio digital pueden clasificarse en
dos grandes grupos de acuerdo a su origen:
Herramientas de
modelado 3D; SketchUp
ofrece la posibilidad de
bocetar rápidamente
en tres dimensiones y
aplica estilos artísti-
cos personalizables
a los renders finales;
Blender en cambio es
una herramienta muy
potente que puede
ser utilizada para crear
tanto un cortometraje
como los personajes de
un videojuego.
i. Mapas de bits: son matrices o tramas de información

que describen puntos individuales, tienen su origen en
la fotografía, son archivos que describen cada uno de los
puntos individuales que componen a las imágenes re-
sultantes con lo cual pueden ser de considerable peso al
aumentar su resolución, los mapas de bits son fáciles de
manipular y logran imágenes de extremo realismo con
relativa facilidad, tienen la desventaja de pixelarse con el
aumento o la disminución de tamaño.
ii. Vectoriales: Sistema de descripción de trazos me-

diante ecuaciones matemáticas basadas en coordenadas
y vectores, tienen su origen en los programas de Diseño
Asistido por Ordenador (CAD) y su principal ventaja es
la ligereza de los archivos originales, la desventaja que
conllevan es que pueden ser imágenes mas complicadas
de realizar, especialmente al tratarse de composiciones
complejas y fotorealistas.
Ya que el diseñador tiene bajo control los aspectos de

forma y espacio la animación implica el dominio de dos
aspectos esenciales que Richard Williams (2009, p. 7) ex-
plica en su manual de animación:
i. Tiempo: Utilizando el ejemplo de una pelota al caer

Williams explica que cada uno de los golpes que da so-
bre la superficie es el tiempo de la acción, el ritmo al que
los sucesos acontecen, donde los acentos, pasos o golpes
suceden.
ii. Espaciado: La pelota se mueve sobre si misma cuando

está en la parte lenta de su arco, pero cuando cae rápida-
mente se mueve hacia adelante, el espaciado es qué tan
cercanos o lejanos son esos movimientos. El espaciado
es la parte compleja de la animación y su dominio es una
labor de paciencia y experiencia.
La irrupción de las herramientas digitales en el ámbito

de la animación ha supuesto una revolución en sí misma
para este universo, las casas de animación más grandes
como Disney o Ghibli han identificado comercialmente
las posibilidades de esta revolución y han introducido en
pocas décadas el flujo de trabajo digital en su produc-
ción cotidiana, con resultados que han transformado la
198 | Modelos
industria y les han diversificado hacia una audiencia más

amplia.
Para el diseñador gráfico, el hecho de que la animación

pueda realizarse mediante herramientas digitales le per-
mite incorporar este método de una manera sencilla gra-
cias a la traducción en programas informáticos de la ex-
periencia de décadas de animación tradicional.
La mayor parte de los programas de animación digital

incorporan el trabajo a partir de imágenes, vectoriales o
pixelares, e incluyen la versión informatizada de las he-
rramientas básicas de la animación: Trabajo en capas, fo-
togramas (frames), fotogramas clave (keyframes), reglas de
tiempo, propiedades de cada uno de los elementos y del
documento en sí, así como una amplia variedad de pane-
les con herramientas más o menos avanzadas que aportan
labores específicas al desarrollo de la propia animación.
Entre los programas más utilizados para la animación bi-

dimensional tenemos Flash, ToonBoom, Anime Studio,
Cacani, Motion, After Effects, Toons, Flipnote Studio,
Ajax animator. Todos ellos conservan un conjunto de
herramientas comunes; el trabajo con fotogramas, lineas
temporales, capas y fotogramas clave; y se diferencían
especializándose con herramientas específicas aplicables
al desarrollo de animaciones cinematográficas, anime, o
proyectos web por ejemplo, de esta forma el diseñador
dependiendo de el uso final que contemple dar a su ani-
mación puede emplear uno u otro.
De entre la variedad de herramientas existen dos desa-

rrollos en el terreno de la animación digital que han sido
muy importantes para la optimización del proceso y que
la mayoría de los programas incluyen debido a la ventaja
que representan frente a la animación tradicional:
i. Símbolos (Symbols); la posibilidad de convertir una

imagen o una animación en un símbolo supone una clara
ventaja para su posterior utilización, pues permite llamar
a ese símbolo a “escena” para darle posición, animarle o
transformarlo. Una vez llamado a escena este símbolo
genera una instancia que está a su vez vinculada al sím-
bolo original, esta vinculación permite transformar to-
das las instancias de un símbolo sin tener que trabajar

individualmente en ellas; los símbolos son almacenables
en bibliotecas a manera de “castings” para ser traídos a
conveniencia y combinarlos de acuerdo a las necesida-
des del proyecto. A menudo los símbolos se agrupan y se
combinan para generar animaciones más complejas o se
unen con “esqueletos” que les permiten articular movi-
mientos naturales como en el caso de un personaje ani-
mado (Smith, p. 2010).
ii. Interpolaciones (Tweens): Este concepto heredado de

la animación tradicional permite sacar el máximo prove-
cho del ordenador, facilitando la labor del diseñador que
elabora los fotogramas más importantes (fotogramas cla-
ve) para que el ordenador intuya los pasos intermedios,
realizando la labor más tediosa y automática del proceso
dejando así al diseñador dedicar sus esfuerzos hacia las
partes más creativas del proceso, las dos principales inter-
polaciones que se realizan en el terreno de la animación
tienen que ver con el movimiento (al llevar un símbolo de
una posición, o escala a otra) o la forma (al transformar
un símbolo en otro).
Estos dos conceptos fundamentales ofrecen un panorama

infinito de posibilidades y su manipulación ha dado pie a
El mundo virtual 3-D

de Second Life (www.
secondlife.com) tiene a
la fecha una población
de más de 40 millones
de residentes (01/2015);
aunque sus condicio-
nantes y reglamentos
están bien establecidos,
el hecho de que los
usuarios puedan crear
objetos y utilizarlos
dentro de este mundo
ha sido la clave de su
éxito.
200 | Modelos
la vinculación de la animación con el último elemento bá-

sico del modelo propuesto: los atributos, que trasladados
a proyectos hipermedia han posibilitado el desarrollo de
herramientas para interfaces como los mapas de imáge-
nes interactivos o los botones animados; o interacciones
avanzadas con lenguajes de programación como el Action
Script, para construir interfaces complejas basadas en in-
teracciones animadas.
La digitalización de las herramientas de animación se

empezó a aplicar en la industria cinematográfica desde
la década de los setenta, films como Futureworld o Star
Wars incorporaron retoques en sus fotogramas para lograr
impactantes efectos especiales, esta vinculación inicia la
carrera de los efectos digitales y tiene su momento álgido
en el film The Abyss, donde la animación 3D lleva el méri-
to al Oscar cinematográfico del año en efectos especiales.
Estos avances en la animación tridimensional se trasla-
darán al conjunto de aplicaciones en los hipermedios; vi-
deojuegos, web, interactivos y apps.
El espacio tridimensional contempla el movimiento en

tres ejes; altura, anchura y profundidad, el diseño en el
espacio tridimensional se apoya en las diferentes vistas
básicas que los programas informáticos ofrecen – ortogo-
nal, perspectiva, superior, frontal y lateral – para permitir
una visualización de los objetos en base a su rotación, pa-
neo y diferentes niveles de acercamiento. La construcción
tridimensional utiliza niveles de representación que van
unidos a los resultados que se pueden visualizar en pan-
talla; a mayor calidad la demanda de procesamiento para
el ordenador es mayor y por ello los tiempos de render
o visualización final son mayores, para ello las opciones
de trabajo y manipulación en pantalla suelen incluir las
opciones de:
i. Wireframe, o malla de alambre, en donde los bordes

de la figura son visibles sin integrar el relleno de los pla-
nos que conforman las figuras, es el nivel más básico de
visualización y es idóneo para el trabajo puntual con los
vectores que constituyen los elementos tridimensionales.
ii. Shaded, figuras sombreadas que ofrecen una relación

muy básica con los componentes lumínicos y carecen del

mapeo de superficie o texturas para lograr una visualiza-
ción del objeto entendible de forma tridimensional pero
sin los detalles que ralentizan el trabajo por parte del or-
denador, este esquema es utilizado cotidianamente para
moldear la figura y obtener rápidas visualizaciones de los
avances logrados en términos de modelado.
Para otorgar mayor realismo al film de ParaNorman,

cada uno de los personajes fue impreso en 3D,
incluyendo las variables en posturas, movimientos
y gestos, las piezas pintadas a mano fueron las pro-
tagonistas finales de esta película nominada como
mejor largometraje animado al Oscar en 2012.
La campaña Uncover
your World de Google
en 2011 incluía una ciu-
dad miniatura impresa
en 3D, videos en YouTu-
be, publicidad online y
Apps para dispositivos
móviles, componiendo
una campaña rich media
de gran impacto.
202 | Modelos
iii. Textured, figuras que incorporan los detalles de super-

ficie, iluminación y texturizado en mayor o menor gra-
do de complejidad, son las que demandan mayor tiempo
de procesamiento pero ofrecen resultados fotorealistas
(Chopra, p. 2007).
El modelado de los objetos tridimensionales se realiza me-

diante las técnicas de extrusión de objetos y la subdivisión
de superficies, técnicas que mezcladas ofrecen una amplia
gama de posibilidades plásticas cercanas a la escultura o el
modelado en arcilla y que incorporan la flexibilidad de la
manipulación vectorial.
Los principales programas de construcción y modelado
tridimensional van desde las básicas como Photoshop,
Illustrator o SketchUp, hasta las más avanzadas, utili-
zadas para generar renders y animaciones fotorealistas;
Gsculplt, Wings 3D, Kerkythea, Catia, Blender, Maya,
Cinema 4D, 3D Studio, Poser, Mudbox, etc.
El proceso de modelado y animación 3D conlleva el tra-

bajo de diferentes módulos y herramientas efectuados
regularmente durante las etapas de pre-producción, pro-
ducción y post-producción de la siguiente manera:
Elementos compositi-
vos para el modelado
3D basado en Mesh o
Mallas; Vértices, bordes
y caras componen los
objetos ubicados en un
espacio tridimensional.
OBJETO VÉRTICE BORDE CARA

i. Modelado. El trazo de aristas en los planos tridimen-

sionales al cerrarse genera caras, definidas por al menos
tres bordes en el mismo plano, los planos permiten ope-
raciones básicas como escala y rotación, y se tornan más
avanzadas conforme más complejo es el programa de
manipulación, dando origen a operaciones como la ex-
trusión, el perfilado, las intersecciones, construcciones si-
métricas... herramientas que ayudan a detallar el modelo
hasta conseguir una pieza armada con la cual se puede
trabajar en el siguiente paso del modelado. Muchos pro-
gramas se apoyan en primitivos básicos para optimizar el
proceso inicial partiendo de una superficie que se modela
y combina para obtener los resultados deseados.
ii. Materiales y texturas, una vez que el sólido inicial está

resuelto, el siguiente paso es conferirle propiedades de
superficie, para ello los programas de modelado utilizan
amplias bibliotecas de materiales y texturas y permiten
incorporar materiales propios como imágenes para traba-
jar superficies personalizadas, además de que el material
o la textura se pueden proveer de tonalidad propia a la
superficie o de propiedades específicas como transparen-
cia o reflexión.
iii. Iluminación, los programas de modelado y anima-

ción 3D suelen tener un amplio conjunto de herramien-
tas para controlar la iluminación; las fuentes pueden ser
diversas y abarcan luces ambientales (point lamps), luces
direccionales (como el sol), iluminación spot (haces de luz
puntual), hemis (luces puntuales direccionales) y áreas o
superficies que generan luz por sí mismas. Los programas
que ofrecen tecnología de Ray Trace permiten trabajar
con la manera en que los haces de luz inciden en los obje-
tos de la composición para generar proyecciones, reflejos
y sombras.
iv. Render, la visualización final implica el procesamiento

por parte del ordenador de todos los componentes que
una escena determinada incluye; los sólidos, sus texturas,
la iluminación, los haces de luz y la refracción, así como
el punto de vista o perspectiva específica que se está utili-
zando para visualizar la escena. Este proceso depende de
la capacidad de procesamiento del ordenador y culmina
204 | Modelos
con la visualización en alta resolución de la escena prepara-

da. A menudo los programas de modelado permiten la in-
corporación de plugins para realizar renderizados específicos
(fotorealistas, transformativos, fotográficos...).
v. Animación, los controles de animación dentro de las he-

rramientas 3D semejan a sus contrapartes bidimensionales,
pues las variables son las mismas; trabajan con una linea
temporal basada en fotogramas, fotogramas clave y diversas
capas. El elemento tridimensional añade la posibilidad de
moverse en el espacio con lo cual los programas tridimensio-
nales suelen incorporar la posibilidad de manipular cámaras
para situarlas como referentes y moverlas como si de cáma-
ras reales sobre una escenografía se tratase, para obtener el
render final de una animación es necesario que el ordenador
procese cada uno de los cuadros de forma individual para
unirlos en un sólo archivo de vídeo que integra todos los
cuadros de la animación en un archivo único, al que es posi-
ble aplicar formatos de compresión para aligerarla.
El desarrollo de la animación y el modelado 3D han deriva-

do en un campo que es importante mencionar debido a su
impacto hacia las posibilidades dentro del diseño gráfico: la
impresión 3D. La revista Computer Arts en su número de
Marzo del 2012 señala: “La tecnología detrás de la impre-
sión 3D ha estado disponible desde hace 25 años, pero sólo
recientemente se ha vuelto disponible al usuario general, con
fascinantes resultados creativos.”
El proceso parte al igual que la animación 3D del mode-

lado de los objetos, para el proceso de impresión en 3D es
muy importante que los planos del modelo estén totalmen-
te cerrados y sin bordes compartidos por más de dos caras,
existen aplicaciones que ayudan a verificar online este re-
querimiento, por ejemplo Netfabb Studio Basic (cloud.net-
fabb.com) que verifica el correcto armado de la pieza; las
consideraciones de tamaño deben ser adecuadas a las posi-
bilidades de la impresora, pues dependiendo de la máquina
es posible imprimir hasta cierto tamaño y, dado el caso, im-
primir por secciones para ser armadas posteriormente. Las
piezas modeladas para su impresión 3D deben ser sólidas,
estables y físicamente imprimibles. Tomando en cuenta estas
consideraciones se realiza el modelado con cualquiera de los
programas mencionados anteriormente y, dependiendo

del tipo de impresión final se pueden tomar en cuenta
características de materiales y color ya que existen im-
presoras que permiten la incorporación de diversos ti-
pos de materiales finales o de utilizar sustratos de color
para crear las piezas con la tonalidad deseada, una vez
impresas las piezas se pueden pulir, pintar, barnizar o
retocar para darle los ajustes finales. El nivel de detalle
de las impresoras ya llega a las 50 micras, la mitad del
grosor de un folio de papel, con lo cual se puede obtener
un detallado importante.
Las aplicaciones de la impresión 3D van desde el pro-

totipado de piezas y la visualización física, hasta la ela-
boración personalizada de objetos como fundas para
teléfonos móviles, e implican para el campo del diseño
y la comunicación un novedoso campo de expresión vi-
sual que han sabido aprovechar empresas como Goo-
gle, en su campaña rich media del 2011 “Uncover your
world” en donde una ciudad miniatura impresa en 3D
era la protagonista principal, o los estudios Laika que
en 2012 realizaron el largometraje ParaNorman, donde
cada una de las piezas utilizadas en los personajes fue
impresa previamente en 3D.
Un conjunto de programas de edición
como Final Cut y Motion permiten
manipular fácilmente dos vídeos para
trabajar con chromas y lograr resultados
profesionales. La amplia gama de efectos
especiales de los programas de edición
ofrecen un amplio abanico para los
diseñadores que pueden de hecho iniciar
de cero sus propios efectos en el módulo
de animación e incorporarlos posterior-
mente al vídeo en la interfaz de edición
central.
206 | Modelos
4.9.2 Video
Los proyectos multimedia desde

sus orígenes han empleado imágenes en movimiento
para impactar y darle ritmo a sus presentaciones. En
el terreno hipermedia la inclusión del video (o vídeo,
como suele denominarse en España) como parte de las
posibilidades de animación es una herramienta natu-
ral; con un gran poder de atracción y cualidades ex-
presivas únicas, el video se ha convertido de pronto en
una herramienta accesible a todo usuario, sin embargo
su presentación en un proyecto hipermedia debe estar
cargada de mensajes y experiencias, de lo contrario el
usuario pierde rápidamente el interés y con las posibili-
dades de control temporal en su poder fácilmente unos
segundos de video mal seleccionados pueden distraer la
atención y provocar el rompimiento narrativo instantá-
neo de una pieza.
El video digital es una herramienta que ha tenido una

rápida evolución, heredera del cine y video analógico
es una traducción digital de la luminosidad de los ha-
ces de luz que al pasar por el lente de una cámara los
convierten en una señal electrónica mediante un sensor
(CCD), esta señal incluye tres canales de información
de color (RGB) y pulsos de sincronización. Ascher
(2008, p. 23) explica el formato de vídeo de acuerdo
la cuadrícula rectangular de píxeles (grid) que compo-
La resolución de una ne a la imágenes. Cada uno de los píxeles representan
imagen expresada en el brillo y el color de esa parte de la imagen, un cua-
píxeles tiene efectos
inmediatos en la
visualización final de las
imágenes y el video.
vimeo.com
dro o fotograma está formado por el conjunto de píxeles

que pueden ser vistos en la imagen, la red de píxeles es
una fila horizontal de lineas apiladas y de esta manera es
procesada la información, el conjunto de lineas forman
un escaneo y el patrón total de lineas es denominado un
muestreo, los diferentes formatos de vídeo se diferencían
en el número de píxeles y la cantidad de lineas que tienen.
El formato digital Standard Definition Television

(SDTV), está formado por 480x720 píxeles, el High De-
finition Television (HDTV) es de 1920x 1080 píxeles y
el Ultra High Definition Television (UHDTV) va desde
el 4K de 3840 x 2160 píxeles hasta el 8K de 7680 × 4320
píxeles; los formatos informatizados suelen estar basa-
dos en estas convenciones y utilizan tanto codificadores
como compresores para generar archivos más ligeros, más
pequeños o adecuados para editarse y/o visualizarse en
algún programa específico, entre los formatos más utili-
zados tenemos la compresión del Moving Pictures Expert
Group; MPEG, basados en el estándar H.264; así como
los formatos propietarios .mov, .avi y .wma.
Utilizar un dispositivo externo al ordenador para capturar

o generar vídeo implica el uso de una cámara, que –de
ser dispositivos aparatosos y complejos en sus inicios en
la década de los setenta– se encuentran ahora práctica-
mente en cualquier dispositivo digital: teléfonos móvi-
les, tabletas, ordenadores y reproductores multimedia. Su
facilidad de captura y manipulación ha puesto al vídeo
a disposición del usuario cotidiano, con lo cual la toma,
edición y publicación de contenidos basados en vídeo ha
tenido un crecimiento exponencial en las últimas déca-
das, prueba de ello es la omnipresencia de sitios basados
en videocontenido tales como Youtube, Vimeo o Vine. El
video es una buena herramienta si se necesita comunicar
un mensaje personal, es la mejor opción para demostrar
representaciones que son ejecutadas en movimiento, por
ejemplo, una representación artística o una jugada de-
portiva. Para explicar procesos complejos el video es una
herramienta muy didáctica, que puede ayudar a analizar
desde diferentes puntos de vista una pieza mecánica para
hacer más comprensible su funcionamiento. El video per-
208 | Modelos
mite al usuario experimentar una vivencia que puede ser

muy complicado o caro demostrar físicamente.
Al utilizar vídeos en un proyecto hipermedia es necesario

considerar un par de variables que influyen en la expe-
riencia del usuario:
i. Tamaño: Tanto el tamaño de despliegue de video

en pantalla, como la longitud de la secuencia de vi-
deo son factores que determinan la percepción del
usuario sobre la pieza mostrada, la labor de síntesis
siempre es bien recibida en estos casos, conside-
rando el tiempo global óptimo para la navegación
completa de la pieza hipermedia.
ii. Nivel de compresión y sistema de descarga: Estos

dos factores influyen en la velocidad de despliegue
final para el usuario, un tiempo excesivo empuja al
usuario a abandonar el espacio sin haber comple-
tado la descarga de la pieza; niveles de compresión
demasiado altos provocan una pérdida excesiva de
información, redundando en despliegues pixela-
dos o con saltos de imagen. Las redes P2P y los
sistemas de almacenamiento online son opciones
interesantes cuando es necesario enviar archivos de
vídeo muy pesados; los sitios de publicación online
como YouTube o Vimeo permiten generar vínculos
que es posible integrar posteriormente a proyectos
hipermedia, trasladando el peso de la descarga a un
conjunto de herramientas dedicadas que mejoran la
experiencia del usuario.
iii. Formato: El formato de los archivos digitales al

trabajar con video en hipermedia tiene un impac-
to decisivo en el flujo de trabajo para el desarrollo
del proyecto y para la visualización por parte del
usuario. Hoy en día encontramos un conjunto de
formatos de vídeo muy amplios, que dependiendo
del codificador utilizado significan mayor o menor
compresión y calidad, lo que redunda en el tamaño
del archivo final y por ende en la distribución que
podemos hacer del mismo.
Existe un conjunto muy amplio de programas de edición

de vídeo, muchos de ellos vienen interconstruidos en las

propias cámaras digitales o almacenados en smartphones
y tabletas, los programas de edición de vídeo a nivel pro-
fesional son un conjunto más reducido y entre los prin-
cipales podemos mencionar: Premiere Pro, After Effects,
Final Cut, Sony Vegas, Avid Media Composer, Magix
Video Pro. El software de edición de vídeo sigue un pro-
ceso de trabajo que conlleva las siguientes fases:
1. Importación y organización: Una vez filmados los di-

ferentes segmentos de vídeo necesitan ser incorporados
al ordenador en donde serán editados, para ello los pro-
gramas de edición de vídeo incorporan herramientas para
importar los archivos necesarios, con opción a convertir
los archivos en un formato más conveniente y la opción
de organizar los vídeos para colocarles marcadores, asig-
narles descripciones y palabras clave o simplemente je-
rarquizarlos dentro de un sistema útil para una rápida
identificación y referencia.
Programas como Flash y

Edge Animate permiten
combinar los tipos de
animación hipermedia:
fotográfica, vectorial y
de programación para
lograr integrarlos en un
sólo proyecto
210 | Modelos
2. Edición básica: seleccionar y cortar segmentos, cam-

biar de tomas, trabajar la navegación y formar los prime-
ros bloques narrativos forma parte de la primer edición
que se aplica a los segmentos para convertirlos en una
sola pieza narrativa.
3. Edición de audio: en paralelo a la edición básica una

edición de audio permite refinar los aspectos sonoros
ajustando ecualizaciones, reparando problemas o sincro-
nizando audio de fuentes diversas.
4. Efectos especiales: la incorporación de efectos especia-

les es un amplio capítulo en el conjunto de herramientas
que los programas de edición de vídeo integran, de hecho
muchos de ellos contemplan modulos adicionales que
permiten trabajar de manera puntual los efectos especia-
les para crearlos de origen de acuerdo a las necesidades
del proyecto (Motion, After Effects), los efectos especia-
les tienen que ver con los títulos y textos, las transiciones,
gráficos y fotografías, audio, animaciones y ajustes o co-
rrecciones al propio vídeo.
5. Render: Una vez aplicados los ajustes, efectos, tran-

siciones y el conjunto de variables que un programa de
edición permite, es necesario culminar haciendo una ver-
sión final del archivo que integre todas las modificaciones
y prepare un vídeo final con la versión en la resolución
deseada del proyecto, así como los ajustes de compresión
necesarios para darle el peso adecuado.
4.9.3 Animación hipermedia
La animación en el terreno hiperme-

dia se encuentra con un entorno idóneo para su ejecución
y desarrollo, desde una animación tan sencilla como el
cambio de estado de un botón al sobreponerse el cursor
en una interfaz, hasta una compleja animación que de-
muestra una cambiante pieza en 3D respondiendo a las
acciones del usuario con sus componentes, la animación
se ha convertido a la vez en un componente fundamen-
tal de los hipermedios y se ha convertido en una de las

herramientas de mayor utilidad para el diseñador en la
implementación de interfaces e interacciones.
Una importante influencia en la animación hipermedia

vine de la infografía, que en sí misma es una interacción,
pues traduce datos e información en elementos visua-
les que ayudan al lector a conceptualizar de una manera
más clara un concepto complejo, Yau (2011, p. 5) lleva la
infografía hacia el terreno de la interactividad y apunta
que el objetivo principal de la visualización de datos no
siempre es mostrar información pura y dura; que algunas
veces el objetivo no es lograr el conocimiento analítico,
y que muchas veces el objetivo de la infografía puede ser
relatar una historia desde un punto de vista emocional,
que promueva a los lectores a reflexionar sobre los datos
presentados.
Hoy en día sitios como Wordle, Many Eyes o Blank Map,

son ejemplos de las posibilidades que tiene la traducción
de datos en elementos visuales con el apoyo de los ele-
mentos interactivos, la infografía hipermedia se apoya
tanto en elementos estáticos como en el dinamismo de la
Tres ejemplos del poder de la visualización gráfica
animación para contar historias, manipular cifras y pre- de información trasladada al terreno hipermedia:
sentar de manera gráfica un conjunto de conceptos que BlankMaps, english.freemap.jp/europe_e/continen-
tal.html, permite visualizar y descargar mapas edi-
pueden ser complejos de descodificar de cualquier otra tables en formatos digitales; La red experimental de
manera. IBM Many Eyes, www-958.ibm.com/software/data/
cognos/manyeyes/permite a los usuarios utilizar las
herramientas informáticas del sistema para crear
La animación fundamenta su practicidad debido al po- visualizaciones de datos y compartirlas online, y
der de síntesis que conlleva, sin exceder su abstracción Wordle, www.wordle.net genera nubes tipográficas
de datos que se pueden imprimir o compartir.
como en el caso de la tipografía y sin volverse excesiva
como en el caso de una pieza de video, la animación se
encuentra en un justo medio que permite manipular la
realidad, simplificando conceptos y ayudando a construir
interfaces naturales, fáciles de entender.
Otra ventaja de la animación radica en su economía, los

archivos de una animación pueden ser mucho más ligeros
que su correspondencia en video, con lo cual, su descarga
es más veloz y la calidad que se puede lograr con sistemas
basados en vectores logra también flexibilidad de desplie-
gue lo que permite aumentar o reducir la visualización en
pantalla sin generar pérdida de información.
212 | Modelos
La animación es una potente herramienta de persuasión,

lo sabía perfectamente Walt Disney hace más de 50 años
y utilizando estas posibilidades persuasivas hacía reír o
llorar con sus películas animadas a miles de espectadores.
Sin embargo un conjunto excesivo de elementos anima-
dos en un sólo despliegue de pantalla también se pueden
convertir en un sistema caótico, difícil de descifrar e irri-
tante para el usuario por su desmedido movimiento.
La animación hipermedia tiene tres variantes principales

de acuerdo a la manera en que es generada, esta concep-
ción influye de forma directa no sólo en el despliegue en
pantalla, también tiene impacto final en la percepción del
lectoautor y en el estilo en sí de la pieza de comunicación:
i. Animación fotográfica.
Este tipo de animación hereda sus características del ce-

luloide, consta de dos elementos: las figuras y el fondo,
mientras el fondo puede permanecer fijo, las figuras se
encuentran en una transformación constante para cam-
biar de un fotograma al siguiente y provocar así la sensa-
ción de movimiento, este tipo de animación es la heredera
de la animación tradicional, en donde el efecto de movi-
miento era logrado fotografiando cada uno de los cuadros
que mediante el uso de acetatos lograba animar figuras
sobre fondos fijos, su traducción digital recurre al uso de
capas para lograr este efecto con resultados similares. Los
programas de animación actual ayudan a elaborar este
tipo de animación creando interpolaciones entre fotogra-
mas clave, generando efectos como el morphing, en donde
un elemento se transforma en otro totalmente diferente
evolucionando a través de una serie de cuadros que logran
la transición adecuada, algunos de los programas que se
pueden utilizar para hacer animaciones de este tipo son:
Photoshop, Morph, Image Ready.
ii. Animación basada en trazados.
Con la irrupción del software de diseño vectorial en el

terreno de la animación programas como Flash, Motion,

Edge o ImageReady permiten a un objeto que se mueva
por la pantalla al variar su coordenadas basándose en ejes.
El programa crea interpolaciones de acuerdo a la infor-
mación de diferentes ubicaciones para rellenar los espa-
cios entre una posición inicial y una final, optimizando el
proceso al requerir mucho menor información para rea-
lizar los cálculos.
iii. Animación basada en programación.
Este tipo de animación implica el uso de lenguajes de

programación o scripts para lograr la animación, median-
te el uso de un conjunto de comandos los fotogramas se
sustituyen para crear secuencias de movimiento o anima-
ciones. Este tipo de animación es muy flexible porque es
susceptible de modificaciones de una manera muy abierta
y permite el intercambio de scripts para lograr automa-
tizar tareas e intercambiar objetos fácilmente, programas
de animación como Flash incorporan un lenguaje propio
de programación (ActionScript) para generar resultados
muy controlados, con la desventaja de requerir un plu-
gin para su correcta visualización; otros programas como
Dreamweaver se sirven de lenguajes más abiertos (html,
javascript) para generar sus animaciones y lograr resul-
tados más transparentes para el usuario. Finalmente al-
gunos programas como Motion o AfterEffects reúnen el
conjunto de posibilidades de la animación hipermedia
para combinar elementos tipográficos, transiciones y co-
lor, con técnicas de iluminación y cámaras que añaden
textura y profundidad a animaciones que se integran en
proyectos hipermedia.
Dos galerías de presentación de proyectos

4.9.4 Interacción sirven de ejemplo para identificar el uso de
diferentes niveles de interacción, mientras
que nicole.osx.at lleva por un camino mas
acotado y puntual
insidepiet.com/v1 promueve una parti-
La interacción interfaz-usuario ha cipación participativa-transformativa del
usuario, cada uno de los sitios hace uso de
sido abordada en capítulos anteriores, sin embargo al estas herramientas vinculadas a la filosofía
trabajar con los componentes fundamentales del diseño de la empresa y el tipo de información
presentada en cada uno de ellos.
214 | Modelos
gráfico: forma, espacio y tiempo, surgen, en su traslado

al plano hipermedia un conjunto de acciones entre éstos
componentes que posibilitan que el intercambio de infor-
mación provoque su transformación para que respondan
como fichas de dominó a la cinética iniciada por la acción
del usuario con alguno de los elementos de la interfaz.
i. Interacción y componentes
Una primer relación interactiva se da en la manera en que

los diferentes componentes de un sistema hipermedia in-
teractúan entre sí. Identificar estas relaciones debe ser un
análisis a conciencia por parte del diseñador, para poder
explotar adecuadamente los resultados de este conjunto
de interacciones.
A partir de esta dinámica nos encontramos tres diferentes

niveles de interacción de acuerdo a la manera en que sus
diversos componentes se relacionan:
- Autogestionadas: cuando el sistema controla las accio-

nes de manera intrínseca, provocando que sus diferentes
componentes se comuniquen o transformen sin la acción
directa del usuario. Este tipo de interacciones posee una
fuerte independencia y su ritmo narrativo puede discurrir
desfasado por completo con respecto a la participación
del lector.
- De gestión externa: Si la acción entre los componentes

de un sistema se desarrolla exclusivamente con la parti-
cipación del usuario, nos encontramos ante interacciones
de gestión externa. Estas interacciones se anclan fuerte-
mente al ritmo del usuario y otorgan experiencias únicas,
marcadas por la manipulación individual e instantánea.
- Interacción mixta: la mayor parte de los sistemas inte-

ractivos utilizan un conjunto mixto de interacciones, en
donde en determinado momento es necesaria una par-
ticipación más activa del usuario, pero en donde tam-
bién suelen desplegarse interacciones entre los diferentes
componentes del sistema para marcar ritmos y hacer pau-
sas; aprovechando para mostrar una secuencia, desplegar
información, reajustar los elementos de la interfaz a un
nuevo estado, etc.
ii. Niveles de interacción
Al avanzar en el estudio de las relaciones de los com-

ponentes del sistema y su manifestación en cuanto a las
acciones que el usuario desempeña a lo largo de su par-
ticipación, podemos identificar diversos grados de inte-
racción correspondientes a su incidencia interactiva in-
herente, ya sea hacia los componentes del propio sistema
o de acuerdo a su relación en la participación del usuario,
Moreno (2002, p. 95) realiza un análisis sobre los niveles
de interactividad y cómo éstos permiten la integración
del lectoautor a la interfaz y a la elaboración narrativa de
la pieza final, en base al diseño de sistemas hipermedia
podríamos agrupar el resultado de estos niveles de inte-
racción como:
Peter Cho en su
proyecto Wordscapes
emplea interacciones
autogestionadas para
generar paisajes de
una sola palabra que
se transforman con
la colaboración del
usuario mediante el
ingreso inicial de las
diferentes letras del
alfabeto.
www.pcho.
net/projects.
php?id=wordscapes
216 | Modelos
- Interacción pasiva
Dentro de la interactividad pasiva se agrupan aquellos

sistemas que aportan un control temporal básico, pero
que no afecta de manera alguna la narrativa de la pieza,
tal es el caso por ejemplo de la interacción que permite un
control remoto de un dvd, con opciones fundamentales
tales como avanzar y retroceder u opciones adicionales
como subtitular o mostrar diferentes ángulos de cámara
de una escena, sin embargo estas variaciones no alteran de
modo alguno la naturaleza de el film observado, de igual
manera al hablar de software, un conjunto de elementos
enfocados hacia la navegación están, de hecho presentes
en los navegadores de internet; permiten avanzar, detener
y retroceder, este conjunto de herramientas constituyen
un apoyo a la participación del usuario pero la profun-
didad en la participación será definida por las interfaces
dentro de la ventana de navegación.
- Interacción participativa
Avanzando a un segundo nivel, la interactividad partici-

pativa requiere de la integración del usuario para comple-
tarse, tal como en un programa de concurso en donde, de
no haber concursantes la acción sería imposible. En este
nivel se agrupan un buen conjunto de aplicaciones educa-
tivas, videojuegos y sitios de internet.
- Interacción transformativa
En un tercer nivel la interactividad transformativa im-

plica no sólo la participación del usuario, adicionalmente
otorga al lector la capacidad de modificar la narrativa para
junto con el autor original crear una pieza personalizada,
como ejemplos de este tipo tenemos los sistemas operati-
vos de los ordenadores o dispositivos móviles, que además
de requerir la activa participación del usuario, permiten
incorporar fondos de pantalla, controles y aplicaciones
para que cada usuario tenga una experiencia adecuada a
sus gustos y necesidades.
- Interacción creativa
En el último escalafón de la interacción está la posibili-

dad de que el lector tome las riendas de una pieza para

a partir de ella generar un resultado totalmente inespe-
rado que responde la participación individual y perso-
nalizada del lectoautor, este tipo de interacción es utili-
zada para desarrollar programas complejos de software
como el Illustrator que ofrece al usuario un conjunto de
posibilidades abiertas para desarrollar creativamente la
propuesta de un diseño corporativo, de un envase o la
elaboración final de una ilustración digital.
iii. Estructuras interactivas
Fernández-Coca (1998, p. 81) parte de dos estructuras

interactivas básicas, en primer lugar toma la estructura
lineal, a la que nombra también como directa y la defi-
ne como una estructura que “Da solución previamente
determinada por el autor a una pregunta o búsqueda
concreta”. Como segunda opción menciona las estruc-
turas no lineales -experimentales o indirectas-, estas es-
tructuras contemplan la posibilidad de explorar diversas
posibilidades, otorgándole al sistema un rol más activo
por la posibilidad que tiene de inferir en la participación
del usuario.
Isidro Moreno (2002, p. 98) amplía este panorama con

una subdivisión de las primeras en: estructuras lineales
con intrainteractividad inteligente, donde las estructu-
ras incorporan un sistema para autotransformarse; es-
tructuras lineales con metaestructura interactiva, a raíz
de un sistema de control temporal en este tipo de es-
tructuras lineales se puede detener la secuencia inicial
para acceder a metaestructuras que podrían ser incluso
paralelas; estructuras interactivas subsidiarias de estruc-
turas lineales, donde el núcleo central es lineal, pero se
recibe fragmentado, respondiendo a diferentes estructu-
ras interactivas y por último menciona también las es-
tructuras iterativas siendo estructuras que cumplen ex-
clusivamente la función de repetición de la información.
En el terreno de las estructuras no lineales Moreno pro-

fundiza también en sus subcategorías para plantear un
218 | Modelos
análisis más profundo sobre la taxonomía de las estructu-

ras interactivas indirectas de manera que se pueden enu-
merar de la siguiente manera:
- Estructuras dendrítico-circulares, en la que la interac-

ción de centra en torno a un conjunto de opciones nu-
cleares a las que es necesario regresar para interactuar con
las opciones principales.
- Estructuras polidendríticas, en las que la interacción se

desarrolla a partir de ramificaciones interconectadas a di-
versos niveles.
- Estructuras abiertas y semiabiertas, estructuras en las

que, dependiendo del grado de constricción autoral, el
lectoautor será dotado de posibilidades transformativas
sobre las formas, el espacio, el tiempo o la narrativa mis-
ma.
- Estructuras convergentes, que fusionan las estructuras

anteriores para generar diversos tipos de interacción en
una sola pieza.
- Estructuras interactivas de recepción colectiva, simultá-

nea y grupal, es interesante también la mención que hace
sobre la participación democrática que los sistemas inte-
ractivos permiten de manera simultánea a un conjunto
de personas como el en caso de una votación durante el
transcurso de un reality show.
iv. Vinculación y contexto
Al trabajar con la interacción de los elementos de un pro-

yecto hipermedia se generan vínculos entre ellos y se con-
textualizan para jerarquizarlos dentro de la información
de la pieza. Al hablar de vínculos es necesario puntualizar
el aspecto de “usabilidad de economía”: demasiados vín-
Análisis del mapa de un sitio web comercial
mach12.blogspot.com.es/2012/06/diseno- culos desplegados en una interfaz pueden ser agobiantes
del-sitio-web-comercial.html, que se apoya
en una estructura dendrítico cicular para
para el usuario, así mismo pocos vínculos en un conjunto
generar una navegación que jerarquiza y excesivo de páginas crea resistencia a la navegación (Niel-
divide en bloques específicos la informa-
ción corporativa, generando secciones y sen, 2006). Es por ello que las consideraciones de vincula-
subsecciones que se conectan entre sí, ción deben lograr minimizar el número de pasos posibles
pero que es necesario recorrer para nave-
gar entre ellas. para llegar a la información final y ayudar a lograr estruc-
turas organizativas y de navegación eficaces que ponderen

la navegación y el acceso a la información.
En cuanto al contexto, debe ser una herramienta que

proporcione pistas funcionales al usuario, estableciendo
un sistema de navegación coherente dentro del sitio web
que -como el sistema de señalización de un aeropuerto-,
acentúe la identificación del usuario con la sede, que le
ayude a ubicarse dentro del mismo y le proporcione in-
formación para poder moverse con libertad en el entorno.
El establecimiento y creación de un sistema interactivo

conlleva el uso adecuado de íconos, colores, coherencia
de navegación y semejanzas gráficas suficientes en el
conjunto de elementos visuales a emplear. Un enfoque
uniforme de jerarquización de títulos, subtítulos, pies de
página y vínculos también refuerza el sentido del contex-
to. Una pista contextual adicional puede ser un mapa de
navegación que da una visión de conjunto para ayudar al
usuario a ubicarse en un contexto virtual.
Un sitio web como el de el Hotel La Barranca
4.9.5 Transformación (www.hotellabarranca.com) combina estructuras

informativas hipertextuales y jerárquicas para una
navegación intuitiva y orientada.
La dinámica de la animación tie-

ne su consecuencia directa en la transformación de los
componentes del sistema hipermedia. Este proceso,
que se da de forma natural en el caso de una secuen-
cia de imágenes como es el caso del video, amplía su
espectro en el caso de una secuencia susceptible de
manipulación como en el ejemplo de una animación
interactiva para un sitio web realizada en un programa
de animación, en donde cada uno de los elementos es
tratado individualmente por el diseñador para que sus
transformaciones respondan a la interacción entre los
componentes o a la decisión manipuladora por parte
del usuario final.
Al hablar de transformaciones en el terreno hipermedia

podemos distinguir:
220 | Modelos
i.Transformaciones instantáneas: Cuando un ele-

mento se substituye por otro de manera inmediata
como en el corte de un segmento de video hacia el
siguiente, en donde los elementos pueden aparecer
alterados o transformados en otros completamente
diferentes.
ii. Transformaciones secuenciales: Si para ejecutar la

transformación se siguen una serie de pasos que nos
llevan de un punto inicial a un punto final, estamos
hablando de una transformación secuencial, esto
conlleva un conjunto de transformaciones interme-
dias que al ser ejecutadas en conjunto suavizan el
efecto de la transición para hacerla menos brusca o
para incidir en los pasos intermedios.
iii. Transformación aleatoria: si el cambio de un ele-

mento no esta regulado, de manera que es posible
obtener como resultado una transformación instan-
tánea o secuencial de manera indistinta, hablamos
entonces de una transformación aleatoria.
Así mismo tenemos también variables en la transforma-

ción de acuerdo a la acción del usuario:
i. Participativa: en el caso de que sea necesaria la ac-

ción externa para que la transformación se suceda.
ii. Independiente: si la transformación se ejecuta de

manera independiente a la participación del usua-
rio, normalmente regulada por el aspecto temporal.
Lewandowsky (2010, p. 230) habla de la transformación

como aquella propiedad que va más allá de la temporalidad,
pues el diseñador predefine funciones, variables y un con-
junto de instrucciones que otorgarán comportamiento a los
elementos hipermedia. Igualmente menciona que los gráfi-
cos interactivos no necesitan forzosamente ejecutar trans-
formaciones complejas o hiperactivas; comportamientos
simples agradan a los usuarios y enriquecen la experiencia
de una interfaz digital, por ejemplo, un logotipo en un sitio
web, que espera calladamente hasta ser tocado por el cursor
del usuario; en vez de ser una molesta distracción, los gráfi-
cos toman vida cuando son llamados a la acción.
4.10 Atributos
Los componentes del entorno hiper-

media se relacionan unos con otros, pero también poseen
relaciones potenciales con el usuario de acuerdo a los pa-
rámetros que les son adscritos, es decir de acuerdo a sus
atributos. La RAE define atributos como “Cada una de las
cualidades o propiedades de un ser.” y en el terreno artístico
habla de “símbolo que denota el carácter y representación
de las figuras”, en el espacio hipermedia los atributos es-
tán definidos por la información digital contenida en cada
uno de los elementos de la composición, esta información
también puede vincular con información adicional y habla-
remos entonces de metainfomación, la información digital
finalmente puede definir reglas y acciones donde llegare-
La Jerarquía en los do-

cumentos hipermedia
permite utilizar una
diversidad de niveles
que ofrecen accesos
a la información, en el
sitio web de Cooper-
Hewitt (http://www.
cooperhewitt.org)
permite interrelacio-
nar titulares, menús,
hipervínculos, nubes
de datos y herramien-
tas de búsqueda.
222 | Modelos
mos al terreno de la programación, mediante estas va-

riaciones de los atributos los elementos en el espacio hi-
permedia cumplen su ciclo de interacción con el usuario
para llevar a término los objetivos de comunicación y el
aterrizaje del diseño.
4.10.1 Información
El diseño gráfico ha sido, desde sus

orígenes, un vehículo para la transmisión de informa-
ción; texto, imágenes, sonido, animación... Todo el aba-
nico de elementos multimedia se unen interactuando
con el usuario para participar en un proceso que tiene
como objetivo central la comunicación.
El entorno hipermedia permite lograr una vinculación

entre la información y sus contenidos visuales, de ma-
nera que es posible tener información e imágenes des-
plegadas en conjunto o hacer que una despliegue a la
otra. Esta dinámica permite al diseñador manipular las
posibilidades interactivas para dar un tratamiento crea-
tivo a la manera en que se deben relacionar elementos
de apoyo e información en un proyecto hipermedia.
Al acotar el amplio espectro de la información hacia el

universo hipermedia, el diseñador se constituye en un
“arquitecto de la información, organizando contenidos
para que el usuario pueda manejarlos, navegar por ellos
y satisfacer sus necesidades de información.” (Núñez y
Hassan, 2005).
La información en el entorno hipermedia se interre-

laciona, mezclando elementos informativos de entidad
propia, contenidos multimedia y herramientas interac-
tivas, las estructuras informativas se pueden agrupar en:
Las estructuras secuenciales pueden ser
una manera muy didáctica de presentar i. Estructuras secuenciales
la información, este tipo de estructuras la
retoman las diferentes Apps desarrolladas Interrelacionadas de manera lineal, utilizan tareas de
por StoyToys (http://storytoys.com) para
relatar de una manera atractiva cuentos navegación o iteracción en la que participa el usuario
clásicos infantiles.
de manera ordenada o involucrándose con segmentos de

bloques informativos, tal es el caso de los StoryToys clá-
sicos mediante didácticas interfaces dirigidas a infantes
menores de 5 años.
ii. Estructuras hipertextuales
Es una estructura en la que “las páginas se enlazan por

similitud o relación directa entre los contenidos” (Hassan
y Martín, 2004) permitiendo así que el usuario navegue
entre el conjunto de elementos informativos presentados
para seleccionar aquellos de mayor interés, este tipo de
estructuras compone el grueso de información presenta-
da en internet, especialmente en el caso de wikis y sitios
Susan Kare (diseñadora gráfica) y Bill Adkinson
noticiosos. (programador informático), iconos para el ordena-
dor Macintoshde 128K, 1984. El pictograma es el
iii. Estructuras jerárquicas medio simbólico que permite una nueva interfaz
entre el hombre y la máquina (Meggs, 2009, p. 489)
Es una estructura organizada de manera escalable, permi-

tiendo de esta manera la organización de grandes bloques
de información que apoyan la orientación del usuario en
su consulta. Las estructuras jerárquicas se expanden hori-
zontal y verticalmente en la visualización de información.
Las estructuras de información generalmente se combi-

nan en un proyecto hipermedia para dar origen a diversas
sub-estructuras o solapando variaciones estructurales con
respecto a la inicial.
Al otorgar a la información representaciones visuales,

Acaso (2010, p. 110) presenta una interesante taxonomía
con respecto al traspaso explícito de información entre el
emisor y el receptor que puede ayudar a identificar el tipo
de información necesaria de acuerdo a las intenciones de
comunicación del proyecto:
i. Información epistémica
Su función básica es la representación de la realidad de la

forma más verosímil posible; nuestro rostro en el espejo,
una radiografía médica, fotografías o retratos son productos
visuales que se asemejan a la realidad en el mayor grado po-
sible. Debido a este objetivo, son imágenes en las que el cri-
terio de selección de las herramientas del lenguaje visual es
la semejanza y en las que los juegos retóricos desaparecen.
224 | Modelos
ii. Información simbólica
Su objetivo es transmitir determinada información, pero

ésta es de carácter abstracto, de manera que no se puede
recurrir a la realidad para configurar dicha imagen, senci-
llamente porque en la realidad no existen la paz o el odio
como elementos físicos tangibles, lo que no quiere decir
que tales elementos no sean representables. Esto ocurre
con las señales de tráfico y con las instrucciones visua-
les sobre cómo montar un mueble o hacer una sopa (que
representan procedimientos) y las banderas, el dinero y
los mapas (imágenes que simplifican realidades u objetos,
produciendo a través de este proceso de simplificación, la
simbolización del contenido y su conceptualización).
iii. Información didáctica
En un tercer grupo están los productos visuales cuyo ob-

jetivo es transmitir determinada información para que el
receptor aprenda uno o varios conceptos. Realmente sólo
existe un contado grupo de imágenes que tiene una fun-
ción didáctica explícita, y a que sólo las imágenes que uti-
lizan los profesores en sus clases o que ilustran los libros
de texto corresponderían a esta definición, pero amplia-
ríamos enormemente el campo si incluyésemos muchas
de las imágenes que nos rodean, ya que hoy en día todas
las representaciones visuales tienen una función didáctica
implícita, es decir, todas las imágenes sean del tipo que
sean intentan enseñarnos algo, puesto que no tienen como
único objetivo transmitirnos información: pretenden que
interioricemos estos mensajes y que realicemos diferentes
acciones como resultados de dicha interiorización.
En el entorno hipermedia la información es la esencia de

los proyectos; tanto el blog de un departamento univer-
sitario como el kiosco informativo ubicado en un centro
comercial proveen información al usuario final que debe
ser entregada de la forma más inmediata y transparente
La propiedad simbólica de la información y su posible, en este sentido Fernández-Coca (1988, p. 261) al
carácter didáctico ha llevado a los sistemas de
comunicación hipermedia como chats y correo
analizar los proyectos web hipermedia hace importantes
electrónico a buscar representar elementos reflexiones en torno a la información:
abstractos como las emociones mediante el uso
de elementos tipográficos que posteriormente
han sido trasladados a imágenes como estos
No sólo la utilización de una interface gráfica correc-
emoticones. ta da credibilidad a un documento web. Si el texto
que vuelca la información que deseamos presentar

no está bien escrito, o si los enlaces no se presentan
de una forma correcta, esta credibilidad cae en pi-
cado. No existe.
Si bien es cierto que una buena imagen gráfica

puede llamar la atención en un primer momento
sobre el documento Web, si lo que en él contamos
y cómo lo contamos, no tiene una estructura enten-
dible y contiene información interesante, dicho do-
cumento web carece de valor para el usuario final.
Para la construcción de la información Fernández-Co-

ca apunta un par de consideraciones que son aplicables
a los proyectos hipermedia en general:
i. Jerarquización.
Todo documento ha de contemplar el uso de titulares,

cada una de sus páginas también. Dividir la informa-
ción en pocos módulos principales y estos a su vez en
submódulos. Las jerarquías en internet tienen un valor
adicional, pues se traducen en información útil que em-
plean los buscadores para dar puntuación a sus resulta-
dos.
ii. Simplificación.
Que no apunta al minimalismo en la cantidad de infor-

mación, sino más bien al uso directo de la comunica-
ción, a cuidar la longitud de cada una de las páginas que
se presentan y a considerar aspectos de usabilidad como
el cuidado de realizar una versión que, en el caso de un
sitio informativo, permita realizar una versión impresa
adecuada.
iii. Reglas de escritura
El espacio hipermedia es un entorno nóvel, pero ello no

significa que las reglas de escritura deban modificarse,
las consideraciones más importantes giran en torno a
la manera en que será presentada finalmente la infor-
mación al usuario, no puede ser idéntica la información
presentada en la publicación electrónica de un libro
epub para una tablet a la información presentada en la
226 | Modelos
pantalla de inicio de un videojuego para un smartphone;

el modo de escribir debe ajustarse a las consideraciones
finales de visualización, al soporte de software en el que
va a ser ejecutado y al publico objetivo al que es dirigida
la pieza.
Entre las consideraciones principales podemos mencio-

nar:
- La utilización de textos concisos y concretos
- El desglose de temas mediante la utilización de listas

y tabuladores
- Hipervínculos bien estructurados y colocados sobre

las palabras correctas
Como se ha mencionado en los puntos anteriores el tra-

tamiento de la información es vital en los hipermedios
para lograr transmitir los mensajes pertinentes, pero
adicionalmente la información propiamente, es una he-
rramienta de vinculación que permite interconectar a
los sistemas hipermedia en la web, para intercambiar
vínculos o lograr posicionamiento en los buscadores; e
inmersos en el espacio digital la información de cual-
quier proyecto hipermedia es una fuente de referencia
en sí misma, pues con la capacidad de los ordenadores
para leer el contenido de una pieza digital podemos re-
currir a interesantes herramientas de organización que
van desde las herramientas de búsqueda del propio sis-
tema operativo, hasta sofisticadas herramientas de or-
ganización y búsqueda avanzada como los buscadores
de los sistemas operativos o el software Bridge de Adobe,
que permite mantener bajo control un conjunto muy
amplio de archivos, fotografías y referencias.
El soporte hipermedia como repositorio de informa-

ción ofrece un conjunto de posibilidades que no están
presentes en los medios impresos, como en todo mo-
mento de transformación existe un período de transi-
ción; actualmente una gran cantidad de la información
cotidiana ha migrado de los sistemas impresos a los
medios digitales interactivos: los periódicos se con-
vierten en portales informativos, las revistas y libros
generan un importante porcentaje de sus lecturas en

sus versiones homólogas o interactivas en tabletas elec-
trónicas. Finalmente es probable que cada uno de los
soportes (impreso y digital) termine afianzando sus
fortalezas y su utilización sea compartida en la cotidia-
nidad, pero a efectos del análisis de este estudio resul-
tan adecuadas las consideraciones que Cásares (2010,
p. 11) menciona con respecto a las posibilidades que la
información hipermedia posee a diferencia de los so-
portes analógicos:
i. Dinamismo.
El espacio hipermedia permite la incorporación de ele-

mentos multimedia, el uso de hipervínculos, animaciones,
vídeo y audio se traduce en un medio que tiene una di-
námica que se contrapone con respecto a la información
estática que un medio impreso mantiene.
ii. Actualización.
La posibilidad de ser modificada en tiempo real le permi-

te a la información digital ser actualizada. Un sitio web o
una App reciben actualizaciones constantes que refrescan
datos, mejoran contenidos e interacciones y vinculan en-
tre sí informaciones en los hipermedios.
iii. Creatividad y originalidad
La incorporación de un nuevo soporte conlleva la experi-

mentación, los medios digitales han pasado en un período
breve por diferentes fases traducidas en formatos y sopor-
tes que han desaparecido, se han transformado o evolu-
cionan para afinarse y adaptarse a los cambios que este
proceso de experimentación sugiere. El reto que supone
enfrentarse a esta vorágine y la diversidad que implica el
conjunto de posibilidades de un nuevo medio incentivan
la creatividad de los diseñadores que participan en el pro-
ceso de elaboración y lanzan una carrera en la que los
contenidos originales ganan terreno sobre la información
que ya ha sido publicada.
228 | Modelos
Dos herramientas dentro

del programa de organi-
zación y retoque digital
de Aperture ejemplifican
dos grupos diferentes
de metadatos, el campo
EXIF Info son metadatos
originales, creados al
momento de ser realizada
la toma fotográfica; el
campo de IPTC Core son
metadatos externos, que
se añaden posteriormente
para incorporar informa-
ción adicional sobre el
autor y la imagen.
4.10.2 Metainformación
Pocos años después de la incorpo-
ración de los hipertextos a los medios de comunicación
otra evolución en paralelo transformaba el día a día de
la manera en que usamos estos medios digitales; la acu-
mulación de información y fuentes cada vez más a nues-
tro alcance tuvo como resultado una saturación de in-
formación, basta con teclear un par de palabras en algún
buscador de internet para tener como resultado miles de
páginas que consultar como resultado; el alud de infor-
mación en poco tiempo se ha vuelto complejo de manejar.
La necesidad que surgió a raíz de este volcado de in-

formación digital fue el encontrar una manera más
adecuada de procesar y catalogar estos datos, el resul-
tado; tener información acerca de la información, por
contradictorio que parezca este es el principio de la
metainformación y dota de funcionalidad adicional a
la información digitalizada, de manera que es utiliza-
da en las principales herramientas de consulta: índices
de internet, catálogos fotográficos, formatos de registro,
correos electrónicos, sistemas RSS de información, etc.,
a lo que se agregan continuamente nuevas aplicaciones y

desarrollos.
El aspecto esencial de los metadatos para el diseñador

hipermedia es identificar desde un inicio las posibilida-
des metainformativas tanto de sus proyectos, como de los
componentes individuales de los mismos, para enrique-
cerlos y lograr que la experiencia del usuario se vea benefi-
www.google.com El buscador de google apunta a
ciada del desarrollo de los aspectos estético y funcional en múltiples referencias de metadatos para arrojar no
una propuesta integral. Baca (2008, p. 20) introduce a la sólo resultados sobre la búsqueda inicial, también
incorporando resultados en relación al tema solici-
metainformación hablando de la catalogación, organiza- tado, vínculos similares, enlaces patrocinados por
ción e indexado que analógicamente realizaban expertos anunciantes, etc.
en el manejo de documentos: archivistas y bibliotecarios;

y que ahora en el entorno digital ha permeado al común
de los usuarios ya que a pesar de que conscientemente
como tal no les utilicen el público general, sus interaccio-
nes generan y manipulan los metadatos que contienen los
archivos hipermedia que son consultados.
En general Baca menciona tres características, indepen-

dientes de la forma física o intelectual que tomen los ele-
mentos hipermedia y que pueden, y deben ser reflejadas
Un stock fotográfico como el de dreamstime (www.
mediante los metadatos: dreamstime.com) aprovecha al máximo la metain-
formación; desde el registro de usuarios hasta las
i. Contenido herramientas de búsqueda poseen datos útiles
que facilitan la experiencia del usuario, incorpo-
rando los metadatos que los fotógrafos han escrito
Relacionado con lo que el objeto contiene o es, se refiere previamente.
a la información intrínseca de la pieza.
ii. Contexto
Indica el qué, quién, porqué y dónde, y cómo; aspectos

asociados con la creación del objeto y son extrínsecos al
objeto mismo.
iii. Estructura
Relativo al conjunto formal de asociaciones hacia o entre

objetos individuales de información; puede ser extrínseco,
intrínseco o una combinación de ambos.
Murtha Baca ofrece una interesante conclusión con res-

pecto a los metadatos identificándolos como una inver-
sión, pues reditúan a lo largo del tiempo. Los metadatos
que han sido bien trabajados resultan en un mejoría sig-
230 | Modelos
nificativa de la administración de información, optimi-

zando igualmente el acceso a la información de los usua-
rios finales.
Los metadatos en internet tienen una especial importan-

cia, pues forman parte de la alquimia del Search Engine
Optimization (SEO), conjunto de herramientas y técni-
cas que utilizan los navegadores en internet para arrojar
y priorizar resultados de búsqueda, su dominio es tema
de debate entre los diversos gurús que experimentando
múltiples combinatorias intentan identificar los algorit-
mos que los principales buscadores utilizan para lograr
posicionar de manera más adecuada un sitio web entre los
primeros resultados.
Miguel López (2009), miembro del grupo de consultores

Valencia recoge en su documento de Marketing Online,
algunos de los apuntes que su experiencia como experto
en SEO trasladan a herramientas y técnicas. En muchos
casos las soluciones tienen que ver con la manipulación
de los metadatos y estas herramientas y técnicas también
son trasladables al entorno hipermedia en general ya que
aplican también a la manera en que los ordenadores or-
ganizan la información, ofreciendo pistas para lograr un
entorno organizado de forma óptima.
i. Utilización de campos específicos para metadatos
La organización de archivos digitales y el empleo de me-

tadatos ha derivado en la inclusión de espacios específicos
dentro de los propios documentos para colocar este tipo de
información; un documento de word o pages tiene un cam-
po con metadatos de autoría con información del autor,
fechas de creación y espacios para colocar palabras clave,
un sitio web incorpora en el código html las etiquetas de
meta que ofrecen un conjunto básico de elementos identi-
ficables por los buscadores y permiten la personalización
de campos de metadatos, una fotografía digital incorpo-
ra ficheros EXIF con los datos que la cámara fotográfica
añade al momento de la toma. Es importante utilizar estos
campos ya que son el punto de partida para incorporar los
metadatos y que sean identificables correctamente.
ii. Metadatos relevantes
Existen diversas herramientas como los wordtrackers para

identificar cuales son las palabras más utilizadas por los
buscadores en internet, igualmente herramientas como
GoogleTrends hablan sobre las tendencias en búsquedas
y pueden ser indicativos para lograr resultados eficaces.
En paralelo es importante analizar el conjunto de datos
que será importante cuando el usuario necesite buscar la
información que ofrecemos, indicando títulos, palabras
clave, descripciones e información en general que sea re-
levante para el público objetivo y que incorpore carac-
terísticas que ofrezcan accesibilidad a esa información
considerando aspectos como el idioma, tipo de lenguaje,
tonos y maneras.
iii. Metadatos multimedia
Los metadatos deben formar parte no solamente de los

campos asignados al propio documento, el conjunto de
elementos que componen al proyecto de diseño multi-
media es susceptible de incorporar en cada uno de ellos
metadatos que sumarán información útil al conjunto y
que en el caso de las herramientas SEO aportan datos
para el posicionamiento global y la búsqueda.
iv. Vinculaciones
Ya que el conjunto de metadatos de un proyecto es la su-

matoria de sus elementos, las vinculaciones son un aspec-
to muy importante pues al considerarles como parte de
la estrategia de posicionamiento, pues al vincular un sitio
en internet con otras sedes externas se están generando
asociaciones entre los metadatos de ambos proyectos.
4.10.3 Estructuras Metainformativas
La manera en cómo son incorpora-

dos los metadatos a un archivo ofrece una primer aproxi-
mación para clasificar el conjunto de estructuras metain-
232 | Modelos
formativas que podemos encontrar en el terreno digital:
i. Originales
El primer conjunto de metadatos se incluyen de manera

originaria, al ser creados los archivos. Los sistemas de ela-
boración de piezas poseen herramientas que incorporan
de forma automática cierto conjunto de metadatos o que
permiten añadirlos justo al momento de la creación de las
mismas, tal es el caso de una fotografía que en cuanto es
tomada por la cámara incluye en la toma misma la infor-
mación acerca de la fecha, cámara, tipo de lente, velocidad
de obturación, etc., información que puede ser leída por
sistemas de organización fotográfica para administrar las
imágenes de acuerdo a estos criterios específicos.
ii. Externos
Una vez generada una pieza digital los metadatos tam-

bién son susceptibles de ser añadidos o modificados de
manera externa para ayudar así a su actualización, estos
metadatos suelen compilarse en un documento fuera de
la pieza original, de forma que puedan ser accedidos fá-
cilmente con un editor para ser modificados sin alterar
la pieza a la que hacen referencia, en el caso del ejemplo
fotográfico los metadatos se pueden exportar a un docu-
mento de texto u hoja de cálculo para ser almacenados
en una base de datos que contenga exclusivamente esa
información.
ii. Compartidos y heredados
La característica digital de los metadatos les permite te-

ner una dinámica de vinculación, por ellos es cotidiana
su interrelación, dando origen a metadatos compartidos
o heredados que se añaden a los diseños creados. Tal es
el caso, por ejemplo, de una fotografía insertada en un
sitio web; la página tiene sus propios metadatos pero a
efectos de búsqueda heredará la información de cada una
de las imágenes que contiene en una galería fotográfica,
creando un efecto heredado de sumatoria. Este tipo de
metadatos se utiliza mucho concentrando información
externa en documentos html y css que definen propieda-
des conjuntas de un sitio web o un proyecto hipermedia.
La vinculación que tienen los metadatos con los archivos

añade tres posibilidades a las estructuras:
i. Metadatos autoreferenciales
Es el esquema en donde la metainformación apunta de

manera directa hacia el sistema al que hace referencia,
como en el caso de una vídeo que contiene datos sobre su
autor, fecha en la que ha sido grabado, palabras clave, etc.
ii. Metadatos de referencia externa:
Estructura metainformativa en donde la incorporación

de los metadatos no se realiza de manera directa, sino
a través de un sistema externo que permite un enrique-
cimiento participativo y simultáneo de la información
como en el caso de los wikis en línea.
iii. Metadatos multireferenciales
Estructura que apunta no solamente al sistema referen-

cial, sino también a otros sistemas que se vinculan inter-
conectando información para su posterior uso de frente a
una interfaz. Este tipo de estructuras la emplean busca-
dores como Google.
Hassan (2005) menciona que aplicar metadatos es “ca-

racterizar cada unidad de contenido a través de una serie
de pares atributo-valor/es” y hace una clasificación de las
estructuras de metadatos en:
- Formales o administrativos: al reproducir in-

formación sobre sus aspectos constitutivos y con
una función relacionada hacia la gestión de con-
tenidos -lenguaje, formato, fecha de creación,
tamaño, etc.-
- Descriptivos: con información adicionada y

cuyo objeto es facilitar y mejorar la recuperación
de información por parte del usuario -título, re-
sumen, palabras clave, etc.-
234 | Modelos
4.10.4 Programación
Durante el último cuarto del siglo

XX, la tecnología electrónica e informática ha
avanzado a un ritmo extraordinario y ha transfor-
mado muchos ámbitos de la actividad humana. El
diseño gráfico se ha visto afectado de forma irre-
vocable por el hardware y el software de la infor-
mática digital y el crecimiento explosivo de inter-
net. La revolución industrial había fragmentado el
proceso de crear e imprimir la comunicación grá-
fica en una serie de pasos especializados. Cuando
se impuso la fototipografía durante la década de
1960, los especialistas cualificados incluían a los
diseñadores gráficos, que creaban la composición
de la página; los cajistas, que se encargaban del
texto y del equipo necesario par componer la tipo-
grafía; los armadores, que pegaban todos los ele-
mentos en su sitio en los tableros; los operadores
de cámara, que hacían los negativos fotográficos
con los originales montados, las ilustraciones y
las fotografías; los que reunían esos negativos, los
que preparaban las planchas de impresión, y los
operadores de imprenta que hacían funcionar las
prensas. En la década de 1990, gracias a la tecno-
logía digital, una sola persona con un ordenador
de sobremesa podía controlar la mayoría de estas
funciones, por no decir todas. Las nuevas impre-
soras fotoópticas usaban láseres controlados por
ordenador para fotosensibilizar los tambores de
impresión, lo cual hacía posible imprimir pliegos a
todo color en tiradas cortas y hasta individualiza-
das.
A pesar de la fuerte resistencia inicial de muchos

diseñadores, la nueva tecnología mejoró rápida-
mente, lo cual favoreció su gran aceptación. Los
usuarios de ordenadores consiguieron un mayor
Los lenguajes de marcaje de hipertexto como Html
y Xml utilizan etiquetas específicas para insertar los control del proceso de diseño y el de producción.
metadatos en sus documentos, programas como La tecnología digital y el software avanzado tam-
Dreamweaver incorporan paneles que ayudan a
realizar esta labor de una forma mas visual bién ampliaron el potencial creativo del diseño
gráfico, al hacer posible una manipulación sin pre-

cedentes del color, la forma, el espacio y las imáge-
nes. (Meggs: 2009, p. 488)
En el capítulo relativo a la revolución digital Meggs

señala la importancia del software para la transforma-
ción que ocurriría en los medios impresos durante las
décadas de los ochenta y noventa; desde ese entonces,
los ordenadores se vinculan finalmente a las labores del
diseño y la programación intersecta al campo gráfico,
posibilitando el desarrollo del desktop publishing en un
inicio para expandirse conforme el desarrollo digital
evolucionaba, hacia los multimedios interactivos:
El también llamado «hipermedia» amplía el con-
cepto de hipertexto a una combinación de comu-
nicaciones audio, visuales y cinemáticas conectadas
para formar un conjunto coherente de información.
Estos materiales están vinculados para que el es-
pectador pueda acceder de una forma no lineal, de
modo que cada espectador que busque información
siguiendo el camino que él mismo haya elegido. A
diferencia de los libros o películas, que presentan la
información en secuencias lineales, el multimedia
interactivo tiene una estructura no lineal. Por lo ge-
neral lo crean equipos de profesionales que incluyen
Las hojas de estilo CSS (Cascading

Style Sheets) se expresan mediante
selectores y delcaraciones, las
declaraciones a su vez permiten
insertar propiedades y valores que
otorgan especifidad a los elemen-
tos que modifican, entre los cuales
podemos encontrar: elementos
HTML, Clases e identificadores; una
multiplicidad de ellos y también la
posibilidad de aplicarlos a elemen-
tos descendientes.
236 | Modelos
especialistas audiovisuales, escritores, programadores

informáticos, especialistas en contenido, directores,
diseñadores gráficos, creadores de imágenes y pro-
ductores. Las presentaciones multimedia interactivas
ofrecen una capacidad cada vez mayor para almace-
nar medios diversos, como animación, ilustración,
fotografía fija, sonido y vídeo. (Meggs: 2009, p. 504)
La programación vinculada al diseño mantuvo durante

sus décadas iniciales una marcada distancia; programa-
dores informáticos desarrollaban software especializado
para retocar fotografías, componer ilustraciones, maque-
tar revistas o crear fuentes tipográficas, el diseñador utili-
zaba estas herramientas mediante interfaces visuales que
le permitían dedicarse a su labor sin tener que preocupar-
se por los aspectos de programación inherentes.
Pero el nacimiento de los multimedios interactivos in-

volucraba un proceso integral; era necesario controlar
aspectos temporales, animaciones, interacciones, trans-
formaciones... elementos dinámicos para los cuales las
herramientas visuales no eran suficientes; tres grupos
de programas dirigidos al diseño empiezan a incorpo-
rar la programación dentro de sus interfaces como flujo
de trabajo para el diseñador gráfico: en el terreno web el
programa PageMill de Adobe permitía trabajar con có-
digo HTML para modificar directamente el código de
programación tanto como con herramientas visuales que
eran atajos a estas mismas acciones inherentes al código;
en el entorno multimedia el software Director de Macro-
media permitía integrar imágenes, audio, vídeo digital,
animaciones bidimensionales, y un engine 3D, en una pa-
quete autoejecutable. Para lograr la integración incorpo-
raba un potente lenguaje de desarrollo propio; Lingo, que
permitía incorporar xtras, pequeños plugins desarrollados
en el lenguaje de programación C++; finalmente en el
naciente terreno de la animación digital el programa de
Dos CMS utilizados para maquetar un par de sitios Macromedia Flash incorporó su propia versión de Lingo
web, por una parte www.tipsontripsandcamps.
com aprovecha los elementos de WordPress para para perfeccionar la manipulación de los elementos ani-
generar un sitio muy visual y con secciones que se mados, dando origen al lenguaje ActionScript.
actualizan constantemente, otro sitio basado en
Joomla! cricbuzz.com toma ventaja de las fortale-
zas en dinámica informativa que posee este CMS La programación es uno de los elementos constitutivos
para hacer secciones de despliegue noticioso muy del entorno hipermedia; desde la traducción binaria de
dinámicas.
cada uno de los componentes digitales del proyecto hasta

los scripts que dan funcionalidad a las piezas de traba-
jo, también es -a menudo- el terreno de mayor inexpe-
riencia para el diseñador gráfico; en el campo profesional
todavía es usual que equipos de diseño y programación
trabajen de forma separada impidiendo la identificación
sobre la incidencia de los aspectos de programación en
el terreno del diseño y viceversa. Sin embargo es en esta
convergencia en donde integraciones tan exitosas como el
establecimiento de la World Wide Web han evolucionado
positivamente, gracias a la participación por una parte de
robustos lenguajes de programación y por otra de herra-
mientas básicas de manipulación visual que ofrecen en
conjunto experiencias únicas para el usuario final.
Es por ello que, al menos en cuanto a los aspectos re-

ferenciales, la programación debe ser del conocimiento
del diseñador gráfico al enfrentarse al terreno hiperme-
dia, y cuanto mejor entienda y experimente en el aspecto
práctico la traducción de sus diseños en reglas, variables y
programas informáticos, mejor uso podrá dar de las apli-
caciones en este medio. Ver (2001, p. 112) invita a los
diseñadores a “entender las posibilidades y limitaciones
fundamentales de la web. Los mejores diseñadores serán
aquellos que dominen su disciplina particular, y que al
mismo tiempo sean suficientemente multidisciplinarios
como para comprender de qué es capaz cada área de es-
pecialización temática de sus estudios.”
Asignar programación a los elementos hipermedia signi-

fica crear interacciones, animaciones, definir las estructu-
ras que les interrelacionan y la manera en como partici-
pan con el usuario.
Siendo parte inherente del entorno hipermedia, median-

te la programación es posible ejecutar cualquier tipo de
acción con los componentes del sistema y es la clave de
la definición y manipulación de las interacciones de una
pieza de diseño hipermedia.
Hablar de programación es abrir un amplio panorama de

posibilidades para el diseño, en el caso del entorno hiper-
media podemos agrupar las posibilidades de interacción
238 | Modelos
de acuerdo a los diferentes tipos de lenguajes que pode-

mos encontrar:
i. Lenguajes de marcación:
Son aquellos que se definen como un conjunto com-

pleto de instrucciones para describir el formato estruc-
tural de cualquier elemento hipermedia. Están basados
en etiquetas y detallan la estructura de un documento.
El lenguaje de marcación más utilizado es el Lengua-
je de Marcación de HiperTextos o HTML, que da es-
tructura en sus diferentes versiones al código base de
la WWW. Existen otros lenguajes de marcación tales
como: SGML, HTML, XHTML, DHTML, VRML,
SMIL, XML y WML.
El diseñador gráfico utiliza software con interfaces vi-

suales para manipular de una manera más sencilla estos
lenguajes; entre los programas que permiten el trabajo
con este tipo de lenguajes tenemos: Dreamweaver, Eas-
yWeb, Rapidweaver, Muse, Hype.
ii. Lenguajes de script:
Este tipo de lenguajes soportan el uso de scripts, pro-

gramas escritos para entorno específicos que pueden
interpretar y automatizar la ejecución de tareas que po-
drían ser realizadas, una a una por un operador humano.
Algunos de los entornos que pueden ser automatizados
mediante estos scripts incluyen: aplicaciones de soft-
ware, sitios web, sistemas operativos y sistemas integra-
les.
Dos de las operaciones básicas de la forma: Repe-
tición y rotación aplicados a un diseño creado en
Processing permite visualizar numerosas variacio-
Aunque en realidad cualquier lenguaje puede ser utili-
nes de un sólo diseño cambiando el tipo de letra, zado con un lenguaje de script, aquellos que se denomi-
tamaño, alineación, color, transparencia y el núme-
ro y grado de las rotaciones se obtienen diferentes nan de esta manera implican el uso relativamente sim-
resultados. Lewandowsky (2008, p.238) ple de su elementos de sintaxis y semántica para lograr
for (int i=0, i<12;i++) { lenguajes mas sencillos de utilizar y con una curva de
fill (0,0,0), aprendizaje menos pronunciada. Los lenguajes de script
textAlign (CENTER);
pushMatrix (); amplían las posibilidades de uso de otro lenguaje, entre
rotate (PI+i/6);
los más extendidos tenemos : JavaScript, ASP, JSP, PHP.
text (“F” ,0,0); En el terreno del diseño gráfico los lenguajes de scripts
popMatrix ();
}
tienen un campo de aplicación diverso y se mantienen
}
en continua evolución, podemos mencionar igualmente

diversos programas que permiten su utilización para de-
sarrollos específicos y con interfaces más o menos visua-
les: en el terreno web; Dreamweaver, Rapidweaver; o las
más avanzadas jQuery o Mototools. En animación Flash
utiliza su lenguaje basado en scripts ActionScript que re-
quiere de un plugin para visualizarse en los navegadores;
otros programas como Muse o Hype utilizan scripts ba-
sados en Java y HTML con interfaces visuales para mos-
trar herramientas de desarrollo más visuales y facilitar el
control por parte de los diseñadores.
En el naciente terreno de los gráficos interactivos y el

physical computing existe un lenguaje de código abierto;
Processing, basado remotamente en C++ y Java que como
exponen Reas & Fry (2010, p.vii) permite a especialistas
en diseño y arte un camino fácil para programar y traba-
jar con gráficos, Processing permite escribir software para
crear imágenes, animaciones e interacciones.
Repetición y Aleatoriedad. dos elementos

simples son repetidos utilizando el opera-
tivo de Processing “for”. La transparencia,
tamaño y coordenadas x e y son programa-
das como aleatorias para crear un sentido
de movimiento natural. Diseño Gráfico II.
Ellen Lupton y Yaeouh Ahn, docentes.
Lewandowsky (2008, p. 239)
Hallaman, Hyung, Till, Okrasinski

240 | Modelos
La idea es crear una sola línea de código y ob-

tener un círculo en la pantalla, añadir un par de
lineas adicionales para que entonces el círculo
siga el movimiento del ratón, otra línea de códi-
go y el círculo cambia de color cuando el botón
del ratón es presionado. Llamamos a esto bocetar
con código, tu escribes una línea, luego otra más
y así sucesivamente, el resultado es un programa
creado de una pieza a la vez.
iii. Lenguajes de programación:
Los lenguajes de programación propiamente son aque-

llos que permiten comunicar instrucciones a un ordena-
dor. Mediante el uso de lenguajes de programación es
posible escribir ejecutables para controlar el comporta-
miento de una máquina y/o expresar algoritmos de forma
precisa, tales como: Perl, Java, Pascal, Basic, C, Python.
En el caso de los lenguajes de programación al ser terre-
no de experiencia de los programadores informáticos, es
usual que se trabaje directamente con el lenguaje, aunque
también existen herramientas que facilitan e integran la
labor como los IDEs (Integrated Development Envi-
ronment) que agrupan diversas funcionalidades para op-
timizar la productividad en el proceso de programación
(i.e. Visual Basic).
Los lenguajes de programación llevan una pronunciada

curva de aprendizaje, lo que normalmente aleja la par-
ticipación directa de los diseñadores dentro de la pro-
gramación como tal, sin embargo es común que equipos
de trabajo multidisciplinares tengan programadores y
diseñadores trabajando en sus áreas de especialidad para
integrar los elementos que cada uno de ellos elabora en
proyectos web, videojuegos o software comercial.
iv. Lenguajes de hoja de estilos:
Los lenguajes hojas de estilos expresan la presentación

de documentos estructurados, su relevancia consiste en la
reutilización de contenidos en la diversidad de contextos
y presentaciones que permiten las hojas de estilo. Aun-
que algunos programas de diseño editorial utilizan este
tipo de lenguajes el más extendido tiene que ver con su
uso en los medios digitales interactivos, específicamente

en la web; las Hojas de Estilo en Cascada o CSS, que se
emplean para dar el conjunto de estilos que controlarán a
los elementos de una programación en lenguaje de mar-
cado de hipertextos (HTML, XHTML...)
Los CSS son el entorno ideal para que el diseñador es-

pecifique los parámetros que controlarán una pieza inte-
ractiva online y al ser un conjunto de reglas que parten de
los sistemas de organización editorial es un área en donde
es posible manifestar todas las potencialidades derivadas
de la producción gráfica tradicional y añadir las incorpo-
raciones de los aspectos multimedia e interactivos. Las
reglas que incorpora una hoja de estilo CSS permite mo-
dificar tres tipos de elementos (Smith, 2010, p. 625):
- Etiquetas (Tag), modifica etiquetas HTML existen-

tes, al utilizar este tipo de etiquetas es posible aplicar un
formato automatizado donde quiera que cierta etiqueta
HTML está presente. Por ejemplo se puede definir que
cualquier elemento dentro de la etiqueta <strong> apli-
que automáticamente formato de tipografía cursiva, ta-
maño de 20 píxeles y color rojo.
- Clase (Class), para mayor control en el diseño los sitios

web se pueden crear selectores de este tipo, que son estilos
que reciben un nombre específico y modifican caracterís-
ticas de cuerpo de texto, encabezados, subtítulos y otro
tipo de elementos. Es posible seleccionar cualquier nom-
bre para una clase y posteriormente se aplica de manera
selectiva a los elementos. Seleccionando propiedades que
aplican a una variedad de elementos es posible obtener
muchas aplicaciones de una sola clase. Esencialmente
crear una clase es equiparable a crear un estilo de párrafo
en diseño editorial.
- Identificador (ID), cuando es necesario conferirle

características a un elemento HTML único, es posible
utilizar esta etiqueta que reconoce los identificadores
DIV que generan áreas de maquetación y mediante las
cuales se le asignan a los contenedores propiedades para
controlar su posición, apariencia o tamaño, estos iden-
tificadores permiten denominar áreas específicas como
242 | Modelos
una barra de navegación o un cuerpo de texto para asig-

narle reglas.
v. Content Management Systems (CMS)
Dentro de este listado mencionaremos también los CMS,

pues aunque no son lenguajes de programación sino pro-
gramas informáticos –que permiten la publicación, edi-
ción y modificación de contenidos–, son utilizados co-
tidianamente para el desarrollo de proyectos en internet
en los cuales es importante tener una interfaz para que
un operador o un conjunto de ellos alimenten al siste-
ma sin modificar los aspectos de programación y diseño
del entorno, ingresando exclusivamente información que
puede incluir además de textos, imágenes, vídeos, scripts
o secciones dentro de la estructura base.
Algunos de los Web Content Management Systems

(WCMS) más utilizados son: WordPress, Joomla!, Dru-
pal o Media Wiki. La facilidad de uso que conlleva su
integración, su bajo coste y el control que otorgan en la
manipulación de contenidos les convierte en una opción
muy utilizada en la construcción de blogs y sitios web.
El conjunto de elementos básicos de configuración visual

de un CMS puede ser definido por el diseñador gráfico
para adaptarse a las necesidades particulares del proyecto
y así, a pesar de utilizar sistemas modulares, lograr una
adecuación de la estructura base a las particularidades
de diseño. Los CMS al facilitar la actualización y vin-
culación dinámica de información permiten generar si-
tios con mucho movimiento informativo, mediante la
alimentación de operadores o la vinculación con RSS
(Really Simple Syndication) y sistemas noticiosos que se
integran en una sola interfaz.
El conocimiento de los aspectos generales de un lengua-

je de programación particular ayuda al diseñador gráfico
hipermedia a trabajar de manera más cercana y fluida con
programadores y a visualizar de forma clara las posibili-
dades de manipulación de los componentes del proyecto.
La programación puede ser asignada de manera indi-

vidual o global a cada uno de los componentes funda-
El artista Mattew Plummer-Fernandez evoca este retorno del espacio digital al analógico mediante la reflexión que realiza al escanear
objetos físicos para manipularlos mediante algoritmos que les abstraen hacia sus formas geométricas predecesoras, una vez manipula-
dos digitalmente, los objetos se imprimen en 3D y el resultado es un cuestionamiento sobre la forma y función del objeto digital/analó-
gico. (http://www.plummerfernandez.com)
244 | Modelos
mentales del proyecto de diseño gráfico hipermedia, de

esta manera es posible programar aspectos formales de
un sitio web como sus colores, aspectos tipográficos, je-
rarquías de elementos, en base por ejemplo a una defini-
ción de estilos CSS en un documento HTML, o también
contemplar los aspectos espacio-temporales de una ani-
mación interactiva, definiendo posiciones de elementos,
sus tamaños respectivos, direcciones y el tipo de mani-
pulación o transposición temporal que ha de ejecutar el
lectoautor de acuerdo a parámetros preestablecidos por
un documento basado en ActionScript de Flash, es decir,
teniendo una imagen clara de lo que necesita proyectarse,
el diseñador podrá seleccionar la herramienta tecnológi-
ca óptima para su elaboración y delegar, dado el caso, las
secciones pertinentes al desarrollo técnico por parte de
un especialista.
4.11 Anotaciones adicionales al desarrollo futuro del

micromodelo
Después de revisar correspondencias
entre los elementos fundamentales del diseño gráfico tra-
dicional y haberles revisado desde la óptica hipermedia
podemos identificar de manera más clara cuál es el pano-
rama actual en relación con los fundamentos básicos que
componen un proyecto hipermedia.
La revisión de proyectos y ejemplos prácticos ayuda a

vincular los elementos que aporta el diseño tradicional
para mirarlos desde la óptica hipermedia. El resultado es
un camino inicial que tiene todavía mucho por recorrerse
pero que ayuda a tener un punto de partida para poder
seguir avanzando e intuir los posibles desarrollos futuros
que el modelo puede necesitar.
El camino hacia el entorno hipermedia es un recorrido

desde los procesos analógicos del diseño gráfico hacia su
El retorno del entorno digital al espacio analógico traducción digital, pero el proceso está empezando a re-
ha sido impulsado por las tabletas electrónicas Ar-
duino, sistemas electrónicos que unidos al software vertirse y la vuelta de lo digital a lo analógico trae consigo
Processing permiten contolar los elementos físicos el physical computing, que es la posibilidad de interacción
con la programación.
de sistemas físicos, controlados con hardware y software,
pero que responden al mundo analógico; un ejemplo de

ello son las bombillas Hue de Philips, que permiten crear
un entorno de iluminación inalámbrico, controlado por
smartphone o tableta y en el que es posible modificar los
parámetros de tonalidad, luminosidad y color para crear
diferentes ambientes de acuerdo a la luz de las bombillas.
La experimentación en el physical computing se está lle-

vando a cabo también con ordenadores diminutos como
el Raspberry Pi o con sets de electrónica abierta para la
creación de prototipos para ser ensamblados y contro-
lados mediante placas electrónicas como la plataforma
Arduino, que adicionalmente incorpora la posibilidad de
controlarse mediante el lenguaje de código abierto Proces-
sing, con lo cual diseñadores y artistas que inician traba-
jando con este lenguaje especializado en la manipulación
de elementos visuales pueden dar el salto al desarrollo de
piezas físicas.
En el terreno del diseño y las artes actualmente existen

desarrollos que trabajan llevando el physical computing
a proyectos prácticos como el uso de leds e iluminación
(Stefan Hintz, Bug Rodgers, http://www.flickr.com/
photos/stefan_hintz/12575006013) o con piezas me-
SAM, Sensor Actor

Modules , es un
proyecto que pretende
llevar IoT, el internet
de las cosas hacia el
usuario cotidiano para
materializar proyectos
creativos de forma
transparente.
http://samlabs.
me/#benefits
246 | Modelos
cánicas y robótica (Dr_Spped, http://www.flickr.com/

photos/51276066@N00/12368555243) o en la mani-
pulación electrónica para crear interfaces físicas como el
EyeWriter de Evan Roth (vimeo.com/6376466, 07/13).
Otro terreno de evolución en el entorno hipermedia

vinculado al traslado físico de los componentes digita-
El sistema de ilumi-
nación Hue de Philips
es un ejemplo de
aplicación práctica del
physical computing; las
bombillas se comunican
con un receptor central
que a su vez conecta
con un dispositivo mó-
vil; una App sirve como
interfaz para controlar
todo el conjunto de
piezas, que pueden
modificarse de manera
inalámbrica e incor-
porar adicionalmente
otros dispositivos de
la familia; bombillas
adicionales, tiras de luz
o lámparas de mesa.
Un objeto cotidiano
reinterpretado gracias a
la creatividad del Sugar
Lab y la evolución en el
desarrollo y manipula-
ción en los materiales
para impresiones en 3D;
el resultado caramelos
de menta que lo único
que conservan de sus
predecesores es el
sabor.
(http://cubify.com/
brands/TheSugarLab)
les es el Internet of Things -IoT- (http://www.theinter-

netofthings.eu) que conecta más allá de los usuarios a
dispositivos y entidades que manipulan conexiones tales
como redes eléctricas, el tráfico o procesos de toma de
decisión en entornos médicos y financieros. Este ámbito
es otro espacio adicional para la participación del diseña-
dor gráfico hipermedia y experimentos como el proyecto
iniciado en Kickstarter Sam (http://samlabs.me) ejem-
plifican la potencialidad de esta interdisciplinaridad que
programadores, ingenieros y diseñadores pueden aportar
al desarrollo futuro de el entorno hipermedia de camino
a su vuelta al espacio físico.
Las posibilidades para el diseñador gráfico se seguirán

expandiendo en el entorno hipermedia y su traslado de
vuelta al mundo físico conlleva nuevos retos y posibilida-
des para la evolución de nuestra carrera.
Centro meteorológico
con texto en scroll desa-
rrollado por Dr_Speed
utilizando Arduino Yun
http://www.flickr.com/
photos/51276066@
N00/15578977535/
248 | Resultados
Resultados
5 Resultados de
la investigación
♦♦ There is no such thing as bad design,

only inapproppriate design
Neville Brody
5. GRADO DE VERIFICACIÓN
O NO VERIFICACIÓN DE LAS HIPÓTESIS
Los resultados de la investigación re-

fuerzan la hipótesis planteada por este trabajo, una vez
desarrollados los modelos han sido revisados desde los
ámbitos académico, profesional y de investigación, y en
las tres áreas se verifica la necesidad de equilibrar la carga
tecnológica con herramientas teóricas en el espacio hi-
permedia del diseño, así como de analizar y revisar las
correspondencias de los conceptos fundamentales del di-
seño gráfico hipermedia mediante herramientas que apo-
yen la estructuración fundamental de los elementos de un
proyecto de diseño hipermedia.
En el capítulo anterior se ha desglosado la propuesta del
micromodelo en la revisión de cada uno de sus compo-
nentes, en este apartado sobre los resultados es necesario
verificar esta propuesta de modelo con relación a los di-
ferentes ámbitos que pueden permitir su corresponden-
cia, y de esa manera gradar la verificación o incompati-
bilidad de la propuesta planteada. En un primer paso, la
comparativa se ha realizado con respecto a los modelos
250 | Resultados
analizados en el segundo capítulo para verificar objeti-

vos y características generales; a continuación se utilizan
herramientas cualitativas y cuantitativas en los entornos
académico y profesional para generar resultados indicati-
vos hacia el aterrizaje de las conclusiones de este trabajo.
5.1 COMPARATIVA DE MODELOS
En un primer acercamiento hacia la revisión de

las hipótesis se retoma el trabajo realizado en el análi-
sis de modelos relevantes -capítulos 2.2 a 2.5- para ha-
cer una comparativa con el modelo propuesto y observar
su correspondencia en dos aspectos: las características y
objetivos generales; con el objeto de analizar tanto ele-
mentos en común como aspectos diferenciadores, ambos
enfocados hacia la fundamentación del diseño gráfico hi-
permedia y con una perspectiva que permita continuar
evolucionando este modelo y que promueva su imple-
mentación hacia las diferentes aplicaciones teórico-prác-
ticas que menciona la investigación.
5.1.1 Características generales del modelo
El modelo de “Aspectos fundamen-

tales del diseño gráfico en el entorno hipermedia”, es una
propuesta que busca equilibrar la tendencia en la evolu-
ción de los modelos referenciales (Fig. 5.1 y 5.2) de carga
tecnológica con respecto al desequilibrio en la carga teó-
rica, el modelo busca proponer una solución basada en la
revisión fundamental de los aspectos que componen los
elementos esenciales del diseño gráfico revisados desde la
óptica del terreno hipermedia.
El modelo propuesto busca introducir al estudiante de

diseño hacia los fundamentos básicos de los aspectos,
tanto del diseño gráfico tradicional, como de los aspectos
hipermedia; con las intenciones de identificarlos en pri-
Tendencia en la evolución de los estudios de Diseño Gráfico

20
Fig. 5.1 Evolución
en las asignaturas
Teórico - Prácticas en
los estudios de diseño
monitorizados como
referencia.
15
10
0
Inicio 1985-1995 2010-2013
Tendencia en la evolución de los modelos Español y Mexicano

20
Fig. 5.2 Evolución en las
asignaturas Teóri-
co - Prácticas en los
estudios de diseño en
España y México.
15
10
0
Inicio 1985-1995 2010-2013

252 | Resultados
mer lugar, para después revisar sus intersecciones y expe-

rimentar correlaciones que permitan encontrar diversos
caminos de aplicación creativa en el desarrollo de proyec-
tos prácticos.
La propuesta de modelo presentada, además de las re-

ferencias teóricas del diseño gráfico tradicional re-
visadas en el capítulo anterior, retoma también ele-
mentos estructurales de asignaturas de las carreras de
Diseño Gráfico, Comunicación y Bellas Artes, a raíz
de las experiencias académicas que he tenido como
docente, con el objetivo de vincular y posibilitar el de-
sarrollo posterior de estudios hacia un segundo ci-
clo de formación, especializada en el terreno hiperme-
dia y con ámbito de aplicación geográfica en México.
Las asignaturas de las que se han incorporado elementos
para revisarse bajo la propuesta de modelo son:
- Taller de formación básica 1 y 2*
- Comunicación hipermedia*
- Soluciones gráficas para redes*
- Multimedia*
- Teoría e historia de Hipermedios
- Diseño Web
- Animación y Modelado 3D
*Los temarios completos se pueden consultar en la sección de

anexos.
Los conceptos clave para el estudio del modelo parten

de la dicotomía gráfico-hipermedia de los fundamentos y
se reúnen en los cinco pilares principales que componen
el modelo propuesto: forma, espacio, tiempo, acciones y
atributos.
Como resultado del análisis de sus componentes e inte-

rrelaciones podemos obtener una dinámica de trabajo que
pretende revisar los aspectos esenciales del diseño gráfico
hipermedia, sus representaciones gráficas y las posibilida-
des expresivas que surgen al empezar a trabajar con sus

posibles combinatorias.
El análisis de los componentes del diseño permite iniciar

una identificación de los mismo, una revisión teórica de
los fundamentos que presenta y un estudio de los proce-
sos y técnicas que anteceden a su manipulación.
La principal aportación de este modelo es la reflexión

que surge a partir de la vinculación de los dos conjuntos
de conocimientos que coinciden en la práctica del diseño
gráfico hipermedia; y que en este modelo se han diseccio-
nado para revisarse en primer lugar de forma individual
para, una vez comprendidos, proceder a la identificación
práctica de sus relaciones, buscando así aportaciones co-
tidianas de forma continua durante la utilización profe-
sional del modelo propuesto.
5.1.2 Relación de las características generales con los

modelos referenciales
En relación con los modelos referen-

ciales revisados en el capítulo 2, el modelo planteado por
el presente trabajo comparte una serie de elementos co-
munes a identificar:
• Un marcado acento en la revisión de los aspectos

teóricos que dan origen a los componentes del mo-
delo.
• Una preocupación por revisar dentro del conjunto

de conocimientos los aspectos prácticos de la teoría
planteada.
• La valoración de las aportaciones multidisciplinares

que hacen otras especialidades y que enriquecen los
resultados de aplicación práctica -i.e., La participa-
ción de un programador especializado en el lenguaje
de ActionScript para el desarrollo de una aplicación
hipermedia en Flash-
254 | Resultados
Fig. 5.3 Nube de

información: Elementos
fundamentales de los
Fig. 5.4 Nube de

fundamentales del
micromodelo
propuesto
Fig. 5.5 Nube de

modelos Español y
Mexicano
256 | Resultados
• Se contempla la aplicación tecnológica de nuevas

posibilidades expresivas y comunicativas mediante
una aproximación teórica y metodológica.
• La expresión en un nuevo medio se identifica como

un área de oportunidad para generar experimenta-
ción y desarrollar comunicación mediante canales
poco explorados y de desarrollo futuro.
Al realizar una comparativa con los mo-

delos referenciales también se encuentran un conjunto de ele-
mentos diferenciadores con respecto al modelo presentado:
• El modelo de “Aspectos fundamentales del diseño

gráfico en el entorno hipermedia” concluye como
aportación creativa la experimentación que se reali-
za a partir del trabajo con las diversas vinculaciones
que resultan de combinar los elementos revisados
inicialmente de manera individual.
• Restringe la experimentación tecnológica al análisis

previo de los componentes empleados en el modelo.
• El componente tecnológico del modelo, vinculado

a sus aplicaciones prácticas conlleva el traslado a la
práctica con herramientas en un proceso de renova-
ción continuo, donde la curva de aprendizaje técnico
puede rebasar el tiempo práctico de aplicación.
Una manera gráfica de contrapo-

ner estas similitudes y diferencias es la comparativa vi-
sual de la información referencial entre los modelos que
resulta del análisis visual de las dos nubes informativas
de los modelos referenciales (Fig. 5.3) y el micromode-
lo propuesto (Fig. 5.4), que se complementa con la nube
informativa de los modelos de referencia geográfica en
España y México (Fig. 5.5), de estas relaciones se puede
inducir la diversificación que provoca en el diseño gráfico
tradicional su traducción al entorno hipermedia; el pilar
fundamental del diseño como tal se diversifica hacia un
conjunto más amplio de componentes que tienen que ver
con el conjunto de posibilidades que surgen en este re-

ciente espacio expresivo, la nube informativa del modelo
propuesto lo expresa en un equilibrio más marcado entre
los diferentes componentes del infográfico.
5.1.3 Objetivo general del modelo
El modelo de “Aspectos fundamen-

tales del diseño gráfico en el entorno hipermedia” tiene
como objetivo, -tal como se menciona en el primer ca-
pítulo de esta investigación- “ identificar los conceptos
eje de la teoría del diseño gráfico y su traslado a los hi-
permedios, retomando los elementos fundamentales del
diseño convencional para observar su evolución hacia el
diseño gráfico hipermedia y de esta forma revisar final-
mente sus posibles implicaciones y aplicaciones. ”
De esta forma se busca proponer un marco teórico de

trabajo, dirigido hacia el establecimiento de una metodo-
logía funcional para abordar creativamente problemáticas
de diseño gráfico hipermedia y proponer renovadas solu-
ciones profesionales.
Además de este objetivo de la investigación se han pre-

sentado los objetivos en el campo educativo: lograr una
descripción operacional para el terreno académico y ge-
nerar orientaciones académicas sobre el diseño gráfico
hipermedia, y los objetivos en el campo profesional de la
aplicación profesional de la investigación y la generación
de apoyos teóricos, útiles para el desarrollo de proyectos.
Finalmente se han mencionado los objetivos de fomen-

tar la reflexión y provocar retroalimentación sobre los te-
mas y análisis realizados en el presente documento.
La propuesta de modelo estructura sus contenidos a par-

tir del estudio de los componentes fundamentales de los
terrenos gráfico e hipermedia para en primera instancia
identificarles, revisa en un segundo momento sus vin-
culaciones para finalmente lograr aportaciones teórico-
258 | Resultados
tecnológicas en las propuestas hipermedia del diseñador

gráfico.
5.1.4 Relación de los objetivos propuestos con los

Con respecto a los objetivos de los

modelos referenciales revisados en el capítulo segundo
del presente estudio, se pueden enumerar los siguientes
elementos comunes a los modelos:
• Buscan lograr un elevado nivel de competencia para

el diseñador en un medio de constante cambio y
evolución como lo son las aplicaciones hipermedia,
haciendo sólidas aportaciones a la fundamentación
teórica del diseño, de manera que puedan ser trasla-
dadas a su aplicación práctica con el conjunto de he-
rramientas y técnicas óptimas, independientemente
de su nivel tecnológico.
• Centra su atención en la solidez de la fundamenta-

ción teórica y metodológica como parte esencial de
la proyección del diseño.
• Existe una búsqueda por ampliar los horizontes

profesionales del diseñador para afrontar tanto la
problemática de aplicación cotidiana en la labor del
diseño, como en la orientación de la evolución del
diseño hacia un conjunto diverso de especialidades
como resultado de la participación del diseño en
nuevas áreas de la comunicación.
• Aborda la diversificación del diseño a partir de un

amplio conjunto de aplicaciones pero basado en un
centro teórico común que agrupa los componentes
esenciales, aplicables a todas las derivaciones.
• Existe entre los objetivos de los modelos la intención de

dotar al estudiante de diseño de herramientas críticas
para evaluar la eficacia y creatividad de sus propuestas.
• Mediante la experimentación se busca que el diseña-

dor avance en la construcción de metodologías pro-
pias a partir del conjunto de elementos presentados.
También sobre el modelo presentado

con respecto a los objetivos de los modelos referenciales
se pueden encontrar algunas diferencias:
• Parte de un conjunto específico de conocimientos

que componen el marco teórico fundamental, vincu-
lados hacia la aplicación hipermedia de estos conoci-
mientos teóricos.
• El análisis del modelo supone estudios de diseño

gráfico en paralelo y de forma posterior para lograr
un aterrizaje práctico óptimo del conjunto de cono-
cimientos revisados y su aplicación en la práctica.
• La convergencia de elementos hipermedia está supe-

ditada a la perspectiva del diseño gráfico.
5.2 SESIONES DE GRUPO
En el marco del “Primer Ciclo de

Conferencias sobre Tecnología en el Diseño” durante
el mes de agosto del 2006 en la facultad de EMADyC
(Escuela Mexicana de Arquitectura, Diseño y Comuni-
cación) de la Universidad La Salle, tuve la oportunidad
de participar con una conferencia sobre “Las perspectivas
del diseño gráfico hipermedia”. A esta conferencia asis-
tieron tanto docentes como alumnos de la Universidad y
en su fase final se llevó a cabo un ejercicio en el que los
asistentes identificaron componentes del diseño gráfico
tradicional e hipermedia.
La muestra estuvo compuesta por: 8 Profesores de la ca-

rrera de Diseño Gráfico 20 Alumnos cursando la carrera
de Diseño Gráfico, 12 de ellos del 7mo. semestre y 8 del
5to. Como resultado del ejercicio los asistentes mencio-
naron de los grandes grupos:
260 | Resultados
i. Diseño Grafico
80% de ellos aspectos formales
50% de ellos aspectos espaciales
30% de ellos aspectos temporales en esta categoría
ii. Diseño Hipermedia
60% de ellos aspectos relacionados con acciones
5% de ellos aspectos relacionados con los atributos
Durante el mes de enero de 2011 en la Universidad del

Valle de México participé en una conferencia sobre “El
traslado del diseño gráfico hacia los hipermedios”, en ella
se reunió igualmente un grupo de profesores del grado
de diseño gráfico (10 profesores) y una muestra de 50
alumnos de diversos semestres de la carrera de diseño
gráfico. Hacia el final de la conferencia se les invitó a los
asistentes a identificar componentes del diseño gráfico e
hipermedia, con los siguientes resultados:
i. Diseño Grafico
70% de ellos aspectos formales
40% de ellos aspectos espaciales
ii. Diseño Hipermedia
70% de ellos aspectos relacionados con acciones
10% de ellos aspectos relacionados con los atributos

Como conclusiones en relación a ambos ejercicios se des-

taca que la mayor parte de los asistentes identificó cla-
ramente estas dos grandes secciones como pilares funda-
mentales del diseño gráfico y su traducción hipermedia,
mencionando un amplio conjunto de sus componentes.
• La mayor parte de los encuestados tiene problemas

ubicando el tiempo dentro del modelo ya sea dentro
de las características del diseño gráfico o bien como
parte esencial del conjunto hipermedia.
• La mayor parte de los encuestados identifica elemen-

tos hipermedia pero tiene problemas al agruparlos en
categorías claramente definidas.
• Las relaciones entre los resultados del primer ejerci-

cio y el segundo indican una adopción mayor de los
componentes hipermedia en el tiempo, que se traduce
en la identificación de elementos básicos del entono,
aunque su clasificación e interrelación todavía sea baja.
Fig. 5.6 Encuesta sobre

áreas de interés para el
desempeño profesional
262 | Resultados
Como conclusión particular de los eventos, los asistentes

manifestaron su interés por un modelo que agrupe com-
ponentes fundamentales del diseño gráfico hipermedia
ante la escasez actual de estudios teóricos que ayuden a
apoyarse en marcos teóricos sobre el tema, así mismo los
asistentes mencionaron la importancia de hablar sobre las
nuevas posibilidades que se generan en la vinculación de
los aspectos fundamentales del diseño con su aplicación
en el entorno hipermedia.
En resumen los ejercicios realizados en estas sesiones,

aunque no son muestras cuantitativas amplias, orientan
positivamente la hipótesis sobre la importancia de hacer
un aterrizaje de sobre los componentes básicos de la teoría
del diseño gráfico convencional y su empleo en el terreno
hipermedia. Así mismo, los resultados apoyan la impor-
tancia de revisar y acotar las convergencias disciplinarias
que el aspecto hipermedia del diseño gráfico aporta.
Los resultados de este ejercicio son de carácter orientati-

vo e indican tendencias en el campo del diseño y con res-
pecto al público objetivo de la muestra, en la búsqueda de
respuestas adicionales e información cualitativa a partir
de esta sesión del 2006 realizada durante el desarrollo del
trabajo de investigación inicial del doctorado, con el ob-
Fig. 5.7 Resultados sobre la identificación de jetivo de aportar información adicional y dar seguimiento
necesidades de apoyo teórico y sus ámbitos de al proceso se realizó un año después en el año 2007, du-
mayor necesidad
Identificación de necesidades teóricas

Necesidad de herramientas
relacionadas teóricas
con los hipermedios Áreas de necesidad de apoyo teórico
50,0
No 37,5
23%
25,0
12,5
Si
77%
0
Impresos Hipermedia Fotografía Otros
Áreas de desarrollo del diseño gráfico

40
30
20
10
0
Impresos Audiovisuales Hipermedia Ilustración Fotografía Corporativa Otros
Fig. 5.8 Percepción sobre las áreas de desarrollo

futuro para el diseño gráfico
rante el “2do. Ciclo de Conferencias sobre Tecnologías de

Diseño” igualmente en las instalaciones del EMADyC de
la Universidad La Salle una encuesta con puntos basa-
dos en los resultados obtenidos previamente, abordando
la importancia de las convergencias que se dan en el di-
seño gráfico hipermedia y sus aplicaciones en creatividad
e innovación con miras hacia la aplicación práctica del
conjunto de conocimientos planteados por el modelo de
“Fundamentos del diseño gráfico hipermedia”. Los resul-
tados de este cuestionario aportan datos adicionales que
complementarán los análisis anteriores y aportan un re-
sultado de mayor cobertura.
El cuestionario realizado se incluye en la sección de ane-

xos bajo el titulo de “Cuestionario para el 2do. Ciclo de
Conferencias sobre Tecnologías de Diseño en la Univer-
sidad La Salle”.
La muestra estuvo compuesta por 6 profesores de diseño

y 58 alumnos de segundo, y cuarto semestre de la carrera
de diseño gráfico.
Los resultados más importantes tienen que ver con tres

áreas principales:
• En primer lugar, la percepción que tienen los alumnos

264 | Resultados
y profesores sobre las áreas del diseño gráfico en donde

les gustaría desempeñarse profesionalmente (Fig. 4.6),
Oportunidades labo- un gran porcentaje lo abarca la suma de las áreas audio-
rales en la web de
Fantasy Interactive
visuales e hipermedia, que viene seguido de comunica-
(09/13) ciones corporativas y medios impresos, también es im-
portante hacer mención de algunas de las áreas diversas
que mencionan los alumnos que no se han considerado
de manera individual para la encuesta, especialmente
videojuegos y modelado 3D.
• El segundo grupo informativo tiene que ver con la

identificación de la necesidad recibir apoyos teóricos
adicionales (Fig. 5.7), frente a lo que una gran mayoría
de los asistentes reconoce deficiencias, mismas que ex-
presan posteriormente de acuerdo a las áreas en las que
es más necesario ese apoyo; el resultado vuelve a dife-
renciar el terreno hipermedia con respecto a los demás
grupos de conocimientos.
• Como último punto destacado de la encuesta se ha

obtenido la percepción que los encuestados tienen so-
bre las posibilidades de desarrollo del diseño gráfico
en el corto plazo, el gráfico (Fig. 5.8) muestra una in-
clinación acentuada hacia los contenidos relacionados
con aspectos tecnológicos especialmente vinculados al
entorno hipermedia.
5.3. COMPARATIVA PROFESIONAL
Un aspecto de vital importancia para

la evaluación del modelo es comprobar la funcionalidad
del mismo frente a su aplicación práctica, pues como
apunta Baggerman en su estudio de Diseño para la Inte-
racción (2000, p. 8) “A no ser que los diseños se encuentren
con las necesidades de los usuarios permanecen en riesgo
de ser malinterpretados, inefectivos o peor aún, inútiles”.
Para ello la comparativa profesional es una referencia in-
mediata que apunta hacia lo que sucede cotidianamente
en el terreno profesional del diseño gráfico actual.
A efectos de este trabajo se han seleccionado un conjun-

to de diez despachos de diseño, publicados en la edición
132 de la revista Web Designer -Junio de 2007- como los
despachos más importantes en el diseño de proyectos hi-
permedia, se han revisado sus espacios de oferta laboral
y promoción de carreras profesionales para identificar los
aspectos que valoran del diseño gráfico hipermedia, así
como el perfil de sus colaboradores y los requisitos que
consideran para contratar nuevo personal. El resultado es
un conjunto de conceptos que se comparan con respecto
al modelo propuesto para verificar las correspondencias
que pueden surgir o las necesidades de reajuste e incor-
poración de elementos que marca el pulso del desarrollo
profesional.
i. Fantasy Interactive
http://www.f-i.com/fi/careers
Situación geográfica: Nueva York, San Francisco, Esto-

colmo, Londres.
Habilidades valoradas: Diseño, video, desarrollo de apli-

caciones, usabilidad, interfaces.
En 2008 el equipo
de Big Spaceship se
reorganizó en equipos,
de acuerdo al estudio
del Harvard Business
School de organización
de grupos por equipos
de colaboración,
incorporando sus cuatro
disciplinas; estrategia,
diseño, tecnología y
producción, para partici-
par en el proceso global
y obtener soluciones
ejecutables e innova-
doras.
266 | Resultados
Requisitos de contratación: Pasión por el diseño, actitud

positiva, trabajo en equipo, curiosidad, flexibilidad, tra-
bajo intelectual y dedicado. Libertad creativa, formatos
de proyectos en colaboración y flexibles; profesiones que
van desde: arquitectura de información, desarrolladores,
diseñadores de interacción, diseñadores gráficos y artistas
3D, hasta productores y gerentes de proyecto.
Filosofía: “Calidad sobre cantidad”. FI se enfoca en ser

la mejor compañía de interactivos en la industria y para
ello se ha posicionado como el mejor empleador de la in-
dustria también. La empresa cree en establecer ambientes
altamente creativos y motivadores para sus empleados, así
como en promover una atmósfera competitiva.
Ofertas de empleo actuales (Revisión del 09/13): Pro-

ductores Senior, Líderes de diseño de interfaz, Directores
creativos, Directores de diseño, Desarrollador interactivo,
Directores de arte, Diseñadores, Gerentes de comunica-
ción y marketing, Productores y Desarrolladores.
ii. Big Spaceship
www.bigspaceship.com
Situación geográfica: Nueva York, USA
Habilidades valoradas: Diseño interactivo, animación,

3D, diseño en tiempo real, video, videojuegos, diseño de
sonido.
Requisitos de contratación: asertividad, organización,

competencia, dedicación, proactividad, trabajo en equipo
y con proyectos de colaboración. Creatividad, habilidades
de marketing, animación, multimedia; diseño para el en-
tretenimiento, productos de consumo y de estilo de vida,
son también valorados.
Filosofía: Obsesión por las tecnologías emergentes y

adicción por la cultura popular. Multidisciplinaridad y
procesos de colaboración creativos. Énfasis en los aspec-
tos narrativos de los proyectos.
Algunas ofertas de empleo actuales (Rev. 09/13): Di-

rector de contenido medios sociales, Gerente de SEO
y Análisis, Técnico en código de programación, Estra-
tega en experiencia del usuario, Director de diseño, Di-
señador Sr., Programador Sr. , Productor Sr.
iii. Unit9
www.unit9.com
Situación geográfica: Londres, Nueva York, San Fran-

cisco, Estocolmo, Florencia.
Habilidades valoradas: diseño web, campañas en mi-

crositios, videojuegos, “rich media”, diseño de persona-
jes, interfaces, video interactivo y animación 2D/3D.
Requisitos de contratación: Creatividad, comunicación

en línea, publicidad, narrativa, efectividad.
Filosofía: Unit9 busca crear cautivadoras experiencias

en línea mediante el uso balanceado de interacción,
Algunas de las Apps

desarrolladas por Unit9,
distribuidas en disposi-
tivos móviles, tabletas,
consolas, internet y
plataformas de redes
sociales.
www.unit9.com/apps
268 | Resultados
creación visual y narrativa poderosa.
Algunas ofertas de empleo (Rev. 09/13): Marketing, pro-

ductor, Productor interactivo, Creativo, Desarrollador,
Diseñador de interacciones e interfaces, Diseñadores Jr.
y Sr., Desarrolladores, Director de arte, Desarrollador vi-
sual de flash, Desarrollador móvil, Desarrollador web.
iv. Soleil Noir
www.soleilnoir.net
Situación geográfica: París, Francia
Habilidades valoradas: animación diseño, diseño web,

video, interfaces, desarrollos interactivos fuera de línea,
herramientas de manipulación en línea de contenidos.
Requisitos de contratación: Diseño gráfico, animación,

programación, manejo de contenidos, creatividad e ima-
ginación.
Filosofía: Estudio de creación independiente, Soleil Noir

se especializa en producciones multimedia de alta cali-
dad por sus características artísticas y calidad interactiva.
Preocupación por los detalles gráficos y ergonómicos con
originalidad y perfecta dirección de arte.
Algunas ofertas de empleo actuales (Rev. 09/13): Desa-

rrollador, Infografista interactivo.
v. North Kingdom
Proyectos de North Kingdom

www.northkingdom.com
n°1 – Vodafone Netguys, Vodafone Germany,
n°2 – The 5 Experience, Tribal DDB South Africa, Situación geográfica: Skellefteå, Estocolmo (Suecia)
n°3 – Daybreak, AT&T / BBDO,
n°4 – Google ROME & 3 Dreams of Black, Google
Creatve Lab
Habilidades valoradas: diseño web, campañas en micro-
n°5 – Build with Chrome, Google / Mark, sitios, videojuegos, “rich media”, diseño de personajes, in-
n°6 – ONLY - The Liberation, ONLY / UncleGrey
Copenhagen, terfaces, video interactivo y animación 2D/3D.
n°7 – Vodafone BufferBusters, Vodafone Germany,
n°8 – Daybreak, Jack Boxers, AT&T / BBDO Requisitos de contratación: Creatividad, talento artístico,
n°9 – Weetakid, BBH London
habilidades interactivas, imaginación e innovación.
Filosofía: North Kingdom se especializa en crear piezas

de comunicación interactivas innovadoras y adictivas,
en proyectos de alta calidad que fortalecen la marca de
sus clientes.
vi. RedKeds Studio
www.redkeds.com
Situación geográfica: Moscú, Rusia.
Habilidades valoradas: animación, proyección de inter-

faces, composición musical y de video, programación y
diseño gráfico
Filosofía: Con un concepto central de armonía Re-

dKeds cree en la proyección de emociones a través de
sus proyectos.
vii. Group94
www.group94.com
Situación geográfica: Gent, Bélgica.
Habilidades valoradas: manejo de bases de datos, nave-

gación inteligente, diseño lógico.
Filosofía: el Grupo94 no asume nada y cuestiona todo;

cada proyecto inicia de cero y el objetivo es hacerlo lo
más fresco e innovador posible, mezclando rapidez,
usabilidad y alto nivel técnico.
viii. Grupo W
www.grupow.com
Situación geográfica: Saltillo, México.
Habilidades valoradas: publicidad interactiva, anima-

ción 2D/3D, audio, video y diseño de interfaces.
270 | Resultados
LISTEN, CREATE, MEASURE. THESE ARE THE COR-

NERSTONES OF OUR APPROACH. BECAUSE WE
DON’T BELIEVE IN LUCKY GUESSES.
El slogan de Possible hace referencia a las herra-

mientas de desarrollo teórico que esta agencia Filosofía: Pasión y dedicación para todos los proyectos
aplica en sus proyectos: escucha, creatividad,
medición de resultados. La revisión de carreras
sin distinguir presupuestos o el tamaño del cliente.
en Enero de 2015 arroja alrededor de 30 puestos
relacionados con el diseño hipermedia. Algunas ofertas de empleo actuales: Creativo
ix. Possible
www.possible.com
Situación geográfica: Budapest, Cincinatti, Londres, Los

Ángeles, Moscú, Nueva York, San José, Sao Paulo, Seattle,
Shangai, Singapore, Katowice, Viena, Sidney, San Fran-
cisco, Portland, Melbourne, Hong Kong, Dubai, Detroit,
Chicago, Bucarest, Brighton, Beijing.
Habilidades valoradas: enfoque en resultados, creatividad,

talento, cultura, inteligencia colectiva y alcance.
Filosofía: Fomentar la escucha, la creatividad y la mesura

son los elementos de aproximación de esta agencia.
Algunas ofertas de empleo actuales (01/15): Director

de prácticas en redes sociales, Diseñadores interactivos,
Creativos, Desarrolladores web, Agentes creativos, Di-
rectores de cuenta, Gerentes de proyectos, Consultores,
Diseñadores interactivos.
x. Vinyl
www.vi-nyl.com
Situación geográfica: Seúl, Corea
Habilidades valoradas: servicio web, interfaz de usuario

de medios digitales, promoción en línea, “publishing” y
medios inteligentes. Algunas ofertas de empleo actua-
les: Diseñador de movimiento, Programador de Action-
Script, Diseñador de interfaces de usuario.
Filosofía: Vinyl ha cambiado su enfoque durante los últi-

mos años desde el diseño hacia la construcción de Comu-
nicaciones de Marketing Integradas, buscando integrar el
diseño al marketing y el punto de vista del usuario.
Algunas ofertas de empleo actuales (01/15): Diseñador

de interfaces.
Después de hacer una revisión, tanto

de las habilidades valoradas, como de los requisitos que
estas agencias solicitan a sus candidatos, se puede con-
cluir con respecto al modelo propuesto:
- 10/10 de las agencias valoran aspectos contemplados

por el macromodelo propuesto.
- 6/10 de las agencias valoran un sólido currículum de

conocimientos teóricos sobre los aspectos prácticos.
- 10/10 agencias contemplan trabajo en equipo y multi-

disciplinar.
272 | Resultados
- 8/10 agencias le dan a la creatividad e innovación altas

calificaciones.
- 7/10 agencias mencionan el diseño gráfico como fun-

damental.
Estas conclusiones apoyan la correspondencia del modelo

presentado con las intenciones del mercado profesional
de diseño gráfico hipermedia.
Habilidades valoradas
Fig. 5.9 Habilidades va- 10,0
loradas por las agencias
revisadas en el mes de
7,5
septiembre del 2013
5,0
2,5
0
Diseño Multimedios Hipermedia Marketing Estrategia Creatividad Técnicas
Fig. 5.10 Relación de las

ofertas laborales en las
agencias revisadas en
el mes de septiembre
del 2013
5.4. ANÁLISIS DE CAMPO
La revisión de las correspondencias

del modelo propuesto frente al campo profesional pueden
ser medidas adicionalmente con el conjunto de opciones
laborales ofertadas en las denominaciones geográficas re-
levantes para el estudio; España y México. También se
añade la localización del Reino Unido como una referen-
cia de especial relevancia, por la relación que tiene con el
presente estudio y por la importancia que conlleva para el
mercado profesional del diseño hipermedia en la actuali-
dad.
Para realizar una radiografía del campo laboral en refe-

rencia al diseño gráfico y su vertiente hipermedia, se han
realizado búsquedas en tres sedes online de empleo de
importancia para el sector: Adecco, Monster y LinkedIn,
en el caso de México se ha utilizado como referencia Bú-
meran en vez de Monster debido a las diferencias en la
presencia local.
Fig. 4.11 Ofertas laborales en España, datos de

bolsas de trabajo online, relacionadas con diseño,
diseño web y diseño en multimedios, analizadas
durante el mes de septiembre del 2013
274 | Resultados
Fig. 4.12 Ofertas laborales en México, datos

de bolsas de trabajo online, relacionadas
con diseño gráfico, diseño web y diseño en
multimedios, revisadas durante el mes de
septiembre del 2013
Fig. 4.13 Ofertas laborales en el Reino Unido,

datos de bolsas de trabajo online, relacio-
nadas con diseño gráfico, diseño interactivo
y diseño web, revisadas durante el mes de
septiembre del 2013
Las opciones laborales se han buscado con conceptos cla-

ve relativos al diseño gráfico y al diseño gráfico hiper-
media, los resultados quedan expresados en las gráficas
correspondientes desde las figuras 5.9 hasta la 5.13.
Los datos del análisis del mercado laboral orientan sobre

lo que sucede en el campo profesional del diseño gráfi-
co en el mercado actual; aún cuando existe una demanda
constante de diseño gráfico tradicional, en un gran por-
centaje de las solicitudes relativas a este rubro se solicitan
conocimientos o experiencia en multimedios o hiperme-
dios. Al realizarse la búsqueda bajo los conceptos de di-
seño unidos a los componentes web y multimedios los
resultados se diversifican y añaden ofertas laborales que
consolidan las posibilidades de empleo para el diseñador;
y en el caso del Reino Unido se pueden realizar búsque-
das todavía más específicas hacia las diferentes vertien-
tes del diseño hipermedia, como en el caso de las rami-
ficaciones específicas en diseño gráfico interactivo (rich
media, interactive design, mutimedia production, interface
design...), estas combinatorias arrojan un alto porcentaje
de resultados, con ofertas muy aterrizadas y específicas al
ámbito digital relacionado con diversas áreas del diseño.
Durante la revisión de las ofertas laborales se han com-

probado las habilidades y aptitudes requeridas por los
empleadores y de entre las palabras clave además de los
conceptos relativos a la búsqueda se han encontrado co-
rrespondencias con los conceptos propuestos por el mode-
lo: medios audiovisuales, gestión de proyectos, animación,
modelado 3D, manejo tipográfico, controles editoriales,
retoque fotográfico, redacción, creatividad, programación,
video, multimedios, comunicación, medios digitales, in-
teracción, experiencia de usuario, conceptualización, ges-
tión de proyectos, trabajo en equipo.
5.5. DISEÑO GRÁFICO HIPERMEDIA E INVESTIGACIÓN

Con respecto al campo de investi-
gación los esfuerzos que investigadores en diseño como
Keiichi Sato (2001), Charles Owen (2004) o Montero
276 | Resultados
Hassan (2004, 2005) realizan en el traslado del entorno

hipermedia hacia la a teoría básica del diseño son im-
portantes puntos de partida que a menudo retoman di-
ferentes centros de estudio en diseño para potenciar sus
investigaciones e iniciar trayectos en el camino de la fun-
damentación hipermedia. Sin embargo la evolución tec-
nológica de los hipermedios provoca un conjunto vasto
de información sobre los aspectos técnicos y las herra-
mientas de software, que tienen todavía poco contrapeso
con respecto al análisis teórico y fundamental de estas
mismas herramientas.
El propio terreno hipermedia ha evolucionado en sí mis-

mo con respecto a la documentación referente al campo
de investigación, diferentes bases de datos se han trans-
formado en valiosos recursos bibliográficos y reúnen ade-
más de publicaciones impresas y sus contrapartes digitales
todo tipo de documentación multimedia; videoconferen-
cias, artículos, podcasts e investigaciones online, pese a ello
el conjunto de información específica sobre aspectos teó-
ricos y fundamentales todavía ocupa un porcentaje bajo,
como lo refleja el análisis las figuras desde la 5.14 y hasta
la figura 5.19.
Para realizar una revisión de la presencia de temas teó-

ricos fundamentales en torno al diseño gráfico hiperme-
dia se han seleccionado un conjunto de bases de datos
académicas en diferentes ámbitos representativos para
el terreno del diseño: Arts & Humanities Citation In-
dex, ISOC (Ciencias Sociales y Humanidades), Web of
Science, Ebrary, Mendeley, Communication and Mass
Media, Google Scholar y iTunesU.
En estas bases de datos se han realizado búsquedas en

primera instancia sobre temas relacionados con el diseño
gráfico en general; en segundo lugar se ha acotado la bús-
queda añadiendo diferentes conceptos relacionados con
el entorno hipermedia: el propio concepto de hiperme-
dios, multimedios, interactividad y digital, que vincula-
dos al diseño gráfico arrojan resultados susceptibles de
ser revisados y analizados para identificar un panorama
general sobre el estado actual de las investigaciones en
estos rubros. Buscando obtener unos resultados globa-
Fig. 5.14 Búsquedas realizadas con

ProQuest en las bases de datos de
Arts & Humanities Citation Index,
ISOC (Ciencias Sociales y Humani-
dades), Web of Science, revisadas
en el mes de diciembre del 2013
Fig. 5.15 Búsquedas realizadas

con ProQuest en la base de datos
de Ebrary, revisadas en el mes de
diciembre del 2013
278 | Resultados
les, vinculados también con los modelos referenciales, se

han realizado las búsquedas con los términos en inglés,
pues una gran parte de la documentación publicada en el
terreno de la investigación hipermedia se realiza en esta
lengua.
Los resultados obtenidos permiten verificar algunos de

los planteamientos realizados por las hipótesis iniciales
del proyecto:
a. Desfase entre la información de la teoría funda-

mental del diseño gráfico y su correspondencia en
el entorno hipermedia. Aunque la tendencia puede
atribuirse a la reciente incursión de los multimedios
interactivos en el diseño gráfico, al revisar los resulta-
dos es muy marcada la diferencia entre los materiales
que ofrecen como resultado las diferentes bases de
datos al iniciar la búsqueda con el concepto de di-
seño gráfico y posteriormente acotar el término con
los conceptos relacionados al entorno hipermedia. Si
se realiza la búsqueda sumando palabras clave como
“fundamentos” o “teoría˝ la diferencia es todavía más
marcada.
b. Predominio de información técnica. Los resultados

que se obtienen de las búsquedas relacionadas con el
entorno hipermedia llevan un mayor porcentaje (en-
tre un 75 y 85% de los resultados contemplados) de
información técnica contra la información teórica/
fundamental (25-15%) publicada.
c. Información integral y multidisciplinar. Al revisar

los resultados más relevantes relacionados con “Di-
seño Gráfico Hipermedia” se identifican resultados
que empiezan a componer una visión integral, incor-
porando aspectos teóricos a las revisiones técnicas
y tecnológicas de las investigaciones publicadas. En
Fig. 5.16 Búsquedas realizadas

en la base de datos de Men-
deley, revisadas en el mes de
diciembre del 2013
Fig. 5.17 Búsquedas realizadas en

la base de datos de Google Scholar,
revisadas en el mes de diciembre
del 2013
280 | Resultados
diversas ocasiones las investigaciones son realizadas

por grupos multidisciplinares e incorporan la riqueza
de este tipo de análisis a las publicaciones realizadas.
d. Incorporación de información hipermedia en la do-

cumentación. No deja de ser un dato curioso el hecho
de que la propia información hipermedia ha tomado
tiempo en incorporarse a la documentación ofrecida
por las bases de datos más tradicionales y es en bases
Fig. 5.18 Búsquedas realiza-

das en la base de datos de
Communication and Mass
Media, revisadas en el mes
de diciembre del 2013
de datos más recientes en donde se potencian las po-

sibilidades que el propio entorno hipermedia ofrece
para mostrar un abanico más amplio en las posibi-
lidades de los resultados obtenidos: documentación
online e interactiva, archivos multimedia (audio o
audio + video), suscripciones, motores de búsqueda
específicos... La propia documentación, su diseño y la
manera en que se accede a ella es un campo muy in-
teresante de estudio para investigaciones posteriores
sobre el diseño gráfico hipermedia.
Fig. 5.19 Búsquedas reali-

zadas en la base de datos
de iTunes U, revisadas en el
mes de diciembre del 2013
282 | Resultados
Discusión
6 Discusión: la evolución de
los fundamentos del diseño
gráfico hipermedia
♦♦ Shape is the foundation of web design. Geometric

forms are used to construct every User Interface element,
and this information enriches user experience.
The web design book (2013)
6. DISCUSIÓN
Los primeros pasos para desarrollar el esque-
ma básico de mi investigación me permitieron acotar
el aterrizaje operativo que había iniciado con proyectos
académicos previos, durante el proceso de documenta-
ción tuve oportunidad de reunir un conjunto de archi-
vos que había estado analizando durante varios años
para mis clases y proyectos de diseño, poco a poco la
labor de profundización y síntesis en la recopilación
de materiales encadenó respuestas para mis inquietu-
des iniciales, relacionadas con la revisión de los ele-
mentos fundamentales del diseño gráfico hipermedia.
Durante las etapas iniciales, conforme recopilaba in-

formación teórica de los elementos fundamentales del
diseño y los revisaba desde la óptica hipermedia despe-
jaba mucho más dudas que respuestas, pero conforme
avanzaba con más elementos y mientras les aterrizaba
284 | Resultados
en ejemplos prácticos se iba aclarando para mí al mismo

tiempo un panorama de desarrollo teórico de gran valor
para mi profesión que me motivaba a volcarme en el pro-
yecto de modelo que especifica finalmente este trabajo.
Durante el desarrollo de mi investigación la evolución del

diseño gráfico ha continuado en su vertiente hipermedia y
conforme he avanzado con el proceso de la investigación,
he buscado retroalimentar siempre los resultados desde
su traslado a la vida profesional y en su aplicación acadé-
mica, retomando los enunciados presentados en la hipó-
tesis y replanteando los caminos que han surgido a raíz de
los diálogos entre el terreno analógico y el ámbito digital.
Un reto importante al que me enfrenté para realizar esta
investigación era el hecho de contraponer el desarrollo
histórico de una profesión con una larga trayectoria de
fundamentación teórica -heredera de un par de siglos de
influencias en técnicas visuales, movimientos artísticos y
escuelas de oficios- con respecto a un medio digital con
apenas un par de décadas de nacimiento; sin embargo,
al conceptualizar el entorno hipermedia como un medio
adicional para la expresión del diseño gráfico la perspec-
tiva se fue encauzando hacia la manera en que las mani-
festaciones previas del diseño habían sido influenciadas
por sus desarrollos técnicos en etapas previas, tal como lo
ejemplifica Miller (2004, p. 20) al hablar sobre la evolu-
ción teórica de la Bauhaus:
La marcha hacia un vocabulario más racional, in-
dustrial de la forma contrarrestó la crítica de que la
escuela había ignorado su mandato de unir el arte
y la industria. A finales de la década de los veinte,
la utilización, por parte de la escuela, de la forma
geométrica abstracta se vinculó cada vez más a la
producción de máquinas y se distanció de la con-
cepción expresionista de una “infancia del arte”.
Este proceso de influencia, integración y evolución ha

sido un denominador común a lo largo de la historia del
diseño; las herramientas y técnicas han influido los men-
sajes visuales desde la prehistoria, teniendo momentos
críticos en los episodios clave de la comunicación huma-
na: en la invención de la escritura y su posterior traslado

a la tipografía formal; los libros ilustrados, la revolución
industrial y el movimiento de Artes y Oficios; los movi-
mientos de arte moderno y la Bauhaus; hasta desembocar
en la era digital y la comunicación global.
Hacer el recorrido inicial en esta investigación por los

diferentes modelos referenciales, agrupados por su rele-
vancia histórica, tecnológica y de vanguardia me ayudó en
primera instancia a tener una radiografía del estado actual
del diseño gráfico, identificándole en las diversas mani-
festaciones hipermedia que el espacio académico actual
le otorga para estudiarle y experimentar con él. Unido a
estas referencias las puntualizaciones de España y México
completaron el cuadro geográfico de influencia para este
trabajo, aportando la forma particular en que la evolución
del diseño se manifiesta en estas locaciones.
Todos estos aspectos integraron un completo panorama

que me sirvió de catalizador para revisar desde la óptica de
las hipótesis iniciales los diálogos que se han mantenido
durante las últimas décadas entre los aspectos teóricos y
técnico-tecnológicos del diseño, diálogos que he utilizado
como referencia para buscar un hilo conductor que agru-
pase esta evolución y que finalmente sintetiza mi propia
propuesta de modelo en la abstracción del macromodelo
(Fig. 4.3) sobre los “Fundamentos del diseño gráfico hi-
permedia”, una propuesta basada en una representación
esquemática que reúne la información de los referentes,
sumando al análisis de los aspectos teóricos esenciales
del diseño (Forma y Espacio) las incorporaciones de este
nuevo medio de expresión (Tiempo, Acciones y Atribu-
tos) para integrar una visión global del proceso que forta-
lece la posición del diseñador para colocarle como motor
creativo en un proceso que más que multidisciplinar se
perfila como interdisciplinar, tal como señala Moreno:
Son tantas las disciplinas que intervienen en el pro-

ceso museográfico actual que la inercia empuja hacia
la multidisciplinariedad en lugar de a la interdisci-
plinariedad y la transdisciplinariedad. El discurso
museográfico es uno y la multidisciplinariedad abo-
ca a que cada disciplina siga sus propias metodolo-
286 | Resultados
gías sin pensar en el resto. Ramírez y Rabelo (2010)

aclaran que la interdisciplinariedad refleja la necesi-
dad de integración y cooperación para solucionar los
cada vez más complejos problemas que se presentan
y que es imposible resolver aisladamente. Este pre-
dominio de la multidisciplinariedad viene inducido
porque las distintas disciplinas que intervienen en
la museología, especialmente las referidas a las TIC,
no suelen involucrarse en el proceso. Esto se debe a
que las disciplinas supuestamente periféricas, como
las TIC, prefieren centrarse en su especialidad sin
preocuparse por el resto o porque los propios mu-
seólogos no les permiten involucrarse en el proyecto
museográfico y, todavía menos, en el museológico.
Este visión de interdisciplinariedad aplicada al modelo

propuesto permite visualizar la integración de conceptos
fundamentales que se involucran las propuestas de diseño
hipermedia actuales y permiten la revisión de elementos
convergentes desde una óptica renovada, que se alimenta
de la riqueza de esta participación múltiple del conjunto
de creadores reunidos en los multimedios interactivos.
Al delimitarse el macromodelo se establecen el conjunto
de aspectos fundamentales que servirán para recorrer el
camino marcado por este diseño sintético de modelo para
ir revisando a lo largo del meso y micromodelos sus sub-
categorías e interrelaciones. Es de hecho en estas dos de-
rivaciones en donde es posible profundizar en los aspectos
individuales que componen la riqueza expresiva de este es-
pacio hipermedia en relación con el diseño gráfico y, tanto
en la herramienta de trabajo profesional del mesomodelo
como en el amplio desarrollo de las diferentes ramifica-
ciones del micromodelo, es posible ir vinculado los aspec-
tos teóricos revisados hacia los ejemplos que presentan los
diversos proyectos de diseño hipermedia que acompañan
la investigación y que orientan hacia el traslado práctico
de los conceptos presentados en la propuesta de modelo.
Esta labor de síntesis hacia la construcción del modelo

ha sido un paso muy importante para mi investigación
y me ha sido de gran utilidad dentro de mi desempe-
ño profesional y académico; tener reunidos el conjunto

de aspectos fundamentales de la teoría del diseño gráfi-
co hipermedia me permitido llevar al aula académica un
conjunto de herramientas muy útiles para trabajar con los
aspectos teóricos involucrados en el traslado del diseño
gráfico hacia los hipermedios; de igual forma me ha ser-
vido como un apoyo al realizar proyectos profesionales
pues me permite emplear una herramienta metodológica
que clarifica y da cauce al proceso de diseño hipermedia,
para mostrar de una forma organizada los diferentes as-
pectos que componen el proceso de diseño hipermedia.
La utilidad del macromodelo presentado se enriquece a

lo largo del proyecto conforme su desarrollo presenta ta-
xonomías, ramificaciones y ejemplos puntuales que sirven
como apoyos para reflexionar y mirar conceptos básicos
que se han trabajado en las manifestaciones tradicionales
del diseño y que ahora cobran diversas dinámicas en los
hipermedios. El aterrizaje de estos modelos y su ejem-
plificación práctica muestran las posibilidades del diseño
aplicado de forma correcta en los hipermedios, Beaird
(2010, p. xvi) lo explica de una forma muy coloquial en
sus “Principios del buen diseño web”:
Los principios básicos del diseño web deberían ser
del conocimiento común, hoy en día todos vivimos y
trabajamos en un internet que ha ido cubriendo feal-
dad con más fealdad desde su concepción. Es tiempo
de romper el círculo y dar un paso grande hacia un
mejor diseño.
El recorrido por las gradaciones del modelo ha sido una

experiencia de recapitulación sobre las diferentes etapas
profesionales que he vivido; desde mis estudios universi-
tarios hasta la experiencia como profesionista y profesor;
desde el inicio de mis estudios universitarios basados en
los aspectos más analógicos del diseño y que, paulatina-
mente, se fueron digitalizando al aplicarse en proyectos
prácticos relacionados con proyectos hipermedia, el pro-
ceso me ha ayudado a centrar ideas y conceptos, a desa-
rrollar las inquietudes que diferentes proyectos profesio-
nales presentaron en el camino, a buscar la información y
documentar con la ayuda de diseñadores e investigadores
288 | Resultados
que han ido avanzando en el camino de la evolución del

diseño los cuestionamientos relacionados con proyectos
de diseño hipermedia que han ido surgiendo a lo largo
del camino.
Durante el análisis de los resultados en los campos acadé-

mico, profesional y de investigación me encontré con in-
formación muy interesante, pues aunque tenía ya algunas
intuiciones derivadas de la revisión de los modelos refe-
rentes, me sorprendió en esta fase de valoración la nece-
sidad que manifiestan estudiantes y profesores de diseño
al hablar de los aspectos teóricos del entorno hipermedia;
existe una inquietud por buscar información y apoyos de
éste tipo que ayuden al profesional del diseño gráfico a
apoyar su fundamentación teórica en las etapas iniciales
de los proyectos; se detecta la necesidad de herramientas
que vayan más allá de lo puramente técnico para lograr
una visión integral del diseño hipermedia y equilibrar la
balanza hacia la conceptualización en contraparte a la
producción.
Un aspecto adicional de los resultados que llamó mi aten-

ción es que a sabiendas de que el entorno hipermedia es
un espacio novel, el hecho de que la menor cantidad de
información sobre este medio se encuentre precisamente
en sí mismo llama a que diseñadores e investigadores par-
ticipemos no solamente en la creación de contenidos, sino
también en la generación de conocimiento para orientar
en la correcta creación de esos contenidos, el futuro de
la fundamentación del diseño en los hipermedios en su
propio espacio es un ámbito que tiene gran potencial y
que demanda la participación de quienes la construyen
cotidianamente.
En otra etapa de gran interés hacia las conclusiones del

proyecto, el hecho de vincular resultados del modelo al
campo profesional me ha permitido medir el pulso que
mantiene actualmente el diseño gráfico con el campo la-
boral; las demandas hacia el diseño basadas en la mani-
pulación y dominio técnico han pasado de ser novedades
a manifestarse en un común denominador de las ofertas
laborales; de hecho se inicia una tendencia a incluir en los
requisitos profesionales aspectos ya no sólo de experien-
cia técnica, sino también de dominio estratégico de las

herramientas y los conocimientos tecnológicos que cada
vez más se dan por sentados y que, en el desarrollo de
proyectos se orientan ahora hacia un proceso más racio-
nal, de análisis e investigación.
Agencias como Ogilvy & Mather (www.ogilvy.es/#/neo/

que_es, mayo 2014) lo expresan claramente en sus filiales
más cercanas a los hipermedios:
Aprovechar creativamente las características de cada

medio y cada tecnología para conseguir optimizar los
resultados. Este es nuestro objetivo. Por eso creamos
las estrategias digitales desde el concepto creativo, y
las optimizamos según el soporte y su público. En
Neo@Ogilvy integramos los datos generados en la
campaña de medios, Social Media, Buscadores, móvil
y la participación de los usuarios, para optimizar la
campaña de forma continua.
La tecnología indudablemente sigue avanzando, pero una

de las conclusiones más importantes que he podido ob-
servar durante mi investigación es el hecho de que los as-
pectos teóricos y fundamentales finalmente le dan anclaje
y posibilidades de evolución a un medio, herramienta o
tecnología naciente. Tal y como en su momento lo vivie-
ron las innovaciones en diseño tipográfico durante el ini-
cio del siglo XX (Tschichold, 1927) o la fotocomposición
durante las décadas de 1960 a 1980, el reto del diseño en
los hipermedios en la actualidad es la madurez que inicia
con la incorporación de teorías, estrategias y conceptos
que van más allá del primer chispazo técnico que ha su-
puesto la globalización de este medio:
Hay una especie de renacimiento ocurriendo ahora

mismo. Estamos viviendo un maravilloso período de
innovación que ha visto más altas y bajas de tenden-
cias en el diseño durante los últimos años que en la
década precedente -desde la influencia del diseño de
la interfaz Metro de Microsoft al resurgimiento de
los elementos vintage-, podemos ver en internet un
conjunto de elementos visuales muy propositivos hoy
en día. (The Web Design Book: 2013, ii)
290 | Conclusiones
Conclusiones
7 Conclusiones de
la investigación
♦♦ Antes de los nuevos medios, el trabajo del diseñador

gráfico consistía en encontrar la mejor forma para la
información fija: el contenido de un libro, un póster, la
maquetación de una revista, etc. Con los nuevos medios,
el diseño se convierte en «metadiseño».
Manovich, The languaje of New Media, 2001
7. CONCLUSIONES
El traslado de la propuesta del mi-

cromodelo, hacia los diferentes ámbitos de aplicación,
permite identificar sus posibilidades prácticas, en donde
se encuentran correspondencias, enfrentamientos y dife-
rencias, pero sobre todo una motivación al diálogo, a la
exploración y al cuestionamiento que provoca, por una
parte, la exposición de un modelo identificable, suscepti-
ble de ser analizado y empleado para buscar la revisión de
conceptos fundamentales, vinculados con su aplicación
práctico-técnica; y por otra parte, la reunión de un amplio
conjunto de conocimientos que aportan los años de de-
sarrollo del diseño gráfico tradicional junto con el pulso
cambiante e innovador de la incursión tecnológica de los
hipermedios.
Aunque todos los campos interactúan entre sí y forman

parte de un todo, para una mejor comprensión por los
actores de cada uno, los resultados obtenidos se han di-
vidido en los campos académico, de investigación y pro-
fesional. Éstos apartados ofrecen una reflexión sobre el
papel del diseñador gráfico en el estado actual de la socie-
292 | Conclusiones
dad, para cuestionar la evolución del diseño a partir de la

intersección con un abanico de posibilidades tecnológicas
y comunicativas en desarrollo continuo, que no pueden
dejar de influir en la manera en que el diseño permea
los mensajes para transmitirlos hacia el dinámico proceso
actual de la comunicación hipermedia, y finalmente para
vincularse al pulso cotidiano del diseño gráfico hiperme-
dia en el campo de aplicación práctica, recomendación
que menciona Jesús del Hoyo Arjona en la edición de
Steven Heller (2006, p. 22) sobre la educación y el diseño:
Hay mucho más interés por el Diseño Gráfico que

por su enseñanza y en buena medida ésta ha queda-
do relegada a un segundo plano dado que la aparente
necesidad de enseñar, de ordenar textos e imágenes
en una superficie o de generar iconos con capacidad
representacional o..., se ha generalizado hasta extre-
mos sorprendentes, tanto que contemplada desde
esta perspectiva no es de extrañar que la tarea do-
cente que forma en aquello que, de hecho ya -todo
el mundo sabe hacer-, sea considerada como prác-
ticamente residual. Apreciación tan errónea como
generalizada que sólo desde la formación estricta y
seria, disciplinar en definitiva, se puede corregir. Por
ello marcar el matiz de lo verdaderamente profesio-
nal es una tarea extra que, por pura coherencia ética
tenemos todos los que nos dedicamos a la docencia.
Es en el interés de esta coherencia entre lo profesional y

académico que las conclusiones de este trabajo promue-
ven el diálogo hacia el desarrollo actual y futuro del dise-
ño gráfico.
A continuación se agrupan las conclusiones en relación a

cada uno de estos campos.
7.1 CAMPO ACADÉMICO

La revisión de los elementos funda-
mentales del diseño gráfico con una perspectiva hiper-
media ha sido desde el inicio de este trabajo un inmenso

aprendizaje, retomar la riqueza teórica que ofrecen los
textos de Bonssiepe (1999, 2008), Munari (1993), Dondis
(1980), Kandisnsky (1978), Chijiiwa (1987), Tschichold
(1995), Wong (2004)... tantos teóricos que han senta-
do las bases de lo que ahora reconocemos como diseño
gráfico y enfrentarlos a las aportaciones de los recientes
análisis de Moreno (2002, 2003), Nielsen (2000), Lup-
ton (2014), Fernández-Coca (1998), Negroponte (1995),
Lewandowsky (2005), Bou (2003); de entre algunos au-
tores clave de lo que el terreno hipermedia representa
para el trabajo cotidiano del diseñador en la actualidad,
generando un dinamismo y una necesidad de revisiones
conceptuales de gran relevancia para la profesión del di-
señador.
La continua evolución en el diseño gráfico permea hacia

los centros de estudio académicos y a lo largo de la últi-
ma década, Universidades que ofrecen grados en diseño
gráfico han modificado y revisado sus planes de estudios
buscando el equilibrio entre una técnica de vertiginosos
cambios y un acompañamiento teórico paulatino de me-
nor escala; intentando aportar a un mercado demandan-
te en exceso profesionistas integrales, interesados por el
análisis, la metodología y la reflexión a la par de la habi-
lidad, la técnica y, puntualizando con respecto al diseño:
la creatividad y la innovación, derivando en numerosas
ocasiones en estudios de diseño específicos (diseño web,
diseño interactivo, diseño multimedia, diseño 3D, anima-
ción y diseño, diseño de Apps) o en estudios de segundo
grado con una perspectiva de aplicación específica (di-
gital, móvil, usabilidad, videojuegos, 3D, efectos visuales,
personajes) que se suman a la diversificación que la in-
cursión del ámbito hipermedia ha detonado en el diseño
gráfico.
Cuando la diversificación de estos estudios se apoya en

sus etapas iniciales en los fundamentos básicos del diseño
promueve el equilibrio de la carga técnico-tecnológica de
los temarios para ofrecer estudios nivelados, que más allá
del conocimiento técnico y el manejo básico de herra-
mientas busca profesionales que identifican necesidades
294 | Conclusiones
de comunicación, que generen creativas propuestas apo-

yados en los fundamentos visuales de la teoría del diseño
y que aporten valor para integrar una visión holística de
los diversos factores que influyen en la generación de los
proyectos hipermedia.
Analizar en el campo académico un proyecto hipermedia

desde la perspectiva del diseño permite aportar toda la
experiencia que el diseño gráfico como filtro optimizador
del proceso de comunicación integra hacia una comuni-
cación multimedia interactiva, ávida de elementos que le
ayuden a desarrollarse al veloz ritmo que la evolución de
los medios digitales marcan.
Estudiar los aspectos fundamentales del diseño gráfico

y mirarlos a través de la óptica hipermedia se traduce en
la aportación de herramientas teóricas, de análisis y me-
todológicas para el diseñador gráfico hipermedia y en un
punto de partida para más y mejores revisiones en este
sentido.
Los resultados que arrojan las investigaciones y ejercicios

académicos realizados para el capítulo quinto del presen-
te estudio muestran una serie de orientaciones sobre la
evolución del diseño en el terreno hipermedia que se re-
lacionan con la propuesta que presenta el micromodelo:
i. Equilibrio
La dualidad de competencias resultante de la evolución

de los estudios de diseño involucra en el presente análisis
el conjunto de conocimientos teóricos y su contraparte
práctica. La búsqueda actual de equilibrio enfrenta una
tendencia previa de excesiva carga técnica en los conte-
nidos de los estudios de grado y segundo ciclo de dise-
ño gráfico/hipermedia, contrarrestando con la revisión
teórica, la fundamentación conceptual y la búsqueda de
técnicas y habilidades estratégicas por parte de las asig-
naturas fundamentales de las diversas áreas de diseño en
las universidades tomadas como referencia.
El mapa de estudios del grado de diseño gráfico en

la Universidad Aalto de Finlandia recomienda revisar
en un primer bloque los fundamentos teóricos
relacionados con el arte, la cultura y los nuevos
medios, para trabajar en un segundo término las me-
todologías y como última parte aterrizar proyectos
prácticos en combinación con otros departamentos
como el Media Lab.
into.aalto.fi/display/enmasterarts/Study+Guides
296 | Conclusiones
ii. Demanda
Los avances tecnológicos en el terreno del diseño gráfico

han provocado el estudio y análisis de las herramientas fi-
nales (hardware, software) que sumados a su dinámica de
evolución y cambio provocan incertidumbre por el des-
fase que puede haber entre los conocimientos adquiridos
en el aula y su correspondencia al poco tiempo durante
su aplicación en el campo profesional; las propuestas de
solución académicas se han inclinado por apoyar preci-
samente las fortalezas que capitalizan las universidades y
centros de estudios reglados; ofrecer formación integral y
educar profesionistas con una visión global de los proce-
sos, que logran identificar las mejores herramientas para
la ejecución de un diseño determinado e independiente-
mente de sus habilidades técnicas puedan ser capaces de
aplicar los conceptos esenciales a un hardware o software
específico debido al grado de madurez de las bases desa-
rrolladas durante el período de estudios. Las herramien-
tas de análisis teórico y metodológico son una demanda
creciente en los estudios de diseño que formalizan su base
de sustentación y buscan enseñar aunando a la práctica
los ejercicios de reflexión y análisis.
iii. Diversificación
La continua interacción entre los diferentes ámbitos de

aplicación práctica del entorno hipermedia provoca di-
ferentes grados de especialización en los estudios de di-
seño que buscan profundizar en las posibilidades de los
multimedios interactivos; el hecho de que este medio
continúe en evolución conlleva el enfrentamiento con
nuevas soluciones y herramientas que el diseñador puede
asumir a partir de sus ciclos básicos de formación, esta
diversificación apoyada por fundamentos teóricos comu-
nes enriquece a su vez los planteamientos prácticos que el
diseñador desarrolla.
7.2 CAMPO INVESTIGADOR

En el campo de investigación, el
ejercicio comparativo que se hace mediante el modelo
propuesto plantea el inicio de un proceso de investigación
encaminado a desarrollar fundamentos para el estableci-
miento teórico del diseño gráfico hipermedia, sus diversas
ramificaciones son caminos a seguir en la evolución de
los estudios del diseño y los ejemplos prácticos revisa-
dos plantean interrogantes que colaboran en el cuestio-
namiento sobre el estado actual del diseño en el entorno
hipermedia. El trabajo presente al igual que el proyecto
de Lupton (2014) explora el concepto de diseño, realiza
un recorrido por sus fases de aplicación académica y re-
flexiona sobre los profundos cambios que la tecnología y
vida social provocan el pensamiento de los comunicado-
res visuales.
El aterrizaje sintético del proyecto, especialmente en el

macromodelo, establece una propuesta didáctica que, para
el campo de investigación es especialmente interesante,
pues incluye el conjunto de elementos que revisa el pre-
sente documento en una versión esquemática, susceptible
de provocar y alimentarse de investigaciones posteriores.
La propuesta del macromodelo incluye el análisis de los

elementos del diseño fundamental, su traducción en el
espacio hipermedia y los resultados de esta integración,
para buscar finalmente el cuestionamiento en la evolu-
ción de la teoría del diseño gráfico mediante:
• La identificación cada uno de los elementos del

diseño gráfico hipermedia agrupándolos en cate-
gorías generales como un ejercicio clarificador, que
ayuda a acotar el conjunto de elementos básicos
para poder iniciar su estudio individualizado.
• La visión estructurada de los componentes funda-

mentales ayuda a comprender con mayor facilidad
el conjunto de elementos con los que el diseñador
trabaja, así como a generar vinculaciones, estable-
ciendo sus interrelaciones y dependencias.
• Esquematizar el proceso de conceptualización y

298 | Conclusiones
representación permite su utilización práctica de

una manera más transparente pues colabora en el
proceso de estructuración agrupando categorías e
identificando la manera en que se relacionan los
componentes del proyecto; ayuda a acotar los pa-
rámetros teóricos a emplear y alimenta el proceso
creativo inicial frente a proyectos prácticos.
• Separar estas categorías y revisarlas más allá de su

aplicación en el diseño gráfico tradicional, en su
manifestación hipermedia, resulta en una puesta en
práctica inmediata de aspectos que normalmente se
traducen como analógicos -i.e. la textura, el color, la
tipografía- y que, al ser trasladados hacia el trabajo
con proyectos hipermedia adquieren renovadas di-
mensiones y aplicaciones.
• Revisar elementos gráfico-hipermedia bajo un

mismo modelo permite identificarlos mediante un
proceso integral, encadenando los aspectos teóricos
a su solución práctica, dotando de significado la se-
lección final de las herramientas a utilizar.
El macromodelo parte de un doble conjunto de conoci-

mientos; los aspectos gráficos y los componentes hiper-
media, de su taxonomía y categorización surge un análisis
hacia las particularidades individuales de cada una de sus
expresiones. Estas expresiones son las manifestaciones
hipermedia que un diseñador ejecuta de los conceptos
teóricos que manipula durante el ejercicio de un proyecto.
Durante el desarrollo de este proceso de investigación

he iniciado una profundización en las subcategorías que
parten de los aspectos más generales y derivan en aplica-
ciones particulares, sin embargo, el entorno hipermedia
continúa su camino de evolución y aunque este trabajo
doctoral ayuda a establecer parámetros básicos de esta-
blecimiento teórico, el camino del diseño hipermedia
continúa transformándose, y especialmente la particula-
ridad de las herramientas y aplicaciones que complemen-
tan el planteamiento del marco teórico seguirán diversi-
ficándose con lo cual queda un camino por recorrer hacia
adelante para el establecimiento de fundamentos por par-
te de los diseñadores en la elaboración de sus proyectos

hipermedia y para futuros proyectos de investigación en
el área teórica del diseño pues, conforme se profundice y
complemente este panorama teórico de los componentes
del diseño gráfico hipermedia, mejores apoyos y herra-
mientas tendremos como diseñadores para la evolución
de nuestra profesión.
7.3 CAMPO PROFESIONAL
Desde el análisis de los resultados re-

visado en el campo académico existe una búsqueda tanto
por alumnos como por las instituciones de enseñanza por
desarrollar los aspectos teóricos del diseño hipermedia
para intentar equilibrarlos con la evolución en el entorno
tecnológico, en el caso del campo profesional esta necesi-
dad suma un conjunto de variables:
• Los países hispanos siguen la tendencia marcada por

los países anglosajones sobre la necesidad de comple-
mentar conocimientos tecnológicos con habilidades
metodológicas, teóricas y estratégicas en su aplicación
práctica.
• Se suma la necesidad demandada por el campo pro-

fesional de llevar a un siguiente nivel la participación
del diseñador en el entorno hipermedia mediante el
uso de herramientas básicas de creatividad, explora-
ción e investigación aplicada.
• La diversificación en las áreas de aplicación del diseño

es una señal de lo que sucede en el campo profesional,
en donde se necesitan graduados especializados pero
con una soltura evidente en el manejo dual de la teoría
y práctica interactiva del diseño para hacer frente al
creciente y diverso campo digital de la comunicación.
Acompañar las conclusiones en el campo académico con

la perspectiva del terreno profesional fué una intención
primordial para el desarrollo de este trabajo, la velocidad
300 | Conclusiones
de generación de conocimientos en el mundo hipermedia

crece exponencialmente, de manera especial en el mundo
profesional debido a la cantidad de convergencias que se
suceden cuando una agencia ejecuta un proyecto hiper-
media, en este sentido la intención no es en ningún mo-
mento, como apunta Fernandez-Coca (1998, p. 142) “in-
formatizar al diseñador gráfico, ni hacer diseñadores a los
informáticos, sino todo lo contrario”, es decir lograr que
con un mayor conocimiento por parte de los profesiona-
les que participan en un proceso de creación en colabo-
ración –como lo es un proyecto hipermedia–, encuentren
nuevas posibilidades e innoven en sus propuestas a partir
del razonamiento y el análisis de los aspectos esenciales
con los que cuentan, para así poder formar verdaderos
equipos interdisciplinares que trabajan sumando lo mejor
de cada uno de los expertos que colaboran.
Adicionalmente la evolución de las herramientas del di-

seño hacia su manifestación hipermedia ha significado
también su democratización, Meggs (2009, p. 507) apun-
ta sobre el dominio en la cresta del diseño gráfico por
parte de un puñado de individuos, mientras que con la
evolución y el desarrollo actual el terreno de juego es más
parejo, junto con ello la ampliación del diseño profesional
se ha producido “no sólo a través de la creación de nuevos
programas informáticos y de internet, sino también como
consecuencia tanto de la expansión como del incremento
de la calidad de la formación en diseño.”
Reunir información sobre el mercado del diseño, las ne-

cesidades prácticas de la profesión y las demandas labora-
les fue fundamental para lograr mantener una perspectiva
realista sobre la posible aplicación del modelo propuesto
hacia sus aspectos profesionales, dos elementos marcan
los lineamientos a seguir en este sentido a lo largo de este
trabajo:
• La conceptualización de un modelo que fuese apli-

cable en el terreno profesional y que, partiendo del
micromodelo de análisis fuera suficientemente com-
pleto y a la vez práctico como para su uso cotidiano,es
uno de los objetivos que plantea desde sus premi-
sas iniciales el presente trabajo; bajo esta premisa el
mesomodelo busca responder a ello y en el aspecto

práctico uno de los momentos fundamentales es el
inicio del proyecto de diseño en donde es necesario
reunir información suficiente como para poder ini-
ciar un trabajo reflexivo sobre los componentes de
un proyecto hipermedia sin que implique una he-
rramienta compleja y de difícil acceso. Para ello se
ha elaborado la aplicación del mesomodelo en una
herramienta de apoyo al desarrollo de proyectos hi-
permedia (Anexo II) “Proyectos Hipermedia”. Esta
herramienta resume los aspectos básicos iniciales de
un proyecto hipermedia, permitiendo identificar ne-
cesidades, acotar soluciones e iniciar procesos creati-
vos de la mano de los componentes fundamentales
estructurados y organizados para su rápida consulta.
• Adicional a la aplicación de este modelo en el cam-

po profesional la evaluación de correspondencias ha-
cia el aterrizaje práctico ayuda a verificar las relacio-
nes que el modelo cumple con respecto el objetivo
planteado de identificar, analizar y relacionar los ele-
mentos básicos del diseño en el entorno hipermedia,
para compaginarles con el campo profesional, este
análisis se efectuó en diversos niveles;
i. Con el análisis de las correspondencias del mode-

lo con respecto a un conjunto de diez despachos
de diseño hipermedia líderes a nivel mundial, con
la finalidad de tener un benchmark que marcase
parámetros suficientes como para generar puntos
de partida e información relevante en el queha-
cer cotidiano del diseño actual, esta comparativa
además de vincular con el conjunto de concep-
tos analizados en los modelos ha arrojado datos
importantes sobre las habilidades valoradas en el
campo profesional, relacionándoles con aspectos
identificados en el modelo; adicionalmente ha
permitido vincular elementos del modelo asocia-
dos con las prioridades en las necesidades labora-
les de empresas locales e internacionales.
ii. El análisis del mercado laboral del diseño se ha

complementado con la revisión de las necesida-
302 | Conclusiones
des que los principales buscadores laborales loca-

les e internacionales identifican en el terreno del
diseño, los resultados apuntan hacia la necesidad
de desarrollo en las diversas ramificaciones de las
aplicaciones hipermedia del diseño y apoyan, de
acuerdo al conjunto de perfiles solicitados, la ne-
cesidad de cubrir estos puestos con profesionistas
que tienen una formación integral más allá de es-
tudios meramente técnicos.
iii. Estos análisis se complementan con los resul-

tados del campo académico, pues profesores de
diseño gráfico que desarrollan proyectos hiper-
media cotidianamente han participado en las
orientaciones que arrojan los resultados de las
encuestas, aportando de esta manera su perspec-
tiva académica y profesional, que se suma a la
perspectiva de los alumnos, especialmente en la
necesidad de integrar herramientas teóricas que
apoyen la revisión práctica que se hace en el aula
de los proyectos de diseño hipermedia.
Los resultados que generan estos análisis sobre los dife-

rentes aspectos de investigación, académicos y profesio-
nales corresponden con el conjunto de aspectos funda-
mentales reunidos por el modelo presentado y apuntan
hacia una misma dirección; el desarrollo del entorno hi-
permedia ha pasado por una fase inicial importante, en
donde se ha identificado como una herramienta de valor
y de uso cotidiano para el diseño gráfico; esta fase ini-
cial ha provocado una carga tecnológica importante en
los estudios y aplicaciones de los procesos de diseño que,
una vez superada y experimentada como una fase de de-
tonación, necesita –además de la reflexión y el análisis–
retomar el camino para continuar su evolución sin perder
de vista los aspectos teóricos fundamentales del diseño,
estamos quizá vislumbrando la posibilidad de que la pro-
fesión del diseñador evolucione a un siguiente nivel, tal
como apunta Meggs (2009, p. 531):
Responsabilizándonos de adaptar la nueva tec-

nología y de expresar el espíritu de nuestra época
mediante la invención de nuevas formas y nue-
vos modos de expresar ideas. El cartel y el libro

fueron herramientas de comunicación vitales de
la revolución industrial, seguirán siendo formas
de arte en la nueva era de la tecnología electró-
nica y los diseñadores gráficos ayudarán a definir
y ampliar cada nueva generación de medios de
comunicación electrónicos.
304 | Aplicaciones
Aplicaciones
8 Aplicaciones de
la investigación
♦♦ Designs can only be simplified to a certain point,

beyond that point the complexity can only be shifted.
Tesler’s Law of The Conservation of Complexity

(Saffer, The Laws of Interaction Design, 1980)
8. APLICACIONES TEÓRICO-PRÁCTICAS
Generar herramientas útiles para el

diseñador que trabaja cotidianamente en el entorno hi-
permedia, fue uno de los objetivos que me llevó a realizar
la tesis doctoral; durante la preparación de mis clases en
la Universidad La Salle en México a menudo me encon-
traba con huecos en las áreas teóricas; buscar documenta-
ción, bibliografía y materiales que relacionasen el diseño
gráfico con los hipermedios era una labor complicada de-
bido a la escasez de materiales. En esta búsqueda inicié la
incorporación de elementos hipermedia que apuntaban
hacia el diseño analizados desde perspectivas de estudios
en áreas similares, aplicando la interdisciplinaridad me
encontré con autores como Isidro Moreno o María Acaso
que cuestionan y generan información teórica resultante
del impacto de los multimedios interactivos con áreas de
desarrollo colindantes como la comunicación y el arte.
Con el paso del tiempo diversos autores se fueron su-

mando a la lista, de todos estos campos e influencias he
buscado trasladar a mi profesión y a mi experiencia un
conjunto de herramientas que me ayuden a analizar esta
relación entre el diseño y su aplicación interactiva, el mo-
306 | Aplicaciones
delo propuesto en esta tesis me ha acompañado durante

mis clases, mis proyectos y mis investigaciones, aplicar los
conocimientos que he acumulado durante el desarrollo de
este proyecto ha sido una constante cotidiana y es por ello
que para la aplicación del modelo he buscado vincularla
con estas tres áreas; la aplicación académica, junto con sus
correspondientes aplicaciones hacia la investigación y el
carácter práctico profesional de los proyectos de diseño
gráfico hipermedia.
8.1 MODELO DE APLICACIÓN ACADÉMICA
Una de las intenciones del modelo

propuesto es evolucionar hacia su aplicación práctica en
la academia universitaria de manera que su análisis con-
ceptual pueda ser empleado en el desarrollo de estudios
vinculados hacia la convergencia del diseño gráfico con el
terreno hipermedia, para ello las diferentes versiones del
modelo son referentes prácticos, que acotan el conjunto
de conceptos básicos para permitir un punto de partida
en procesos proyectuales y de análisis.
En la búsqueda de orientaciones académicas, el mesomo-
delo es una herramienta especialmente útil, pues resume
los elementos básicos del diseño gráfico hipermedia en
los siguientes aspectos:
Componentes Básicos 5
Categorías 32
Derivaciones 116
Una versión sintética del mesomodelo (Tabla 8.1) se in-

cluye en esta sección, como una herramienta de consulta
práctica, pues a la vez que permite visualizar en una sola
página el conjunto de elementos revisados en este trabajo
de investigación, permite también realizar rápidas refe-
Compo- Categorías Derivaciones Compo- Categorías Derivaciones

nente nente
1. Evolución formal Realista, Figurativo, Abs- 1. Estructuras Lineales, Contrapun-

tracto to, Ruptura temporal,
Fresco, Coral
TIEMPO
2. Grado de abstrac- Representacional, Abstrac-
ción to, Simbólico 2. Transposición Objetiva, Subjetiva,
3. Variaciones prima- Redondo, Angular, Dentado, Abierta
FORMA
rias Difuso, Concreto

de la forma 3. Posibilidades Multicronicidad,
hipermedia Reversibilidad, Velo-
4. Estilos expresivos Definición de pares opues- cidad incremental
de la forma tos
5. Estilos expresivos Formas Primitivas, Clásicas, 1. Animación Vídeo, Por cuadro,
artísticos Embellecidas, Expresionis- Por trazados, Por
tas, Abstractas programación
ACCIONES
6. Texturas Táctiles, Ópticas 2. Interacción Gestión (autoges-
7. Tonalidades de color Valores de clave cromática tionadas, de gestión
según el modelo HSB del externa, mixtas)
0 al 359 Nivel interactivo
8. Saturaciones de Valores del 0 al 100% (pasivo, participati-
color vo, transformativo,
creativo)
9. Luminosidad Valores del 0 al 100%
3. Estructuras Lineal o directa (con
10. Armonías de color Monocromática, Comple- interactivas intrainteractividad,
mentaria, Análoga, Triaxial, con metaestructuras
Complementaria-Análoga, interactivas o subsi-
Doble complementaria, diarias, iterativas)
Complementaria tetraxial
No lineales o indirec-
11. Esquema de color Cálidos, Fríos, Suaves, tas (dendrítico circu-
Obscuros, Vívidos, Apaga- lares, polidendríticas,
dos, Impactantes, Tranquili- abiertas, semiabiertas
zadores, Excitantes, Natura- y convergentes)
les, Juveniles, Femeninos,
Sorpresivos 4. Vinculación Baja, Media, Alta
12. Intencionalidad Aspectos significativos,
cromática Teoría psicológica, Aspectos
sociales 5. Contexto Aspectos sistemáti-
cos, Coherencia
13. Psicología del color Aspectos significativos,
Teoría psicológica, Aspectos 6. Transforma- Instantánea, Secuen-
sociales ción cial, Aleatoria, Partici-
14. Tipografía Familia, Cuerpo, Espaciado, pativa, Independiente
Legibilidad, Corresponden-
cia, Organización 1. Información Secuencial, Hipertex-
1. Disposición Aspectos significativos, tual, Jerárquica
Teoría psicológica, Aspectos
ATRIBUTOS
sociales
2. Metainforma- Autoreferencial,
2. Posición Centrado, Arriba, Abajo, ción Multireferencial, De
ESPACIO
Izquierda, Derecha referencia externa,

3. Relaciones Pequeño, Mediano, Grande, Metadatos formales,
elementos-formato Sobrepasado Metadatos descrip-
tivos
4. Interrelaciones de la Separación, Tensión, Tran-
forma quilidad, Fusión, Equilibrio, 3. Programación De Marcación,
Flotación, Opresión Scripts, Lenguaje de
programación
5. Sistemas de compo- Simétricos, Modulares,
sición Irregulares
6. Aspectos significa- Herramientas de organiza-
Tabla 8.1 Versión sintética del Mesomodelo:
tivos ción, Retórica visual
de la composición Aplicación didáctica académica
308 | Aplicaciones
rencias al desarrollar aplicaciones académicas o proyectos

de diseño gráfico hipermedia para animar, como opina
Lewandowsky (2005, p. 7) a estudiantes y diseñadores
para enfrentarse a los fenómenos visuales con intensidad
y a disfrutar de sus propios experimentos que son una
parte vital del aprendizaje.
El micromodelo toma este conjunto de variables y las

revisa a profundidad, utilizando ejemplos prácticos para
realizar de una manera didáctica traducciones hacia el en-
torno hipermedia, vinculando con proyectos o ejercicios
que llevan a la praxis los fundamentos analizados en cada
sección; este conjunto de ejemplos son también un punto
de partida hacia la identificación y traducción de los com-
ponentes básicos del diseño gráfico hipermedia e inician
una importante referencia en aplicaciones prácticas de los
conceptos teóricos; el conjunto de proyectos y ejemplos
revisados se puede consultar de manera referencial en or-
den de aparición en la sección de Fuentes bajo el índice
de “Referencias de diseño en proyectos hipermedia”.
El conjunto de referencias prácticas revisados desde la

óptica del mesomodelo constituyen el eje de desarrollo
del capítulo tres, donde la revisión puntual de los elemen-
tos del micromodelo se apoyan en sus referencias profe-
sionales, el análisis de este capítulo es un punto de partida
para continuar posteriores análisis académicos, utilizan-
do el mesomodelo como referencia para trasladar hacia
ejemplos prácticos el análisis anterior.
De manera similar a como se desglosa durante la pre-

sentación del micromodelo, esta propuesta en donde la
metodología consiste en la identificación, revisión y pro-
fundización conceptual, apoyándose en ejemplos prácti-
cos es la aportación de este estudio hacia el desarrollo
académico dedicado al análisis hipermedia de proyectos
de diseño gráfico.
Fig. 8.1 Nube de

información: Conceptos
modelos propuestos
310 | Aplicaciones
8.2 APLICACIONES PRÁCTICAS HACIA LA INVESTIGACIÓN
Reunir la información sintética en

la propuesta del macromodelo, para traducirla en apli-
caciones prácticas en el mesomodelo profesional, y des-
componer cada una de sus partes en el micromodelo de
análisis significa también para el campo de investigación
del diseño gráfico hipermedia la reunión de un amplio
conjunto de conceptos fundamentales que han sido de
gran utilidad para la orientación en esta investigación, y
que pueden apoyar proyectos posteriores de esta índole.
El capítulo quinto, que revisa los resultados de la investi-

gación, aporta un conjunto de herramientas que vinculan
la información práctica del entorno hipermedia en rela-
ción con el diseño gráfico y que son susceptibles de apli-
carse a futuros proyectos de investigación sobre el tema:
i. La síntesis conceptual e informativa que proyectan

de forma visual las nubes de información con los ele-
mentos que los modelos propuestos citan, permiten
tener una radiografía visual que identifica en una
sola pieza infográfica los conceptos que tienen mayor
mención y relevancia
ii. Las nubes de información desarrolladas reúnen a

su vez en un solo gráfico el conjunto de conceptos
revisados, mismos que pueden ser utilizados para la
búsqueda de conceptos o para trabajar con ellos en
profundidad en posteriores estudios
iii. La nube de información presentada en esta sección,

la figura 8.1 incorpora también el conjunto de con-
ceptos revisados en la presentación de los modelos
del capítulo cuatro sobre la presentación de los mo-
delos y ofrece una perspectiva jerárquica e identifi-
cativa como herramienta de apoyo para retomar las
palabras clave que es posible emplear, por ejemplo, en
búsquedas realizadas en bases de datos académicas o
en consultas indexadas en revistas y medios hiper-
media especializados en el terreno del diseño gráfico.
iv. El análisis sobre la evolución de tendencias en el

entorno hipermedia (Cap. 4, Fig. 4.1 y 4.2) es un
punto de partida para desarrollar futuras investiga-
ciones que profundicen en la manera en que el di-
seño gráfico y su enseñanza en al aula ha evolucio-
nado en paralelo al desarrollo de las herramientas de
comunicación de la época. Los resultados iniciales
ayudan a verificar comprobaciones con respecto a las
orientaciones planteadas por el objetivo de la presen-
te investigación pero más allá de este establecimien-
to fundamental una investigación en esta área puede
ayudar a clarificar la evolución del diseño vinculada a
una comparativa con sus aplicaciones prácticas.
8.3 APLICACIONES PRÁCTICAS PROFESIONALES
Al igual que el mesomodelo en el

terreno académico cumple una función didáctica, y a la
vez sintética en su aplicación profesional, el modelo como
herramienta puede ser un interesante apoyo de referen-
cia hacia el establecimiento teórico durante la fase inicial
de proyectos de diseño. Una versión del mesomodelo ha
sido transformada en una herramienta para el análisis de
esta información y acompaña el presente documento en
el Anexo II, con la finalidad de presentarlo de manera in-
dependiente como herramienta profesional que posibilita
la aplicación del modelo frente al desarrollo de proyectos
hipermedia en el ámbito profesional. La función de este
formato es recopilar el conjunto de datos esenciales sobre
las necesidades del proyecto a desarrollar; identificando
al tiempo elementos y componentes fundamentales para
reunir información básica que empleará el diseñador
gráfico en la labor de elaborar y desarrollar los primeros
procesos creativos, que -una vez acotados por las deli-
mitantes del modelo- permiten optimizar el proceso de
creación aproximando las necesidades del proyecto a sus
correspondencias básicas en el ámbito teórico del diseño.
Los modelos y formatos presentados en esta investiga-

312 | Aplicaciones
ción son susceptibles de ser retomados por diseñadores

y agencias, para ser adaptados a necesidades específicas
y amoldarse a la manera individual de desarrollar pro-
yectos, su importancia radica en contener los aspectos
fundamentales, reunidos bajo un esquema que presenta
a la vez los elementos tradicionales del diseño junto con
los aspectos que incorpora el entorno hipermedia, para su
análisis teórico previo al desarrollo propio del proyecto,
ofreciendo a su vez, un apoyo para identificar las interrela-
ciones prácticas entre los diferentes componentes básicos
ya que al encontrarse agrupados de forma categorizada
facilitan esta identificación y trabajo con las vinculaciones
que surgen al controlar en paralelo el conjunto global de
aspectos del modelo.
La utilización de este modelo previa al de desarrollo de

proyectos permite sentar unas bases teóricas fundamen-
tales que dan soporte al desarrollo posterior de los ele-
mentos de diseño y genera orientaciones sobre las nece-
sidades particulares del cliente, permitiendo reunir en un
solo documento la información que concentra los aspec-
tos básicos iniciales para iniciar los procesos creativos y su
posterior aterrizaje práctico.
8.4 ORIENTACIONES PRÁCTICAS ADICIONALES
Como se ha mencionado a lo largo

de este estudio, el entorno hipermedia ha significado la
diversificación para un conjunto de áreas relacionadas con
comunicación humana; disciplinas como la arquitectura,
informática, sonido, áreas industriales y de factor humano
se han visto potenciadas por la incursión en este entorno
al igual que el diseño gráfico, algunos autores como Sa-
ffer (Pannafino, 2012, p. 7) reúnen este conjunto de con-
ceptos en el espacio de conocimiento denominado como
Interaction Design, del cual, el diseño gráfico y las áreas
relacionadas con el diseño forman parte esencial y dadas
sus vinculaciones, se alimentan unas con respecto a otras
para evolucionar de forma continua frente a la creciente

influencia que el entorno hipermedia significa para estas
áreas de conocimiento. (Fig. 8.2).
El diseño interactivo como área de aplicación acadé-

mica, práctica y de investigación para el diseño gráfico
contempla el conjunto de posibilidades que el entorno
hipermedia incorpora, por ello las propuestas de modelo
presentadas en el presente estudio llevan estrecha rela-
ción con esta denominación y son susceptibles de aportar
elementos a esta creciente área de aplicación y estudio.
Las diferentes ramificaciones del Interaction Design están
presentes en el análisis revisado con respecto a las opor-
tunidades laborales revisadas en el capítulo cinco, agen-
cias de diseño y bolsas de trabajo demandan diseñado-
res vinculados con las diferentes áreas que componen el
esquema desarrollado por Saffer, conocimientos a su vez
vinculados con el modelo presentado en la investigación.
Fig. 8.2 Diagrama de conjunto sobre

las diversas disciplinas que partici-
pan para conformar el área denomi-
nada como Diseño Interactivo.
Saffer (2011)
314 | Vías Adicionales
Vías adicionales
9 Vías adicionales de
la investigación
♦♦ “I need you to be clever, Bean. I need you to think of

solutions to problems we haven’t seen yet. I want you
to try things that no one has ever tried because they’re
absolutely stupid.”
Orson Scott Card, Ender’s Game
9. HIPÓTESIS PLAUSIBLES
Y OTRAS VÍAS DE INVESTIGACIÓN
Durante el desarrollo del presente trabajo de in-

vestigación han surgido un amplio conjunto de relacio-
nes, intersecciones e interesantes caminos que se abren
para ser retomados en vías hacia el desarrollo del diseño
gráfico hipermedia, sin embargo el establecimiento ini-
cial de objetivos e hipótesis delimitan el objeto del es-
tudio para lograr concretar un trabajo puntual alrededor
de un conjunto específico de elementos, acotados por el
modelo de estudio.
Aquellos aspectos que han llamado más mi atención al
realizar este proyecto les he registrado durante el pro-
ceso para incluirles en esta sección como posibilidades
hipotéticas para futuras investigaciones o vías adiciona-
les de investigación, que plantean cuestionamientos que

no he alcanzando a desarrollar pero que me parecen im-
portantes, la enumeración de estas inquietudes responde
a la intención de reunirlas de forma agrupada buscando
incentivar a diseñadores e investigadores a retomarles en
futuras investigaciones que puedan estar relacionadas con
estas temáticas.
9.1 HIPÓTESIS PLAUSIBLES
i. Es necesario continuar con el análisis relacionado

con las convergencias que surgen a partir de la in-
tersección de los componentes fundamentales del
diseño gráfico tradicional y sus homólogos en el di-
seño hipermedia; el presente trabajo es un primer
paso que relaciona un conjunto de elementos bási-
cos, pero el diseño gráfico posee una variedad mu-
cho más amplia de conceptos que son susceptibles
de revisarse mediante estas técnicas y herramientas,
las aportaciones que se pueden generar enriquece-
rían enormemente los aspectos teóricos de funda-
mentación del diseño gráfico hipermedia.
ii. Una taxonomía en profundidad, que continuase los

modelos planteados por este estudio sobre los com-
ponentes del diseño gráfico hipermedia ayudaría a
una mejor comprensión de sus aspectos teóricos y
apoyaría la ejecución de los proyectos hipermedia
realizados por diseñadores gráficos, la estructura
primaria está desarrollada por el modelo revisado,
sin embargo las ramificaciones continuarán evolu-
cionando y diversificándose con lo cual posteriores
actualizaciones y ajustes serán necesarios..
iii. El continuo estudio de análisis y avances orientados

hacia la teoría del diseño gráfico hipermedia tiene
repercusiones favorables en el campo profesional,
pues otorga al diseñador de herramientas metodo-

lógicas para su práctica cotidiana, el mesomodelo
reúne el conjunto de elementos que en la actualidad
forman parte de la base esencial de un proyecto de
diseño gráfico hipermedia, posteriores desarrollos
harán necesarias revisiones y vinculaciones con el
mercado laboral para revisar las correspondencias
y la necesidad de integrar elementos adicionales al
modelo.
iv. Posee una importante relevancia para el diseño

gráfico generar diálogos entre el cambiante terreno
de las aplicaciones técnicas del diseño y sus funda-
mentos originales, en torno a estos diálogos se erige
la evolución del diseño y sus futuras transforma-
ciones.
v. Los caminos de ida y vuelta entre la aplicación

práctica analógica y digital son un terreno de inves-
tigación importante para el diseño gráfico ya que
conllevan el desarrollo de nuevos medios y técnicas
que posibilitan vías de expresión poco exploradas
todavía tales como el physical computing o las inte-
racciones con la web of things (WoT).
9.2 OTRAS VÍAS DE INVESTIGACIÓN
i. En la introducción del marco teórico del diseño

gráfico hipermedia, se menciona la importancia de
la revisión de los fundamentos del diseño a partir
del estudio de un ejemplo entre la aplicación tradi-
cional de una pieza editorial y la aplicación digital
de un sitio web; ¿Qué aportaciones adicionales po-
drían concluirse a partir de un análisis amplio de
diversas aplicaciones en los terrenos tradicionales
del diseño y sus homólogos digitales?; Comparan-
do por ejemplo un cartel publicitario impreso con

una App publicitaria para dispositivos móviles, o
una tipografía desarrollada para tipos de fundición
en comparativa con respecto a una fuente de pro-
ducción digital.
ii. En mi experiencia de práctica docente, me he en-

contrado con un conjunto de problemáticas recu-
rrentes con respecto a la enseñanza de los funda-
mentos del diseño gráfico hipermedia: en múltiples
ocasiones durante diferentes charlas con docentes
a lo largo de este estudio han surgido inquietudes
relacionadas con la poca vinculación que hacen los
alumnos desde los conceptos aprendidos en los pri-
meros semestres del grado en relación a sus pro-
yectos ejecutados en los últimos ciclos escolares, sin
embargo algunas interrogantes que pueden ayudar
a resolver estas inquietudes necesitan ser llevadas
hacia la propia enseñanza del diseño; ¿Se lleva a
cabo en el aula una retroaliementación que vincu-
le el análisis teórico hipermedia con su aterrizaje
práctico?; ¿Se utilizan herramientas para lograr esta
vinculación?; ¿Se analizan las nuevas posibilidades
resultantes de estas convergencias, cómo se busca
su evolución?; ¿Existen procesos prácticos y/o ex-
perimentales dirigidos a incentivar estas prácticas?.
iii. El modelo propuesto en este trabajo es un primer

paso hacia una herramienta metodológica de utili-
dad para resolver problemáticas de fundamentación
teórica relacionadas con el diseño gráfico hiperme-
dia, sin embargo sería interesante revisar mediante
diferentes aproximaciones el trabajo práctico en los
terrenos profesionales y académicos que puedan re-
tomar este estudio para aplicarlo y a su vez evolu-
cionarlo, pues de posteriores experiencias se puede
alimentar el modelo, con lo cual podría trasladarse
a su vez este avance los diseñadores que le utilicen.
iv. Al hablar de programación hacia el final del capí-

tulo cuatro, se ha mencionado una tendencia en la
evolución del diseño hacia el Physical Computing;
¿Que implicaciones puede traer a corto y mediano
plazo el desarrollo en esta área?; ¿Que consecuen-
cias para el diseño tiene el retorno de lo digital ha-
cia lo analógico?
v. En el capítulo cinco al verificar los resultados de

la investigación sobre diseño gráfico hipermedia,
específicamente en las bases de datos académicas
me he encontrado con un vasto universo de infor-
mación, que vive un momento de transformación y
evolución, la propia documentación reunida en este
medio, su diseño y la manera en que se accede a ella
es un campo muy interesante de estudio, susceptible
de analizarse desde el punto de vista del diseñador y
de las aportaciones que el diseño interactivo puede
ofrecer en este campo hacia el desarrollo propio de
los hipermedios.
vi. Especialmente en el campo de investigación, la

información relacionada con el diseño gráfico hi-
permedia inicia su despegue... son necesarias las
aportaciones de diseñadores comprometidos, inte-
resados en trabajar con el tema, con inquietud por
sentar bases que contribuyan a la generación de
información y documentación de los hipermedios
en las bases de datos, archivos digitales, sistemas
interactivos... es decir en el conjunto de medios que
abarca en sí mismo el entorno hipermedia .
vi. En el capítulo seis, al hablar de resultados en la

investigación se habla también sobre el proceso de
revisión de los aspectos fundamentales del dise-
ño gráfico y cómo el mirarlos a través de la óptica
hipermedia se traduce en la aportación de herra-
mientas teóricas, de análisis y metodológicas para el

diseñador gráfico hipermedia, el presente trabajo es
un punto de partida sobre este campo y busca gene-
rar posteriores estudios que añadan más y mejores
revisiones en este sentido.
vii. El conjunto de elementos que reúne la variable

temporal presenta uno de los mayores retos para
el diseño, las posibilidades interactivas del entorno
hipermedia generan diversos controles, manipula-
ciones y traslados de este aspecto temporal que no
eran posibles de forma previa; seguramente un es-
tudio puntual sobres las relaciones entre el diseño
y la variable temporal, orientadas hacia los hiper-
medios, ayudarían a profundizar en estas relaciones
para explotar las oportunidades que surgen de estas
variables.
viii. Al revisar referencias bibliográficas, y en espe-

cial bases de datos es destacable el hecho de que
los propios hipermedios alimentan en su minoría
a la información analógica que recogen materiales
tradicionales; es enriquecedora la información de
libros, revistas y publicaciones especializadas, pero
la detonación de la información sobre hipemedios
en los propios medios interactivos está aún por lle-
gar, poco a poco los espacios con mayor desarrollo
tales como sitios web, blogs, redes sociales y bases
de datos compiladas se suman al esfuerzo de es-
pacios más interactivos y recientes: bases de datos
multimedia, publicaciones interactivas y espacios
colaborativos marcan el ritmo con el ejemplo pro-
vocando reflexiones y evolución de los hipermedios
desde el medio propio. Es importante e interesante
seguir el crecimiento de esta tendencia para tener
un pulso constante de lo que sucede en los propios
hipermedios sobre los hipermedios.
ix. Otro cuestionamiento que puede surgir a raíz del

anterior apartado, es el paralelismo que puede tener
el momento actual del diseño hipermedia con pe-
ríodos previos del diseño, sería muy enriquecedor
por ejemplo tener información sobre los primeros
manuscritos que divulgaron los secretos sobre la
propia creación de manuscritos; los primeros ma-
nuales de impresión tipográfica... ¿Tendrían como
ahora en los hipermedios una carga mucho mayor
de información técnica que teórica?; ¿Serían difíci-
les de encontrar los documentos equilibrados sobre
la propia creación de documentos analógicos?
x. Durante el presente estudio, se hace mención con-

tinuamente a la evolución del diseño gráfico y las
ramificaciones que presentan en la actualidad los
temarios de diseño, este es un tema de por sí inte-
resante ya que el análisis de las propias evoluciones
que los estudios de diseño conllevan y su relación
con el entorno hipermedia podrían aportar infor-
mación adicional sobre el estatus y el desarrollo a
corto plazo del diseño en la academia, ayudarían
de igual manera a definir prospecciones sobre la
evolución a un mediano plazo y resumirían para el
presente el abanico de posibilidades que se pueden
encontrar para los estudiantes interesados en apli-
car a formaciones en diseño.
xi. Al hablar sobre los modelos, en el capítulo cuatro,

(Tabla 4.1) tenemos una comparativa de la evolu-
ción del conjunto de asignaturas relacionadas con
aspectos teóricos y prácticos y la forma en como
han ido modificándose dentro de sus respectivos
programas desde el origen de la carrera en cada uno
de los centros, correspondiente hacia las etapa final
del Siglo XX y durante el período inicial del siglo
XXI; con la ayuda de esta información podemos
identificar cómo la carga de asignaturas teóricas se
ha ido equilibrando hacia el final del siglo XX para

ser rebasada por los estudios técnico-tecnológicos
en las primeras décadas del siglo XXI; el cuestiona-
miento de este proceso puede ofrecer orientaciones
adicionales a la evolución del diseño en el entorno
hipermedia.
324 | Referencias
Referencias
10 Referencias de
la investigación
Las referencias de este trabajo se

encuentran agrupadas en dos bloques; el primero cita las
referencias bibliográficas generales, empleadas a lo largo
de todo el proyecto y reúne bibliografías impresas, publi-
caciones digitales, sitios web consultados, enciclopedias,
wikis y documentación digital offline, así como bases de
datos consultadas, Congresos, Seminarios y Conferen-
cias que han sido importantes para el estudio.
En segundo lugar se encuentra el bloque de referencias

de diseño que integra un listado de los ejemplos utili-
zados a lo largo del escrito, se encuentran referidos en
orden de aparición y llevan el número de página corres-
pondiente a la imagen referencial utilizada en este do-
cumento.
10.1 REFERENCIAS BIBLIOGRÁFICAS
Aalto University, Programas y guías de estudio (http://

www.aalto.fi/en/) (05/02/2014)
Adobe Creative Team (2012), Adobe Creative Suite 6 De-

sign & Web Premium Classroom in a Book, USA, Adobe
Press
326 | Referencias
Aitchison-Lewis (2003), New Media Language. USA,

Routledge
Ambrose-Harris (2005), Color. España, Parramón
ANECA (2004), Libro Blanco. Títulos de grado en Bellas

Artes / Diseño / Restauración. España, Agencia Nacional
de Evaluación de la Calidad y Acreditación
ArTecnología (2013), Conocimiento Aumentado y Accesibi-

lidad, II Seminario Internacional. UCM, Madrid
Arts and Projects (2007), Magazine. <Interactive Design>,

Future Publishing, USA, No. 93
Ascher, Steven (2008), The Filmmaker’s Handbook: A Com-

prehensive Guide for the Digital Age. New York, Plume
Austin, Tricia (2008), Diseño de nuevos medios de comuni-

cación. Barcelona, Blume
Awwwards Team (2013), www.awwwards.com/creative-

ui-design-examples-for-great-ux.html (19-08-2013)
Baca, Murtha (2008), Introduction to Metadata. Los An-

geles, Getty Research Institute
Baggerman, Lisa (2002), Design for interaction. USA,

Rockport Publishers
Bardzell, Shaowen; Jeffrey Bardzell, (2004), Studio Mx

2004. España, Anaya Multimedia
Bateson, Birdwhistell, Goffman, Hall, Jackson, Scheflen,

Sigman y Watzlawick (1982); La nueva comunicación. Es-
paña, Kairós
Basel School of Design (2013), Guías de estudio (http://

www.thebaselschoolofdesign.ch) (05/02/2014)
Bauhaus Archiv, www.bauhaus.de/bauhausarchiv (19-

08-2013)
Beaird, Jason (2010), The Principles of Beautiful Web De-

sign. USA, Sitepoint
Beer, Gunter (2006, 2007, 2010), Web Index 6, 7 y 9, Ám-

sterdam, The Peppin Press
Berners-Lee, Tim (2009), Tejiendo la red: El inventor del

World Wide Web nos descubre su origen. España, Siglo XXI
Bermejo, Jesús (2005), Narrativa audiovisual. España, Pi-

rámide
Bermejo, Sergio (1980), Código, forma, color. España,

Oriens
Blender Foundation, www.blender.org, User Manual &

Tutorials. (19-08-2013)
328 | Referencias
Boesiger, W. / Girsberger, H. (1971), Le Corbusier 1910-

65. Barcelona, Gustavo Gili
Bonsiepe, Gui (1999), Del Objeto a la Interfase. Mutacio-

nes del Diseño. España, Ed. Infinito
Bonsiepe, Gui (2008), Historia del diseño en América Lati-

na. España, Blücher
Bou, Guillem (2003), El Guión Multimedia. España.

Anaya Multimedia
Cáceres, Dolores (2003), Introducción a la Comunicación

Interpersonal. España, Síntesis
Cásares, Javier (2008), Guía de Referencia SEO, (http://

www.javiercasares.com), (19-08-2013)
Chijiiwa, Hideaki (1987), Color Harmony. USA, Rock-

port
Chun, Keenan (2006), New Media, Old Media. USA,

Rotledge
Chuvieco, José (2002), Realización Multimedia. España,

Thompson Paraninfo
CISCO, The internet of things (www.cisco.com/web/

about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf )
(19-08-2013)
Colorado, Arturo (1997), Hipercultura visual, Madrid.

Editorial Complutense
Computer Arts & Projects (2007), No. 93 January. Inte-

ractive Design (p. 12) UK, Future Publishing
Computer Arts & Projects (2012), No. 198 March. Thin-

king in 3D (p. 94), UK; Future Publishing
Conran, Terence y Fraser, Max (2004), Los diseñadores ha-

blan sobre el diseño. España, Blume
Coorugh, Calleen (2006), Multimedia para la web. Espa-

ña, Anaya Multimedia
Corsaro, Sandro (2003), Flash Mx Animación. España,

Anaya Multimedia
Costa, Joan (2007), Diseñar para los ojos. Costa, Medellín

Punto Com Editor
Cranny-Francis (2005), Multimedia. California, Sage Pu-

blications
Crowder, David (2010), Creación y diseño web. España,

Anaya Multimedia
330 | Referencias
Dabbs, Alistair (2005), Biblia del diseñador digital. Bar-

ceona, Taschen
Dabner, David (2004), Graphic Design School. New Jersey,

Thames & Hudson
Daniel Van Der Velden (2006), Research & Destroy A Plea

for Design as Research, (graphicdesigntheory.net/Velden.
html) (19-08-2013)
Dávila, Juan Ramón, Diseño Gráfico Hipermedia (blog)

(http://dghipermedia.blogspot.com.es) (03/03/2014)
De Bono, E. (1970), El pensamiento lateral. Manual de

creatividad. Madrid, Paidós Empresas
Derickson, Diseño infográfico (trends.e-strategyblog.

com/2012/08/21/daily-devices-people-use-for-shop-
ping-infographic/3039) (19-08-2013)
Digital Magazines Awards (2014), (http://digitalmaga-

zineawards.com) (05/02/2014)
Dondis, A. Donis (1980), La sintaxis de la imagen. Espa-

ña, Ed. Gustavo Gili
Duckett, Jon (2011), HTML and CSS: Design and Build

Websites, Indiana, Wiley
Eaton, Eric (2003), Diseño Web, elementos de interfaz.

España, Anaya Multimedia
Eguizábal, Raúl (2006), Diseño & Comunicación Visual.

Segovia, Cuadernos de Publifilia
Elam, Kimberly (2004), Sistemas Reticulares, Barcelona.

G. Gili Diseño
Electronic Arts, Alice Game, www.ea.com/es/alice (19-

08-2013)
Estudio Estratégico (2001), El diseño en España. Espa-

ña, Federación Española de Entidades de Promoción de
Diseño
Fernandez-Coca, Antonio (1998), Producción y diseño

gráfico para la World Wide Web. Barcelona, Paidós
Flusser, V. (2002), Filosofía del diseño. España, Síntesis
Frascara, Jorge (2006), El diseño de comunicación. Buenos

Aires, Ediciones Infinito
Frascara, Jorge (1998), Diseño gráfico y comunicación. Bue-

nos Aires, E. Infinito
Frazer, Tom y Banks, Adam (2005), Color: la guía más

completa. Colonia, Evergreen
332 | Referencias
García, Ma. Luisa y Menéndez, Tania (2006), El diseño

digital. España, Fragua
Garcia, Mario (2002), Pure Design. USA, Miller Media
Glenwright, Jerry (2001), www.layout. España, Gustavo

Gili
González De Cossío, María (2005), El diseño gráfico en

México, Tipográfica No. 27. México, Letras Latinas
Goethe, Johann Wolfgang (2009), Teoría de los colores.

Murcia, Colegio Arquitectos De Murcia
Gordon, Bob (2002). Digital Graphic Design. USA, Tha-

mes & Hudson
Götz, Veruscka (2002). Retículas para internet y otros so-

portes digitales. España. Index books
Hamel, Gary, What Matters Now: How to Win in a World

of Relentless Change, Ferocious Competition, and Unstoppa-
ble Innovation. USA, Jossey-Bass
Harvard Business Publications, Boris Groysberg, Mi-

chael Slind, Big Spaceship: Ready to Go Big? (http://
cb.hbsp.harvard.edu/cb/product/409047-PDF-ENG)
(19-08-2013)
Hassan Montero, Yusef; Martín Fernández, Fran; Núñez

Peña, Ana (enero 2004 y enero 2005), No solo usabilidad
Journal. No 3 y 4 (www.nosolousabilidad.com) (19-08-
2013)
Heller, Steven (2006), Enseñar y aprender diseño gráfico.

Barcelona, Divine Egg
Heller & Meggs (2001), Texts on type. USA, Allworth

Press
Heskett, John (2002), El diseño en la vida cotidiana. Espa-

ña, Gustavo Gili
Hillner, Matthias (2009), Tipografía Virtual. España, Pa-

rramón
Hofmann, Armin (1996), Manual de diseño gráfico. Espa-

ña, Gustavo Gili
Hollis, Richard (1994), El diseño gráfico. Barcelona, Des-

tino
Interulsas (2008), Congreso Internacional, Universidad

La Salle, México, D.F.
Inspire (2013-2014), Adobe Magazine. http://www.ado-

be.com/inspire.html, (04/02/2014)
Institute of Design, Chicago, Programas de estudios,

(https://www.id.iit.edu) (05/02/2014)
334 | Referencias
Julier, Guy (2008), La cultura del diseño. Barcelona, Gus-

tavo Gili Diseño
Jute, André (1996), Retículas, la estructura del diseño gráfi-

co. España, Index Books
Kahn, Paul (2001), Mapping Websites (Digital Media De-

sign). USA, Rotovision
Kandinsky, Vassily (1978), De lo espiritual en el arte. Mé-

xico, Barral
Kristof, Ray (1985), Diseño Interactivo. España, Anaya

Multimedia
Krug Steve (2005), No me hagas pensar; una aproximación

a la usabilidad. España, Pearson
Lammers, Jim; Gooding, Lee (2003), Maya 4.5. España,

Anaya Multimedia
Lewandowsky, Pina y Zeischegg, Francis (2005), Guía

práctica del diseño digital. Barcelona, Parramón
López García, Guillermo (2005), Modelos de comunciación

en internet. Valencia, Tirant Lo Blanch
López Gómez, Miguel (2013), Márketing Online, Creative

Commons, (www.consultoresvalencia.com) (04/02/2014)
López, Xosé (2006), Sistemas de información. Madrid, Pear-

son
Lupton, Ellen y Cole, Jennifer (2014), Graphic Design the

New Basics. New York, Princeton Architectural Press
Mac Format Magazine (2006-2014). 174-236. UK, Tech

Radar
Maeda, John (2006) Las leyes de la simplicidad. España, Ge-

disa editorial
Maeda, John (2006). Laws of simplicity (blog). (http://

lawsofsimplicity.com) (4/02/2014)
Maivald, James (2014), Learning Web Design: A Beginner’s

Guide to HTML, CSS, JavaScript, and Web Graphics. USA;
Adobe Press
Manovich, Lev (2001), The Language of New Media. Cam-

bridge, MIT Press
Marco Creativo, El tiempo en del diseño gráfico, www.mar-

cocreativo.es/blog/el-tiempo-en-el-diseno-grafico-publi-
cidad (21-08-13)
Marcotte, Ethan (2011). Responsive Web Design. Cambrid-

ge, A book apart
336 | Referencias
Martin, Manuel (1982), Teoría de la Comunicación. Ma-

drid, Universidad Complutense de Madrid
Mariño, Ramón (2005), Diseño de páginas web y diseño

gráfico. Vigo, Ideas propias
Mayor Sánchez, Juan (1977), Comunicación y lenguaje.

España, Universidad Menéndez Pelayo
Meggs, Philip (2000), Historia del diseño gráfico. Barcelo-

na, Mc. Graw Hill
Mora, Jorge (2003), Elaboración de modelos de análisis de

las expresiones hipermedia más utilizadas para incentivar la
comunicación multidireccional: aplicación a la creación Smoke
& Mirrors. Madrid, UCM
Moreno, Isidro (2002), De Musas y nuevas tecnologías.

Barcelona, Paidós
Moreno, Isidro (2003), Narrativa audiovisual publicitaria.

Barcelona, Paidós
Moreno, Antonio (2005), Diseño ergonómico de aplicacio-

nes hipermedia. Barcelona, Paidós
Moles, Abraham A. (1991), La imagen; Comunicación

funcional. España, Trillas
Mucchielli, Alex (1998), Psicología de la Comunicación.

Barcelona, Paidós Comunicación
Munari, Bruno (1993), Diseño y comunicación visual. Es-

paña, Gustavo Gili
Nafría, Ismael (2008), Web 2.0: El Usuario, el nuevo rey de

internet. Madrid, Gestión 2000
Navarro Newball, A. A. y Moreno Sánchez, I. (2015).

Redefinición de las TIC en el museo: del discurso invasivo al
inclusivo. Complutum (En prensa).
Negroponte; Nicholas (1995). El mundo digital. Barcelo-

na, Ediciones B
Newton, Isaac (1947), Óptica o tratado de las reflexiones,

refracciones, inflexiones y colores de la luz. Madrid, Emecé
Nielsen, Jakob (2000), Designing web usability. USA,

New Riders Publishing
Niederst Robbins, Jennifer (2012), Learning Web Design:

A Beginner’s Guide to HTML, CSS, JavaScript, and Web
Graphics. CA, O’Rilley
Nielsen, Jakob, Loranger, Hoa (2007), Usabilidad; Priori-

dad en el diseño web. España, Anaya Multimedia
Ortega, Sergio (2004), Multimedia, hipermedia y aprendi-

zaje. Salamanca, Pub.Univ. Pontificia de Salamanca
338 | Referencias
Owen, Charles (2004), What is design? Some questions and

answers. Chicago, Institute of Design
Pannafino, James (2012), Interdisciplinary Interaction De-

sign: A Visual Guide to Basic Theories, Models and Ideas for
Thinking and Designing for Interactive Web Design and Di-
gital Device Experiences. USA, Assiduous Publishing
Pelta, Raquel (2004), Diseñar hoy. Barcelona, Paidós
Pipes, Alan (2005), Production for graphic designers. UK,

Laurence King Publishing
Plasencia, Zoe (2008), Creación y Diseño Web. España,

Anaya Multimedia
Purves D, Augustine GJ, Fitzpatrick D, et al., editors

(2001).Neuroscience, Sunderland, Sinauer Associates
(MA)
Reas, C. y Fry, B. (2001), Processing (http://processing.

org) (05/02/2014)
Royal College of Art, Programas de estudios (http://

www.rca.ac.uk) (05/02/2014)
Royo, Javier (2004), Diseño digital, Barcelona. Paidós
Rubio, Ramón (2006), Diseño gráfico de contenidos para in-

ternet. España, Anaya
Rymaszewski, Michael (2006), Second Life: The official

guide. USA, Wiley
S. De Pietro, Sergio (2010), Diseñar Hoy. Buenos Aires,

Nobuko
Satué, Enric (2001), El diseño gráfico. Barcelona, Paidós

SAICF
Sato, Keiichi (2001) Models of Dissertation Research in

Design. Procedings of the 5th. Asian International Sympo-
sium on Design Science. Seoul, Corea
Sato, Keiichi (2005) DIF Knowledge Management Sys-

tem: Bridging Viewpoints for Interactive System Design.
Procedings of the 11th. Human Computer Interaction Inter-
national. Las Vegas, USA
Sexe, Néstor (1998), Diseño.com. España, Alianza Edito-

rial
Sherry, Phil (2005), Desarrollo Web en Mac OSX. España,

Anaya
Siebert, Lori (1992), Making a good Layout. USA, North

Light Books
Steane, Jamie (2014), The principles and processes of interac-

tive design. UK, Bloomsbury
340 | Referencias
Studio 7.5 (2003), Colores digitales para internet y otros

medios de comunicación. España, Index books
Swann, Alan (1990), Bases del diseño gráfico. Barcelona, G.

Gili
Swann, Alan (2001), Design and layout. USA, North

Light Books
Tecnología para el diseño (2006, 2007), Congreso Uni-

versidad La Salle, México D.F.
Tesler, Larry (2006), Online Interview with Dan Saffer

for the book Designing for interaction, http://www.desig-
ningforinteraction.com/tesler.html (26/02/2014)
Trasladar el diseño gráfico a los hipermedios (2010),

Congreso Internacional, Universidad Del Valle de Méxi-
co (UVM), México D.F.
Twemlow, Alice (2007), ¿Qué es el diseño gráfico?: Manual

de diseño. Barcelona, Gustavo Gili
The Web Design Book (2013, Vol. 4). Imagine Publishing
Tschichold, Jan (1995), The new typography. California,

University of California Press
Veen, Jeffrey (2001), Arte y ciencia del diseño web. España,

Prentice Hall
Vaughan, Tay (2010), Multimedia making it work. USA,

Mc. Graw Hill
Watzlawick, Bavelas Y Jackson (1997), Teoría de la Co-

municación. Barcelona, Herder Textos Universitarios
Web Designer (2007), 132, julio. UK, Future Publishing
Wong, Wucius (2004), Diseño gráfico digital. España, G.

Gili
Zelanzky, Paul (1989), Color. Madrid, H. Blume
Yau, Nathan (2011), Visualize This: The Flowing Data

Guide to Design, Visualization, and Statistics. USA, Wiley
342 | Referencias
10.2 REFERENCIAS DE DISEÑO GRÁFICO HIPERMEDIA
Este conjunto de referencias corres-

ponde a los ejemplos y proyectos que sirven como apoyo
al desarrollo del proyecto, componen un índice visual de
ilustraciones hipermedia y se reúnen como un compendio
práctico para apoyar el trabajo académico con los mode-
los presentados.
Los ejemplos y proyectos están listados por orden de apa-

rición y se separan con doble espacio para hacer más ac-
cesible el hipervínculo funcional (documento pdf ).
Además de su colocación como ejemplo de referencia en

el caso correspondiente han sido revisados como funcio-
nales entre los meses de Octubre de 2013 y Febrero de
2015 para listarse a continuación, el índice incluye la re-
ferencia de la página en la cual ha sido colocado el gráfico.
Alice Madness, Videojuego, (http://www.ea.com/es/ali-

ce) (03/03/2014) p. 53
Processing, Lenguaje de programación, (http://proces-

sing.org) (03/03/2014) p. 55
MyPrice App (http://mypriceapp.com) (20/04/2015)

p. 88
Design Museum. (http://www.designmuseum.org)

(15/10/2013) p. 119
Quo Revista Edición Española. (http://www.quo.es)

(15/10/2013) p.120
iTunesU, (http://www.apple.com/es/education/ipad/
itunes-u/) p. 120
Swatch International. (http://www.swatch.com)

(15/10/2013) p. 128
Mike McLeary, (http://mikeymccleary.com)

(03/03/2014) p. 128
Elusive Tuesday (http://elusivetuesday.com)

(03/03/2014) p. 129
Pizzeria la stazione, (http://www.pizzerialastazione.it)

(03/03/2014) p. 129
Verat (http://www.verat.it) (03/03/2014) p. 129
Zubvector, Studio. (http://www.zubvector.com)

(15/10/2013) p. 129
Culinor Convenience Cuisine. (http://www.culinor.

com) (15/10/2013) p. 130
Pejola Web Design, (http://pejola.com/) (03/03/2014)

p. 131
Inside Piet (http://insidepiet.com) (03/03/2014) p. 131

344 | Referencias
Unowhy (http://www.fr.unowhy.com) (03/03/2014) p.

131
Andreas Saxer (http://www.andreas-saxer.com)

(03/03/2014) p. 131
Joby Sessions (http://www.jobysessions.com)

(03/03/2014) p. 132
Furry Puppet (http://www.furrypuppet.com)

(03/03/2014) p. 133
Ten Sheep (http://tensheep.nl) (03/03/2014) p. 133
Senseidj (http://senseidj.com) (03/03/2014) p. 133
Taxi Studio (http://taxistudio.co.uk) (03/03/2014)

p. 133
Christina Lauer (http://www.christinalauer.net)

(03/03/2014) p. 134
D10 Studio, (http://www.d10studio.com.mx)

(03/03/2014) p. 136
Res Atlantico (http://resatlantico.pt) (03/03/2014) p.

137
Pho Grill (http://www.pho-grill.com) (03/03/2014) p.

137
Multiways E-Strategies (http://www.multiways.com)

(03/03/2014) p. 137
Agustea (http://www.augustea.com) (15/10/2013) p. 138
Wolfe, Liz. (http://www.lizwolfe.com) (15/10/2013) p.

138
Bacardi (http://www.bacardi.com) (15/10/2013) p. 140
Mah Pte. Ltd. (http://www.mah.com.sg) (15/10/2013) p.

141
Clinicario (http://clinicario.pt) (15/10/2013) p. 141
DC Decorators (http://www.dcdecorators.com)
(15/10/2013) p. 141
Angry Birds (http://www.angrybirds.com) (15/10/2013)

p. 142
Bayco (http://bayco.com) (15/10/2013) p. 143
Vector Defenders (http://www.vectordefenders.com/the_

return_of_the_type/index.html) (15/10/2013) p. 143
346 | Referencias
Insieme per i bambini (http://www.insiemeperibambini.

it) (15/10/2013) p. 143
Vine (https://vine.co) (03/03/2014) p. 144
Digraph (http://www.digraph.it) (03/03/2014) p. 146
Adobe Kuler (https://kuler.adobe.com) p. 148
Ego Lactante (http://www.egolactante.com)

(03/03/2014) p. 152
Asics (http://www.asicsamerica.com) (03/03/2014) p.

155
Hot Monkey Design (http://www.hotmonkeydesign.

com) (03/03/2014) p. 157
INOL3 (http://www.inol3.com) (03/03/2014) p. 157
Visser Chocolade (http://www.thechocolatebullet.com)

(03/03/2014) p. 158
Marketing Research Society Malasia (http://mrsm.org.

my) (03/03/2014) p. 159
A Guy Called Billy (http://www.aguycalledbilly.com)

(03/03/2014) p. 160
Not Over Until it is Done (http://notoveruntilitsdone.

com) (03/03/2014) p. 160
Heimat Museum (http://www.villa-oppenheim-berlin.

de) (03/03/2014) p. 163
Tactic Bikes (http://www.tactic-bikes.com)

(03/03/2014) p. 163
CV+ (http://www.cvmas.net) (03/03/2014) p. 165
Webpunt (http://www.webpunt.nl) (03/03/2014) p. 166
Falso Primer Ministro (http://falsoprimerministro.ban-

dcamp.com) (03/03/2014) p. 167
iOS 7 Design (http://www.apple.com/es/ios/design/)

(03/03/2014) p. 168
La Competencia (http://lacompetencia.es) (03/03/2014)

p. 170
Mouse Will Play (http://mousewillplay.co.uk)

(03/03/2014) p. 170
Barbara Wille (http://barbarawille.de) (03/03/2014) p.

170
KLON2 (http://klon2.dk) (03/03/2014) p. 170

348 | Referencias
Web Archive (http://www.archive.org) (03/03/2014) p.

178
Youtube (https://www.youtube.com) (03/03/2014) p.

178
Amazon (http://www.amazon.com) (03/03/2014) p. 181
Nakamura, Yugo. (http://www.yugop.com) (03/03/2014)

p. 181
Minecraft (https://minecraft.net) (03/03/2014) p. 182
C-Clocks, Henk Lamers (http://www.loftmatic.

com/_pages/Research/CClocks/CClocks_01.html)
(03/03/2014) p. 184
Radiohead Dead Air Space. (http://www.radiohead.

com/deadairspace/) (03/03/2014) p. 185
Cálico Electronico. (http://www.calicoelectronico.com)

(03/03/2014) p. 187
Kennedy and Castro (http://www.kennedyandcastro.

com/en/) (03/03/2014) p. 191
SketckUp (http://www.sketchup.com) (03/03/2014) p.

192
Blender Foundation (http://www.blender.org)

(03/03/2014) p. 192
Second Life (http://www.secondlife.com) (03/03/2014)

p. 195
Uncover your world (http://googlemobileads.blogspot.

com.es/2011/08/uncover-your-world-with-admob-rich.
html) (03/03/2014) p. 197
Final Cut Pro (http://www.apple.com/es/finalcutpro/)

(03/03/2014) p. 201
Vimeo (http://vimeo.com) (03/03/2014) p. 202
Blankmaps (http://english.freemap.jp) (03/03/2014) p.

207
Many Eyes, IBM, (http://www-958.ibm.com/software/

analytics/manyeyes/) (03/03/2014) p. 207
Wordle (http://www.wordle.net) (03/03/2014) p. 207
Nicole Saizer (http://nicole.osx.at) (03/03/2014) p. 209
Inside Piet, Version 1 (http://insidepiet.com/v1/)

(03/03/2014) p. 209
Peter Cho (http://www.pcho.net) (03/03/2014) p. 211

350 | Referencias
Diseño de Sitios web comerciales, Mario Hernández

(http://mach12.blogspot.com.es) (03/03/2014) p. 214
Hotel La Barranca (http://www.hotellabarranca.com)

(03/03/2014) p. 215
Copper Hewitt (http://www.cooperhewitt.org)

(03/03/2014) p. 217
Story Toys. (http://storytoys.com) (03/03/2014) p. 218
Aperture, Apple Software (http://www.apple.com/es/

aperture/) (03/03/2014) p. 224
Google (https://www.google.com) (03/03/2014) p. 225
Dreamstime (http://www.dreamstime.com)
(03/03/2014) p. 225
Tips on trips and camps (http://www.tipsontripsand-

camps.com) (03/03/2014) p. 232
Cric Buzz (http://www.cricbuzz.com) (03/03/2014) p.

232
Mattew Plummer Fernandez (http://www.meethue.

com/en-ES) (03/03/2014) p. 239
SAM, Sensor Actor (https://www.kickstarter.com/pro-

jects/1842650056/sam-the-ultimate-internet-connec-
ted-electronics-kit) (03/03/2014) p. 241
Philips Hue (http://www.meethue.com/en-ES)

(03/03/2014) p. 242
The Sugar Lab (http://cubify.com/brands/TheSugar-

Lab/index.aspx) (03/03/2014) p. 242
Dr. Speed (https://www.flickr.com/photos/51276066@

N00) (03/03/2014) p. 243
352 | Anexos
Anexos
11 Anexos a la investigación
Anexo I.
Programas de Asignaturas EMADyC
- Taller de formación básica para el diseño I
- Taller de formación básica para el diseño II
- Hipermedios
- Multimedia
Anexo II.
Mesomodelo.
Formato de Análisis
práctico para proyectos de Diseño
Gráfico Hipermedia
Anexo III.
Cuestionario.
Formato para el 2do. Ciclo de
Conferencias sobre “Tecnologías de
diseño”, ULSA 2008
354 | Anexos

Fundamentos Del Diseño Gráfico, Hipermedia

Cargado por

Copyright:

Formatos disponibles

Fundamentos Del Diseño Gráfico, Hipermedia

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Fundamentos Del Diseño Gráfico, Hipermedia

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD COMPLUTENSE DE MADRID

FACULTAD DE CIENCIAS DE LA INFORMACIÓN

Departamento de Comunicación Audiovisual y Publicidad II

Fundamentos de diseño gráfico hipermedia

Principios teóricos y aportaciones metodológicas

MEMORIA PARA OPTAR AL GRADO DE DOCTOR

Juan Ramón Dávila Urrutia

Isidro Moreno Sánchez

© Juan Ramón Dávila Urrutia, 2015

Juan Ramón Dávila Urrutia

Departamento de Comunicación Audiovisual y Publicidad II

Juan Ramón Dávila Urrutia

Departamento de Comunicación Audiovisual y Publicidad II

A Martha Rocha Presno por todo su apoyo

Al D. Isidro Moreno Sánchez, por su sabiduría

A mis compañeros profesores, de la Universidad La

A mi familia en México y España que lejos y cerca

A mis compañeros diseñadores; profesionistas, alum-

Durante el último par de décadas, la incorpora-

Este escrito es una pausa que invita a reflexionar frente a

El proyecto de investigación presentado a continuación

A la par de estas referencias y debido a su importancia

Al establecer los objetivos, se especifican los diversos ám-

rivaciones educativas y profesionales, abriendo el panora-

Definir la hipótesis central y las hipótesis secundarias es

Este capítulo finaliza con la presentación de la metodolo-

c. Desarrollo de los modelos

Esta sección inicia con una introducción que con-

La segunda parte inicia el análisis sobre los dos

Para finalizar este capítulo, la tercera parte incorpora los

En el centro de este análisis se ubica el aspecto tem-

Mediante la revisión de estos cinco aspectos funda-

De manera inicial el modelo es comparado con las referen-

En una segunda revisión, se vincula el modelo propuesto con

La verificación de resultados termina llevando el modelo

investigación y su proceso han provocado, así como la

El capítulo 7 retoma especialmente el campo académi-

En el capítulo ocho, relacionado con las hipóte-

te interesantes como cuestionamientos para la re-

Debido a que los sitios de internet y referencias hiperme-

En las referencias se incluyen, junto con las fuentes bi-

En el apartado de anexos se incluyen un conjunto de docu-

para el desarrollo de este proyecto, de igual manera he-

Fig. B1. Macromodelo sobre los “Funda-

In the last few decades, the incorporation of hy-

This writing is a dialogue that invites reflection on the

basic aspects of design and its translations to the actual

a. Objectives, hypothesis and methodology.

i. Transition of the graphic design fundamentals to

ii. Multidisciplinary Convergences. The construction of

iii. Application Model. As a result of the analysis

velopment. This model is a didactic tool that facili-

c. Development of the Models.

From the analysis of these five main components the

i. Model References. The model resulting from

ii. Academic comparison. The model presented is re-

iii. Professional comparison. The model is also is

damental aspects grouped in the model and ap-

f. Conclusions, Recommendations and further