Issuu on Google+

Л

Ǿ

С

Э

Й

Ѵ

Ф

ß

Ң

П

Ө

Э

P

O

С

R T A

F

O

L

I

Ǿ

O

Ғ

Л


/ /

d

e

r

e

c

h

o

s

/ /

Los trabajos expuestos en este portafolio, pertenecen a Mateo Flórez Piña y corresponden al desarrollo académico y laboral de los últimos años. Certifíco mi autoría en cada uno de ellos. Su compilación es estrictamente documental, la cual pretende evidenciar los procesos conceptuales y gráficos como los resultados obtenidos por el autor para los proyectos. Tanto este portafolio como su contenido 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 ©2016 En los proyectos realizados en colaboración con terceros, se especifica su participación y se comparten los derechos morales con cada uno de ellos.


MATEO FLÓREZ DISEÑADOR VISUAL

{observar,

entender y crear}


I

Observar con fascinación, observar las formas y los colores, el movimiento y el espacio. Tal vez de los primeros acercamientos que tuve con el diseño y sin duda lo que me cautivó de él. Sin saber muy bien lo que era, sabía que era lo que quería hacer. Empecé entonces a observar cuidadosamente para aprender, me centré en los detalles que antes pasaba por alto, esos mismos que hacen que lo corriente sea extraordinario.

II

Entender con asombro, entender la composición y su estructura, el fundamento y la intención, entender el porqué. El diseño va más allá dela forma, la problemática que este pretende resolver necesita de un proceso de conocimiento, comprensión e investigación. Esta estructura invisible es la que sostiene un buen diseño. Entenderlo y aplicarlo me ha enriquecido como diseñador, su importancia me ha llevado a salir de mi zona de confort y a ampliar mi visión del mundo.

III

Crear con pasión, imaginar y soñar, plasmar lo que mis sentidos me transmiten y mi imaginación construye, transformar ideas, hacer visible lo invisible; diseñar, rayar, borrar y volver a rayar, de día y de noche. Crear como la primera vez que tomé un lápiz y dibujé sobre un papel.


{ u no}

fig 1

r e s t a u r a n t e a l t i p l a n o

pรกg

1 0

fig 2

{ d o s} s i e r r a d e

n e v a d a

s a n t a

pรกg

m a r t a

2 2

fig 3

{ tr e s} e l

s a n t o

pรกg

b a n d i d o

3 4

fig 4

{ c uat ro} v e i n t i c u a t r o e n

h o r a s

c o l o m b i a

pรกg

4 6


fig 5

{ ci nco} s i n e r g i a

pรกg

56

fig 6

{ se i s} p l a n

d e

pรกg

a c c i รณ n

6 8

fig 7

{ s i e te} b r a i n i f y

pรกg

7 8


{uno}

i d e n t i d a d v i s u a l


Pr oyect o r ea l i z a do j u n to a: A n drĂŠs Matiz

b

a

c

fig 1 r

e

s

t

a

u

r

a

l

t

i

p

l

a

n

t

a

n

o

e


fig A

¿ a

l t

q

u

é

e

i

p

l

a n

s o

?

con las raíces de una ciudad rica y única en cuanto a cultura y tradiciones se habla. Altiplano nace como una oportunidad para las personas de sentir la experiencia de la Bogotá de antaño y así mismo mantener viva una identidad que poco a poco se vuelve más distorsionada.

12

Altiplano es un restaurante ubicado en la capital

El objetivo con el proyecto fue potenciar el

de Colombia y precisamente su concepto se rige

concepto base del restaurante, convertirlo en un

por servir comida tradicional Bogotana. Ubicado

sitio donde se viviera una experiencia desde los

en una zona vistosa y concurrida de la ciudad, el

cinco sentidos, que le permitiera al usuario viajar

restaurante pretende transmitir una experiencia

a la Bogotá cachaca, que por medio de su historia,

tradicional, típica y puramente “cachaca” desde

cultura y costumbres, marcó varias generaciones

lo culinario, comprometiéndose de esta manera

en la historia de la capital.


{ uno } r e staura nt e a lt i pl a no

: : a l t i p l a n o

e s : :

Clรกsico

Artesanal

Familiar

13


fig B

¿Cómo aprovechar el concepto para potenciar la experiencia bogotana y llevarla más allá de lo culinario? Esta fue la pregunta de donde parte el desarrollo del proyecto. Se tomó la idea principal que llevaba consigo un gran potencial y se empezó

{la

experiencia

a trabajar desde ahí. Se propuso un nuevo enfoque que permitiera abordar desde distintas direcciones

cachaca}

el concepto para aprovecharlo al máximo. Los cambios fueron más allá de lo formal en el diseño y se hizo énfasis en el discurso y contenido que transmitiría cada pieza, pues con cada una se brinda una “experiencia cachaca”. Generando experiencias únicas en el usuario, se buscó posicionar transitoriamente el restaurante en la cultura culinaria y cultural de la ciudad.

14


{ uno } r e staura nt e a lt i pl a no Los ornamentos basados en la arquitectura colonial como sĂ­mbolo referente para la construcciĂłn de la grĂĄfica del restaurante.

15


como en casa

fig C

Con la elección de la paleta de color se quizo evocar una calidez nostálgica, que llevará al usuario a recordar lo que era la experiencia de comer en la casa de sus antepasados. Un rojo carmesí combinado con color crema que transmite lo artesanal y lo clásico de la Bogotá tradicional. Colores que se encuentran en viejas fotografías y la arquitectura del pasado. Esta paleta transmite inmediatamente la calidez de un lugar especial, familiar y cómodo, ideal para reforzar el concepto del restaurante.

16


{ uno } r e staura nt e a lt i pl a no

sepia ClĂĄsico, familiar, aĂąejo

rojo Artesanal, hogareĂąo, calido

17


18


{ uno } r e staura nt e a lt i pl a no El lenguaje cachaco fue importante para darle personalidad al discurso del restaurante y de esta manera generar una experiencia puramente Bogotana.

19


Identificador

Ąa

Ăa

>

aleo

regular

regular

josefin sans

Cuerpos de Texto

à cooper hewitt

bold

Ð

>

ß

>

semibold

medium

// t r a d i c i ó n t i p o g r á f i c a //

20

>

Ø book

>

Þ light

A

fig D

Para la elección de la tipografía se tuvo en cuenta

características y se plasmaron en el logotipo para

una gran variedad de referentes y se hizo una

transmitir la sensación de modernidad dentro del

investigación visual de lo que eran los letreros

concepto clásico que maneja el restaurante. La

de los restaurantes y sitios emblemáticos de la

tipografía utilizada para las textos de lectura es

ciudad en la Bogotá de los años 40 hasta los 70, se

uña palo seco moderna que permite legibilidad y

encontraron manejos de rotulación manuales con

lecturabilidad pensando en la gran información

tipologías egipcias o palo seco. Se tomaron estas

textual que se le iba brindar al usuario.


{ uno } r e staura nt e a lt i pl a no Las historias contadas en cada pieza brindan al usuario una experiencia cachaca, de la cultura de la ciudad y sus memorias.

21


{dos}

i d e n t i d a d v i s u a l


Pr oyect o r ea l i z a do j u n to a: A n drĂŠs Matiz

a

b

y

x

c fig 2 s d

i e

e

r s

r a

a n

n t

a

e

v m

a a

d r

a t

a


¿

q

e

s

de Santa Marta es un parque eco turístico

l

a

ubicado en el caribe Colombiano, caracterizado

s

i

u

e

é

r

El parque nacional natural de la Sierra Nevada

r a

?

principalmente por la enorme riqueza cultural y natural que allí se puede encontrar. En este vasto terreno que se extiende ascendentemente, se encuentra una biodiversidad única debido a la gran variedad de ecosistemas que allí nacen, provenientes de los distintos pisos térmicos que existen, encontrando pluralidad de especies animales y vegetales. Sin embargo, uno de los

fig A

elementos más destacados que posee el parque es que este territorio es la cuna de las culturas indígenas más importantes del país.

24


Diversidad

-

s i e r r a

e s : :

Naturaleza

-

Patrimonio

{ do s} sie r r a ne va da d e s a nta ma rta

: : l a

25


::patrimonio n at u r a l : :

Se empezó por realizar una investigación exhaustiva de lo que era el parque en todas sus dimensiones, conocer su principal objetivo, que lo hacía diferente de otros parques y pensar en las personas, tanto en sus trabajadores, habitantes y usuarios a los cuales iría dirigida la comunicación. Primeramente, para crear un sistema gráfico, que permitiera dar a conocer las actividades del parque y las bondades que ofrece, impulsando así el turismo. En segunda instancia, el objetivo fue generar conciencia en el usuario que le permitiera reconocer por medio de las piezas y la experiencia la importancia del parque en todos sus niveles.

fig B 26


27

{ do s} sie r r a ne va da d e s a nta ma rta


fig C

Se escogió una paleta de color variada pensando principalmente en la biodiversidad del parque, más específicamente en su diversidad climática. Al tener

diversidad c ro m át i c a

varios pisos térmicos distintos, cada color representa cada uno de los climas y sensaciones que estos transmiten y permite comunicar y diferenciarlos entre sí de una manera visual elocuente. El uso de transparencias de color se propone para mostrar la variedad de ecosistemas en un mismo espacio, sobreponiendose unos a otros de manera transitoria en el espacio.

28


amarillo Fauna y poblaciones indígenas

{ do s} sie r r a ne va da d e s a nta ma rta

rojo Zonas cálidas y desérticas

azul Fuentes hídricas y nevados.

verde Diversidad de Flora

29


30


{ do s} sie r r a ne va da d e s a nta ma rta Los pictogramas representan la diversidad de bondades y actividades que brinda el parque y son visualmente fรกciles de reconocer.

31


La fotografĂ­a ancla el significado de diversidad cuando se junta con los demĂĄs elementos formales, generando un sistema grĂĄfico potente.

32


Ãâ

>

Ąã ubuntu

viga

regular

{ do s} sie r r a ne va da d e s a nta ma rta

Identificador

regular

Cuerpos de Texto

à ubuntu

>

bold

Ð medium

>

ß regular

>

Ø light

// u n i da d t i p o g r á f i c a // La tipografía seleccionada es un apoyo visual al identificador, potenciando la idea que se quiere dar en los rasgos formales del mismo y el concepto que hay detrás de estos. Es una tipografía

A

contundente que cumple su función de ser llamativa

fig D

e identificatoria para el parque. Para los textos se escogió una tipografía que permitiera al usuario una fácil lectura a la hora de consultar distintos tipos de información dentro de la comunicación interna y externa de la institución. 33


{tres}

i d e n t i d a d v i s u a l

34


y

a

b

x

z

c fig 3 e

l

s

a

n

t

o

b

a

n

d

i

d

o


¿

q

e

l

b

a

n

u

é

s

a

d

e i

n

s t o

d o

?

fig A

El santo bandido es un producto proveniente de Estados Unidos de salsas picantes, el cual piensa ser distribuido después de su lanzamiento por tierras americanas, principalmente en los estados del sur del país. La marca ofrece una notable variedad de salsas con distintos sabores y tipos de picante. De esta manera buscan posicionarse exponencialmente en este mercado. La marca está basada en el impacto de la cultura mexicana en Norteamérica.

36


{ tr e s } el s a nt o ba nd i d o

: : e l

Extrovertido

s a n t o

-

b a n d i d o

Alegre

-

e s : :

Amistoso

37


Se estableció una problemática en la que se tenía

n p

u i

c

e

v o

a

n

t

,

que competir con productos establecidos y con

e

y o

r

i

g

más tradición en el mercado. Sin embargo esto mismo fue una ventaja, pues se observó que los patrones gráficos de la competencia obedecían a

i

n

a l

una estética desactualizada. Para la marca, se optó por una gráfica potente y moderna que permitiera al producto destacarse visualmente en primera instancia. Después de un proceso de investigación se planteó un trabajo de ilustración presente en el

fig B

identificador y la gráfica complementaria en el que se destacaron elementos de la cultura mexicana, plenamente reconocidos por un usuario americano.

38


{ tr e s } el s a nt o ba nd i d o La variedad de colores y elementos permiten transmitir visualmente el impacto de una cultura amplia y diversa como la mexicana.

39


sabor en el color

En la búsqueda de generar una gráfica potente se generó una paleta de color amplía que abarcará varios elementos conceptuales de la marca. Principalmente están presentes colores vivos representativos de la cultura mexicana que a su vez representan los distintos sabores del producto. Estos se combinan con una segunda paleta de color compuesta por colores terracota que potencian lo artesanal del producto.

40

fig C


{ tr e s } el s a nt o ba nd i d o

colores vivos Moderno, Mexicano

colores terracota Artesanal y natural

41


A

fig D

¡ VIVA M É X ICO !

Se planteó desde el principio la rotulación como recurso para el objetivo de la marca, esto permitió lograr un identificador potente y moderno que jugara con las ilustraciones de la marca. Se quiso además romper los paradigmas gráficos que se encuentran en este tipo de productos en el mercado. Logrando un factor diferencial en El Santo Bandido. 42


43

{ tr e s } el s a nt o ba nd i d o


44


{ tr e s } el s a nt o ba nd i d o La ilustraciĂłn para transmitir lo extrovertido de la marca, pensando en un pĂşblico jĂłven y moderno.

45


{cuatro}

e d i t o r i a l

46


x

b

a

c

f

d e y fig 4

v

e

i

n

t e

i n

c

u c

a o

t l

r o

o m

h b

i

o a

r

a

s


¿ v

e

i

q

n

t h

e

n

c

u

i c o

o

é

e

s

u a t

r

a s

l o

m

b i

r o a

Este libro compuesto por algunas de las crónicas del importante escritor y periodista Colombiano Alberto Salcedo Ramos, pretende darle una mirada introspectiva a la violencia en el país. Historias reales que suceden a cada hora y en cada rincón de Colombia que no llegan a ser documentados por el periodismo nacional y que llegan a tener en ellas la crudeza, el drama, y la dureza propia de un país constantemente golpeado por el olvido.

fig A

48

?


{ cuatro } ve inticuatro ho ra s e n co l o mbi a

: : e s t e

l i b r o

e s : :

Reflexivo

Honesto

Crudo

49


{imagen + pa l a b r a }

Se escogieron relatos que lograran un hilo narrativo elocuente, y que a pesar de tener historias distantes, hiciera que el libro se sintiera como un todo. Teniendo unas crónicas contundentes se planteó un discurso entre las imágenes y los textos logrando potenciar cada frase y cada palabra del libro. Cada detalle enriquece el libro, pretendiendo que el lector sintiera una experiencia robusta a la hora de su viaje a través de los relatos. 50

fig B


{ cuatro } ve inticuatro ho ra s e n co l o mbi a La huella como marca duradera. Concepto base para crear el discurso entre relatos e ilustraciones.

51


Las ilustraciones nacen bajo el concepto de las huellas que deja la violencia en todas sus dimensiones y

la huella

que marcan a todo el entorno involucrado. lugares, personas, sus vidas, su pasado y su futuro. La combinaciรณn del rojo y el negro que prevalece en ellas refuerza el concepto cultural, del miedo y sufrimiento que conlleva la violencia.

fig C

rojo Sangre, Violencia

negro Oscuridad, Desesperanza

52


{ cuatro } ve inticuatro ho ra s e n co l o mbi a

A

fig D Identificador + Títulos

Ãâ oswald regular

Cuerpos de Texto

à latin modern roman

medium

>

Ø regular

53


54


55

{ cuatro } ve inticuatro ho ra s e n co l o mbi a


{cinco}

e d i t o r i a l

56


Pr oyect o r ea l i z a do Ju n to a: Lau ra Martín ez Fot og ra f í a s po r: Lau ra Martín ez

y

a

b

x

z

c ø fig 5 s

i

n

e

r

g

i

a


Sinergia es un proyecto plasmado en un medio editorial que busca comprometerse y ser una voz para unas de las comunidades más atacadas

s

en nuestro país, la comunidad lgbti. La revista

¿

q

u

i

n

e

é r g

e

s

i

a

pretende crear acción en las personas que integran

?

esta minoría. Por medio de artículos, opiniones, imágenes, eventos entre otros se piensa crear un sentido de pertenencia en las personas para que se unan, alcen la voz y actúen para lograr un futuro incluyente y tolerante.

fig A

58


{c i nco } s i nerg i a La definiciรณn de la palabra sinergia reune en ella el concepto del cual se desprende el discurso y el desarrollo de la revista.

: : s i n e r g i a

e s : :

Uniรณn

Voz

Informaciรณn

59


// s e n t i d o

de

p e rt e n e n c i a //

Se pensó una pieza que trascendiera el acto de ser leída y se convirtiera en un diseño que representara e incentivara un cambio de actitud hacia una realidad, que en este caso fue, la problemática de una comunidad atacada y el miedo a ser reconocido como parte de esta por los tabúes existentes en nuestra sociedad. Se creó un proyecto que fuera una voz para las personas lgbti que promoviera en ellos, un sentido de pertenencia por la comunidad, que se apropiaran de la situación para que se sintieran identificados como pieza clave para el desarrollo de un mejor futuro para esta. Se sintetizó entonces, todo el concepto de la revista por medio de un discurso sólido tanto en diseño como en la selección del contenido y su mensaje global.

60

fig B


61

{c i nco } s i nerg i a


fig C

gama sinérgica

Se escogió una paleta de color reducida pero muy potente que lograra un impacto en el usuario. Esto le permite a la revista relucir y destacarse en el contexto en el cual se movilizan estas piezas editoriales. De igual manera se pretende que el color interactúe de múltiples maneras con los elementos a su alrededor, potenciando el resultado gráfico de la revista. 62


{c i nco } s i nerg i a

magenta Fuerza, poder

negro Agresividad, lucha

63


Elementos agresivos en medio de un diseĂąo limpio que inmediatamente llaman la atenciĂłn y generan sensaciones fuertes, contundentes y poderosas en el lector.

64


{c i nco } s i nerg i a

Identificador + Títulos

äÔ farray regular

Cuerpos de Texto

à cooper hewitt

bold

>

Ð

>

semibold

::palabras en acción::

ß medium

>

Ø

Þ

>

book

light

A

fig D

A pesar del diseño limpio y cuidado de la revista, en ciertos segmentos de las composiciones tipográficas existen elementos que interactúan entre sí para transmitir agresividad. Esto para reforzar el concepto de la generación de acción y sinergia en la que se basa la pieza. A pesar de esto, no se deja de lado la funcionalidad que tiene como principal objetivo ser legible para el usuario. 65


66


67

{c i nco } s i nerg i a


{seis}

e d i t o r i a l

68


∞

x

z

a

b fig 6 p

l

a

n

d

e

a

c

c

i

Ăł

n


fig A

¿

q

u e

p

l

a c

é

s a

t

s

d

e

n

?

e

n

c i

e

ó

El proyecto es un encargo de una serie de piezas editoriales proveniente del ministerio de cultura de Colombia y la dirección de poblaciones en el que se quiere dar a conocer el plan de acción para poblaciones afrocolombianas, negras, raizales y palenqueras. En la celebración del decenio de los afrodescendientes. Se quiere dar a conocer por medio de una serie de piezas el resultado final de las negociaciones por parte del estado y las comunidades que buscan satisfacer las necesidades de los grupos étnicos involucrados, a nivel nacional e internacional. 70


{ se i s } pl a n d e acc i รณ n

: : e s t e

p l a n

e s : :

Cultural

Inclusivo

Informativo 71


{conocer + comunicar}

El principal problema radicó en la complejidad y la tecnicidad del tema que se abordó y cómo hacer que esto no impidiera crear un sistema de piezas atractivo y agradable de consumir para el usuario. Teniendo en cuenta el tipo de usuario al que se iba a dirigir, se propuso un diseño simple pero muy bien logrado en el que se creará un discurso entre imágenes y palabras que permitiera reforzar el mensaje de la pieza editorial. Desde la diagramación hasta la toma de decisiones de imagen y texto de potenció la comodidad con la que el usuario consumiría la pieza. 72

fig B


73 { se i s } pl a n d e acc i รณ n


i

m

p n

e

r o

n

g

r a

t a

fig C

Se escogiĂł una gama tonal sencilla que lograra un buen contraste y que fuera fuerte visualmente. El rojo y el negro representan la sangre y la tierra, haciendo ĂŠnfasis en la idea de que el mundo tiene una impronta de raza negra por donde se le mire y que esta es la riqueza cultural que resulta resonando en todos los continentes. El estilo de las ilustraciones pretende transmitir la idea de tierra, la mano de obra y las huellas provenientes de una herencia tanto cultural como genĂŠtica proveniente de la raza negra. Las texturas del fondo y las imperfecciones de los trazos apoyan la idea de este concepto.

74


{ se i s } pl a n d e acc i รณ n

rojo Sangre, herencia

negro Tierra, raza

75


76


77 { se i s } pl a n d e acc i รณ n


{siete}

d i s e Ăą o

78

d e

i n t e r f a z


b

x

y

a

c

fig 7 b

r

a

i

n

i

f

y


¿

q

e

s

u

Brainify es un juego para dispositivos móviles,

é

que tiene como principal objetivo potenciar las

b r a i n i f y

?

habilidades cognitivas de niños que atraviesan su etapa preescolar, además de mejorar paralelamente su atención y concentración. La aplicación tiene un “plus” pues no pretende ser un juego de memoria genérico pues por medio del aprendizaje de un instrumento, en este caso la guitarra; se generan distintas actividades para lograr el objetivo del proyecto.

fig A

80


Elocuente

-

Amigable

{s i e t e} bra i ni f y

: : b r a i n i f y

e s : :

-

Llamativo

81


fig B

En una actualidad donde los dispositivos móviles hacen parte del proceso de desarrollo de los niños,

{educación

se quiso crear una aplicación que además de entretenida, tuviera una función útil y educativa para los infantes. Teniendo en cuenta la libertad que

moderna}

tienen los niños para elegir entre una gran variedad de juegos en las tiendas de aplicaciones, se planteó una solución para lograr una interfaz atractiva, tanto desde lo gráfico como desde la experiencia.

82


{s i e t e} bra i ni f y El diseño de la interfaz pretende ser lo más sencillo posible además de llamativo, pensando exclusivamente en el usuario específico

83


energía + estímulo

fig C

Se escogió una paleta de color amplía y enérgica de colores llamativos que generará estímulos visuales a la hora de ser combinada, pensando exclusivamente en el usuario definido. La fuerza del proyecto cae sobre las ilustraciones y el diseño de personajes desarrollado específicamente para lograr empatía entre el usuario y la aplicación.

84


85 {s i e t e} bra i ni f y


Identificador + Títulos

Äâ geared slab

Cuerpos de Texto

avenir

Ã

>

black

Ð

ß

>

medium

roman

// l e n g ua j e n at u r a l // La tipografía escogida permite distintas composiciones las cuales llaman la atención y se complementan perfectamente con las ilustraciones, esta característica juguetona se basa principalmente en un lenguaje visual y tipográfico establecido que está dirigido especialmente a los niños. Sus características irregulares le dan un carácter enérgico a la interfaz sin perder legibilidad y la cómoda lectura del contenido. 86

>

Ø book

Þ

>

light

A

fig D


87 {s i e t e} bra i ni f y


w w w .m ate o f l o re z . co b e .n e t / f l o re z mate o


{gracias}

A todas las personas que han hecho parte de este proceso. El resultado de este enorme reto es el fruto del trabajo y la constancia en la cual estuvieron involucradas personas que me motivaron a siempre dar lo mejor de mi. Al cuerpo de profesores de la ujtl que acompaĂąaron mi formaciĂłn como profesional y a mis padres que siempre estuvieron presentes en todo momento, brindĂĄndome siempre su apoyo y amor incondicional.



Portfolio