Diseño, sitio web y animación para desplazamiento

by | Abr 8, 2017 | Trabajo en progreso |

“Trabajo en progreso” es una sección o categoría donde muestro mis avances en distintos proyectos. A demás me sirve para medir mi productividad.

La semana pasada entregamos un proyecto grande, que implico trabajo en equipo, tiempo y paciencia; que mejor que esto para inaugurar mi primer semana de “Trabajo en progreso”, les describiré de forma general el flujo de trabajo que realizamos para sacar este proyecto. Esto podría en una sección llamada “Portafolio” (está pendiente.) También realice una entrevista a profundidad y un taller de foto.

1. Texto y paleta de colores

El proyecto tuvo una duración de mes y medio aproximadamente. El tema fue “Desplazamiento interno forzado en México”. Las expertas en el tema nos entregaron el texto, dos compañeras (comunicóloga social e historiadora) “tradujeron” el texto a una forma más amigable de leer, además de prepararlo para sus distintas salidas: postales, infografía, web y animación. Mientras mis compañeras hacían esta tarea, me dedique a buscar propuestas para nuestra paleta de colores, fue bastante divertido, después de varias propuestas en conjunto decidimos la paleta de color final; la cual nos dio bastante juego, tenemos colores sobrios y contrastantes, perfecto para nuestro tema.

2. Diseño de gráficos

Teniendo el texto en todas sus salidas y la paleta de colores definida, el diseñador hizo la propuesta gráfica para traducir el texto en una propuesta visual, utilizando Adobe Illustrator como herramienta de diseño, el equipo dio su retro-alimentación para hacer cambios y ajustes. La idea fue hacer un “archivo” con todos los elementos gráficos para después jugar con ellos y adaptarlos a los formatos de salida. Esto fue crucial para la eficiencia de tiempo; lo menciono porque algunos elementos gráficos que necesitaba los iba creando por mi cuenta tomando como guía lo que hizo el diseñador.

Diseño de gráficos en AI

3. Postales

Las postales son un buen ejemplo de lo que mencione previamente, teniendo la guía visual (colores, gráficos y estilo) no me costó trabajo (en concepto) llegar a esto. Tuvimos que agregar la casa que no estaba en la propuesta inicial para transmitir mejor el mensaje. El estilo visual es “flat”.

4. Sitio Web

Me encargue 100% del diseño del sitio web, queríamos que fuese limpio, ordenado y visualmente atractivo. Un sitio tipo “scroll”, con bloques bien delimitados para presentar y dividir la información, espacios para tener respiros visuales, títulos bien marcados para acentuar un cambio de párrafo y/o subtema. Aquí adapte el diseño de los gráficos para tener más intención, el diseñador hizo varios gifs animados para el sitio, acentuando y reafirmando parte de la información. Como el mapa, tiene una animación sencilla donde las personas se mueven, no necesita más para mostrar la idea de “desplazamiento interno”; la mayoría de las animaciones son detalles, pero que tienen una gran importancia para puntuar información.

Si quieren ver el sitio les dejo la liga: www.cmdpdh.org/desplazamiento-interno/. El sitio se desarrolló en wordpress.

5. Animación

Es una animación “sencilla”, en 2D; este proceso lo disfrute mucho. El texto que se me entrego era bastante extenso para una animación que pretende ser corta, de hecho, su formato estaba pensado en gif, entonces tenía dos opciones, dejar el texto propuesto, con una animación más sencilla y larga para poder tener todo el texto en pantalla o elegir parte del texto y hacer una animación más corta pero detallada. Opte por la segunda; la animación consta de tres fotogramas clave, se puede decir que son postales estáticas, la animación es para darle entrada y salida a los elementos, trate de darle sentido e intención a los elementos animados. Utilice Adobe After Effects para dicha tarea y Premiere Pro para agregar la banda sonora (me permite editar mejor el audio) y darle el formato de salida: H264 para youtube y facebook.

Pueden verla animación aquí o pueden ir a facebook, le dan un like y si comparten se los agradecería un montón.

Estadísticas Sitio

Lanzamos el sitio y el press-kit a medio el martes 4 de abril 2017 y estoy escribiendo esto el sábado 8 de abril, las estadísticas no contemplan la animación, ya que saldrá el domingo 9 de abril a las 7:30pm. La página tuvo 910 visitas. Se compartió en redes (facebook y Twitter) desde el mismo sitio 420 veces.

Entrevista

Grabe una entrevista a profundidad. Dentro del mundo del video, documental o storytelling la entrevista es uno de los pilares más importantes por muchos motivos, uno de ellos es: el portavoz de la historia (aunque se lea obvio), también es de los aspectos más complicados, más allá de las preguntas, para lograr una respuesta con sinceridad y veracidad hay que conectar con el otro, crear una conexión de empatía y confianza. Este tema en particular es uno de los más estresantes y más emocionantes al mismo tiempo. Grabe con 2 cámaras canon 70D, sigma 18-30mm a 1.8 y canon 50mm 1.8, el audio con una grabadora tascam dr-07mkii y un micrófono lavalier Sennheiser ME 2.

Entrevista

Taller de Foto

Taller de foto

Desde 2006 he dado talleres, conferencias y workshops, pero puedo decir que nunca había dado un taller de foto, es mi primer grupo y experiencia. Fue un grupo de 6 personas, tuvo una duración de tres horas y media. Hubo teoría, inspiración, práctica y laboratorio digital. En un principio tuve cierto nervio porque son personas que conozco y con las que trabajo, eso sube el nivel de dificultad, pero después de los primeros 15 minutos, todo normal. Abajo les dejo tres clicks de mis excelentes alumnos.

PRODUCTIVIDAD

%

Me falto llenar un informe y revisar varios mails

Luis Ma Barranco

Luis Ma Barranco

 Creativo/ Storyteller / Diseño Web / Animación / Diseño digital

Shares
Share This