Universidad Tecnológica de El Salvador Facultad de Informática y Ciencias Aplicadas Escuela de Ciencias Aplicadas “ing. Julio César Orantes” Área de Diseño Grafico
PORTAFOLIO DE EDUCACIÓN SUPERIOR. Titulo del Portafolio: Responsive Presenta: Br. Francisco Ivan Cruz Villalta Carne: 60-1297-2014 Docente Asesor: Lic. Rodolfo Antonio Tejada Ruiz
San Salvador 11 de Junio del 2016
CONTENIDO 01 portadilla -------------------------04 INTRODUCCIÓN -------------------------05 PERFIL DEL AUTOR -------------------------6-7 METODOLOGÍA -------------------------08 PANTONES -------------------------09 DESCRICIÓN DE SEPARADORES
-------------------------
----------------------------
01
INDICE
10-11 BRANDING 12-13 OSTUMA / DISEÑO DE MARCA 14-15 16-17 18-19 20-21
-------------------------Star Coffe / DISEÑO DE MARCA -------------------------CatWalk / DISEÑO DE MARCA -------------------------Lean machine / reDISEÑO DE MARCA -------------------------D’ tuza / DISEÑO DE MARCA
02 24-25 I love ny/ DISEÑO DE camapaña publicitaria
---------------------------------26-27 No al Abuso/ DISEÑO DE camapaña publicitaria ---------------------------------28-29 sweet&soft / DISEÑO DE campaña publicitaria ---------------------------------30-31 El limo / DISEÑO DE camapaña publicitaria
-------------------------
-------------------------
22-23 Publicidad
03 32-33 ilustración 34-35 Yumi/ DISEÑO de empaque
-------------------------36-37 Fruit sahmpoo/ DISEÑO de cubierta -------------------------38-39 MUUUU Leche / DISEÑO empaque -------------------------40-41 Mr. bread / DISEÑO de empaque
04 44-45 libro cuento / DISEÑO DE portada
-----------------------------
46-47 astrolote/ DISEÑO DE manual de maca ----------------------------48-49 Fotografía Bodegon / DISEÑO de revista ----------------------------50-51 LUCHA CON SABOR A DULZURA / diseño de LIBRO ----------------------------52-53 PUBLICIDAD QUE VENDE / DISEÑO De revista
60 61
CONCLUSIÓN -------------------------AGRADECIMIENTOS --------------------------
-------------------------
-------------------------
42-43 Editorial
05 54-55 diseño web 56 57 58 59
Sivarplay / DISEÑO DEpagina web -------------------------becool / DISEÑO DEpagina web -------------------------Francesco / DISEÑO DE pagina web -------------------------Francesco / DISEÑO DE pagina web
INTRODUCCIÓN
En la historia del diseño Gráfico se habla que nació a finales del siglo XIX desde esa fecha ha venido creciendo, de forma en que ha tomado un realce tan grande que hoy en día el diseño gráfico es algo apegado a la realidad de las empresas, personas naturales e imprentas es algo con el que se vive a diario el diseño gráfico ha tomado muchas formas desde su nacimiento, ha venido creando tendencias y modas, se ha llegado a introducir hasta en el Diseño de páginas web. Responsive El diseño web adaptable, adaptativo, conocido por las siglas RWD del inglés Responsive Web Design, es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarlas. Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, Tablet, Smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos. Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes. El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural. Es por ello que se tomó el nombre de Responsive tomando en cuenta las características del diseño plano aplicado al diseño web eso permite que sea un diseño oderno, limpio, y adaptable, el diseño plano es más que una tendencia el diseño plano ha venido a adaptarse no solo en páginas web si no que en logotipos líneas gráficas y publicidad.
4
PERFIL DEL AUTOR
Me considero una persona traba jadora, a mis 19 años en el 2009 me decidi por a traba jar como maestro de mantenimiento de computadoras, con dicha edad me consideraba una persona con pocas oportunidades pero en el transcurso de la vida aprendi muchas cosas ho puedo decir que son 7 años de laborar como docente de Informática, en la vida he aprendo muchas cosas relacionadas a la programación, Redes, Diseño web entre ellas el diseño gráfico y mi pasión desde un principio fue estudiar diseño, pero en el tiempo que anhelaba dicha carrera no habían muchas opciones, en el 2012 Egrese de Ingeniero en sistemas pero no decidí terminar el proceso de graduación por muchas razones, en el 2014 decidí estudiar diseño gráfico y aceptar el reto de estudiar esta segunda carrera. Me considero una persona capaz aportar nuevas ideas y darle la vuelta a los problemas que se me presenten, trato de ser alguien innovador, me gusta mantener un ambiente laboral agradable con las personas que me rodean y acepto cualquier tipo de crítica o idea acerca del proyecto sobre el cual se esté traba jando. Siempre estoy en búsqueda de conocimiento y crecimiento personal sobre cualquier área, y so solo de diseño, me parece que esto es fundamental para cualquier persona y es lo que muchas veces influirá en nuestras ideas y pensamientos sobre cosas, si hablamos de diseño gráfico, esto me parece más importante aún, pues desde mi punto de vista, las personas que nos dedicamos a esta área, como comunicadores visual que somos, debemos tener una perspectiva amplia y con bases sobre básicamente todo. Me gustaría que se me percibiera responsable capaz de afrontar retos, alguien que no tiene miedo a preguntar cuando no se sabe alguien que esta dispuesto a investigar mas haya de lo normal.
5
METODOLOGÍA
6
02 Analisis -------------------------
-------------------------
01 BRIEFING Herramienta que a través de la investigación proporcion la información de la marca, ademas es aqui donde se conocen los antecendetes, objetivos , el target al que se influenciar y todo lo que se necesita conocer. aparte que esto permite comunicar por medio de anuncios o campañas publicitarias.
04 desarrollo de propuestas -------------------------
-------------------------
03 conceptualización
Es el proceso donde se extienden los puntos más importantes , y luego se indaga y analiza la información depurada para lograr identificar la necesidad del cliente y su solución
Es la esencia para lograr una idea a transmitir, una idea realizable en un traba jo de diseño donde se realiza también la formulación estratégica de como proyectar mis habilidades y fortalezas para tener oportunidades.
04 Implementación -------------------------
-------------------------
03 elección
Es la etapa donde se pone en escena lo conceptual en forma gráfica, Estas propuestas están abiertas a adaptarse a nuevas tendencias del diseño ejemplo: Diseño 3D y multimedia.
Elementos gráficos que han conformado la esencia del portafolio, que han llevado a otro nivel de calidad y a otros estandarizados a calidad que ya existían.
7
El proceso sinérgico de combinar concepto, idea gráfica, elementos gráficos, con lo que se desea proyectar
PANTONES
Pantone 109 C C= 0 M= 31 Y= 92 K= 0
Pantone 1787 C C= 0 M= 97 Y= 65 K= 0
Pantone 512 C C= 59 M= 94 Y= 30 K= 0
Pantone 7461 C C= 93 M= 43 Y= 13 K= 0
Pantone 369 C C= 71 M= 14 Y= 100 K= 0
Adobe suite ulizada
8
SEPARADORES
Separadores para ello se hizo uso de figuras geométricas planas cada uno de los separadores es representado por Ui flat color una paleta de colores especialmente usados en el diseño plano, con un diseño responsive un diseño adaptable y limpio específicamente combinados en dos paginas con el número de la unidad y el tema signado.
9
10
11
SANTA MARÍA OSTUMA Diseño de marca
Producto
Diseño de viñeta para producto. Objetivo: Crear un producto representativo del municipio y a la vez consumible para los turistas y las personas que habitan en el municipo de santa maría ostuma Programas:
Adobe
Ilustrador,
Photoshop
12 brandign
Manual de marca
Diseño de manual de marca Objetivo: crear y definir la imagen corporativa del municipio, para lograr un mayor reconocimiento y posicionamiento de la marca. Materiales: Empastado y laminado en mate y la portada Couche 80 (páginas internas) Dimensiones: 8.5x 8.5 pulg. Programas: Adobe Ilustrador, Photoshop
Brochure
Diseño de brochure Objetivo: Crear y definir un brochure con la información adecuada para el turista y que pueda estar informado sobre las actividades del Municipio. Dimensiones: 11x8.5 pulg. Programas: Adobe Photoshop
13 brandign
STAR COFFE Diseño de marca
Star coffe es una empresa que nace de crear café a un público juvenil. siendo una marca moderna pero a la vez vendiendo un producto de la mejor calidad Programas: Adobe Ilustrador
Aplicación de papelería
Diseño de papelería corporativa Objetivo: Crear y definir la papelería corporativa que representara a la empresa Programas: Adobe Photoshop
14 brandign
Manual de marca
Diseño de manual de marca Objetivo: crear y definir la imagen corporativa del municipio, para lograr un mayor reconocimiento y posicionamiento de la marca Materiales: Empastado y laminado en mate (Portada): Couche 80 (páginas internas) Dimensiones: 10x 8.5 pulg. Programas: Adobe Ilustrador, Photoshop
Promocionales y productos
Diseño de camiseta Objetivo: Crear y definir un tipo de uniforme para el persona lo regalia para el cliente. Materiales: Algodon 80 Grs. Sublimación. Programas: Adobe Photoshop
Diseño de bolso Objetivo: Crear y definir un promocional dirigido al público Femenino. Materiales: Elaborado en Yute con estanpado de excelente calidad. Programas: Adobe Photoshop
15 brandign
Diseño de empaque Objetivo: Crear y definir un diseño de empaque para que el porductor tenga mejor conservación Materiales: Papel laminado mate 80 Grs. Programas: Adobe Photoshop
CATWALK CLOTHING STORE Diseño de marca
Catwalk Clothing Store es una empresa que nace para vestir a la moda a las personas del sexo femenino y va dirigido a un público juvenil, siendo una marca moderna pero a la vez vendiendo un producto de la mejor calidad en el area texil Programas: Adobe Ilustrador
Aplicación en local
16 brandign
Aplicacion de Viñeta
Diseño de viñeta Objetivo: Crear y definir un tipo viñeta que Identifique a la Marca con su productos. Materiales: Carton Piedra Programas: Adobe Photoshop
Diseño de Camiseta Objetivo: Que el cliente se sienta Satisfecho con el producto. Materiales: Algodon 70 Grs. Sublimación. Programas: Adobe Photoshop
Aplicación de papelería
17 brandign
LEAN MACHINE Rediseño de marca
Lean Machine es una bebida energizante “cerveza fit” o una cerveza de recuperación deportiva. dirigida para un público deportivo, Lean Machine será una cerveza sin gluten con 77 calorías, y un minúsculo 0,5% ABV. Programas: Adobe Ilustrador
Aplicación en papelerÍa
Diseño de papelería corporativa Objetivo: Crear y definir la papelería corporativa que representara a la empresa Programas: Adobe Photoshop
18 brandign
Aplicación para publicidad
Diseño de latas Objetivo: Crear y definir el concepto de cada bebdia ya que cada una posee un sabor diferente y un estidolo de diseño difertente. Dimensiones: 17x 5 cm. Programas: Adobe Ilustrador
Aplicación para publicidad
Diseño de promocionales Objetivo: Definir el tipo de uniforme para los empleados , ademas de uso de ID, y mas promocionales.
Diseño de camara refrigerante Materiales: adhesivo en gran formato. Dimenciones: 2x1 mts
Programas: Adobe Photoshop
Programas: Adobe Photoshop
19 brandign
D’ TUZA Diseño de marca
D’ TUZA una marca que ha sido creada para productos artesanales, elaborada por manos salvadoreñas por personas amantes del arte en tuza , su mayor producto son muñecas artesanales elabodas en tuza es un prodcuto 100% Nacional Salvadoreño. Programas: Adobe Ilustrador
Aplicación en papelerÍa
Diseño de papelería corporativa Objetivo: Crear y definir la papelería corporativa que representara a la empresa. Programas: Adobe Photoshop
20 brandign
Aplicación para publicidad
Diseño de promocionales Objetivo: Definir el tipo de uniforme para los empleados, además de uso de ID, y mas promocionales. Programas: Adobe Photoshop
Aplicación en medio digital
21 brandign
22
23
I LOVE NY Diseño de campaña publicitaria
Diseño de superficie Objetivo: crear una amplia variedad de estilos por medio del diseño de superficies Programas: Adobe Ilustrador, Photoshop
Aplicación en valla publicitaria
24 P ub l i c i d ad
AplicaciĂłn mega afiche
DiseĂąo de mega afiche Objetivo: Crear una publicidad con diferentesmarcas de zapatos reconocidas muldialmente por su calidad. Programas: Adobe Ilustrador, Photoshop
AplicaciĂłn en ca ja para zapatos
25 P ub l i c i d ad
TRATA DE PERSONAS Diseño de campaña publicitaria
Diseño de Afiche Objetivo: crear una amplia variedad de estilos de afiche referidos al no a la trata der personas . Programas: Adobe Ilustrador, Photoshop
Aplicación en gigantografía
26 P ub l i c i d ad
Diseño de afiches
Diseño de Afiches Dimenciones: 12 x 18 pulg. Materiales: Folcote 100 grs. Programas: Adobe Ilustrador, Photoshop
Aplicación en parada de autobus
27 P ub l i c i d ad
SWEET&SOFT Diseño publicitario
Diseño de Logotipo Objetivo: Crear un logotipo dirigido para un publico infantil/joven donde puedan disrutar una amplia variedad de dulces
Programas: Adobe Ilustrador, Photoshop
Aplicación en afiche publicitario
Diseño de Afiche Objetivo: crear una amplia variedad de estilos de afiche referidos al no a la amplia variad de productos de la tienda. Dimenciones: 11x17 pulg. Programas: Adobe Ilustrador, Photoshop
28 P ub l i c i d ad
Diseño de stand
Diseño de Stand Objetivo: Crear un Stand publicitario que pueda utilizarse en eventos como ferias o presentaciones del producto. Dimenciones: 5x3 mts Programas: Adobe Ilustrador, Photoshop
Aplicación de empaques
Diseño de empaque Materiales: Cubierta de papel especial, para alimentos. Dimenciones: 4.5x 12 cm Programas: Adobe Ilustrador,
Diseño de empaque Materiales: Carton de 30grs. Dimenciones: 10x17 cm Programas: Adobe Ilustrador,
29 P ub l i c i d ad
Diseño de empaque Materiales: Cubierta de de plastico especial, para alimentos.
Dimenciones: 7x9 cm Programas: Adobe Ilustrador,
PARQUE EL LIMO Diseño de campaña publicitaria
Diseño de logotipo Objetivo: Crear un logotipo dirigido para un público qu el guste vivir la adrenalina pura y pueda identificar un servicio extremo
Programas: Adobe Ilustrador
Aplicación en afiche publicitario
Diseño de Afiche Folcote 100 Grs. Dimenciones: 12x18 pulg. Programas: Adobe Ilustrador, Photoshop
30 P ub l i c i d ad
Diseño de roll up
Diseño de roll-up Objetivo: Crear Un diseño exclusivo con los servicios que el lugar brinda para los clientes y publico en general. Dimenciones: 2.00 x 1.20 mts Programas: Adobe Ilustrador, Photoshop
Aplicación en brochure
31 P ub l i c i d ad
32
33
YUMI Diseño de empaque
Diseño de empaque Materiales: Papel plastificado de 70 Grs. con su respectivo diseño con cierre y abre facíl para mayor concentración de alimento para las mascotas Programas: Adobe Ilustrador
Diseño de empaque parte trasera del empaque plastificado con su respectiva tabla de nutrición y codigo de barras. Programas: Adobe Ilustrador
34 I l us tr a c i ó n
Diseño cubierta de empaque
Diseño de cuberta de empaque Objetivo: Crear Un diseño de cuberta de empaque orientado a personas que tengan mascostas como perros ty gatos. Dimenciones: 100 x 170 mm Programas: Adobe Ilustrador
35 I l us tr a c i ó n
FRUIT SHAMPOO Diseño de cubierta de empaque
Aplicacion de envase Materiales: botella plastica con cubierta de adeshivo trasparente contra el agua para mayor duración. Dimenciones: 26 x 7 cm Programas: Abode Photoshop
36 I l us tr a c i ó n
Diseño de viñeta
Eementos utilizados
Diseño de de viñeta Objetivo: Crear y diseñar de cuberta de empaque de shampo con esencia de frutas tropicales.
Programas: Adobe Ilustrador
37 I l us tr a c i ó n
LECHE MUUUU DiseĂąo de empaque
Aplicacion en empaque Materiales: material resistente ca ja de 70 grs con cubierta plastificada
Dimenciones: 26 x 7 cm Programas: Abode Photoshop
38 I l us tr a c i Ăł n
Diseño frontal para empaque
Eementos utilizados
Diseño dede empaque Objetivo: Crear y diseñar de cuberta y empaque para un producto de leche y leche con chocolate.
Programas: Adobe Ilustrador
39 I l us tr a c i ó n
MR. BREAD Diseño de empaque
Diseño de empaques Materiales: crear empaques para diferentes tipos de empaques para una panaderia Materiales: plastico resistente para producto como pan de ca ja y papel diseñado para otros productos. Programas: Abode Photoshop
40 I l us tr a c i ó n
Diseño de empaque
Eementos utilizados
Iconografía Objetivo: el objetivo de la iconografía es para que el empaque se vea elegrante, esta conpuesto con elemetos de panaderia y materiales para su elaboración. Programas: Adobe Ilustrador
41 I l us tr a c i ó n
42
43
LIBRO CUENTO DiseĂąo de portada
AplicaciĂłn en libro
Aplicacion en libro Materiales: Pasta dura o carton pieda con forro de elegante , semibrillante mate y folcote 100 grs. Dimenciones: 18 x 11.38 mc Programas: Adobe Ilustrador, Indesign
44 E d i tor i al
Dise単o cubierta de libro
Dise単o de cubierta de libro Objetivo: Crear un dise単o de cuberta dpar aun libro de cuentos edades entre 6 a 9 a単os
Programas: Adobe Ilustrador, Indesign
45 E d i tor i al
ASTRO LOTE Manual de marca
Aplicaciรณn en manual
Aplicacion del manual Objetivo: crear y definir la imagen corporativa del municipio, para lograr un mayor reconocimiento y posicionamiento de la marca. Materiales: Empastado y laminado en mate y la portada Couche 80 (pรกginas internas) Programas: Adobe Ilustrador, Indesign
46 E d i tor i al
DiseĂąo de contraportada
DiseĂąo de cubierta de libro Objetivo: El objetivo es que el cliente pueda tener un manual sobre los usos correctos de logrotipo para su empresa. . Programas: Adobe Ilustrador, Indesign
47 E d i tor i al
REVISTA BODEGON Diseño de revista
Aplicación en revista
Diseño de portada para revista Materiales: Pasta dura con forro de elegante , semibrillante mate y couche 100 grs. Dimenciones: 18 x 11.38 mc Programas: Adobe Indesign.
48 E d i tor i al
DiseĂąo interno de revista
49 E d i tor i al
LUCHA CON SABOR DiseĂąo de libro y cubierta
Portada del libro
DiseĂąo de portada Objetivo: el objetivo del libro fue donarlo a un a persona que contaba su porpia experiencia contra la lucha del cancer. Dimenciones: 18 x 11.38 mc Programas: Adobe Photoshop, Indesign.
50 E d i tor i al
Diseño enterior del libro
Diseño de interior de libro: Uso de forotgrafías propas por para crear y digramar el libro.
Programas: Adobe Photoshop, Indesign.
51 E d i tor i al
PUBLICIDAD QUE VENDE DiseĂąo de revista
Portada de revista
DiseĂąo de portada Objetivo: crear una revista que referidad a la publicidad existente .
Dimenciones: 20 x 11.38 mc Programas: Adobe Photoshop, Indesign.
52 E d i tor i al
DiseĂąo interno de revista
53 E d i tor i al
54
55
SIVARPLAY Diseño de pagina web
Diseño pagina web Objetivo: Diseñar una pagina web dirigida a un público especificamente con el interes de comprar Apps en plataforma IOS de Apple inc. Dimenciones: 960 x 720 px Programas: Adobe Photoshop, Reflow, muse
56 D i s e ñ o web
BECOOL Dise単o de pagina web
Dise単o pagina web Objetivo: Dise単ar una pagina web orientada a la venta de ropa infantil a niven centroamericano. Dimenciones: 960 x 720 px Programas: Adobe Photoshop, Reflow, muse
57 D i s e 単 o web
FRANCESCO Diseño de pagina web
Diseño pagina web Objetivo: Diseñar una pagina web dirigida a un público especificamente para contratar servicios multimedia Dimenciones: 960 x 720 px Programas: Adobe Photoshop, Reflow, muse
58 D i s e ñ o web
COOKNEWS Dise単o de pagina web
Dise単o pagina web Objetivo: Dise単ar una pagina web orientada para aquellas personas que desean obetener lo ultimo en recertas para comidas y postres . Dimenciones: 960 x 720 px Programas: Adobe Photoshop, Reflow, muse
59 D i s e 単 o web
CONCLUSIÓN
El flat design es diseño gráfico de apariencia sencilla pero complejo de llevar a cabo, requiere un gran conocimiento del color, de la elección y uso de la tipografía y mucha creatividad para que cumpla con su objetivo que es el de entenderse correctamente y cumplir su función de la forma más fácil para el usuario. Los estilos de diseño web pueden variar según el diseñador que lo esté implementando: ca jas, imágenes, capas, colores, no importa cuál sea el elemento, cada diseñador decide que es lo que quiere mostrar en su sitio web. Sin embargo, es importante que todos estos elementos sigan una tendencia general del diseño web ya que son las que definen el rumbo definitivo de dicha creación. Actualmente existen dos tendencias del diseño web que están sonando bastante y muchos de los sitios web las están adaptando, fundamentalmente por el notable incremento de las conexiones a internet desde dispositivos móviles o tablets. Estas tendencias son Diseño Responsive y Flat Design o diseño plano. Aunque muchos no lo sepan, el diseño responsive o diseño adaptativo no es algo nuevo, de hecho, sus orígenes son del año 2008 cuando empezaron a salir dispositivos móviles con diferentes tamaños de pantalla y resolución. El diseño plano o Flat Design, es otra tendencia del diseño web que nos impulsa a establecer todos los elementos de la página web en un solo plano. El diseño plano nace de la visión minimalista, otro concepto del diseño gráfico que es de gran tendencia. Como se puede observar, ambas tendencias forman un todo en lo que respecta al diseño web en estos últimos tiempos. Si aún no has iniciado tu proyecto de diseño web y quieres estar a la par de los mejores, te recomendamos altamente que tomes el rumbo de una de estas tendencias que definitivamente marcaron el inicio de una nueva era.
60
AGRADECIMIENTOS
Primeramente agradecer a Dios por la oportunidad de aprender mucho y desarrollar mucho conocimiento sobre el diseño gráfico, todo lo que empezó por un sueño desde hace años hoy se hace realidad con la ayuda de Dios y de mis padres que siempre me han inculcado sus principios y valores cristianos, por darme la vida y traerme a este mundo, por darme un lugar donde vivir y donde comer, estoy muy agradecido con ellos y confió en Dios poder seguir aprendiendo sobre el Diseño gráfico y sus tendencias . Un agradecimiento en especial también a mis compañeros de traba jo y compañeros de estudio que de una u otra manera siempre nos apoyan con sus palabras y pensamientos, ha sido una trayectoria larga y de mucho esfuerzo y sacrificio, pero hoy con la frente en algo puedo decir Gracias Dios por la oportunidad que me da de poder finalizar un logro más en mi vida uno de muchos que todavía vienen en camino. Además agradecer al Lic. Rodolfo Antonio Tejada Ruiz por asesorarnos en el transcurso de nuestro proceso de portafolio y por toda su ayuda, al coordinador de la carrera al Lic. Frederick Ludwig Orellana y además a todos los y las docentes del área de Diseño quienes nos brindaron sus conocimientos durante el trascurso de nuestra formación Academica gracias por todo. Francisco Ivan Cruz Villalta Diseñador Gráfico Universidad Tecnológica de El Salvador – Año 2016
61