Embed Size (px)
DESCRIPTION
Este es el portafolio de Andrés Rozo, diseñador gráfico enfocado a web y tecnologías de la información
Citation preview
ANDRO
迎您
Porta / folio(mi)
Andrés Felipe Rozo GarcíaDiseñador Gráfico
PERFIL
Diseñador Gráfico de la ciudad de Bogotá, D.C (Colombia), con un gusto definido por el diseño y desarrollo de todo
lo enfocado hacia web, que disfruta tanto de lo visual como de lo funcional del diseño. Andrés Rozo comienza su
exploración gráfica dentro de la Universidad Jorge Tadeo Lozano, aprendiendo y relacionando el mundo visual con
las técnicas de comunicación, así junto con el aprendizaje de las nuevas tecnologías, encontró un gusto particular por
las aplicaciones e interfaces.
Influenciado por el desarrollo de las nuevas tecnologías y lenguajes de programación, los une con el diseño para
encontrar en ellos su propio lenguaje, el lenguaje de la comunicaciñon visual y el diseño interactivo, con el fin de
transmitir ideas, conectarse con los pensamientos y manifestarse dentro de sus sentimientos.
Andrés Rozo
(57) 3158456617
Andrés Felipe Rozo García
Soy un trabajador incansable en busca de la integridad que con honestidad y
formación humana en los valores y la responsabilidad, estampo seguridad en mis
actos. Conocimientos en herramientas de ilustración vectorial y retoque de imagen con
software digital. Dominio de inglés y experiencia laboral en desarrollo web y tecnologías
alternativas para empresas.
Experiencia
Educación
Cursos y Habilidades
- Gráficas Colorama
- Compuclub
- Universidad Jorge Tadeo Lozano
- LICEO DE CERVANTES “EL RETIRO“ Educación primaria y secundaria
- UNIVERSIDAD JORGE TADEO LOZANO Diseño Gráfico
- Magister Systems Action Script 3.0
- Universidad Jorge Tadeo Lozano Suite Adobe
Sof
t(w
a)r
e
Cre
ati
/ v
i (d
ad
)
Ima
- g
ina
(ci
,ón
)E
xper
to
Prof
esio
nal
Bue
no
Los trabajos compilados en el presente Portafolio - Andrés Felipe Rozo García corresponden al
proceso académico (y/o laboral) desempeñado durante los años 2009 y 2011 en la Universidad
de Bogotá Jorge Tadeo Lozano (y/o empresas en donde trabajo), por tanto, certifico mi autoría
para cada uno de ellos. Su compilación es estrictamente documental (y/o académica) del proceso
elaborado para cada uno de los proyectos que acá se presentan, por tanto, la documentación
conceptual y gráfica; como también el resultado final obtenido por el autor para los proyectos, se
encuentra protegido por las leyes de propiedad intelectual vigentes en Colombia. Se prohibe el uso,
la copia, reproducción o exhibición del presente material, sin antes contar con una autorización
explícita y por escrito del autor.
Los Proyectos Rio +20 y PCA comparten la autoría y derechos morales con Caroll Aguilar Peña
Todos los derechos reservados ©2011
1234567890
f(x)= x+1/ y
= 3,1416
lab
Este es mi espacio visual, mi entorno gráfico y mi mundo de las ideas, este es el
laboratorio de la creación, el lugar en donde se da origen a la imaginación, la creatividad
y el diseño. Fusion lab es un concepto gráfico que permite la exploración del diseño a
través del experimento, del proceso y la investigación, todos aquellos pasos que permiten
el desarrollo de un proyecto, así mismo es el diseño, un proceso en donde las ideas se
conectan con un sólo propósito, la comunicación.
Este portafolio está basado en todos aquellos elementos que hacen parte de un
laboratorio, que junto con herramientas de la geometría e instrumentos tecnológicos,
forman un ambiente, lleno de fórmulas, de cálculos y procesos que permiten la
originación de un producto o servicio. Por esta razón, adoptar estos elementos gráficos
permiten fusionar al diseño con el espacio visual de un laboratorio.
WEBEstudio 1:
Multimedia, Interfaces, Sitios Web
Los Costos de la Guerraβ= Mul-ti(media)
RIO AppΩ= Interfaz
Learning with Diegoβ= Mul-ti(media)
The Club Car∆= Web site
PCA AppΩ= Interfaz
Fanny García∆= Web site
OrganizerΩ= Interfaz
La Identidad en Colombiaβ= Mul-ti(media)
ILUSTRACIÓNEstudio 3:
Vectores, infantil, realista
TRACio 3:
Cómo sobrevivir a transmilenioθ= Ilustración
La marca del tenisθ= Ilustración
IDENTIDADVISUAL
Estudio 2:
Identificadores, logos, rediseños
30 años PCA = Rediseño
O
RIO +20∑∞ = Identificadores
Interactive Design
Andro Design∑∞ = Identificadores
Fanny García∑∞ = Identificadores
El desarrollo de interfaces para entidades educativas ha permitido que haya un gran avance tanto para alumnos
como profesores en los temas de aprendizaje, es por esto, que el diseñador gráfico reúne todas sus cualidades de
comunicador visual para crear ambientes, interfaces emprendedoras que no sólo tienen una función específica
dentro del ámbito humano sino que han conectado y agrupado con los avances de las tecnologías, un sin número de
posibilidades sobre la información que permite llegar a cualquier lugar en donde se encuentre. Este desarrollo de
interfaz es un pequeño objetivo de las instituciones educativas que pretenden incentivar el aprendizaje mediante el uso
de interfaces, para ello el diseño es de vital importancia, pues es quien vincula toda la parte visual con los contenidos
que allí se presentan.
n(n+1)
n(n+2)
n(n+3)
f(x)= interfaz²
(v1,v2)
Lp3
La segunda guerra mundial fue un hecho que conmovió al mundo, por tanto, es
importante aprender de su historia y su impacto tanto en temas económicos, políticos
y sociales a nivel global, es así como esta interfaz es desarrollada con el fin de educar
en estos temas socioculturales a jóvenes alumnos de instituciones educativas, donde se
busca que la aplicación ayude a mejorar la atención en estos contenidos de los alumnos
quienes deben aprender sobre los hechos que causaron no sólo desolación y muerte, sino
que repercutió en las finanzas de las naciones.
(b∙h)2
K
M
p1
p2
Las aplicaciones web y multimedia han servido durante los últimos 5 años a desarrollar interfaces interactivas que
permiten crear un ambiente más atractivo para los usuarios, donde no sólo se visualiza una información sobre una
pantalla o dispositivo, sino que ahora hay un puente de comunicación más allá de lo visual, el movimiento, el color
y las formas que se pueden realizar en este tipo de contenidos ha generado mejor receptividad del diseño en estas
plataformas, por tanto, la funcionalidad de estas aplicaciones es la de desarrollar nuevas formas de educación que
puede estar principalmente diseñadas para jóvenes estudiantes pero a su vez atraer más público inclusive adultos
mayores que fácilmente la puedan usar.
mov ¼
(a+b+c)
Si bien se está hablando de una época que se remonta a los años 30`s y 40`s, no era conveniente para la aplicación
utilizar una tipografía que estuviera clasificada dentro de una familia serifada, para esta interfaz se utiliza una familia
sans-serif, que por connotaciones y características visuales, es legible y estilizada, manteniendo una imagen limpia y
directa con los usuarios, permitiendo manejar el tema de manera moderna y actual.
3x
11x
1½x
1½x 1x ½x
1x1½x
1x
2x
=x
F/ami/lia= Sans-serif
Loading ...
El uso del color en cualquier aplicación sea impresa o digital es muy importante, pues la utilización de una paleta
cromática adecuada al contexto permite establecer vínculos más directos con los usuarios, es por esta razón, que
el interactivo maneja colores sobrios, jugando con los contrastes, utilizando como color base tonalidades grises y
negros y resaltando los contenidos con colores menos saturados, una mezcla de colores cálidos y fríos, contrastando
jerárquicamente la información para ubicar al lector en un punto fijo donde centre su mirada y manteniendo la
sobriedad que como tal el tema debía ser tratado.
Gama tonal
Gradación de color
rojo insignia de la segunda guerra
Color base
r= 0g= 0b= 0
r= 167g= 31b= 35
ab
La composición en multimedias y aplicaciones se implementa de forma muy limpia y simétrica, se establece un eje
de composición central en donde los elementos gráficos se distribuyen a partir de su modulación, dividiendo por
la mitad el formato y ubicando simétricamente las 2 secciones principales para que de ahí se genere un sistema de
modulaciones en donde se puedan ubicar los contenidos según su nivel de importancia, es una propuesta que busca la
limpieza y no saturar la información con textos.
eje central
La estructura de la aplicación está diseñada para cualquier tipo de usuario, haciendo visible la interacción entre
enlaces de forma accesible y sencilla, en donde se pueda recorrer toda la interfaz al alcance de un click desde cualquier
lugar de la aplicación, por medio de botones y vínculos permite que se haga una estructura neuronal, es decir, un
recorrido en donde se puede acceder a la información estando en cualquier parte de la interfaz.
Tipo neuronal
v,1
v,2
v,3
v,4
La navegación de esta interfaz está diseñada con base en la utilización de elementos gráficos que establezcan
una asociación directa con los usuarios por medio de enlaces que son reconocibles a cualquier tipo de persona, la
utilización de botones es la más común y usada para el desarrollo de interfaces y por medio de vínculos internos se da
acceso a la información, sin necesidad de utilizar dispositivos especiales. La propuesta diseñada maneja un lenguaje
que es común para cualquier usuario.
Menú principal
Botones
Imágenes
Scroll
Vínculos de textos
m”
A nivel jerárquico, la lectura que se hace de la aplicación además de pretender captar la atención del usuario por sus
contenidos, está basada de acuerdo al perfil de usuario, en este caso estudiantes. Por tanto, se da mayor prioridad a
las imágenes, la iconografía y la navegación, para que el usuario pueda interactuar con la interfaz sin necesidad de
ayudas y se entretenga mediante el uso de imágenes interactivas que van desplegando la información de acuerdo al
uso de la aplicación, esto con el fin de atraer al público con una propuestas clara, limpia y sobria en terminologías.
imágenes ≥ contenido²
pe+sos/visua.les
Esta aplicación es una interfaz que muestra los hechos ocurridos durante la segunda
guerra mundial, por tanto, los elementos gráficos que allí se diseñaron están basados en
toda la iconografía que por cultura general remonta hacia esta época, como el uso de la
esvástica o cruz gamada, símbolo de los nazis y que de ahí se derivan ciertos atributos
icónicos y particulares que representan la segunda guerra.
x
z
y
significante
significado
referente
La aplicación se diseñó principalmente para jóvenes estudiantes que requieran de un aprendizaje más didáctico y
como herramienta adicional a los textos complementarios, sin embargo, así mismo al utilizar un lenguaje sencillo y
simple, puede ser utilizado por cualquier persona, funcionalmente hablando, conceptualmente, los contenidos y la
información proporcionada está aplicada en forma de infografía y de estadísticas sencillas, correspondientes a los
datos arrojados sobre el tema, por tanto, al utilizar un lenguaje simple, el perfil de la persona que utiliza la aplicación
es más aplicada hacia jóvenes.
0 15 30
pl
O
El resultado de esta interfaz es una propuesta limpia y
fácil de usar, donde se busca en este caso que el estudiante
aprenda mediante métodos digitales donde se desarrolle
su habilidades a través de formas motivacionales y de
enseñanza autosuficiente, si bien educar requiere de un
profesional, este diseño busca ser una herramienta de
apoyo para las entidades educativas donde haya más
estrategias de aprendizaje.
Multimedia + Interactivo
Tecnologías web
1
2
3
4
5
resultado en pantalla
y
z
x
o
En la actualidad, las aplicaciones móviles han sido de gran
avance para muchos empresarios y personas que requieren
de un servicio que ayude al crecimiento y productividad
en sus tareas diarias, es por esto que dentro del foro de las
Naciones Unidas se crea este proyecto experimental que
consiste en el diseño y desarrollo de una aplicación móvil
para la conferencia de la UNCSD que se llevará cabo en
Rio de Janeiro en el 2012, con propósitos principalmente
ambientales y que fomentan la sostenibilidad en los
productos para evitar el deterioro del planeta. La aplicación
tiene como objetivo principal ser una herramienta de ayuda
que le permitirá a los asistentes al evento enterarse sobre las
charlas, realizar foros externos para realizar aportes en las
preguntas de las conferencias, conocer más sobre temas de
la sostenibilidad en diferentes países, estar enterado de las
diferentes charlas que se harán con invitados especiales y
sus horarios, poder grabar las conferencias para efectos de
conocimiento, entre otros.
tecnologías
móviles
H
T
M
L
La practicidad que permiten las aplicaciones móviles
y nuevas tecnologías están al servicio de la comunidad
en cualquier instante, el proyecto que se diseña para
este evento, permite básicamente organizar el tiempo
y las actividades diarias de la reunión con miembros
especiales de más de 20 países, una oportunidad
para conocer más sobre quienes participan, de qué
problemas se van a hablar, qué información puede estar
compartiéndose en muchas charlas y conocer a fondo
sobre nuevas propuestas para estar enterado de los
acontecimientos de este evento a cualquier hora y lugar.
p
o
s
192.168.0.5
La conferencia de Rio de Janeiro se ha venido desarrollando por varios años, por eso es importante contextualizar al
mundo entero sobre los problemas ambientales que sufre la tierra y los daños que en este momento afectan nuestra
forma de vivir, no sólo se trata de hablar de reciclaje y de protección del medio ambiente, sino de culturizar y aprender
acerca de lo que todas las personas podemos hacer por el bienestar del ecosistema. Se sabe sobre los problemas pero
no se sabe la solución, y muchas de las soluciones que se plantearán en dicho evento, requieren de nuevas ayudas y
educación para conocer a fondo como tratar el problema y dar una solución inmediata. Tal vez en este momento se
pueda disfrutar del sol y sus bondades pero si no se actúa desde ya, más adelante se convertirá en nuestro principal
enemigo y para eso hay que empezar a educarse sobre los diferentes usos que se le pueden dar a los productos para
evitar la producción en masa de químicos y elementos perjudiciales para el planeta.
Sostenibilidad en los productos
medio ambiente
Rio de Janeiro 2012
a+/(c²∙∞)
Schedules
Sun Mon Tue Wed
Mayo 2012
Thu Fri Sat
Se establece una retícula básica dentro del formato para estas aplicaciones, donde hay
un sistema de modulaciones y una serie de repeticiones del mismo eje, dividiendo en
varias secciones del plano la cuadrícula y desarrollando simétricamente los contenidos e
información propuesta, se maneja una sección áurea para el uso de iconos y textos dentro
de la misma sección y en general estableciendo el manejo del espacio mucho mas simple,
eliminando el detalle y siendo directo con el usuario de la aplicación.
≥ 90°
x= 2x+ x - (y -3)
y= x2
La tipografía utilizada para esta aplicación se basa en las tecnologías móviles y el formato que estas permiten, por
esta razón, se desarrolló un proyecto tanto de identidad visual como de la aplicación, utilizando una familia sans-serif,
en este caso, utilizando la Helvetica rounded que por sus características gráficas, es bastante legible en pequeños
formatos y los tamaños de su cuerpo son lo suficientemente geométricos para distribuir el espacio en la
retícula y darle a la aplicación una imagen sobria, sencilla y funcional.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyz(<>)""'“”
Helvetica
= Sans-serif
familia
(rounded)
16 p
ts
14 p
ts
12 p
ts
10 p
ts
8 pts
6 pts
Los contenidos y la información resaltan sobre la aplicación por puntaje y peso visual,
reduciendo el uso de imágenes, primero por el tema a desarrollar, que requiere de
seriedad y limpieza y segundo, porque la información debe ser el foco de atención
del usuario para esta aplicación, concentrado su nivel de lectura hacia los textos y
eliminando distracciones por uso de recursos multimediales, sin embargo, no quiere
decir que esté reducida a la aplicación de textos, contiene herramientas para grabación
de video y sonido, manteniendo la interactividad entre usuarios. Los puntajes y la
tipografía manejan un equilibrio entre el espacio visual y el contenido haciéndola legible
y ordenada.
Titulares= pts/ mayores
ejes de composición
puntaje tipográfico
(pesos visuales)
Al ser una aplicación que busca atraer a un público más selecto y de un rango de edad mucho más alto entre las
personas que usualmente descargan estas aplicaciones, los colores utilizados para esta aplicación son bastante limpios
y sobrios, buscando la transparencia para que los contenidos lleven la mayor jerarquía posible, resaltando un poco
la información con los mismo colores que llevan la identidad, en este caso, utilizando colores primarios y dándole
más importancia al azul, símbolo de agua y asociado directamente con los cuidados del medio ambiente, por tanto se
utiliza una paleta cromática reducida a colores cálidos y manejando una base que en este caso es el blanco.
COLOR RGB
D
C
J
R. 154
G. 216
B. 0
R. 247
G. 172
B. 0
R. 192
G. 206
B. 0
La estructura de la aplicación es sencilla, se maneja de forma lineal por medio del menú principal, pues cada
contenido requiere de un espacio visual amplio para poder mantener organizados los contenidos de la interfaz y
utilizar un espacio considerable para leer a una buena distancia la información. El menú lleva a 6 enlaces diferentes
donde cada uno de ellos utilza recursos de imagen, video y sonido si así lo requiere el usuario, proponiendo siempre un
diseño serio y directo con una interactividad funcional para el usuario final.
2° 8° 10° 12°6°4°
La navegación de la aplicación está diseñada a través de prácticos enlaces por medio de
un menú principal que contiene siete opciones por las cuales el usuario podrá acceder a la
información y contenidos, sin necesidad de conocimientos especiales o de pasos extras, los
enlaces son visibles y sencillos de utilizar, contienen iconos para reforzar gráficamente a
los textos y contenidos que se presentan, además de permitir el uso de imágenes, sonidos y
videos para interactuar con la aplicación de manera directa y funcional.
∆= click + 6(links)
r
-2
2”
Haciendo uso de la semiología y de los patrones culturales comúnmente utilizados para
interfaces, se diseñaron una serie de iconos para el menú, donde el texto a pesar de ser
suficientemente explícito con el contenido es reforzado con el uso de iconos sencillos y
prácticos que comunican de forma directa el mensaje, para utilizar la aplicación sin
necesidad de algún tipo de ayudas.
pts - px- resolución
(interlineado) + equilibrio
b
t
f
h
i
l
sen(0)
cos(0)
A nivel de usuario, la aplicación está diseñada en idioma
inglés, idioma generalmente conocido y hablado por
el tipo de usuarios que utilizarán la aplicación, y están
escritos de manera simple, sin ningún tipo de conjeturas
o terminologías confusas, que al ser traducidas o
leídas generen otro tipo de interpretación. A nivel de
la aplicación se utilizan lenguajes de programación
más robustos y que corren en este tipo de tecnologías
móviles, como el caso del uso de html y preprocesadores
de información, en donde se busca que el desarrollo de
la interfaz pueda ser visto desde cualquier plataforma
independientemente si es un dispositivo móvil.
0
10
20
30
40
50
0
10
20
30
40
50
El resultado de esta aplicación desarrolla nuevas formas de comunicación que van más
allá del diseño y el uso de tecnologías, está aplicado a cualquier ámbito socio-cultural y
cualquier tipo de enfoque organizacional, permitiendo generar herramientas que facilitan
las funciones diarias de usuarios y personas que hasta ahora desconocen las bondades del
desarrollo y uso de estas tecnologías en campos no relacionados al diseño e informática.
ml
ml
ml
ml
ml
ml
ml
ml
ml
ml
ml
ml
Durante la etapa de crecimiento de un niño, es indispensable contar con unas herramientas de enseñanza que
le permita desarrollar sus habilidades psicomotrices para realizar actividades que complementen el estudio y el
aprendizaje durante esta etapa de transformación, sin embargo, los avances tecnológicos y las nuevas disciplinas
de educación han permitido que se produzcan más ayudas para la evolución diaria de las nuevas formas de
educar, como el caso de la tecnología, que con sus avances tanto en velocidad como en acercamientos a la realidad,
crean instancias educativas para que los niños aprendan de una manera divertida y didáctica.
x
0,1
Educación
Interactivo
Niveles
Aprendizaje
A nivel socio- cultural se han desarrollado diferentes ámbitos de estudio y formas de
aprendizaje en las distintas entidades educativas, a su vez, el crecimiento y el gusto
por el uso de los aparatos tecnológicos se están dando a edades tempranas, por esta
razón, se hace uso de este tipo de herramientas para el aprendizaje de manera más
visual y comunicativa, para que esté directamente relacionada con el tipo de usuario
de la interfaz.
∆
1+4-(q⁴)
El aprendizaje de nuevos idiomas y la intención de conocer nuevas culturas y sus
costumbres, han permitido que las personas se interesen por internacionalizarse,
por aprender a hablar en lenguas extranjeras y conocer más allá de lo que el
entorno ofrece, “Learning with Diego” es una aplicación multimedial diseñada para
niños, donde podrán interactuar con un personaje a través de las presentaciones
del programa y de sus niveles, con este personaje los niños podrán sentirse más
identificados con su entorno y divertirse para aprender jugando.
Los ejes de composición se marcan por la centralidad de la aplicación en donde está marcada la fuerza visual,
dividiendo la retícula en 3 columnas como máximo para modular los contenidos de la aplicación, si bien no se
establece un ángulo simétrico, se mantiene las proporciones para pantalla de una resolución de 800 x 600 px,
estableciendo márgenes y una composición sobria donde se manejan espacios para no contaminar con detalles.
columna 1 columna 2 columna 3
ejes x
pts/ pxx∞1
x∞2x∞3
x∞4x∞5
50
50
40
40
30
30
20
20
10
10
0
Al diseñar una aplicación para niños por lo general se utilizan tipografías no convencionales y manuscritas, para
establecer un vínculo directo con el usuario, sin embargo, esta aplicación está diseñada para la interacción tanto
de niños como la compañía de padres, por esta razón, las tipografías utilizadas incluyen una familia manuscrita
para títulos y textos cortos como entradas a menús o enlaces y una Sans-serif tal es el caso de la Gotham, una
tipografía palo seco que por sus características circulares y terminaciones redondas ayudan a que la información
se pueda leer en cualquier resolución y formato, más aún si se trata de poco contenido y más imagen.
y
AE123
Pts más altos para enlaces
Aquí la jerarquía visual está determinada por las imágenes e ilustraciones de la aplicación, sobretodo en el resalte
del personaje principal en esta caso “Diego”, para crear una recordación del mismo, además de mantener un
ambiente escolar a través de la ilustración y uso de elementos gráficos que por connotación se hacen fáciles de
asimilar a cualquier edad, el puntaje de la tipografía comprende una tercera parte del espacio visual y por lo
general, el orden de lectura de los contenidos están organizados de izquierda a derecha para que se lea primero
texto y luego imagen y no perder la importancia de la información.
≥90
x-1
x⁴
px
La paleta cromática utilizada en esta aplicación utiliza una variedad de contrastes y saturación de los colores
primarios, utilizando colores más fríos hacia los alrededores y espacios laterales con el fin de equilibrar y
balancear la luz hacia el centro en donde se utilizan colores más cálidos y permitiendo enfocar la mirada hacia
puntos fijos dentro de la resolución, estos colores estuvieron basados en teorías de percepción, para no afectar la
sensibilidad de los niños y generar una aceptación de la aplicación entre sus gustos motivacionales.
R RRG GGB BB
110 30 215
150 75 165
200 90 90
80 50 255
85 125 225
115 175 160
75 55 250
85 130 230
115 170 200
CONTRASTE 1
Desaturación
La estructura de la aplicación está determinada por un sistema lineal a través de pantallazos de información y
con el fin de establecer una continuidad de procesos, sin llegar a ser muy extenso, la aplicación abre un espacio de
entrada a la multimedia y una instrucción de uso para llegar al menú principal que contiene los temas y artículos
de contenidos. Es una estructura sencilla, simple y cotidiana de una multimedia tanto para uso de los niños como
de adultos mayores.
10
n+n²
La función de los enlaces en la aplicación se realiza para diseñar una navegación
directa y sencilla, los botones de acción y enlaces son los únicos recursos utilizados
para realizar vínculos entre los contenidos manteniendo una navegación simple y fácil
de usar, así mismo se utilizan puntajes y tamaños visuales que permiten acceder y
cerrar la aplicación de forma practica.
10
20
30
40
50
60
70
80
90
El uso de iconos se convierte en la principal manera de vincular la información con las
imágenes y realizar una propuesta dinámica y adecuada para el desarrollo intelectual
de los niños, por esta razón se acude a la ilustración infantil y al uso de formas básicas
como círculos, triángulos y cuadrados, además de utilizar referentes simbólicos dentro
de los grados de iconicidad en los objetos para identificarlos y reconocerlos.
f≈
P
M
<0
significado
referente
Los métodos de aprendizaje en la etapa de crecimiento son indispensables para el
desarrollo intelectual de los niños, esta aplicación comprende aspectos cognitivos para
niños entre los 6 y 8 años de edad, donde se busca que a través del juego aprendan
inglés no sólo a nivel general, sino en materias como matemáticas, literatura e historia
como primer método de enseñanza.
P
2,2
d-v(4) 45˚
R(w-w1)
w= u-v
El resultado de esta aplicación resulta ser una multimedia
interactiva que a manera de juego y uso de ilustración,
se dirige a los niños mediante un lenguaje claro y directo
para que puedan aprender con un método más atractivo
y ayuda de recursos multimediales para su desarrollo y
aprendizaje común.
Niveles de Inglés
interactividad
l-1
l-2
l-3
∆=
maths Literatu r e history
x salir
u.v
cos 60
El negocio de los restaurantes en lugares exóticos y espacios vacacionales en Estados Unidos ha sido una forma de
vida para muchas personas que viven allí, no sólo son una fuente importante para la economía de ese país sino que
generan empleos para quienes buscan el llamado sueño americano, por esta razón, los restaurantes buscan atraer
a sus clientes por sus productos y fundamentan las ventas con el mercadeo de estos, ya sea mediante promociones
o por correos voz a voz. Con la ayuda de la tecnología aparecieron las páginas web, que han impulsado el
conocimiento de los negocios en distintos lugares para que las personas busquen por internet y se enteren de los
restaurantes que están al alcance de sus posibilidades.
- 60 - 40
- 20
020
Nantucket / Mass
Las páginas o sitios web en cualquier ámbito económico realizan una función publicitaria y dan a conocer a
nivel nacional e internacional el ejercicio de un negocio, bien o servicio. En Nantucket, Mass los negocios de los
restaurantes son variados y de alta calidad, pues su grupo objetivo son personas con un alto nivel adquisitivo,
sin embargo, en cuanto a diseño se refiere, son muy pocos los que se interesan por establecer un sistema dentro
de sus negocios. El Club Car Restaurant, ha estado en servicio por más de 40 años y es uno de los principales
restaurantes de la isla de Nantucket, desarrollar una página web para ellos que les ayude a mantener su negocio
significaba un reto en términos de diseño.
+
+
+
ax-/(r+t)
1
2
-2
y
El diseño y desarrollo de un sitio web para un restaurante requiere de la realización
de ciertos parámetros de diseño que permitan comunicar el mensaje de manera directa
y precisa con el tipo de usuario al que va dirigido, esto requiere composición limpia
y sobria, donde se pueda jerarquizar los productos de una manera equilibrada con la
información y la interactividad de sus elementos.
Web site
Club Car Restaurant
e-commerce
shop
w
e
b
La composición del sitio busca una lectura limpia y directa de los productos y servicios que tiene el restaurante,
por lo tanto, la modulación se hace por una sección áurea de 3 columnas, manteniendo el espacio visual izquierdo
un poco más grande que en el derecho, donde principalmente la información se lea primero, así mismo, el sistema
se divide en 3 columnas manteniendo equilibrio y proporción del sitio para una lectura en cualquier resolución.
+∙r
4”
(retícula) ² / modulación
espacio - equilibrio
uv⁴
w²s = K
wd²
lW = k
Al diseñar este sitio web se tuvo en cuenta factores de composición que a la hora de maquetar las páginas se debía
conservar una propuesta sobria y directa con el público objetivo quien iba a interactuar con esta interfaz, así
mismo, sin cambiar extremadamente a lo que ya se tenía y se creía que estaba funcionando, por tanto, se diseñó
una retícula que está modulada máximo en 3 columnas para distribuir la información y permitir generar pesos
visuales donde se busca atraer la mirada hacia la información por medio de iconos y elementos gráficos pero
utilizando puntajes tipográficos más altos para los textos y contenidos más relevantes.
q
r
u
P= eje principalx+y-(a²)
Q⅝
Q3
a+b
y= x+x²
F1
y
F2
130°
120°
4
Para este proyecto se utilizaron tipografías propiamente web, para garantizar la
legibilidad de los contenidos y que se su información se leyera en cualquier dispositivo,
así mismo se realizó una composición que mezcla 2 tipografías una sans-serif como la
verdana y una serifada como la Georgia en versión itálica, más moderna y estilizada
para los títulos y destacados.
T H
L
A
E
U
R
BC
C
La gamma cromática que se utilizó para este proyecto, está basado en colores tierra, colores desaturados que
simbolizan un poco la antigüedad del sitio, la madera y otros elementos que a pesar de estar ilustrados se trata
de representar esas características, además de contrastar con colores sobrios tanto la información como los
productos hasta componer un sitio que evoca las viejas casas de esta pequeña isla.
6”
140
120
100
20
40
60
80
160
70%
30%
50%
+
R(1) G(2) B(3)
La estructura está determinada por el menú principal, que mantiene una navegación
de tipo neuronal, en donde los enlaces se pueden acceder desde cualquier parte de
la aplicación o interfaz, así mismo, al estar diseñada como página web, se establece
un menú principal ubicado en la parte superior y otro en la inferior para evitar
confusiones y clicks innecesarios para el usuario.
Enl(a)=ces
Estructura / Neuronal
3x
6x
∞
m.1”
>90
La navegación es bastante sencilla y directa, utilizando menú principal, enlaces por
medio de imágenes y vínculos de texto, una propuesta limpia y sobria para interactuar
de forma simple con la interfaz y sobretodo una navegación rápida y ágil evitando
demoras y esperas de carga dentro de la aplicación.
imágenes-(links)⁴
0.1 + 3< x - menu(principal)
x
z
y
A(-1,7)
B(3,9)
x
y
O
Para este caso particular, se decide trabajar un sistema de iconos singulares en
el ambiente que rodea al restaurante debido a que el lugar en donde se encuentra
comprende un patrimonio histórico para el país y sus habitantes y sin ánimo de
cambiar las costumbres que ya se tienen se diseñan iconos con colores tierras y
elementos gráficos que ayuden a reforzar la idea de un sitio antiguo y conservado.
d
r
S
ø
c
D
Y
X
œ
1930 -2011
g
w
-x
t
Para el diseño y desarrollo de este sitio se implementó lenguaje html y CSS, que por
sus capacidades de carga en el servidor, permite visualizar una página en cuestión
de segundos, manteniendo una composición limpia y estructurada para el tipo de
usuarios que harán la visita. Además de implementar el html para cargas rápidas
en el navegador, se tuvo en cuento un diseño líquido, que permite su visualización
en cualquier dispositivo, rompiendo las barreras del uso del computador.
G
H
J
O
a
CSSid
clase
⅝
El sitio web resulta ser una interfaz interesante, muy sobria y en términos
compositivos muy limpia y directa con el público, tratando de generar más atracción
visual a los contenidos utilizando elementos gráficos que ayudan a mantener una
propuesta innovadora, respetando los límites y costumbres establecidas por el lugar
desde hace años.
0
+
+
html / CSS
Z
X
1”
1
3
4
Para muchas empresas del sector de la arquitectura e ingeniería civil se acostumbra
presentar las licitaciones en pro de la consecución de un trabajo en un formato power
point o diapositivas estáticas donde se muestre la trayectoria, trabajos y hoja de
vida de las empresas que buscan obtener la contratación de un gran proyecto. Esta
modalidad se ha mantenido durante varios años, sin embargo, hoy en día, estas
empresas se han dado cuenta de las ventajas que ofrecen los dispositivos móviles, ya sea
por su practicidad y usos o por las herramientas que ofrecen a la hora de encontrarse
fuera de la oficina. Ya no es necesario que la persona cargue con el portátil para todos
lados o que guarde la información pesada en varias memorias usb, basta con invertir
en un aparato tecnológico que le permite unificar las tareas en un sólo elemento,
así se podrá visualizar el estado de un proyecto, fotos, acceso a internet, etc. Es así,
como se propone realizar aplicaciones empresariales que les permitan conectarse
constantemente con la oficina sin estar dentro de ellas.
d
β
h
P
C
U
A
La aplicación tiene como objetivo principal, ofrecer una herramienta de apoyo constante
fuera de su lugar de trabajo, para evitar el mantenimiento de sus funciones a partir de
una laptop, memoria usb o cualquier otro dispositivo encargado de guardar archivos
importantes, la aplicación se alimenta del lado de un servidor, permitiendo su acceso
desde cualquier lugar y descargas de información para almacenamiento local, evitando
guardar la información en un su computador y arriesgando los archivos ante cualquier
ataque informático o daños físicos.
Q
función
K
G
f(x)= agilidad + procesos
CH2 H2 HO2
PCA Proyectistas Civiles Asociados, es una empresa dedicada desde más de 30 años al
servicio de la arquitectura e ingeniería civil en el país, ofreciendo calidad en los procesos
y un alto nivel de responsabilidad por sus funciones. Así mismo, como la empresa ha
venido creciendo tanto en funciones administrativas como laboralmente, se ha propuesto
innovar sus productos y servicios para satisfacer las necesidades del cliente y sus
empleados, por esta razón, se ha decidido crear una aplicación que les permita agilizar
sus procesos y sea una herramienta de apoyo para que tanto empleados como clientes
estén siempre conectados, ofreciendo un valor agregado más conveniente para estar al
nivel de las expectativas del usuario.
Q
“
”
(i) v=f (u)
(i) u=f(v)
E
D
f
-1
La composición de esta aplicación está basada en una retícula arbitraria, donde se
establece a nivel general un espacio conformado por 3 columnas del mismo tamaño, con
el fin de modular los contenidos proporcionalmente, sin embargo, para darle mayor
jerarquía a la información, se unifican las 2 columnas de la sección derecha, generando
un espacio doble para mayores puntajes y pesos de información, partiendo de un eje
principal que se encuentra hacia el centro de la aplicación y diseñando una composición
limpia, ordenada y equilibrada en pesos visuales.A
æ
b
cA1
A2
eje principal
La aplicación maneja 2 tipografías sans-serif, la principal es la arial bold, que es utilizada en este tipo de dispositivos
y que por características formales, es directa y legible para cualquier tipo de usuario que interactúe con la aplicación,
sin embargo, para contenidos específicos de la empresa y que hacen parte del sistema de identificación institucional, se
utiliza la Soho, que tiene terminaciones robustas y pesadas, alusivas a los valores que la empresa quiere representar.
= 1x
31,1x
1,5x
10,1x
1,4x
7,8x
8,3x
45
y
l
M
A(1,7)
B(-3,2)
0
Los pesos visuales de la aplicación están determinados por el orden de los elementos
dentro de la composición, manteniendo un orden de la información y organizando el
espacio visual para que no genere conflictos de lectura ni acumulación de contenidos. El
menú principal se mantiene a la derecha para que siempre esté a la vista del usuario y la
información se despliega en la parte derecha de la aplicación, así se podrá mantener un
orden de lectura.
F
P´
80
60
40
20
80
60
40
20
El sistema de identidad visual que tiene la empresa es una pieza clave para utilizar la paleta cromática que el
identificador usa, pues al estar utilizando un color naranja en gradaciones menores, están aludiendo a los colores
utilizados por la construcciones y del sector ingenieril, así mismo la aplicación utiliza la gráfica complementaria para
contrastar la viveza de su color con el contenido que está siendo usado en colores más limpios y sobrios.
A=P
rr
r
r
r
r
El menú principal que se despliega a la izquierda de la pantalla de la aplicación
mantiene una estructura lineal en donde el usuario podrá acceder a la información por
medio de este elemento, una vez desplegada la información, se mantiene una barra en
la parte superior de la aplicación quien será la que permita volver al menú principal sin
desconectarse de la interfaz.
y
z
f(x)= a+b-c
r
Ø
Sl
acceso principal del panel
menú
fl
La navegación de la aplicación está contenida dentro del menú principal y enlaces por
medio de imágenes y botones, aprovechando al máximo el recurso de internet para que
la carga se haga se manera efectiva y rápida, pues la información contenida lleva mucha
información la cual puede hacer demasiado pesada la aplicación.
a
b
<html>
</html >
6˝
La aplicación conserva los elementos gráficos propios del sistema de identidad institucional
que ha venido utilizando los últimos 6 meses, así mismo se utiliza el logo-símbolo dentro de la
aplicación como fondo para establecer la conexión de la identidad de la empresa en relación
a una herramienta propia de la institución, por tal motivo se mantiene el color, el blanco y se
le da relevancia a los contenidos por contraste.
o
Los usuarios de esta aplicación son ejecutivos dedicados al sector de la ingeniería y
arquitectura que buscan en esta herramienta una ayuda para facilitar sus tareas y
como apoyo a sus múltiples tareas, donde puedan organizar tanto el tiempo como su
información sin necesidad de requerir a terceros y puedan optimizar el tiempo de sus
labores.
5”0
B
AB + CD
La aplicación se muestra como una herramienta útil y sencilla, para que cualquier
usuario pueda interactuar con ella, es directa y utiliza un lenguaje reconocible
por cualquier persona, sin necesidad de aprendizaje externo, tan sólo basta con
presionar las opciones del menú y se accede a la información requerida sobre la
empresa PCA.
Hace varios años, las empresas aseguradoras en Colombia se han preocupado por
generar una especie de confianza y tranquilidad para quienes con grandes esfuerzos
adquieren bienes, servicios o productos para su bienestar, sin embargo, tanto la
naturaleza como algunos desafortunados hechos creados por el hombre, pueden
arriesgar esa inversión en cualquier momento y precisamente son las compañías de
seguros las que a través de un servicio, prestan esa atención para proteger el dinero y
sus pertenencias. Es así, como las compañías han venido trabajando y ofreciendo sus
servicios no sólo por métodos publicitarios sino a través de medios de comunicación
expansivos como el internet.
f(2.1)= 1 = 12.12 .1
El sitio web está diseñado para crear un puente de comunicación entre el asegurador y
su asegurado, en diversas ocasiones los usuarios de este tipo de empresas requieren de
un servicio de orientación antes de adquirir un seguro, por esta razón, esta web ofrece un
servicio de apoyo, de conocimiento y respaldo a la ciudadanía que requiere asegurar sus
bienes y desconozca de este campo.
>35°
Fanny García, es un agente de seguros que por más de 5 años ha ejercido su función
como una oficina intermediaria de seguros, ofreciendo un servicio para la adquisición
de pólizas contra todo tipo de riesgo, he ahí la importancia de un buen servicio al cliente
para garantizar la transparencia en el trabajo y la responsabilidad por la protección y el
cuidado de sus pertenencias.
bienes + servicio
a.segura(dos)²
h
r
0
F
G
Se realiza una composición donde se mantiene un diseño líquido para visualización
en cualquier dispositivo, manteniendo un eje central dentro de la maquetación web y
estableciendo la modulación de la retícula por 3 columnas, quienes llevan contenidos
externos y un área mayor para encabezados y titulares, con el fin de conservar un espacio
visual que permita al usuario analizar la información que está siendo presentada en la
interfaz.
ai
s
R
P
k
q
x
y
El uso de la tipografía para esta web es bastante limpio y ordenado, utilizando la helvética en sus diferentes calibres,
una familia sans-serif para comunicar el mensaje de manera directa hacia el usuario y que por características
morfológicas de los caracteres es bastante amplia y orgánica permitiendo más legibilidad y claridad en términos de
diseño.
18 ml
16 ml
14 ml
12 ml
10 ml
8 ml
6 ml
4 ml
2 ml
0
+
web site
La jerarquía de la información contenida en la web, se da por pesos visuales, los titulares
contienen mayores puntajes para enfatizar la importancia de su contenido, así mismo
se hace uso de la iconografía para contrastar textos con imagen, así mismo por color se
puede percibir no sólo la simplicidad del sitio, sino el comportamiento de la composición
para evitar confusiones o distracciones. Los iconos cumplen una función de referencia
para encontrar la información más rápido.
β
A
Rd
AB
El sistema de identidad visual que tiene la empresa es una pieza clave para utilizar la paleta cromática que el
identificador usa, pues al estar utilizando un color naranja en gradaciones menores, están aludiendo a los colores
utilizados por la construcciones y del sector ingenieril, así mismo la aplicación utiliza la gráfica complementaria para
contrastar la viveza de su color con el contenido que está siendo usado en colores más limpios y sobrios.
y”
x
O
Q(x,0)
P(x,y)
Q(x´,0´)
R´(0´,y´)
w0
w1
w2
w3 w5
w4
220
Hexadecimal
35 175
#23B0DC
R G B
70 10 5 0C M Y K
El sitio web está diseñado con una barra de menú principal en la parte superior en
donde se muestran las opciones de navegación del sitio y opciones dentro de la página
para interactuar con la interfaz, el usuario podrá disponer de la información en todas
las páginas ya que el sistema utilizado fue el de una estructura neuronal.
h
12.0
41°
48°
240°
180°
90°
45°
La página web de esta aplicación ofrece distintos recursos gráficos para realizar una
navegación en todo el sitio, tales como imágenes, iconos, botones y enlaces de texto, además
de ofrecer vínculos externos con las compañías de seguros con las cuales se tienen convenios
y relaciones.
yy
xx
16 16 Q
W
(-8,-8√3)6 (-4,.3)∞
La iconografía utilizada para esta página web se basó en factores semióticos que tienen
que ver con el alcance cultural de las personas, es decir, se utilizan gráficas convencionales
que están establecidas en el conocimiento global de las personas para que no se generen
confusiones ni interpretaciones sobre los elementos que allí se presentan.
Autom vilesHogares Personales Negocios
C
A
B
S(a+b+c, b+d)
E F
G
HChat⁴
Asis.ten(cia)
[Asegurador]⁵
La aplicación está dirigida hacia todo tipo de público interesado en adquirir un servicio
ya sea por internet o personalmente, la página web tiene como fin, ser una de las
empresas registradas sobre la web para darse a conocer nacional e internacionalmente y
donde se puedan realizar funciones fuera de la oficina.
y= 2y +3
0
y
x
El sitio web ofrece un servicio a la comunidad que requiera de un seguro o protección
de sus bienes y la propuesta gráfica es un diseño limpio, sencillo y simple dirigido a
todo tipo de público que esté interesado en informarse sobre este tipo de contenidos.
x
y
t
u
7
6
5
4
3
2
Desde la aparición de dispositivos móviles y en particular el desarrollo del Ipad, las
aplicaciones web se han disparado en un 150%, permitiendo que tanto diseñadores
como usuarios establezcan herramientas de ayuda para las comodidades particulares
y la comunicación por medio de estos dispositivos no estén limitados a un acceso
a internet, sino que funcione como un gran ordenador donde se pueda almacenar
aplicaciones, archivos y cualquier tipo de información que pueda ser importante.
x1
P2 (x2, y2)
ø
P1(x1,0)
Organizer, es una aplicación para dispositivos móviles que permite a un usuario
organizar sus tareas diarias, cumpliendo las funciones de una agenda u ordenador,
almacenando archivos y carpetas de usuario, conexión a internet, guardando
información sobre cuentas bancarias personales con claves de seguridad y un enlace al
correo personal.
AK
5´
X
β
La aplicación web diseñada para este tipo de interfaz, se deriva de la palabra en inglés
“Organizer”, que significa organizador, funcionando como una especie de agenda digital
en donde se puede distribuir las tareas diarias del usuario y almacnar información de
manera segura e inteligente, comunicándole al usuario las citas importantes, pagos de
cuentas y correos urgentes. Es una aplicación que establece una herramienta de ayuda
para quienes tienen una vida bastante ocupada y agitada.
nP1
nP2
La composición de la aplicación marca un eje central principal, en donde se ubican los
elementos gráficos más importantes para orientar al usuario sobre las opciones de menú
que puede utilizar, además de establecerse 2 columnas dentro de la retícula que varian
su anchura dependeiendo del contenido y así modular los espacios como celdas dentro de
una tabla.
∙x
h
b
Tipográficamente, la aplicación utiliza la fuente por defecto de los dispositvos móviles, la cual utiliza una fuente
tipográfica palo seco, tanto el cuerpo de letra como la altura de los caracteres, funcionan y se leen muy bien en
espacios reducidos, más aún en este tipo de sistema móviles donde se requiere respetar zonas y áreas dentro de la
pantalla.
x
y
o
Aaf(x)
œ
2”
y
x
a
(2,1)
Dentro de la composición de la aplicación, se mantiene una jerarquía por pesos visuales,
en donde se limita la cantidad de textos, escritos a menores puntajes y dándole mayor
relevancia a la gráfica, para que se convierta en una interfaz más sobria y directa, en
donde la iconografía cumple un factor importante para el reconocimiento de opciones y
menú de usuario.
y
x
a
(a, 2a+3)
P(a,b)
(a,0)
y= 2x +3
A
B
Para el fondo se maneja un color neutro como el gris, colores base para que no se confundan con los contenidos
y afecten la legibilidad de los textos, utilizando colores más fuertes y cálidos para los elementos gráficos y que
fácilmente se puedan distinguir por color; para las aplicaciones dentro de las herramientas se utilizan colores fríos
si se trata de lista de textos o columnas de información, para que se puedan leer los contenidos sin afectar ninguna
caracerística física de los elementos.
x>y2
W
√
∞
R G B
bg
v
Se diseña un menú principal de opciones por las cuales el usuario podrá interactuar
con la interfaz de la aplicación, mediante el uso de iconos gráficos convencionales y
donde se podrá encontrar con aplicaciones bastante útiles para su comodidad. La
estructura utilizada para la aplicación es lineal en donde aparece una barra superior
que identifica la herramienta utilizada y un enlace al menú principal.
∞
La navegación de la aplicación comprende la conexión a internet con diferentes aplicaciones
de uso personal, como el caso del correo, cuentas y pagos bancarios, carpetas y archivos
de información y una aplicación agendaria que utiliza enlaces con la estación del clima y
almacena datos para desplegar información sobre cómo debe vestirse, que son elementos
gráficos por defecto dentro de la herramienta, todo esto se maneja dentro de la misma
aplicación sin necesidad de salir de ella.
30°
[carga * sec ] = 5.5 secs/ minuto
x= tan/ cos + sen
Imágenes
Animación
0
a b
Se utilizan elementos gráficos convencionales en este tipo de aplicaciones, por medio de
ilustraciones vectoriales que están siendo utilizadas como patrones semióticos y que por
referencia icónica, son reconocibles para cualquier tipo de público.
S
Q
U
M
J
T
El perfil de las personas que van a utilizar esta aplicación está determinada para
quienes realicen diferentes funciones durante el día y mantengan una vida laboral que
pueda resultar en ocasiones agitada y ocupada, sin embargo, cualquier usuario podrá
descargarla y utilizarla en su dispositivo.
o
Q
La aplicación web para estos dispositivos Ipad, resuelve ciertas herramientas
prácticas para usuarios que requieren de instrumentos de ayuda para realizar
un trabajo específico, por esta razón, “Organizer“ es una aplicación que propone
facilitar tareas y funciones dentro del espacio laboral.
∑=
910 11
12
1
2
3
45
6
7 8
Pv
Pv
19
5”
H
(1,4)
(9,12)
La identidad visual y la creación de marcas ha surgido desde hace muchos años,
teniendo una finalidad específica dentro del ámbito humano, en donde se busca tener
cualidades específicas y características tanto físicas como simbólicas para sobresalir
entre los demas, esa misma razón yace en todo género y en el caso particular de
Colombia, es importante determinar cómo estas grandes marcas no sólo surgieron a
partir de elementos gráficos en determinadas épocas, sino que su producción se hacía
de forma muy singular.
Derechos de imagen reservados a sus respectivos dueños
El uso de multimedias se han venido incorporando dentro del material editorial como un
elemento adicional e interactivo para quienes además de disfrutar del impreso, requieren
de una ayuda visual como material de apoyo, una herramienta para incrementar el
conocimiento y que puede visualizarse en un dispositivo como el computador o algún
registro de información.
>90°
x-x
f(1)
f(2)
f(3)
f(4)
La aplicación está basada en un registro de investigación realizado por profesores y
estudiantes de la Universidad Jorge Tadeo Lozano, liderado por el maestro de Identidad
Visual Mauricio Hoyos y Diana Bastidas, actual administradora de la facultad de Diseño
Gráfico y especialista en investigación de área. Como fin, la investigación que se está
realizando para la Universidad tiene como objetivo plantear un desarrollo de toda la
parte gráfica y reglamentaria de las marcas en la industria de Colombia de 1900 a 1930,
con el fin de identificar aspectos sociales, económicos y patrimoniales que hacen parte del
diseño de Identidad Visual en el país.
Se establece una retícula básica dentro del espacio visual de la pantalla, en
donde hay una modulación del sistema reticular con 2 columnas, marcando
una lectura texto-imagen, o dejando sobre el eje central el menú principal o
una imagen contextual.
aK
⅛ K
y
∑k=1
Para conservar una metáfora relacionada con los años 20`s y en general con el rango de años en las que estas marcas
se presentaron, se usan dos clases de tipografías, haciendo referencia a la industria y el comercio en Colombia, para
ellos se utiliza una familia serifada, con mucho peso y remates bastante altos aludiendo a la temática de industria
y una paloseco, como la AKZIDENZ GROTESK para unir las características de lecturabilidad, donde se utilizan
tipografías con un cuerpo bastante alto y angosto, en pro de conservación del espacio y ajustes de tracking.
AkzidenzGROTESK
- Condensed- Extended- Ligth- Regular
2
4
8v
Gr
La aplicación mantiene una composición muy sobria, limpia y sencilla, donde la
jerarquía se da por la proporción del espacio, dejando vacíos y espacios profundos que no
interrumpan la lectura y se puedan visualiar al mismo nivel tanto la imagen como el texto
que corresponde para complementar el objeto de estudio que corresponde a la identidad
visual.
L
K M
B
F
[ - C , C + 2 ]
La paleta cromática utilizada en esta aplicación alude al uso de colores tierra y la utilización del sepia, debido a que la
técnica de reproducción de las diferentes marcas obtenían una tonalidad oscura y desgastada, por esa razón, los tonos
en los fondos tienden a verse mas desaturados para contrastar los elementos de información con colores igualmente
inclinados hacia los tierra y ocres y así resaltar sobre el formato y permitir captar la atención del usuario sobre los
elementos gráficos y no sobre el fondo.
y
x3
2
1
-36°
75°
R G B R G B
# 1D4954
La aplicación está diseñada de manera neuronal, manteniendo un menú principal al
inicio de la multimedia para que el usuario avance directamente hacia el punto donde
quiere enfocar su atención, sin embargo desde cualquier instancia de la interfaz podrá
acceder al menú para dirigirse hacia el siguiente nivel o si desea cerrar la interfaz.
ø`
O
Q
P (a,b)
[a]
h
P
a
∞:
k
(ii)
Para el diseño de esta interfaz, se tuvo en cuenta el grupo objetivo que estaría utilizando la
aplicación, la cual comprende entre jóvenes universitarios y profesionales, por esta razón,
se trata de disminuir al máximo los enlaces, para que la carga sea más efectiva y se pueda
acceder fácilmente, por esta razón la utilización de imágenes y botones son los únicos
recursos para vincular los niveles de la interfaz.
⅝
½
a-b
R
A
∂
a
A
B
C
El uso de iconos dentro de la interfaz cumplen para este caso un papel de reconocimiento
y contextualización de la información, en donde se pretende hacer una referencia por
conocimiento cultural de la época entre 1900 y 1930, sin necesidad de saturar o utilizar
gráficas pesadas en relación a la industria, simplemente ornamentando y utilizando
elementos decorativos que enriquecen la interfaz con la temática en relación.
72´
17˚A D
B
C
+
+
+
14”
12”
10”
4”
8”
2”
Para muchos estudiantes y profesionales dedicados al diseño y desarrollo de sistemas de
identidad institucional, es de gran ayuda tener un material impreso e interactivo sobre
el desarrollo de las marcas gráficas en Colombia, un apoyo y una bibliografía de los
hechos y el proceso que se dió en aquella época, por tal motivo, la interfaz se desarrolla
en un lenguaje claro, directo y sustancioso como una apertura de información que está
contemplada más detalladamente en el libro.
+
La propuesta de multimedia que se presenta varia de acuerdo al contexto, sin
saturar la información con fondos o imagenes recargadas, que según la tipología
utilizada se mantienen como identidad visual, el resultado de la multimedia es una
aplicación clara y directa con los usuarios donde se pueda interpretar y conocer los
tipos de sistemas visuales para las empresas en Colombia durante estos años.
- Resultado en pantalla
. Colores RGB
Las empresas dedicadas a la ingeniería civil y la arquitectura del país
tienen una responsabilidad social no sólo con el entorno sino en sí
mismas, pues son los conceptos de calidad, honestidad y confianza los
que permiten que cada día se pueda ver el progreso en estas áreas y
así mismo, el diseño cumple un papel importante en donde se tienen
en cuenta los procesos de comunicación para hacer llegar el mensaje
a diferentes empresas, entidades y sobre todo a los directamente
involucrados con la ingeniería del país.
40´
H
O
El sistema de identidad institucional es un proceso de diseño, en donde se complementan
las funciones administrativas, económicas y sociales de la empresa con los valores de
comunicación. PCA cumple 30 años de servicio y trabajo, es aquí donde el sistema de
identidad propuesto relanza la marca que PCA llevaba hasta el momento y le da un nuevo
giro sobre los valores a representar, manteniendo unidad, pregnancia y equilibrio en el
rediseño.
+
+
AC
Durante 30 años la empresa PCA Proyectistas Civiles Asociados ha trabajado con
responsabilidad y compromiso en todo lo relacionado con estructuras, reforzamiento,
arquitectura e ingeniería civil. Así mismo desde hace varios años sus servicios fueron
aumentando ofreciendo más por la mimsa calidad, y es ahí en donde el diseño toma parte
fundamental de su desarrollo para encontrar los valores que la empresa debe transmitir
a través de su identidad institucional.
T
W
S
(w,t)
30 años
10 mi
(4,3)
(½-x)
El identificador propuesto para la empresa PCA, maneja varios ejes de composición
para la construcción del logo símbolo, sin embargo, para la correcta lectura de la marca
gráfica, se utiliza una versíon del identificador utilizando un eje horizontal, en donde
la palabra “PCA” tiene la jerarquía, dejando a un costado y a un 1/3 de la tipografía
el logosímbolo, para que su lectura se lea hasta el final y generar recordación con la
constante visualización.
zona de exclusión
G
r
Es importante representar solidez, tecnología y equilibrio, la familia utilizada debe contemplar los diferentes usos de
la tipografía sin que se pierda las connotaciones que se quieren proyectar. Para darle más singularidad a la marca se
contemplan todos los posibles usos de acuerdo a las necesidades de PCA, en este caso se utiliza la SOHO, una familia
tipografía paloseco que representa por sus terminaciones gruesas, la solidez que la empresa debe representar.
y
x(-√21, -2)
x2 + y= 19
(-2,1)4= (x-y)(2)
z
r
A nivel jerárquico, el identificador propuesto está implementado de acuerdo a una
posición de lectura tanto por color como por organización de elementos, en donde
tipográficamente la palabra contiene mayor peso y puntaje que el logosímbolo
para que esta sea legible y clara, así mismo el logosímbolo lleva su atención por
color, el cual le da más singularidad a la marca. De la misma manera se intenta
jugar con las tarjetas personales, en donde el uso del color identifica al tipo de
personal en la empresa y complementa el sistema de identidad.
F´(-c,0)
d(P, F´)
W(0,b)
(0,3)
(-a,x)
A
B
C
D
Y
X
F(O,p)
PCA se ha movido en el sector de la construcción por varios años, de acuerdo a su función y el logotipo utilizado
por décadas, los valores de la empresa intentan representar estos mismos hechos, para este rediseño, el color se
fundamenta en los materiales, el ladrillo y elementos básicos de la construcción que sin llegar a saturar mucho el
color, se logra una tonalidad neutra entre un color cálido y un color frío, dejando una gradación cromática acorde a
los valores que se quieren representar.
M: 60%C: 40%
Y: 60%K: 100%
G: 0R: 5
B: 0 #050000
M: 25%C: 0%
Y: 60%K: 0%
G: 197R: 253
B: 120 #FDC578
pantone: 1365 C
M: 90%C: 10%
Y: 100%K: 0%
G: 65R: 220
B: 40 #DC4128
pantone: 121U
paleta de color primaria
R(0, y´) P (x´, y´)
B (h,0)A(h,k)
I
G
La marca gráfica diseñada establece unos parámetros de visualización tanto en pantalla
o resoluciones digitales como en materiales impresos, por esta razón y al utilizar un
eje horizontal, se debe tener en cuenta las proporciones entre el manejo tipográfico y el
logosímbolo, donde a menores resoluciones se debe conservar un mínimo de 1 cm de alto.
a b
C
A
¼
n1
m,5
∞
A2
ώ
y´
x´
K
2a
a
O
Para demostrar la versatilidad de la marca, se utilizan las versiones del identificador en:
Alto contraste, tono continuo, alto contraste invertido, tono continuo invertido y la versión
original de la marca, variando con fondo negro. En todas las versiones se puede observar
que no pierde legibilidad ni lecturabilidad y funciona en cualquier aplicación.
Y
h
n
m
12.60
12.70
d
g
V= x3 - y3
y
x
Las aplicaciones digitales se diseñaron para manetener unidad gráfica dentro de la
institución y generar en los empleados un sentido de pertenencia con la empresa, por
tanto, los fondos de escritorio para su equipo personal, fondos para el celular y una
aplicación web hacen parte de su identidad dentro y fuera de la misma.
F
æ
U1
U2
A1
x`
A2
o
36°40´
A-5
-3
0
1
6
B
C
D
Aplicación web
Fondos Iphone
Fondos de escritorio
El sistema de identidad institucional de la empresa PCA está establecido para poder
aplicarse en cualquier formato, por este motivo y con la fiesta de celebración de los 30
años, se decidió diseñar piezas complementarias como escalas, pines y clisés para el
marcaje de las invitaciones y relanzar la marca hacia nuevos horizontes.
(b)
(a)
:y
y
x
>-11(ii)
FC
P (r)
D(d,o)
Q
El rediseño de la marca gráfica reúne los valores de familiaridad, solidez y equilibrio,
valores que no se representaban con el identificador anterior; para esto se tuvo
en cuenta una serie de parámetros de diseño, como el uso de una tipografía que
visiblemente representara la solidez, un logosímbolo lo suficientemente singular que
reuna la familiaridad dentro de la empresa y el uso de la geometría para establecer la
proporción y el equilibrio.
o
Q (x,0)
Proyectistas Civiles Asociados
Versión anterior Versión propuesta
Gráfica complemnetaria
En el 2012 se celebrará la cumbre internacional sobre desarrollo sostenible, por tanto
es indispensable contar con un identificador que proponga visualmente la idea de
sostenibilidad en todos los aspectos tanto económico, político y social. Proteger el medio
ambiente y hacer del desarollo sostenible una realidad, es una tarea de todos y desde
ya muchas empresas se han venido uniendo por esta causa, para evitar el deterioro y el
desperdicio innecesario de elementos que pueden reutilizarse.
A
A1
1`
2`
3`
El uso del identificador para esta cumbre del próximo año, pretende asociar mediante un
elemento gráfico un sistema que pueda utilizarse en diferentes aplicaciones propositivas
y que genere más atracción de quienes harán parte de la reunión, la idea de utilizar un
logotipo con un elemento gráfico normalizado, tiene como finalidad simbolizar las ideas y
es una invitación a la participación, al diálogo y sobretodo al desarrollo de nuevas ideas
en pro del medio ambiente.
0,1
S(a+c, b`d)
Q(a,b)
R (c,d)
o
3,4
Los conceptos de idea, pensamiento y opinión fueron valorados para la creación del
logotipo, como una invitación a la participación de ideas nuevas y que propongan
la sostenibilidad. Por esta razón se utiliza como argumento gráfico la abstracción de
personas, objetos y elementos que piensan, proponen y opinan.
(1,1)
(6x+2y=0)
x+3y=-1
x
y
El logosímbolo para la cumbre está definido bajo una retícula cuadrada donde se maneja
un eje vertical, estableciendo mayor puntaje y peso visual hacia el símbolo, que carga
con la mayor tensión visual, pretendiendo utilizarlo como gráfica complementaria en sus
diferentes aplicaciones y que sea este elemento quien esté como fundamento para lograr la
singularidad del identificador.
y < 2x + 3
3x - 3 < 5x - y
h
(x,y):y < 2x +3
Kerning
Tracking
Pts
La tipografía utilizada contiene características gráficas que particularmente ayudan a transmitir los conceptos
a representar, la utilización de una Palo seco como la Helvetica Rounded, es complementar la legibilidad de los
caracteres con las terminaciones redondas que le dan más dinamismo y conjunto con el símbolo propuesto, no rompen
con la visualización de los espacios dentro del identificador.
Kerning
Tracking
Pts
m = - 12
p = + 54
En este caso se utiliza el símbolo del globo que remite al pensamiento, idea u opinión y
que por connotaciones de comunicación gráfica,remite a los términos onomatopéyicos de
historieta, adicionalmente la letra “I“ sustituye a la persona quien esta generando la idea
o pensamiento. La lectura del identificador contiene la fuerza compositiva hacia su lado
derecho, terminando la visualización en el elemento distintivo del logotipo y que se utiliza
como gráfica complementaria.
12
34
56
78
910
1112
13
P:
G
t
da
P1:
P2:
La idea de representar biodiversidad, intercambio y proposición a través del identificador, permitió utilizar una
paleta cromática variada con una combinación de colores cálidos para contrastar los elementos gráficos como el
cartel para el evento y el logosímbolo. La abstracción de los colores permite más aplicaciones del identificador en las
diferentes piezas y a pesar de ser un tema tan serio y responsable, a través del color se simboliza la biodiversidad y
unión de las diferentes culturas que asistirán al evento.
13
# CDF12F
C
M
Y
K
r,g, b
hexadecimal
2
(4,0)
La abstracción del globo como elemento gráfico, permite la aplicación de este símbolo como
objeto principal dentro del sistema de identidad institucional, el cual crea singularidad y
versatilidad dentro de la identidad para el evento, variando en color, tamaños y contextos
dentro de los formatos establecidos.
2”
4”
x
12 -
2x
H
S
h² - 4ac = 0 h² - 4ac > 0
Para apoyar la marca en sus diferentes aplicaciones, permitiendo ser utilizado a una sola
tinta, policromías y resoluciones digitales, el identificador está diseñado para sus versiones
en alto contraste, tonos continuos y color original.
x
6x
∆
P
Ar
ß
r
r
r
ßß
r1(opp)
La biodiversidad del evento y la conglomeración de diferentes culturas, permiten
el diseño de aplicaciones digitales que comunican y acercan distancias entre las
diferentes naciones, para esto se utliza una página web donde se pueden ver consejos
de sostenibilidad, una apkicación para dispositivos móviles donde pueda recoger
ideas sobre la conferencia y montajes digitales como elementos infográficos en donde
se tienen fines educativos acerca del medio ambiente.
Montaje Etiqueta de botella.
Web site.
Portal informativo de ideas para reusar, reciclar y compartir.
30 - x
30
x
y
x
l1
P
Ar
ß
r
r
∞
√3
30˚1
2
2
1
40˚
NR
Para ciertas empresas del sector asegurador, es importante mantener un sistema de
identidad que les permita diferenciarse frente a la competencia, pues si bien, desde
hace varios años en Colombia, las empresas aseguradoras han venido aumentando de
usuarios, así mismo crecieron los intermediarios, aquellos que hacen todo el trabajo por
quienes no saben del campo. Por esta razón, no sólo a nivel empresarial se crean marcas
diferenciadoras, sino que a nivel personal, son los intermediarios quienes tienen un valor
agregado como su propia identidad, para ofrecer mas servicios y productos hacia los
clientes.
ø
a
b
√2 - v
y
45°
A
C
D23°
Ø°
B
El identificador para esta entidad significa una forma de expansión para ofrecer sus
productos y servicios, por esta razón, es indispensable el uso de un elemento icónico que
represente los valores de la entidad, así mismo contiene valores simbólicos en donde
la forma sustituye su representación por la de un símbolo similar al del caparazón,
connotaciones que dentro del entorno está significando protección y resguardo.
130
f(x)= x-2
0
Q(a.b)
315˚
¢ = 45˚
b
150 170 190 210 230 250 270 290 310 330 350 370
FC
P (r)
D(d,o)
Q
Al tratarse de una entidad de seguros era necesario representar conceptos alusivos al
tema, como protección, respaldo, seguridad y asistencia, por lo tanto, se tomó en cuenta
ciertos rasgos de algunos animales que por connotaciones culturales utilizan elementos
del cuerpo para su protección, en este caso, se utiliza la metáfora del caparazón, como
objeto fuerte, protector y que para esta entidad se utiliza como cobertor, reuniendo los
valores siginificativos a representar por intermedio de este.
El logosímbolo utilizado para esta propuesta se identifica como un elemento gráfico que
mantiene un eje vertical, manteniendo el símbolo en la parte superior como elemento
principal y donde la figura circular se convierte en gráfica complementaria, asi mismo el
manejo del espacio siempre está contenido hacia el centro, preservando los espacios de
interlínea del mismo tamaño, proporcionando el espacio visual simétrico en relación a los
márgenes del formato.
230m
230m
16 pts
14 pts
12 pts
10 pts
8 pts
6 pts
∆
∂
1”
2”
3”
Para el uso de tipografía en este sistema de identidad visual, se utiliza una familia tipográfica Palo seco como la DIN
Pro, que contiene características gráficas particulares que permiten la singularidad de la marca, además de ser una
tipografía estilizada, moderna y original, manteniendo una proporción entre caracteres que permite la legibilidad de
textos corridos y morfológicamente es ligeramente orgánica y sintética.
DIN ProTypeface
F`(-c,0)
F`(c,0)
P(x,y)
El manejo del espacio visual dentro de la composición de la identidad visual, mantiene
mayor jerarquía en el logosímbolo, partiendo que este elemento está siendo modulado
como una gráfica complementaria para que la marca sea aplicada, por tanto se utiliza
un puntaje de tipografía alto para el nombre o razón social de la entidad y se deja mayor
espacio visual como punto de atención tanto por color como por tamaño al logosímbolo
como elemento identificador de la marca.
yz
B
x
½”
20 mi
La representación del color está asociada con el contexto de la entidad, donde se intenta por medio de este mantener
un equilibrio, si bien el color azul es llamativo y particular, también está asociado con significados de tranquilidad,
reposo y reflexión, asi mismo al contrastarlo con una tonalidad más fría se convierte en una gama cromática que
representa visualmente una identidad singular y atractiva que no genera problemas de lectura o asociaciones
similares.
20 mi
#6FCDE9
#3DBCEA
#25729A
#0F4A65
CMYK 50,0,10,0110,205,235
65,5,0,060,190,235
90,50,25,540,115,155
100,65,40,2515,75,100RGB
CMYKRGB
CMYKRGB
CMYKRGB
y = arctan
√5
u-2
x = tan - x
La gráfica complementaria para este sistema se basa en el logosímbolo, que
si bien es una abstracción de un caparazón, también se lee como una cinta
de envolvimiento, y que puede utilizarse esa forma circular como gráfica en
las aplicaciones institucionales dándole más singularidad y particularidad
a la marca.
36˚ 40”
C
B
A
16
AB
S”
2
a2
θ
ß40%
(a1,a2)
(a2J)
El diseño de la identidad visual para esta entidad está desarrollada bajo sus diferentes
versiones, permitiendo utilizarla en distintos formatos para que pueda ser aplicada en
cualquier sustrato sin perder ninguna característica física dentro del identificador.
y
7”
2”
Para crear todo el sistema de identidad institucional es necesario aplicar la marca
en cualquier elemento, para este caso, se utiliza este recurso en diferentes objetos
que permiten la creación del juego visual, manteniendo una estética limpia, directa y
funcional de la marca gráfica.
θ
R
Q
y
x
>x >x+2 >x+y >x+? >x+x½
ABD= 90º
(AC)2 = (72) +40
En la actualidad son muchos los diseñadores que salen al mercado ha conseguir
una oportunidad laboral en el ámbito que le corresponda, sin embargo, es tanta la
competencia en el sector que es necesario identificarse y tener un elemento diferenciador
entre tantos profesionales. Para este caso, se decide entonces intervenir en el diseño
de una marca personal, que represente los atributos del diseñador y que sea lo
suficientemente convincente para llamar la atención y resaltar sobre la gran comunidad
de diseñadores.
t.4
El identificador como marca personal es una forma de venderse en el mercado, de utilizar
los conceptos de diseño para atraer clientes que de una u otra forma requieren del servicio
de un diseñador, y para esto la marca personal se basa en el principio diferenciador para
ser reconocido, no sólo por su trabajo, sino por un elemento que a nivel visual genere un
patrón de conocimientos y capte la atención de las personas para que estas lo recuerden y
mantengan en su mente.
h
h
5.7´
5.7´
ß= 150°, a
Si bien la marca debe ser algo sintético, abstracto y sobretodo simplificado, la marca
personal sobre todo debe tener elementos pregnantes para que sean lo suficientemente
singulares que permitan ser recordados, por esta razón se utiliza un elemento simbólico
en relación al tipo de trabajo y la metáfora utilizada como patrón diferenciador, en este
caso se utiliza un objeto que puede tener varias connotaciones y en particular, se asemeja
a las funciones de un botón, que si bien permite hacer un enlace, conexión o entradas a
datos está representando los valores del diseño de comunicación de una interfaz con otra.
3ml
2”
4”
6”
8”
10”
El identificador utiliza 2 tipos de composición, una con el fondo normalizado que tiene
connotaciones simbólicas y otra simplemente con la tipografía, así se utiliza una retícula
que comprende varios ejes y uso de formas circulares que para el caso de usarse con
el fondo tiene un tamaño que ocupa 1/3 de la figura triangular, y se usa un eje vertical
principal a 90 grados para unir los ángulos de la figura y la tipografía se mantiene al
centro, ya sea con el fondo normalizado o sólo con el texto.
Q(5,-4)
L
(o,b)(-1,b)(-2,b)(-3,b)
Se necesitaba una tipografía que tuviera características light dentro de la estructura, pues si bien se está utilizando un
logosímbolo, se tenía más peso en la figura, por tanto, la tipografía debía representar conceptos como ligero, versátil
y adaptación, elementos que tal vez no lograría con una tipografñia pesada, por tanto se utiliza la Klavika en versión
light e itálica, dándole mas singularidad y estilo a la marca.
A(1,7)
B(3,2)
Ω
β
2”
½
La idea de transmisión y conexión requiere de elementos bastante angostos y visiblemente
delgados, que se asocien con movimiento y estructura, por tanto, se debía mantener
pesos visuales lo suficientemente proporcionales respecto al espacio para no saturar de
información y conservar un diseño limpio y directo.
G
D
ts
α2
α1
θ
F”
El uso de esta paleta cromática se debe a la seriedad y responsabilidad del trabajo, si bien no se está hablando
de una marca dirigida a adultos mayores, se pretende usar una marca que abarque cualquier campo, ingenieril,
diseño, construcción, industrial, etc. La paleta se disminuye a los colores básicos blanco y el negro, para contrastar
con elementos particulares de la identidad con un color azul, asociado con la tranquiliad y tecnología y así poder
transmitir una composición ordenada y sobria.
F”
100% 80% 60%
% Porcentajes cercanos al negro
% Porcentajes cercanos al blanco
La gráfica complemtaria está asociada a los términos de estructura,
organización y sobretodo con la conexión y transmisión de ideas, por eso
sin saturar el sustrato y el espacio visual se utiliza una gráfica sobria y
lineal.
h
.(3.-2)
Para obtener una marca personal que fuera particular y singular en términos de diseño, se
utiliza un elemento como fondo normalizado, que sin embargo puede estar o no dentro de la
composición, por esta razón igualmente se hace un estudio en sus versiones originales donde
se puede notar que la marca está diseñada para aplicarse en cualquier formato.
r,
VZ
3
2
2”
3”
x o
y
Igualmente para la marca personal se contemplan las piezas gráficas que
usualmente se deben tener para crear el sistema de identidad visual, manteniendo
unidad, orden e integración del concepto gráfico en las aplicaciones.
CH2 H2 HO2
a
b
c
d
En la ciudad de Bogotá, se cuenta con un sistema de transportes masivo llamado
Transmilenio, un servicio que desde hace varios años ha mejorado y desvirtuado la
vida de muchos ciudadanos. Sin embargo, es necesario utilizar las bases del diseño para
intentar educar y culturizar a los usuarios de este transporte a través de materiales
impresos y en general con avisos informativos donde se pueda transmitir conocimientos
acerca del uso de este transporte.
B A
ß
C
17X
72”Z
W
Y
La idea de diseñar este material impreso, es ilustrar un poco la cruda realidad que viven
los usuarios de este transporte, por esta razón, se acude a una historieta hiperbólica,
que a través de una secuencia de pasos, instruye al lector de cómo se esta utilizando este
sistema de transportes para crear conciencia entre los usuarios.
240
b
g
Para este instructivo, se utiliza una retícula arbitraria, en donde se da jerarquía a la
ilustración que si bien no utiliza el color por cuestiones de productividad en impresión,
si se utilizan tamaños más altos y se reduce el texto al máximo para captar la atención
sobre las ilustraciones y recrear la historia a través de elementos gráficos.
v
O8 .0
65°
y
x
(-1,0)
(-1,-15)
(-4,-5)
(-1,15)
(-20,25)
(-4,25)
recom-post.de
+
Utilizando una tipografía sin serifas, se logra un material claro, sencillo y directo, que comunica a través de elementos
icónicos, manteniendo una composición visual de puntajes altos en los títulos y pasos, que a una distancia considerable
se pueda leer sin perder legibilidad.
El diseño de infografías para el sector periodístico e informativo es vital, por sus contenidos y por la forma en que
la información se convierte en diseño, una comunicación atractiva y directa que sin necesidad de utilizar bloques
de textos, acuden a la ilustración. La ilustración es el mejor recurso informativo para desplegar la información de
manera que esta pueda ser leída fácilmente y llame la atención del lector en cualquier ámbito (web o impreso).
ts
e
in
Q
R
T
En el campo editorial se ha mantenido el uso de tipografías serifadas, sin embargo, con el diseño de infografías es el
contexto quien define cual es la mejor opción. En este caso, al tratarse de un tema tan moderno, actual y deportivo, se
utiliza una tipografía Palo seco, que se complementa mejor con el contexto del tenis y que tiene una comunicación directa
y clara con los usuarios, manejando diferentes pesos y aplicaciones.
Loading ...
b5
b8
K
M
G
r
La gama tonal está basada en una paleta cromática variada, colores cálidos en su mayoría para resaltar la
ilustración del texto de fondo, utilizando contrastes de color con tonalidades altas hacia los elementos que requieren
mayor fuerza visual con tonalidades bajas hacia loa extremos del impreso, así mismo para resaltar el texto, se utiliza
un color neutro pero visualmente atractivo como el azul sin interrumpir la lectura ni causar distracción entre los
elementos gráficos utilizados en la ilustración.
b8
Para romper un poco la centralidad de la mayoría de impresos debido al formato, se acude a una retícula modulada
en 5 secciones horizontales, donde el título ubicado siempre al inicio lleva el mayor puntaje y haciendo referencia a las
composiciones de páginas web se deja una columna de subtítulos hacia la izquierda para que lleve el orden de lectura
de izquiera a derecha, manteniendo el espacio visual más reducido para enfocar la atención hacia las ilustraciones y
los textos complementarios.
o
4 4 4 4
K
y´
x´
