miércoles, 26 de septiembre de 2012

Trabajo Final Diseño Alicante IM

Trabajo Final Diseño Alicante IM



Buenas, 

Os traigo la explicación y "dossier" del que fue mi trabajo de final de Diseño cuando estaba en Alicante haciendo Ingeniería Multimedia.



1 – Proyecto

a) La idea
Nuestro proyecto de web de crowdsourcing consiste en una web que posibilite la creación de películas y/o cortos, sean de animación o no, y de guiones para ello, sean los usuarios especializados o no. Nuestra web ofrece distintas opciones, entre las principales:
  1. Subir tu video que ya tenías hecho con amigos o por tu propia cuenta.
  2. Cambiar el final o alguna escena que no te guste de una película.
  3. Subir un guion para que la gente lo escoja y haga el video.


b) Documentación
El primer paso para la realización de este trabajo ha sido fundamental para ayudarnos a diseñar la estructura de la web. ¿Cómo nos hemos documentado? Nos hemos documentado con los apuntes de clase y propios que tenía de 2º de Bachillerato, así como trabajos de cursos anteriores, búsqueda de webs que tuviesen de tema vídeos principalmente, así como de otras webs de crowdsourcing, además de una bibliografía que dejo a continuación:
  • No me hagas Pensar” de Steve Krug (recomendada por el profesor).
  • Web Design Index 0.4 by Content” de Geunther Beer y The Pepin Press.
  • Arte y ciencia del Diseño web” de Jeffrey Veen de la editorial Prentice Hall.
  • Color para sitios web” de Molly E. Holzschlag de la editorial Digital Media Design.
  • www. color” de Alastair Campbell de la editorial GG/México.
  •  ”What makes them click?” de Susan M. Weinschenk de la editorial Neuro Web Design.
  •  ”The Design of sites: Patterns for creating winning websites” de Douglas K. van Duyne, James A. Landay y Jason Hong.

De esta bibliografía hemos sacado en claro pautas para crear webs que realmente funcionen visualmente (sean llamativas y te inviten a interactuar), sean intuitivas, fáciles de manejar, en las que no te pierdas y sean eficientes. Algunas de estas pautas son:
  •  User Hierarcgy of Needs – De mayor a menor la jerarquía de necesidades del usuario: flujo de la información (invitar a interactuar), intuitivo, forma de uso, eficiencia, facilidad de aprendizaje, fiable (si el contenido es correcto o no), misión o funcionalidad.
  •  Recomendaciones – ser innovador en temática de web; no sorprendas demasiado a la gente (a la gente no le cuesta adaptarse a las cosas diferentes); anticípate a las necesidades de la gente; no seas tan breve a coste de claridad; muestra, no cuentes; y no dejar nunca un callejón sin salida (es decir, siempre evitar que el usuario se pierda en la web).
  •  Preguntas bases: ¿Qué es esto? ¿Qué tienen aquí? ¿Qué puedo hacer aquí? ¿Por qué debería estar aquí y no en otro lugar?

c) Objetivos
Nuestro objetivo fundamental es conseguir que la gente disfrute delante de la cámara: haciendo películas, cortos o animaciones sean por ellos mismos, cambiando escenas de sus películas favoritas o de aquellas que crean que pueden cambiar; así como detrás de la cámara: guiones, vestuario, maquillaje, en definitiva, todo lo que se necesite para la creación de dicha película o guión.



2 – Producción

a) Comienzo: ¿De qué irá la web?
Lo principal, antes de empezar a hacer un diseño es saber de qué irá la web. Nos reunimos en un grupo de seis personas, de las cuales, tres de ellas compondríamos el grupo de este trabajo (aunque luego el trabajo lo realizarían sólo dos personas). Realizamos un brainstorming para recopilar ideas que luego podrían usarse. Se sometieron a votación y de ahí seleccionamos el tema que tendría la web. ¿Ya habíamos concluido? No.
El tema era sobre películas que la gente podía subir a la web. Pero, ¿de qué tipo de películas? ¿Podían ser cortos, animación, anuncios hechos por sí mismos? Decidimos que la web debía ser para todo tipo de usuarios: desde estudiantes especializados en el tema (grado en cine, actores,…) como gente que prefiriese estar tras la cámara, bien para maquillar o bien para guiones.
Teníamos elegido el contenido de la web, Videos: películas y propios; y en guiones: modificaciones y propios, además de unTop10 y un apartado de noticias. Para ello necesitábamos ver cómo debíamos estructurarlo en el menú de la web, por lo que pasamos al paso de los esbozos, bocetos y pruebas de color.


b) Paso 1: Bocetos y pruebas de color
Para hacer los bocetos, primero hay que ajustarse a unas pautas, es decir, qué debe mostrar visualmente la web sin leer ni una sola palabra sobre ella, o qué debe transmitir, para lo que la nuestra debía ser: moderna, diferente, fácil manejo (intuitivo), fresco y, a ser posible, minimalista (“Cuanto menos, más”).
Se realizaron un total de 3 bocetos de web, de más simple a más complejo, de los cuales sólo se eligió uno, del que se realizaron tres pruebas de color con materiales como el rotulador o el lápiz de color: colores contrastados con negro, colores poco saturados en equilibrio entre sí y una mezcla saturada de colores casi complementarios entre ellos que chocaba visualmente. La prueba de color con colores contrastados con negro fue la escogida para realizarse a Photoshop para tener una idea de cuánta saturación debía tener cada parte de la web.

 
c) Paso 2: Acabado final Photoshop y uso de plataforma
Para hacer esta web se han hecho primero esbozos, se han elegido los que más gustaban porque transmitían visualmente el fin de la web, procediéndose a la creación de bocetos y pruebas de color, del que han salido elegidos uno, del cual han sido pasados a ordenador mediante Paint Tool Sai y Photoshop todas sus secciones, para tener una idea de cómo quedarían los colores en saturación, brillo, y demás a parte del resto de componentes de la web.
En el diseño de esta web se ha usado la Ley de Tercios que consiste en dividir el espacio en 3×3, las cuatros esquinas en que coinciden las líneas son los puntos de atención. ¡Ojo! El centro no es tan llamativo visualmente en una web, visualmente seguimos un recorrido de izquierda a derecha, de arriba abajo.
Gracias a su diseño intuitivo y simple, podemos guiarnos fácilmente por la página para llegar a donde queramos. Los colores se han escogido vistosos con una mezcla entre ellos de cálidos y fríos para hacer más llamativa la web y que invite a interactuar con ella, además, de que la saturación usada no es muy alta para no “deslumbrar” a los usuarios con los colores. El color negro de fondo ha sido escogido para hacer más contraste y se puedan leer los textos o se puedan ver mejor los videos / guiones.


d) Paso 3: Realización de un storyboard
Para mostrar en lo que consiste la web con unas imágenes haremos un StopMotion, una animación a base de fotos que componen una escena. Antes de poder comenzar a “rodar”, hacer la animación, tenemos que crear la historia y el storyboard.
La historia que presenta nuestra animación es simple: Javier va al cine y no le gusta el final, está caminando por la calle triste hasta que se encuentra con María, la que le propone que haga él un guion cambiando lo que no le gusta para subirlo a internet y la gente se anime a realizarlo. Se cumple el caso: a la gente le gusta y muchos se apuntan al proyecto como cámaras, actores, maquilladores, etc. De esa manera, se crea el nuevo final, se sube y las visitas suben como la espuma.
Final:Esto y mucho más en tucine.ucoz.es”.


e) Paso 4: Realización del Stop Motion
Antes de comenzar a realizar el Stop Motion o de siquiera pensar cómo iba a estar distribuidos los materiales a usar, debíamos documentarlos, para ello acudimos a Youtube donde buscamos videos de anuncios hechos en StopMotion así como cualquier otro tipo de videos con la misma técnica para ver la forma de realización del trabajo así como de los temas y la música escogida.
Al principio la idea era hacerla en acetato y pintura, pero sería más costoso. El profesor nos recomendó mirar este Stop Motion pues podía ayudarnos a realizar el nuestro o modificar la forma en que teníamos pensado hacerla completamente: http://vimeo.com/34065744
Documentados y con el storyboard terminado, quedamos para hacer las fotos que constituirían nuestro fondo en la animación. El fondo está formado por dos cartulinas blancas que hacen de fondo, y varios bloques de colores de lego, que actuaron desde sillones de cine a casas, así como dos o tres pompones y pinzas del pelo que fueron usados como plantas.
Después, una vez retocados los fondos y hechas todas las imágenes que se necesitasen con la cámara sobre trípode, se pasó a realizar la animación, mientras se procedía a la búsqueda de onomatopeyas o sonidos que fuesen adecuados con el video. En la realización de el Stop Motion tuvimos un fallo: hicimos primero la animación que escoger la música, ya que debe adaptarse.
Música del StopMotion: “American Dream” Man de Leslie Hunt.
 

f) Paso 5: Subida del video y el diseño a la plataforma.
Finalmente, este diseño se trató de pasar, lo más parecido posible, a la plataforma uCoz pero el resultado fue casi nulo a lo que debería parecerse.
Necesitábamos cambiar, modificar, el último diseño según lo que nos permitiese la plataforma, se realizaron bocetos rápidos y se pasó a Photoshop para controlar los colores y la saturación y brillo de los colores, así como para tener una idea de cómo quedaría finalmente.





3 – StopMotion


StopMotion de TuCine: http://www.youtube.com/watch?v=uVhWLoHcmw4&feature=youtu.be
Video Recomendado por el profesor: http://vimeo.com/34065744

Videos inspiratorios:






No hay comentarios :

Publicar un comentario

Aquí puedes contarnos tu opinión.
Si comentas, por favor, hazlo con respeto.
No dejes direcciones ni spam o tu comentario será borrado automáticamente.