Metáfora Escogida en diferentes Estilos

METAFORA

La metáfora propuesta es la representación del portafolio (maleta) personal del diseñador y comunicólogo Joan Costa, en donde dentro de esta se encuentran  diferentes objetos los cuales serán los iconos correspondientes para cada uno de los hipervínculos principales establecidos en el mapa de navegación propuesto.

En su totalidad, el portafolio contendrá 5 objetos (hipervínculos) principales, en donde cada uno aludirá y relacionará directamente a la temática y aspectos a destacar del autor que se quiere representar.

Los cincos objetos dentro de la maleta con los que el usuario se encontrará son:

·         Lápiz, lapicero y borrador: Icono para la categoría de biografía.

·         Fotografías: Icono que representa la galería.

·         Periódico: Icono que representa las publicaciones del autor.

·         Folder / Carpeta: Representa la categoría de producciones.

·         Libreta de apuntes: Representación para el hipervínculo de los créditos

Por otra parte, además del portafolio con sus correspondientes ítems, en la pantalla principal se dispondrá en la parte superior derecha un botón con el icono de audio, en donde el usuario decidirá si desea navegar dentro del sitioweb con o sin sonido. Junto con este icono, se dispondrá un segundo botón que tenga la descripción "intro",  el cual permitirá al usuario volver a la introducción inicial que se presenta al acceder en el sitio multimedia.

Es necesario aclarar que estos botones con sus respectivos iconos variarán dependiendo de la categoría y pantalla, pero estos siempre estarán dispuestos en la misma ubicación: esquina superior derecha.

Con respecto a las pantallas internas, los botones que se dispondrán en la parte superior son volver al menú principal, volver un paso atrás y audio.

También se evidenciara en la esquina inferior derecha (sobre el nombre del proyecto) la subcategoría en la que el usuario se encentra navegando.

Además, al igual que los respectivos botones de navegación en cada una de las pantallas, en la esquina inferior derecha se representará el nombre del proyecto multimedia y allí mismo, el nombre de la respectiva categoría y subcategoría en la que se encuentra el usuario.

Adaptaciones de la metáfora de la maleta

Esta metáfora representará una maleta muy especial,  ya que está se caracteriza por tener aspectos mágicos y fantasiosos. La idea se hace con la intención de hacer la idea de la maleta mucho más interesante para así captar la atención del usuario.

Descripción

En esta propuesta, se presentará como introducción del sitio web la maleta cayendo desde el cielo. La maleta cae durante un buen tiempo mientras se escucha la voz del autor preocupado por sus posesiones.

Al llegar al suelo se escucha un golpe y se levanta humo. Al despejarse este se puede observar que no le sucede nada a la maleta. Esta queda de pie y además se puede visualizar que la misma contiene un letrero que dice "no abrir".

 El usuario por la curiosidad accederá al contenido de la maleta del autor dando clic sobre la misma. Al hacer esto se encontrará con que este objeto tiene un toque mágico, porque todo se empieza a retorcer junto con la presencia de muchos colores. Al desaparecer estos, se evidenciará la maleta abierta en donde todo su contenido sale expulsado y queda levitando.

Este será el menú principal y los elementos que levitan conformarán cada uno de los hipervínculos principales que contienen la información.

 Pantallas internas:

Para mantener el concepto de la maleta mágica y fantasiosa, los elementos dentro de las respectivas pantallas internas se conservarán con el movimiento o sensación de levitación.

Para pasar del menú principal al respectivo hipervínculo seleccionado, se hará una especie de acercamiento sólo del hipervínculo, en donde los demás desaparecerán y la maleta se reducirá y posicionará en la esquina inferior derecha

y además, al ser seleccionado determinado hipervínculo por el usuario, la representación gráfica que lo identifica, realizará una acción llamativa y fantástica a la vez: Por ejemplo: brillar, expulsar destellos, que el lápiz escriba solo, las hojas salen volando, etc.

Acerca de la parte gráfica:

El estilo de la representación grafica de la propuesta es el de la apariencia de pinturas acuarelas. En donde se alude que se ha pintado sobre un papel pergamino.

Este aspecto lo hace interesante y además ayuda a darle siento sentido al aspecto fantasioso y mágico en la aplicación del color. 

OPCIÓN 2

Estilo Gráfico:

La siguiente adaptación de la metáfora tiene como temática usar un estilo de dibujo rayado basado en un ambiente callejero e informal. Donde el estilo gráfico se inclina por parecer un dibujo a mano, sin pretender utilizar la lógica del dibujo de las líneas bien estructuradas y precisas.

Descripción.

En esta propuesta se presentara previo a la ventana de inicio o menú, un video que pueda contextualizar al usuario sobre la página web. Debido a esto, se cuenta una historia mediante este video de introducción, en el que se aprecia que Joan Costa se encuentra caminando por la calle con su maleta personal donde tiene sus documentos de trabajo y algunos objetos personales.

Debido a un descuido Joan extravía su maleta por un callejón. Luego de eso, el usuario se encuentra en el inicio con la maleta de Costa hasta que por medio de un clic a la maleta, esta se pueda abrir y así descubrir lo que el diseñador lleva en ésta. Por tal razón, la página web llevaría el nombre de Descubriendo a Joan Costa, ya que se tomaría al usuario como quien espía entre los objetos de Costa y de esta forma puede adquirir información de él y así poder conocerlo.

 En cuanto al manejo cromático, un aspecto a resaltar es que en la introducción y hasta el inicio los colores que se aplicarían serian tonos de las gamas de grises o blanco y negro, sin embargo ya en la parte del inicio, cuando el usuario decida hacer clic sobre la maleta, ésta y todo a su alrededor pasara a color. Además, de la maleta sale una explosión de colores.

 Pantalla Interna:

Para mantener el concepto de que el usuario se encuentra dentro de la maleta, en todas las pantallas internas se mantendrá la misma forma y el color que alude a la maleta, al igual que siempre se presentará el nombre de la página en la parte inferior derecha, y en las pantallas internas la respectiva categoría a la que se ha accedido. Luego se presentará, dependiendo del elemento la subcategoría en la parte central de la pantalla. En la parte inferior izquierda, en este caso de la categoría de biografía, se encuentran las otras opciones o hipervínculos que lo conforman (etapa adulta, premios). En la parte superior derecha se encuentran los botones de regreso a menú, opción de audio y regreso a la pantalla anterior. 

OPCIÓN 3

En esta propuesta, la maleta se encontraría viajando por muchas partes hasta terminar en una casa ( representación de la propagación de los conceptos de Joan costa, contando una breve descripción del autor) ahí estará en una oficina, a punto de estallar. Invitando a el usuario a abrirla

 El usuario por la curiosidad accederá al contenido de la maleta del autor dando clic sobre la misma. La cual estará soltando pequeños reflejos de luz, los cuales aran contraste con el sepia de resto de la habitación. Al hacer esto se encontrará con que este objeto tiene un toque mágico, ya que dentro de ella no hay finito, y sus objetos más importantes están flotando en su interior.

Este será el menú principal y los elementos que levitan conformarán cada uno de los hipervínculos principales que contienen la información. Estarán en un estilo grafico tipo “hand draw” como si se tratase todo de un boceto, pero al pasar el cursor por el hipervínculo este estallaría en colores.

Pantallas internas:

Para mantener el concepto de la maleta mágica y fantasiosa, los elementos dentro de las respectivas pantallas internas se conservarán con el movimiento o sensación de levitación.

Para pasar del menú principal al respectivo hipervínculo seleccionado, se hará una especie de acercamiento sólo del hipervínculo, en donde los demás desaparecerán y la maleta se reducirá y posicionará en la esquina inferior derecha

Además, al ser seleccionado determinado hipervínculo por el usuario, la representación gráfica que lo identifica, realizará una acción llamativa y fantástica a la vez: Por ejemplo: brillar, expulsar destellos, que el lápiz escriba solo, las hojas salen volando, etc.

Acerca de la parte gráfica:

El estilo de la representación grafica de la propuesta es el de la apariencia de hacerlo a mano con la diferencia en el humo de colores .

Este aspecto lo hace interesante y además ayuda a darle siento sentido al aspecto fantasioso y mágico en la aplicación del color. 

OPCIÓN 4

Estilo Gráfico:

En esta opción de la metáfora se verá un estilo de dibujo de líneas, con color de fondo y pinceles para resaltar detalles de sombras.

Descripción.

El inicio de esta metáfora consta de una vista ampliada del portafolio, siguiente de un haz de luz que sale de él cuando el usuario da clic y se abre enviándolo a un mundo donde las cosas del portafolio se ven gigantes. Dentro, el usuario podrá desplazarse por el portafolio y acercándose a cada ícono, podrá acceder al menú determinado. En todas las pantallas se conserva el color de fondo, debido a que el usuario está dentro del portafolio.

A continuación se mostrará la primera pantalla, seguida del menú principal y como ejemplo, la pantalla de la Biografía

Las flechas son para el desplazamiento del usuario por dentro de la maleta o portafolio.

Pantalla Interna:

Se mostrará la pantalla de Biografía teniendo como orientación para el usuario, los íconos del menú y categorías en las cuales él ingrese, al igual que las flechas para avanzar o retroceder. El conjunto de flechas del extremo inferior, se utilizaran como otra forma para salir rápidamente del menú completo de Biografía, sin tener que usar el botón de Menú o de Atrás.