(mi) Porta / folio
迎您
Andrés Felipe Rozo García Diseñador Gráfico
ANDRO
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.
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.
Andrés Rozo solution@andro-d.com
Experiencia - Gráficas Colorama - Compuclub - Universidad Jorge Tadeo Lozano
(57) 3158456617
Andrés Felipe Rozo García
Educación - LICEO DE CERVANTES “EL RETIRO“ Educación primaria y secundaria
Ima- gina (ci,ón) Experto
Creati / vi (dad) Profesional
Bueno
Soft(wa)re
- UNIVERSIDAD JORGE TADEO LOZANO Diseño Gráfico
Cursos y Habilidades
- Magister Systems Action Script 3.0
- Universidad Jorge Tadeo Lozano Suite Adobe
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
= 3,1416 f(x)= x+1/ y
lab
1234567890
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.
Multimedia, Interfaces, Sitios Web
Estudio 1:
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)
Vectores, infantil, realista
Estudio io 3:
ILUSTRACIĂ“N TRAC
C贸mo sobrevivir a transmilenio 胃= Ilustraci贸n
La marca del tenis 胃= Ilustraci贸n
Identificadores, logos, redise単os
Estudio 2:
IDENTIDAD VISUAL
O
30 años PCA � = Rediseño
RIO +20
∑∞ = Identificadores
Interactive Design
Andro Design
∑∞ = Identificadores
Fanny García
∑∞ = Identificadores
n(n+3)
n(n+2)
n(n+1)
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.
f(x)= interfaz²
(v1,v2)
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.
L
p3
p1 M
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.
p2
(b∙h) 2
(a+b+c)
mov ¼
K
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.
11x 1x
1½x
1x
½x
3x
1½x
2x
1½x
=x
1x
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
Color base r= 0 g= 0 b= 0
r= 167 g= 31 b= 35
Gradación de color rojo insignia de la segunda guerra
eje central
a
b
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.
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
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
Menú principal
acceso a la información, sin necesidad de utilizar dispositivos especiales. La propuesta diseñada maneja un lenguaje Botones
que es común para cualquier usuario.
Imágenes Scroll
v, 3
Vínculos de textos
v,4
v, 2
m”
v, 1
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
x
referente
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.
significado
z
significante
y
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.
pl
0
15
30
5
4
Multimedia + Interactivo Tecnologías web
O
3
2
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
1
resultado en pantalla
estrategias de aprendizaje.
x 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
H
Naciones Unidas se crea este proyecto experimental que
T
consiste en el diseño y desarrollo de una aplicación móvil
M
para la conferencia de la UNCSD que se llevará cabo en
L
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
o
z
y
p
s
o
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.
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.
a+/(c²∙∞)
Sostenibilidad en los productos medio ambiente
Rio de Janeiro 2012
x= 2x+ x - (y -3)
Schedules Mayo 2012 Sun Mon Tue Wed Thu
Fri
Sat
y= x 2
≥ 90°
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.
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ÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz (<>)""'“”
Helvetica
(rounded)
6
pt s
8
pt s
10
pt
s
12
pt s
14
pt s
16
pt
s
=
familia Sans-serif
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
Titulares= pts
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.
(pesos visuales) puntaje tipográfico ejes de composición
/ mayores
J
COLOR RGB
D
R. 192
R. 247
R. 154
G. 206
G. 172
G. 216
B. 0
B. 0
B. 0
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.
C
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°
4°
6°
8°
10°
12°
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.
�-2
2”
r
∆= click + 6(links)
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.
b
f
i
sen(0) cos(0)
t
l
h
pts - px- resolución (interlineado) + equilibrio
50 40 30 10 20 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.
50
40
10 20 0
30
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
Educación Interactivo Niveles Aprendizaje
0,1
x
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.
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
50 50 40 40 30
ejes x
30 20 20 10 10
0
x∞5
x∞4 pts/ px
x∞1 x∞2 x∞3
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
≥90◦
x-1
px
x⁴
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.
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.
Desaturación CONTRASTE 1
R
G
B
R
G
B
R
G
B
110
80
75
30
50
55
215
255
250
150
85
85
75
125
130
165
225
230
200
115
115
90
175
170
90
160
200
n+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
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.
90 80 70 60 50 40 30 20 10
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≈ referente
<0
P
M
significado
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.
45˚
d-v(4)
w= u-v 2,2
R(w-w1)
cos 60◦
l-2
l-1
Niveles de Inglés ∆= interactividad
l-3
u.v
El resultado de esta aplicación resulta ser una multimedia
x
salir
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.
maths
Literatu
re
history
0
vida para muchas personas que viven allí, no sólo son una fuente importante para la economía de ese país sino que
-4
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
conocimiento de los negocios en distintos lugares para que las personas busquen por internet y se enteren de los
0
restaurantes que están al alcance de sus posibilidades.
Nantucket / Mass 20
0
o por correos voz a voz. Con la ayuda de la tecnología aparecieron las páginas web, que han impulsado el -2
-6 0
El negocio de los restaurantes en lugares exóticos y espacios vacacionales en Estados Unidos ha sido una forma de
y
2
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,
1
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.
-2
ax-/(r+t)
+ +
+
Club Car Restaurant
e Web site 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 shop
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.
e-commerce w b
4”
s=K
(retícula) ² / modulación espacio - equilibrio
�∙r
+
W=k
wd² l
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.
uv⁴ w²
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
y= x+x²
r
Q3 a+b
y
u
Q⅝
F1
130°
120° 4
F2
P= eje principal x+y-(a²)
T H E C L U B C A R 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.
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.
160
140 6” 120
100
80 + 60
40
20
70%
30% R(1)
G(2)
B(3)
50%
Enl(a)=ces
Estructura / Neuronal
>90◦
6x
m.1” ∞
3x
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.
y B(3,9) 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.
A(-1,7)
O
x imágenes-(links)⁴ z
0.1 + 3< x - menu y
(principal)
x
1930 -2011
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.
g w -x S
t
d
ø
Y c
œ D
X
r
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.
O
J
a
⅝ H
clase
id
G
CSS
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.
X html / CSS
1” 4
1
3
+
Z
+
0
P
A
h
β
d
C
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.
U
función
CH2
H2
HO2
Q
G
f(x)= agilidad + procesos K
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.
-1
(i) v=f (u)
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.
E
(i) u=f(v)
f
“ D
”
eje principal
A1
c A2
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
b æ
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
A
limpia, ordenada y equilibrada en pesos visuales.
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. 8,3x
= 1x 7,8x
10,1x
1,4x
1,5x 31,1x
45◦
y
l
M
B(-3,2)
80 60 40 20 0
A(1,7)
P´
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.
80
F 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.
r
r
P
A= r
r
r r
b-c
f(x)= a+
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
acceso principal del panel
Ø r Sl
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.
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 <ht
ml
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.
b
a
6˝
o
</h
tml
>
Los usuarios de esta aplicación son ejecutivos dedicados al sector de la ingeniería y
B
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.
0 5”
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 = 1 2.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.
0
G F
bienes + servicio
a.segura(dos)²
h
r
a
i s
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
x
interfaz.
q
R
k
P
y
18 ml
16 ml
14 ml
12 ml
10 ml
8 ml
6 ml
4 ml
+ 2 ml
El uso de la tipografía para esta web es bastante limpio y ordenado, utilizando la helvética en sus diferentes calibres, 0
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.
web site
β
AB
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
A d
R
para evitar confusiones o distracciones. Los iconos cumplen una función de referencia para encontrar la información más rápido.
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”
P(x,y)
Q(x´,0´) R´(0´,y´)
x w1
Q(x,0) w2
O
Hexadecimal #23B0DC
w3
Y 5
w5 w4
R G B 35 175 220 C M 70 10
w0
K 0
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.
12.0
h
48°
41°
y
16
y 16
(-8,-8√3)6
Q
(-4,.3)∞
x x
W
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.
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 E
que están establecidas en el conocimiento global de las personas para que no se generen F
confusiones ni interpretaciones sobre los elementos que allí se presentan.
Asis.ten(cia)
Chat⁴
H S(a+b+c, b+d) G
C [Asegurador]⁵ B
A
Hogares
Autom viles
Personales
Negocios
y= 2y +3
y
0 x
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.
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 7 6 t
5 4 3 2 u y
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.
ø
P1(x1,0)
x1
P2 (x2, y2)
β 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
X
correo personal.
5´
AK
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.
nP2
nP1
∙x
h
b
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.
Aa
f(x)
2”
œ
y
o
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
a (2,1)
x
y (a, 2a+3)
y= 2x +3
A
a
P(a,b)
(a,0)
x
B
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.
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.
RGB
W
√
x>y2
∞
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
g
estructura utilizada para la aplicación es lineal en donde aparece una barra superior
b
que identifica la herramienta utilizada y un enlace al menú principal. v
∞
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.
[carga * sec ] = 5.5 secs/ minuto
30 ยฐ x= tan/ cos + sen
Imรกgenes Animaciรณn
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
T
a
b
M
J
0
Q
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
2
1
3 10
5
7
9
11
12
8
4
6
∑=
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.
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.
19
(9,12)
5”
Pv
H
Pv
Derechos de imagen reservados a sus respectivos dueños (1,4)
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.
x-x▪�
>90°
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.
∑
k=1
aK
y
⅛K
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.
2�
4
Akzidenz GROTESK - Condensed - Extended - Ligth - Regular
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.
[ - C , C + 2� ]
B
L F
K
M
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.
-36°
75°
y
2
1
x
3
R
G
B
R
# 1D4954
G
B
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.
(ii)
∞ : a h
k
O
ø`
[a]
P (a,b) Q
P
Ä ⅝
R
{a-b} ½
C
Para el diseño de esta interfaz, se tuvo en cuenta el grupo objetivo que estaría utilizando la a
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
∂ B
recursos para vincular los niveles de la interfaz. A
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.
+ 2”
8”
4” 10”
+
C 12”
+ B
72´
14” 17˚ A
D
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
10 mi
(½-x)
(4,3)
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.
30 años
T
W
S
(w,t)
r G
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
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
z
tipografía paloseco que representa por sus terminaciones gruesas, la solidez que la empresa debe representar. y
x2 + y= 19
x (-√21, -2)
{4= (x-y)(2)}
(-2,1)
C A B
d(P, F´) D
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 (0,3)
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
W(0,b)
personal en la empresa y complementa el sistema de identidad. F´(-c,0) (-a,x)
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
Y
los valores que se quieren representar.
A(h,k)
B (h,0)
F(O,p)
paleta de color primaria C: 10%
R: 220
M: 90%
G: 65
Y: 100%
B: 40
#DC4128
C: 0%
R: 253
pantone: 1365 C
M: 25%
G: 197
Y: 60%
B: 120
pantone: 121U
K: 0%
#FDC578
K: 0%
C: 40%
R: 5
M: 60%
G: 0
Y: 60%
B: 0
X
#050000
K: 100%
R(0, y´)
P (x´, y´)
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. n1
m,5
∞
A2 ώ
A
a
b
C
12.60 d
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 g
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.
12.70
h m n
Y
y麓 2a
x麓 a
K
O
36°40´
o
Fondos de escritorio
-5
A
-3
B
0 1
C
6
D
U2 Aplicación web U1
x
F
x`
æ A2
A1 y
V= x3 - y3
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. Fondos Iphone
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. y
x
(a)
:y
(ii) (b)
>-11
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
Gráfica complemnetaria
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.
Versión anterior
Versión propuesta
Proyectistas Civiles Asociados
Q (x,0) o
P (r)
FC
Q
D(d,o)
A
3`
2`
1`
A1
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.
0,1
3,4
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 R (c,d)
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. S(a+c, b`d)
o
Q(a,b)
(1,1)
(6x+2y=0) x+
3y
=-
y 1
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.
x
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 h 3x - 3 <
{(x,y):y < 2x +3}
5x - y
+3
Tr
ac
kin
g
La tipografía utilizada contiene características gráficas que particularmente ayudan a transmitir los conceptos s Pt
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.
Ke
rn
ing
Kerning
Pts
Tracking
m=-
p=+
5 4
1 2
P1:
a
d
P:
t P2: G
1 2 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.
3
4
5
6
7
8
9 10
11 12
13
La idea de representar biodiversidad, intercambio y proposición a través del identificador, permitió utilizar una
2
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 (4,0)
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. M
r,g,
C
b
hexadecimal
Y
K # CDF12F
S 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. H h² - 4ac = 0
h² - 4ac > 0
12 - 2x
2”
4”
x
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
r
r ß
r
r1
(opp)
A
R
N
40˚ 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.
P
2
r
30˚
1
r
√3
ß
2
A
1
r
Web site. Portal informativo de ideas para reusar, reciclar y compartir.
y
∞
30 - x l1
x x
30
Montaje Etiqueta de botella.
45°
a b
ø
√2 - v
A 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
y
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
C
agregado como su propia identidad, para ofrecer mas servicios y productos hacia los
Ø°
clientes.
23° D
B
Q(a.b)
b
0
f(x)= x-2
¢ = 45˚
130
150
170
190
210
230
250
270
290
310
315˚
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.
330
350
370
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.
P (r)
FC
Q
D(d,o)
16 pts
14 pts
12 pts
10 pts
8 pts
6 pts
230m
230m
∆ 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
1”
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
2” ∂ 3”
márgenes del formato.
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.
Typeface DIN Pro
F`(c,0)
P(x,y) F`(-c,0)
{x}
B
20 mi
½” y
z
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.
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.
y = arctan √5
#6FCDE9
#25729A
#3DBCEA
CMYK 50,0,10,0 RGB 110,205,235
x = tan - x
CMYK RGB
65,5,0,0 60,190,235
#0F4A65
CMYK RGB
90,50,25,5 40,115,155
CMYK RGB
100,65,40,25 15,75,100
u-2
AB
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. 16 2�
S”
C
{ 36˚ 40” A
B (a2J)
θ (a1,a2) 40%
a2 ß
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 θ >x
>x+2
>x+y
>x+?
>x+x½
y
x
(AC)2 = (72) +40
ABD= 90º
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.
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
h
mantengan en su mente.
h
t.4
5.7´
ß= 150°, a
5.7´
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.
10” 8” 6” 4” 2” 3ml
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.
L
Q(5,-4)
(-3,b)
(-2,b)
(-1,b)
(o,b)
Ω A(1,7) ½
β
B(3,2)
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.
2”
G
s
t
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. D
F”
θ
α1
α2
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.
% Porcentajes cercanos al blanco
% Porcentajes cercanos al negro
100%
80%
60%
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.
.(3.-2)
h
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.
Z
V
r,�
3” 3 2
2”
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.
b a
d
c
y
CH2
H2
HO2
x
o
C
ß
B
A
W
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
Z 72”
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.
X
17◦ 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◦
y 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
65°
O8
g b
.0
x
(-1,15)
(-1,0)
(-4,-5) (-4,25)
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.
(-1,-15)
(-20,25)
recom-post.de
+
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).
t
s
R
Q n
i
T
e
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.
b5
b8
G
r
� K
M
Loading ...
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.
y´
K
x´
o 4
4
4
4
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.