Diseño Web

Durante la clase de Introducción al Diseño Web estuvimos viendo desde cómo surgió el diseño web y las demás tecnologías que conocemos actualmente.

Después empezamos a ver el procedimiento de cómo diseñar una página web desde cero empezando a bosquejar en papel. También estuvimos viendo todo lo que son los servidores, dominios y hospedaje; vimos la importancia del SEO que como su nombre lo indica sirve para que la página sea encontrada desde un motor de búsqueda.

Luego empezar a crear código con html, css y javascript. Estuvimos viendo las funciones que tiene WordPress y Bootstrap para crear páginas web desde temas ya prediseñadas, creando páginas con el propósito de vender un servicio.

Trabajos Realizados

Como proyecto final de clase estuvimos trabajando en e nuevo diseño de la página de la Universidad. Cada uno se encargó de una sección de la página, estuve trabajando junto con otro compañero en la sección de las carreras y me encargué de diseñar las ilustraciones para cada facultad.

Bocetos:

IMG_1723

 

IMG_1724 (1)

 

ILUSTRACIONES TERMINADAS

FACSA

logosumcorre-01

EDUCACIÓN

logosumcorre-02

PSICOLOGÍA

logosumcorre-03

TEOLOGÍA

logosumcorre-04

CIENCIAS ADMINISTRATIVAS

logosumcorre-05

EDUCACIÓN PREPARATORIA

logosumcorre-09

INGENIERÍA 

logosumcorre-06

ARTES Y COMUNICACIÓN

logosumcorre-07

MÚSICA

logosumcorre-08

EDUCACIÓN EN LÍNEA

logosumcorre-10

Servicio Comunitario

Este curso 2015-2016 en la clase de servicio comunitario estuvimos haciendo distintas actividades donde prestamos nuestro servicio a dos escuelas.

En quinto semestre fuimos a la escuelita de la Anacua donde convivimos con los niños y les dimos unas pequeñas clases sobre salud, alimentación que son importantes para su vida diaria. Además también tuvimos un tiempo donde los llevamos al ojo de agua para que ellos se divirtieran y tomasen un descanso para disfrutar con su familia.

En sexto semestre fuimos a un kinder llamado Gabriela Mistral donde en esta ocasión nos ofrecimos a pintar la pared de la escuelita y hacer un mural. Antes de eso primero se hizo una investigación, se estuvo preguntando a los directores y maestros de la escuela de qué querían que se viera en el mural.

Se sugirió que en el mural se reflejaran diferentes valores tales como: patriotismo, amistad, compartir, el cuidado de la naturaleza, la familia, convivencia, etc. Después lo que se hizo fue pedirles a los niños que és para ellos cada uno de los valores ya mencionados y a base de ellos comenzamos a bocetar ideas de qué elementos se pondrían en el mural.

Resultado final

serviciocom

 

Empaques y embalajes

La clase de empaques comenzó primero con conocer los diferentes tipo de empaques que existen y ver cuáles son los más utilizados para distintos usos.

Conocí distintos empaques que antes no los había visto y además que fue la primera vez que aprendí a armar un empaque por medio de una plantilla. Algunas veces se me dificultaba un poco pero no fue muy difícil como lo imaginaba, además que disfruté mucho el diseñar un empaque de jugo para el público infantil por la marca JUMEX.

Proyectos realizados

El nombre de la línea de jugos JUMEX lleva el nombre de Power Juice utilizando el concepto de tener un personaje ilustrado al estilo de los cómics y/o súperheroes, además de que es dirigido al público de 7 años en adelante. Los sabores elegidos para esta línea fueron los sabores: manzana, mango y uva. Cada uno de los empaques contiene un personaje distinto y cada uno con su nombre: Applegirl (manzana), Mangoboy (mango) y SuperGrape (uva).

powerjuicecharacters-03

empaquejugo-01

empaquejugo-02

IMG_1907

 

Implementación de Sitios Web

En la clase estuvimos viendo el diseño web sobre todo el Diseño Centrado en el Usuario (UCD) lo cual es muy importante tomar en cuenta la usabilidad del proyecto ver si es lo suficiente entendible como para que la persona que ingrese a la página no se pierda y entonces siga el procedimiento como debe ser, en otras palabras es ver si existe un problema y ver como resolverlo. Mientras que la Experiencia de Usuario (UX)  ayuda a determinar cual de muchas posibilidades es la mejor para el usuario y las tareas que tiene que desarrollar.

También se estuvo viendo el procedimiento correcto de como diseñar una página web para el cliente, primero se empezaba con la planeación desde el desarrollo del Brief hasta de investigación de lo que el cliente pida y el propósito de ella.

Proceso al diseñar una página web/landing page

  • Sketch: Primero se empieza con bosquejo de cómo sería la página web primero centrándonos en la estructura o el acomodo de los elementos sin fijarnos todavía en el diseño.
  • Wireframe: Después de esto se desarrolla el wireframe que es ahora ya incluyendo texto y otros elementos extra, pero todavía no se elige la paleta de colores y la tipografía sino sólo se coloca parte de la información. Esta parte del procedimiento se trabaja de manera más limpia que cuando se empezaba con el sketch.
  • Prototipo: Ya teniendo el wireframe se realiza el prototipo para ser probado con personas que pueden ser 5 usuarios diferentes en adelante para ver que tan funcional es y si hay algún problema vuelve a iniciar de nuevo desde el bosquejo hasta que se haya la solución correcta.
  • Mockup: Cuando el prototipo es aprobado por los usuarios entonces sigue la parte del diseño del mockup que es el diseño final de la página ya incluyendo los elementos gráficos, la paleta de colores, tipografías, imágenes, etc.
  • Maquetación: En esta última etapa ya se comienza con darle “vida” a la página y es por medio de código utilizando los cinco lenguajes para maquetación web que son HTML, CSS, Javascript y JQuery.

A continuación se mostrará la propuesta del proyecto realizado para UMvirtual que es una landing page para promocionar la Maestría de Administración con Acentuación en Finanzas:

 

 

Imagen e Identidad Corporativa

Los conceptos de imagen e identidad corporativa de una empresa se encuentran íntimamente ligados.

Lo que constituye la identidad corporativa:

Nombre o identidad verbal: Nombre de la empresa que sea recordable para el público y fácil de pronunciar.

Logotipo: Imagen o símbolo de la empresa, nombre y gráfico. simbología gráfica: parte del logo de la empresa que identifica a la empresa en un sólo gráfico.

Identidad cromática: Percepción de los colores, se convierte en su lenguaje.

Identidad cultural: Que es reconocida por el público.

Indicadores u objetivos de identidad: Son datos en donde está situada la empresa en sus ventas.

Arquitectura corporativa: toda acción se produce en algún lugar de la empresa. los lugares son escenarios de interacción entre los representantes de la empresa y los representantes  del publico.

DIFERENCIAS ENTRE IDENTIDAD E IMAGEN CORPORATIVA.

Imagen corporativa: es la opinión de la sociedad acerca del producto o servicio que da la empresa.

Identidad visual: diseño, logotipo, aplicación, elementos de aplicación a elementos de papelería corporativa.

Identidad verbal: Nombre de la empresa o la marca.

Identidad visual + identidad verbal = identidad corporativa

Imagen corporativa

Es una consecución de la marca, (la sociedad conoce a la marca).

La actitud de los componentes de la empresa. Si un empleado esta bien formado sera capaz de transmitir una correcta imagen.

Fórmula:

Identidad visual+ actitud de la empresa hacia el consumidor+experiencia de usuario= imagen corporativa.

BRAND-MEANING

Es la creación de la identidad conceptual y storytelling  de la marca. quién soy que hago y que puedo proporcionarle al mundo, que ventaja tengo y que defectos.

Identidad verbal+identidad visual+ environ branding+ brand-meaning= identidad corporativa.

Plan de marca personal:

PARA QUÉ SOMOS BUENOS:

El primer paso del plan de marca personal es identificar en qué somos buenos ya que no sirve para nada posicionarte como referente en un sector que desconoces. Al definir en qué somos buenos definimos nuestra oferta. Nuestros rasgos de personalidad definirán el modelo de interacción más adecuado, mientras que nuestras capacidades determinarán las herramientas con las que contaremos para realizar nuestro plan de Personal Branding.

CONECTAR INTERESES:

Nuestros intereses son los de nuestra gente de interés. Conocer a nuestra audiencia a fondo es esencial. Nosotros somos quienes tenemos que dar el primer paso para conectarnos, la gente no viene a conectarse con nosotros.

Aqui debemos tener en cuenta la matriz de contenidos es decir, si hablamos de temas que a nuestro público no le interesan, no conectamos intereses y nos quedamos hablando solos.

Asimismo debemos tener en cuenta de qué temas hablar y cuáles son los temas del momento a esto se refiere la matriz de tiempo.

CREAR EL PRODUCTO:

Es de suma importancia definir el producto, ese será el camino que debemos tener presente para posicionarnos.

Nombre: El desafio consiste en crear un nombre fácilmente identificable además de cumplir con tres premisas, fácil de recordar, resonante y original.

Logo: Nuestro logo debe ser visible, claro, duradero y que nos ayude a insertarnos en el mercado objetivo.

Descripción: Tendremos que generar una descripción de nosotros mismo auténtica y única. Que realmente sea nuestra y nos identifique y represente.

ESTRATEGIA DE POSICIONAMIENTO:

¿Qué haremos para posicionarnos frente a nuestro público objetivo: Existen  cuatro aspectos que tendremos que tomar en cuenta para definir nuestra marca.

Magnífica: ¿sólo queremos publicar contenido o buscaremos una interacción?

Formato: ¿utilizaremos texto, audio o ambos?

Tiempo: ¿cuanto tiempo dedicaremos , a crear contenido y luego difundirlo para proporcionarnos?

Medios: ¿utilizaremos nuestros propios medios o de terceros?

CREAR TU PROPIA SOCIAL MEDIA:

Tendremos que definir las propiedades digitales que necesitaremos para nuestro plan. El social media vería como nuestra casa digital donde centramos  nuestro ecosistema social de trabajo e interacción con nuestro cliente.

MOTOR DE DIFUSIÓN: 

¿Cómo promocionamos nuestra marca personal? Aquí está en juego:

Matriz de influyentes: Las marcas influyentes puden ser generadoras y/o promotoras de nuevas marcas personales.

Matriz de trolls: Debemos identificarlos y tratarlos con respeto y amabilidad a fin de poder en power users.

Matriz de power user: Aquellos seguidores de nuestra marca o producto que no dudan en manifestarlo, recomendarnos y compartir nuestras actualizaciones con sus amigos y su círculo.

INDICADORES:

Este uso consiste en identificar y medir. ¿Cuánta gente  sabe de mí? si no medimos no podremos corregir o implementar cambios en nuestro plan, si así lo necesitáramos.

Proyectos

Marca personal

logoNUEVOpers

Empresa:

Plastipen

En la clase cada uno decidió crear su propia empresa para entonces luego diseñar la imagen e identidad corporativa.

Mi empresa se dedica a producir plumas tejidas con hilaza de plástico, de ahí surge el nombre Plasti (plástico) y pen (pluma en inglés), la idea es producir plumas personalizadas de acuerdo a lo que el cliente pida.

Logo

logoplastipen

Aplicación:

Hojas membretadas y tarjetas

plastipenidcorp

Manual de Identidad Corporativa:

Procesos de Impresión

Durante la clase de procesos de impresión estuvimos viendo los conceptos básicos de cómo preparar el documento para la impresión, estuvimos viendo los distintos acabados y los tipos de papeles que existen para todo tipo de publicación, además de que vimos las diferentes máquinas para todo tipo de impresión para diferentes superficies.

A continuación se mostrará el manual realizado para el cumplimiento de la materia de lo que vimos en clase en cuanto a teoría.

Diseño Editorial

Para poder diseñar un libro o una revista se deben conocer los conceptos básicos del diseño editorial tales como: los tipos de publicaciones que existen cada uno de acuerdo al género que es, El uso de la retícula (módulos, columnas, jeraquía,etc), margen, página maestra, conocimientos básicos de InDesign, conocimientos básicos de impresión, entre otros.

Brief de la Revista

 Revista It’s Art

(Completa)

Ilustración Digital

En esta clase reforzamos lo visto en la clase de ilustración sólo que ahora utilizamos programas para ilustrar por medio de una pantalla tales como Photoshop e Illustrator, además aprendimos a utilizar la resolución correcta que es 300 dpi y utilizar las marcas de guía para dejar el margen del tamaño deseado.

También aprendimos a cómo cotizar un trabajo de ilustración de acuerdo a la cantidad, formato, tamaño, si es a color o blanco y negro, para pantalla o para impresión, etc.

Trabajos Realizados

Ilustraciones para libro de Nutrición

Nuttrináhuatl

Por parte de la facultad de Nutrición se hizo un pequeño libro para repartir y enseñar a los niños de habla náhuatl para que aprendan sobre lo que es una buena nutrición.

A continuación se mostrarán las ilustraciones realizadas para el libro:

portadanahuatl niñosejer2 desayuno niñosejercicio1 historieta comidasalud comidachatarra agua

Ilustraciones EXPO 2016

ilust.heyli 2

ilust.roberth 2

Producción Gráfica

En la clase de producción gráfica estuvimos viendo desde como empezar a hacer un brief del trabajo que se ha realizar para el cliente, incluyendo estos puntos:

  • Descripción del proyecto
  • Público meta
  • Objetivos
  • Competencia
  • Presupuesto
  • Producto

También estuvimos viendo en clase de cómo elaborar una cotización para el cliente, de cómo tener una buena relación con el cliente y qué aspectos debemos tomar en cuenta para saber cómo cobrar con ayuda de el libro: “Cómo cobrar el diseño gráfico en México”especialmente cuando vayamos a trabajar como freelancer. Además estuvimos realizando nuestro portafolio personal tanto físico como digital, diseñamos nuestra marca representativa del equipo y una propuesta de diseño de branding para distintos clientes.

 

Trabajos realizados

Icono flyer 

el regalo de dar

iconoflyerbib Unregalodedar

Marca personal representativa del equipo

logocrfinal

Brief

Briefcreativo

Cotización

cotizacionemilioburger

Propuesta de branding 

(trabajo en equipo: Roberth, Melissa y Heyli)

Emilio burger

Logotipo

logoemilioburger

Empaque

Empaque para llevar

MenúPropuesta de Menuì

GorraGorra de Emilio

Mandildelantal

Diseño de lonaLONA EMILIO

Tarjetas de presentacióntarjetasmockup

Ilustración para diseño de playera e interioresdiseño para la playera

Playera

Adelante

Playera iconos enfrente

AtrásPlayera atrás

Portafolio físico

IMG_1741

Ilustraciones para libro de Biblia nivel segundo de secundaria-parte2

A continuación  mostraré las ilustraciones que realizado para las últimas lecciones del libro de Moral y Biblia para segundo de secundaria, todas ellas realizadas en Umedia Diseño.

Detrás de cámara:

davidyjesus

David y Jesús

En esta escena se muestra a David contándole sus preocupaciones a Jesús de cómo reinar al pueblo de Israel.

pisraelmana

El maná

En esta escena se muestra al pueblo de Israel recibiendo pan del Cielo en medio del desierto.

Lot

Lot

En esta escena se muestra a Lot y su familia recibiendo a dos ángeles de Dios para darle el mensaje de que debe salir de Sodoma y Gomorra antes de que sea destruida

nadabaiu copia

Nadab y Abiú

En esta escena se muestra a los hijos de Aarón: Nadab y Abiú haciendo cosas indebidas dentro del Santuario.

cainyabel

Caín y Abel

En esta escena se muestra a los hermanos Caín y Abel en el momento que van a ofrecer sus sacrificios a Dios y se puede notar la actitud que tiene cada uno.

noe

Noé 

Se muestra en esta escena a Noé tomando una actitud positiva ante las críticas y burlas de la gente.

saulydavid

David y Saúl

En esta escena se muestra a David en su juventud tocando el arpa para calmar el espíritu del rey Saúl.

U7L26 croboam

Rey Roboam

En esta escena se muestra a el rey Roboam siendo llevado en cautivo por los egipcios cuando tomaron el reino de Israel.

U7L25 dmarthaymaria

Lázaro

Escena cuando Jesús resucita a su amigo Lázaro.

U8L28ejesús

La muerte de Jesús

En esta escena se muestra a Jesús rumbo al Calvario para ser sacrificado, en  el fondo a la gente gritándole, mientras el muestra una paz en su rostro.

U8L29btierranva

Jesús y niños en la Tierra Nueva

Se muestra la escena final en el Cielo donde los niños de con diferentes rasgos conviven con Jesús y todos se muestran muy felices.

Otras secciones:

periodistayespias

Entrevista a Josué y Caleb

Siguiendo el mismo estilo como fue con el de Lázaro y sus hermanas, aquí se hace una escena algo chusca donde Caleb y Josué son entrevistados por lo que encontraron en las tierras de Jericó.

Escenas comparativas

ComparacionAdanyEva-Daniel

Comparación en cuanto a ceder a la tentación

Se escenifica el momento cuando Daniel y sus amigos son tentados a ingerir los alimentos que  consume el rey mientras que del lado izquierdo se muestra a Adán y Eva cediendo a la tentación por comer el fruto prohibido.

comparacióncruzadas2

Comparación de actos de violencia

Es esta imagen se hace una  comparación entre la escena de cuando Caín mató a su hermano Abel con la muerte de mucha gente inocente durante la guerra de las cruzadas.

Secreto de experto

salomon2 copia

Salomón en su juventud

salomonviejocopia

Salomón (de viejo)

Daniel

Daniel

hombredehierro

Atleta “hombre de hierro” (iron man)

pablo2 copia copia

Pablo

Acán copia copia

Acán

Eva

Eva

Caín copia

Caín