Espacio de aprendizaje sobre Comunicación Digital

Técnicas de guionización

Guión_multimedia.jpg
Guión multimedia

Las Técnicas de planificación nos permiten llevar a cabo un diseño previo del multimedia. En esta etapa resulta fundamental llevar a cabo todas aquellas operaciones que garanticen que antes de iniciar el desarrollo el producto multimedia final responderá realmente a la idea germinal que lo ha motivado.

Según José Luis Orihuela y María Luisa Santos en su libro “Introducción al Diseño Digital”, sería bueno comenzar con un “Diagrama del hipertexto”. Diseñar la estructura hipertextual de la aplicación exige fragmentar el contenido editorial disponiéndolo en zonas, secuencias y nodos y estableciendo su correspondiente codificación.

Para cada uno de los nodos, los autores proponen la confección de una ficha que dé cuenta de los elementos utilizados y su articulación en la pieza.

 

storyboard_seniorcorps.jpg

storyboard-pro-36.jpg

 

 

 

 

 

 

 

 

 

 

 

  • Un storyboard es un conjunto de ilustraciones mostradas en secuencia con el objetivo de servir de guía para entender una historia, previsualizar una animación o seguir la estructura de una película antes de realizarse o filmarse.

    t5-modelo-story.png

    El proceso de storyboarding, en la forma que se conoce hoy, fue desarrollado en el estudio de Walt Disney durante principios de los años 1930, después de varios años de procesos similares que fueron empleados en Disney y otros estudios de animación. El storyboarding se hizo popular en la producción de películas de acción viva durante principios de los años 1940.

    En la creación de una película con cualquier grado de fidelidad a una escritura, un storyboard proporciona una disposición visual de acontecimientos tal como deben ser vistos por el objetivo de la cámara. En el proceso de storyboarding los detalles más técnicos complicados en el trabajo de una película pueden ser descritos de manera eficiente en el cuadro (la imagen), o en la anotación al pie del mismo.
    La elaboración de un storyboard está en función directamente proporcional con el uso: en publicidad a menudo es mucho más general para que el director y el productor aporten con su talento y enriquezcan la filmación, mientras que en cine es mucho más técnico y elaborado para que sirva de guía a cada miembro del equipo de trabajo.
    También podemos encontrar storyboards llenos de color o en blanco y negro, llenos de detalles o simplemente trazos que esbozan una idea de figuras. Es común la utilización del storyboard en animaciones, ya sea tradicionales o por computadoras

    Aunque la evolución y desarrollo de los guiones gráficos o Storyboard está vinculada con el cine, en la producción y realización de productos multimedia es un elemento fundamental. Básicamente podemos definir un Storyboard como un modelo de visualización gráfica del guión y su estructura (Hart, 2001: 25). Como técnica de representación gráfica de soporte a la producción, bebe en sus orígenes del cine y del cómic fundamentalmente (Bou, op.cit.: 127 y sucs.) si bien ha sido aplicada con fortuna en otros campos.
    En una producción multimedia nos permite realizar una primera aproximación a las necesidades de producción, por una parte, y definir la tipología de diseño que vamos a seguir, por otra. En la medida en que la producción multimedia se acerque en su lenguaje al cine (v.g. animación) será útil, además, para establecer la planificación básica (ángulos de cámara, posiciones, encuadres, etc.).
    Granollers i Saltiveri y Lorés Vidal reconocen que para algunos autores, el storyboarding es un prototipado de baja fiabilidad. No obstante, ellos lo recomiendan especialmente para proyectos dirigidos a modificar un proceso de trabajo o las tareas habituales de un trabajador. El storyboarding no sirve para comprobar la interactividad del sistema, pero sí para discutir con diseñadores, clientes y responsables del proyecto los detalles de su funcionamiento.

       
    • Una manera sencilla de realizar un storyboard

      Debe combinar de manera interactiva texto, imágenes, audio y vídeo. Lo primero que hay que hacer es dividir la historia sobre sus partes lógicas, no lineales, como:
      • Una introducción con una entrada o párrafo principal donde se refleje por qué esta historia es importante.
      • Perfiles de los personajes de la historia.
      • Los acontecimientos que se quieren contar.
      • El proceso de cómo se produjo lo que se va a contar.
      • Los pros y los contras.
      • La historia del acontecimiento o la situación.
      • Otras cuestiones relacionadas con la historia.

      La página inicial (home) debe incluir un titular, el gráfico principal, un establecimiento visual y debe vincularse a otras partes, que son, por lo general, los subtemas de la historia total. Después de distribuir el contenido de la historia entre los medios a utilizar (vídeo, fotos, audio, gráficos y texto) habrá que decidir qué parte de la historia se trabaja mejor con cada medio.

      Un mapa interactivo ayuda a personalizar una historia, dándole al lector el camino para ubicar las ciudades o lugares específicos donde se desarrolla la historia que se está relatando. Es importante verificar que la información en cada medio sea complementaria y no redundante. La historia no debe ser lineal, sino interactiva. Lo que el storyboard hace es ayudar a precisar los puntos principales de la historia. Esto ayudará a identificar los recursos que se necesitarán para completar la historia, y a saber cómo se tendrá que modificar la historia para adaptarse a esos recursos.
      Podemos encontrar consejos y ejemplos de storyboard que nos ofrece la UC Berkeley Graduate School of Journalism.

    • Características básicas de formato del storyboard

      • El tamaño de las viñetas debe ser proporcional al formato de pantalla utilizado en la producción final. Los trabajos hechos para la televisión, producidos en cine o vídeo (videoclips, anuncios comerciales) y los audiovisuales con transparencias utilizan el formato denominado “académico” que tiene una proporción de tres tantos de altura por cuatro de ancho (3×4 ó 1.33:1). Los trabajos hechos para el cine pueden variar de proporción según el formato de película o de proyección que se utilice. La película de Super 8 mm y la de 16 mm utilizan el formato de 1.33:1 Para la película de 35 mm (cine comercial profesional) existen los siguiente tres formatos:
        • Widescreen o Pantalla Ancha (1.85:1). Es la norma comercial en la actualidad.
        • CinemaScope (2.35:1) Antiguamente este formato variaba de 2.55:1 a 1.66:1.
        • Panavision (2.4:1)
        • Super Panavision (2.4:1)
        • Super 35 (varía de 1.66:1 a 2.35:1)
        • Vista Vision (varía de 1.66:1 a 2:1)
      • Una vez determinado el orden de lectura del storyboard (de izquierda a derecha o de arriba hacia abajo) éste se debe mantener hasta el final.
      • Aunque existe un elevado número de formas para indicar la transacción entre las imágenes de un storyboard, la siguiente nomenclatura puede resultar sencilla de utilizar:
        • Las transacciones por corte directo no se indican.
        • Las transacciones por movimiento de cámara hacia o desde el tema (dolly in, dolly out) se indican con una flecha diagonal, dirigida hacia donde va el movimiento.
        • Las transacciones por movimiento de lente de la cámara (zoom) se indican con cuatro flechas dibujadas dentro de la viñeta, todas dirigidas hacia donde va el movimiento (hacia dentro de la imagen o desde dentro de la imagen).
        • Las transacciones por disolvencia entre una imagen y otra se indican con dos líneas curvas cruzadas en x.
        • Las transacciones por movimiento de cámara laterales (travelling, paneo) o verticales (tilt) se indican con una flecha dirigida hacia donde va el movimiento (de izquierda a derecha, de derecha a izquierda, de arriba hacia abajo o de abajo hacia arriba). (Fuente de información principal: scribd. com, Carlos Medrano, 2009)
    • Historia del storyboard

      El “storyboarding” se remonta a los comienzos del cine, cuando el celebre director ruso Sergei Eisenstein (El acorazado de Potemkin) empezó a usar esta técnica, pero se cree que una metodología similar fue puesta en práctica por Leonardo Da Vinci, quién utilizó tarjetas para poner sus ideas sobre la pared y examinar su disposición.
      El Storyboarding es una técnica de creatividad que permite sumergirse de forma total en ciertas ideas, con el fin de resolver un problema o generar un nuevo concepto, pues gracias a ella es posible ver las ideas de forma conjunta, junto con sus similitudes e interconexiones.
      La práctica del Storyboarding es hoy en día una popular técnica para facilitar el proceso de pensamiento creativo, que consiste básicamente en escribir sus ideas y pensamientos -y los de otros-, y ubicarlos sobre un pizarrón o pared, tanto si se trabaja en un proyecto o en la resolución de un problema.
      Esta técnica se popularizó en el mundo de la animación, cuando el equipo de Walt Disney desarrolló un sistema de Story Board en 1928. Disney buscaba lograr una animación total y para esto necesitaba producir un enorme número de dibujos.
      Con el uso de tarjetas se logran ver mejor las interrelaciones y correspondencias entre las ideas, y se tiene una mejor proyección del panorama global. Además, una vez que se comenzaron a utilizar las tarjetas, es más probable que las personas que intervienen se comprometan (y entusiasmen) con la tarea, y comiencen a surgir nuevas ideas e interrelaciones.
      Para implementar una solución de Storyboard se puede utilizar una pared de corcho o una superficie semejante, que permita sujetar algunas fichas de papel. También existen programas de software de disponibles, como el Corkboard.

      Primero se coloca una tarjeta que indica el tema, y bajo la misma se van poniendo diversas tarjetas que hacen las veces de encabezados sobre las tarjetas que vendrán: aspectos generales, categorías, consideraciones, etc.
      Bajo estas tarjetas de encabezamiento, se pondrán tarjetas de sub-ítems, que contendrán ideas relacionadas con las tarjetas de cada encabezamiento; estas son ideas de detalles generados por la sesión de pensamiento creativo, es decir ideas que desarrollan o complementan los encabezamientos.

    • Aplicaciones para el desarrollo de guiones gráficos

      Existen en el mercado numerosas aplicaciones que facilitan, y abaratan notablemente, la elaboración de guiones gráficos (Storyboard) para desarrollos multimedia.

      t5-frameforge.png

      FrameForge 3D Studio 2

      Por un lado están las herramientas de gestión de producción audiovisual como Movie Magic Screenwriter o Movie Magic Scheduling, o software de escritura de guiones como Final Draft, pero también existen distintas soluciones especializadas en el desarrollo de Storyboards como Storyboards Artist o FrameForge 3D Studio 2.
      Entre sus múltiples funciones, estas aplicaciones nos permiten:

      • Planificación detallada de los escenarios con controles sobre elementos como posicionamiento de cámara, control de objetos, la profundidad de campo, punto de foco, uso de ópticas, etc.
      • Amplia biblioteca de actores con variaciones de vestuario, evolución dinámica de edad, distintas etnias, expresiones, etc.
      • Distintos acabados de dibujo y presentaciones de las ilustraciones: renderizado realista, sobrelineado, dibujo o boceto de líneas.
      • Parrilla de construcción de espacios.

      Extensas bibliotecas de efectos (transparencias, “calcomanías” para sobreimpresiones, manejo de objetos, etc.) Posibilidad de ampliación de bibliotecas con espacios, sujetos y objetos específicos (guerra, ciencia ficción, etc.)

      t5-writter.png

      Movie Magic Screenwriter

  • Wireframing es una manera de diseñar un sitio web en el nivel estructural analizando las necesidades del usuario, así como la información que llevara dicho sitio. Los Wireframes se usan al inicio de un proceso de desarrollo para establecer la estructura básica de una página antes de que el diseño visual y el contenido se agrege. El objetivo de un Wireframe es proporcionar una comprensión visual de una página de inicio de un proyecto web para obtener la aprobación de los interesados y del equipo del proyecto, antes de que la fase creativa se ponga en marcha.

    El concepto de wireframe deriva del diseño gráfico, y hace referencia al esqueleto de una imagen semitransparente que muestra solo las aristas de la malla del objeto que representa. Así, la técnica del wireframing aplicada a esta fase del desarrollo permite generar una estructura básica (estática o funcional) del multimedia y comprobar si ésta responde adecuadamente a las necesidades del destinatario. Dejando de lado el diseño, un wireframe muestra la armadura del multimedia, y representa el flujo de entradas y salidas de cada pantalla. De este modo, se atiende a los dos aspectos básicos previos al diseño: operatividad (usabilidad, accesibilidad, funcionalidad…) y estructura del contenido.

    t5-modelo-wireframe.png

    Ejemplo de wireframe

    En el desarrollo web suele hacerse partícipes a los usuarios del proceso de diseño a través de la publicación de los wireframes que reflejan la estructura. Las observaciones que realizan los testeadores (cliente, agencia, usuarios tipo…) resultan de gran valor al facilitar una información de primera mano sobre las dificultades y ventajas que encuentran en la estructura propuesta. Cuando se trata de nuevos desarrollos, especialmente en proyectos de tamaño medio o grandes proyectos, además del criterio del cliente se suelen utilizar pruebas con usuarios potenciales para analizar si la planificación de la web está bien enfocada.

    t5-modelo-wireframe2.png

    NARRACIÓN GUIADA CON WIREFRAMES. Fuente: CNICE (MEC) Datos propios.

    Una de las evoluciones de esta técnica es la narración guiada con wireframes (Guided wireframe narrative) propuesta por Zapata (2006). Su utilización está indicada en aquellos casos en los que no es posible desarrollar un prototipo pero sí es necesario, por la complejidad de la aplicación a desarrollar, disponer de un modelo que permita contrastar con los usuarios (y los clientes) si el diseño contempla toda la información que será necesario manejar.
    Se trata, en definitiva, de la presentación secuenciada de los wireframes (con algún programa al efecto) relatando, en cada caso, las precisiones o excepciones que sean necesarias para comprender correctamente el futuro funcionamiento de la aplicación. Este tipo de narraciones deben mostrar, de forma desagregada (para evitar sobrecargas de información):

    • La jerarquía del multimedia
    • La definición de las pantallas
    • Los elementos básicos de diseño
    • Los modelos de interacción previstos

    Sus principales ventajas, frente a la técnica de los prototipos, es que resulta más sencilla y económica; frente a los wireframes clásicos y los guiones gráficos, que permiten una cierta funcionalidad que simula, a grandes rasgos, lo que se ha pensado para la aplicación definitiva.

    Antes de acometer un wireframe se deben realizar las siguientes tareas:

    • Entrevistas con el cliente y el equipo de desarrollo para definir los requisitos, los objetivos y el público objetivo.
    • Estudio del portal actual (si existe): problemas de usabilidad y accesibilidad, estadísticas de acceso, test con usuarios y encuestas (en función del tipo del portal).
    • Benchmarking, o estudio comparativo de la competencia.
    • Definición de la arquitectura de información y mapa web.

    Tipos de Wireframe

    Herramientas para realizar un wireframe: Illustrator, Photoshop, PowerPoint, Visio, OpenOfficeDraw, Omnigraffe, etc.

    Axure.

    Aplicaciones para el desarrollo de wireframes

    Las herramientas utilizadas para elaborar un wireframe son, normalmente, aplicaciones de diseño que permiten elaborar diagramas y estructuras de forma sencilla. También se realizan en ocasiones “navegables” con esos diseños montados con programas de presentaciones de distintos paquetes ofimáticos.
    Como en todo este campo, los avances teóricos son constantes, y, en la misma Red, se publican diariamente artículos y conferencias que van sedimentando un poso teórico que, por una parte, fundamenta el copioso hacer y, por otro, establece un marco epistemológico que sirve de referencia a las nuevas producciones. En relación a la técnica del wireframe, uno de los especialistas en desarrollo web más contrastados, el canadiense Dan Brown, ha desarrollado un sistema para la presentación de datos en este tipo de representaciones.
    t5-modelo-wireframe3.png
    En la siguiente página se puede encontrar un listado de algunas herramientas Web para realizar wireframes, tales como Hot Gloo, Mockingbird, Pencil Project, Proto Share, Balsamiq, Flair Builder, Cacoo, Serena: Prototype Composer, MockFlow, FluidIA, Lumzy, GUI Studio Desing, iPlotz, OmniGraffle, o MocklupScreens:  http://collectioncode.com/interes/herramientas-web-para-disenar-interfaces-mockups-wireframes-prototipos/

    Referencias:

  • La elaboración de prototipos es una técnica que resulta útil cuando se trata de proyectos complejos, de alcance económico alto, y en los que se cuenta con clientes o usuarios finales que son capaces de “leer” adecuadamente las características de un prototipo. El objetivo de un prototipo es ayudar en la detección de posibles errores funcionales o de diseño, evitar malas orientaciones de desarrollo (derivadas, por ejemplo, de diferentes interpretaciones entre el cliente y el equipo de diseño multimedia) y, sobre todo, ayudar a organizar efectivamente el camino de producción, lo que ha de suponer un ahorro de costes y tiempo en la fase de desarrollo.

    Son numerosas las formas de realizar un prototipo, pues podemos ir desde esquemas básicos realizados en papel, a representaciones de gran fidelidad que, además, ofrecen un modelo de funcionalidad característica del multimedia.
    Es recomendable que los prototipos estén desarrollados de forma modular y sean reutilizables, pues ello permite que el esfuerzo realizado pueda aprovecharse en fases posteriores del desarrollo. Así, podemos considerar dos tipos de prototipos:

    • Reutilizables (evolutionary prototyping):  Se elabora de modo que el conjunto o algunas partes sirvan de base al desarrollo final.
    • Modulares (incremental prototyping):  Se genera un modelo básico y, a partir de éste, se van añadiendo nuevos elementos según evoluciona el ciclo de desarrollo.

    La técnica del prototipado en papel es un modelo dirigido al diseño iterativo de interfaces de usuario que se basa en la producción de un modelo en soporte papel sobre el que se realizan pruebas de usuario en el diseño inicial de interfaces y estructuras de información de productos multimedia. Reúne algunas características interesantes por las que resulta eficaz en numerosos casos. En primer lugar, es un sistema rápido y barato para realizar pruebas con usuarios y calibrar, de este modo, la utilidad del diseño de un sistema multimedia. En segundo, al poder realizarse de forma sencilla permite realizar pruebas correctivas de forma secuenciada, con lo que es posible ir realizando cambio de manera ágil en el diseño inicial.

    t5-prototipado-papel.png

    EJEMPLO DE PROTOTIPADO DE PAPEL. Fuente: Nielsen Norman Group

     

    Supongamos que tratamos de simular el comportamiento de una funcionalidad concreta de una aplicación que se ejecuta en una PDA. Los prototipos de papel serán las diferentes pantallas que el usuario se encontraría como resultado de las diferentes interacciones que produciría, las cuales son, evidentemente, ficticias. Cuando se realiza un prototipo de papel, no debemos olvidar que de lo que se trata es de reflejar aquellos aspectos de la interfaz del usuario referidos a las interacciones que el sistema le proporciona. Esto indica un prototipo de papel que deberá mostrar dos aspectos muy importantes: uno es la presentación, que hace referencia a qué elementos proporciona esta interfaz para la interacción, y el otro es la navegación, en forma de información complementaria con diseño claramente perceptible que facilite la movilidad durante la fase de evaluación del prototipo. Esta técnica proporciona ciertas posibilidades interactivas al prototipo que facilitan su evaluación (Granollers i Saltiveri y Lorés Vidal, 2005).

    Dado que supone realizar pruebas sobre un soporte distinto sobre el que se desarrollará posteriormente el producto, posee sus propias estrategias de desarrollo, así como códigos específicos para ilustrar convenientemente la representación de pantallas, los widgets de la interfaz, o los elementos que responden a interacciones complejas del usuario, como búsquedas, soltar y arrastrar, cambios de foco, scrolling, o manejo de elementos multimedia.

Ciberimaginario

Research Group of Rey Juan Carlos University and Research Association ICONO14

Latest posts by Ciberimaginario (see all)

Deja un comentario

*

Por seguridad, por favor, realiza la siguiente operación *

captcha *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.