14
Diseño de interfaz para Iphone La guía del Autoestopista galácco Julián Andrés Osorio Torres Orientación Gráfica 1072642726

Ejemplo 2

Embed Size (px)

DESCRIPTION

Presentacion del proceso de interfaz grafica para ipod touch sobre "la guia del viajero intergalactico"

Citation preview

Page 1: Ejemplo 2

Diseño de interfaz para IphoneLa guía del Autoestopista galácticoJulián Andrés Osorio Torres

Orientación Gráfica1072642726

Page 2: Ejemplo 2

Siempre se pierde en mi memoria el poceso intermedio entre una idea y la materialización de esa idea. En un proyecto de diseño dodne debemos sintetizar l omás posible, comunicando con máxima eficacia. Con este proyecto veo finalmente como es ese proceso de idea a realidad. Iniciando con un problema y un deseo de resolverlo, luego una investigación o docuemntación sobre todos los factores que intervienen o que se podrían necesitar. Luego de varias sesiones de bocetación, de muchas pruebas-y-error, el panorama se aclara y las ideas, luego de pasar por mucho escrutiño, van tomando forma.

La búsqueda por los pictogramas de la aplicación Ipod para la película La guía del autoestopista galáctico pasó por un proceso como este, tan solo que esta vez era racional, paso a paso y con un proceso que permite recordar, cómo llegamos a esta solución, partiendo tan solo de una idea.

Introducción

Page 3: Ejemplo 2

Diseñar los pictogramas, ventanas y secciones que debe tener la aplicación de la pelicula La guía del autoestopista galáctico, teniendo en cuenta las limitantes del soporte elegido. Este problema busca relacionar los temas: pictogramas, interfaz, mapas y señalizacion. La solución deberá cumplir con los siguientes factores: síntesis, estilización, legibilidad, unidad y un grado de universalidad.

Diseñar la interfaz gráfica de usuario (GUI) para una aplicación de ipod touch sobre la pelicula La guía del autoestopista galáctico.

Descripción

Problema

Page 4: Ejemplo 2

Documentación

Sobre la película

Así como se nos presenta un problema de diseño, nada pequeño, debemos buscar una solución que iguale su tamaño. Por esta razón se buscan las fuentes, todo lo relacionado con los elementos que intervienen, desde el pictograma hasta la película y los medios digitales. En el caso de La guía del autoestopista galáctico, su mayor atractivo yace en lo conceptual de su temática: una guía universal.

La guía del autoestopista galáctico está basada en una serie de novelas secritas por Douglas Adams. Estas novelas se emitieron por primera vez como una serie radial en el año de 1978.

Douglas Adams fue un hombre ocupado durante su vida, partici-pó en compañías de actores donde escribía guiones y elaboraba seriados para la radio. Nacido en Cambridge, Ingleaterra, alcanzó el reocnocimineto por su serie de novelas del autoestopista galáctico. Falleció en el 2001 en Califronia.

Asistió a la Universidad de Cambridge entre 1970 y 1974. Fuer du-rante este tiempo que Adams decidió “mochiliar” hasta Estambul, convirtiendose en Autoestopista y haciendo trabjos para sostenerse durante su viaje. Relata Adams que su idea de la novela le surgió estando ebrio en un parque. Pero su idea se materializó en 1977 cuando conoció a Simon Brett, quien estaba a cargo de una radio novela y entre ambos decidieron producir La guía del autoestopista galáctico.

En Mayo de 2001 Douglas Adams falleció, dejando atrás a su es-posa Jane y su hija Polly. Su partida sorprendió a su familia y a sus fans. Habia iniciado el borrador para la adaptación cinematográfica de su gran éxito La guía del Autoestopista galáctico.

Page 5: Ejemplo 2

SinopsisArthur Dent despierta una mañana y repentinamente van a demoler su casa, su amigo Ford Prefect aparece, le revela que la tierra va a ser destruida, ambos consiguen un aventón antes de la catalísmica explosión.Luego son rescatados por la nave Corazón de Oro, abordo encuentran a Zaphod Beeblebrox (presidente de la galaxia) y a Trillian, la última mujer humana y el amor de Arthur (universo pequeño, ¿no?) y a Marvin, un robot depresivo con un severo caso de megacefalia.Se embarcan por la galaxia buscando la repsuetsa a la pregunta absoluta, u tilizan una guía galáctica como glosario, los persiguen alienígenas y finalmente encuentran un lugar misterioso donde construyen planetas. Luego ocurren una serie de eventos y fin.(¿Creían que iba a contarles el final?)

La guía del autoestopista galáctico es una adpatación de la novela orignial de D.Adams, estrenada en el año 2005, dirigida por Garth Jennings y p rotagonizada por: Martin Freeman, Mos Def, Zooey Deschanel, Sam Rockwell, Alan Rickman y Helen Mirren.

Cartel Promocional EE.UU.www.fanpop.com

Page 6: Ejemplo 2

Pictogramas

Características

Referentes

Es una representación sintética de un objeto, forma, acciones, animales etcetera. Esa su vez un signo visual que sirve como ícono o señal de acuerdo a un contexto particular.

En el diseño de un poctograma intervienen unos factores clave:Síntesis: eliminación de detalles para utilizar unicamente los razgos reconocibles y esenciales del objeto representado.Unidad: que los pictogramas guarden coherencia entre sí, similitudes que los unifiquen.Estilización: que las caracterísitcas del trazo y en general de la construcción del pictograma, los destaquen de pictograms ya conocidos.Legibilidad: que sean claros y visibles a distancias más largas.Universalidad: Que sena comprensibles fuera de un contexto cultural, que signifiquen lo mismo sin importar el idioma, lugar o contexto.

Algunos referentes para el desarrollo de la interfaz de aplicación Ipod, fueron:Gerd Arntz: Padre de los primeros pictogramas para uso público.Los pictogramas de los Juegos Olímpicos de Moscú 1980. Pictogramas para aplicación Ipod de Neven Morgan.Los pictogramas que usa La guía del autoestopista galáctico.

Gerd Arntz: Pictogramas; síntesis.

Nikolai Belkov:Síntesis; relación con el campo, retícula.

Arte de la película: con pocos elementos, comunican el sentido completo.

Page 7: Ejemplo 2

Interfaz

En el diseño de Interfaz...

El interfaz es un limite y espacio común entre un usuario y un objeto, que permite la comunicación entre ambos. Es también un conjunto de elementos organizados en un sistema que permiten desarrollar una función deseada por el usuario.

Para un diseño eficaz de interfaces se debe tern en cuena los siguientes ítems:Usabilidad: su función y su comprensión de ususarioFacilidad de uso: que sea claro y comprensible para el usuario objetivo.Facilidad de aprendizaje: que la curva de aprendizaje de la interfaz sea coherente con su nivel de especificidad y su usuario objetivo.Apreciación: a nivel subjetivo la interfaz debe ser “amigable”, presentarse de forma que el usuario disfrute la interfaz y que visualmente le sea agradable.

En Reason 4.0 tenemos una interfaz muy especializada, orientada hacia un ususario específico. Requiere de un aprendizaje más extenso dado que la interfaz tiene muchas rutas y muchas opciones, que no se ven en primera instancia.

La interfaz de un Iphone es amigable para todos los usuarios. Presenta una navegación clara, con rutas básicas y una gran facilidad de aprendizaje.

Page 8: Ejemplo 2

Bocetos

Primero Palabras claves, conceptos relacionas y “bocetos” (mamarrachos).

Una elaboación más puntual de los bocetos.

Buscando interpretar los conceptos de forma más sintética e inmediata.

Page 9: Ejemplo 2

BocetosEn esta ocasión se hicieron pruebas preeliminares en formatos de 20x20 cms., para determinar si los pictogramas funcionaban.

Algunos sospechosamente parecidos a otras cosas (abc?). No funcionan...eliminados.

De forma tímida aparece la elipse, un tema que luego será importante.

Page 10: Ejemplo 2

Bocetos

Finalmente la elipse sirvió para organizar todo el caos anterior y unificar las ideas.

En esta instancia los bocetos empiezan a tomar mejor forma, utilizan menos recursos. A la vez dan muestra de las posibilidades desarrolladas a partir de una idea orignial.

Page 11: Ejemplo 2

Los pictogramas resueltos con un trazo similar, composición diagonal y como tema principal una elipse. Una solución en un 90%.

Bocetos

La estructura principalmente divididad en una retícula de 8x8, con dos elipses diagonales, marcan el espacio compositivo

Page 12: Ejemplo 2

Final

Page 13: Ejemplo 2

Mapa de Navegación

RutasMapasPlanetasEstrellasGalaxiasAsteroidesSitios de interésSupernovasAgujeros negrosConstelaciones

TerminalesTransportesTurbinasCombustibleRepuestosAleronesHalcón MilenarioCohetesUFOSHiperespacio

AltairiansBelcerebonsBetelgeusiansDelfinesHumanosMagratheanosRatonesVogonsWookies

Traductor Verbal yEscrito.Inglés/ EspañolBabelfish DigitalFonemasExpresionesSignosIdentificador de ofensas.

Guía del Autoestopsta galáctico.

Page 14: Ejemplo 2

Conclusión Tras muchas pruebas y errores, bocetos y esquemas se alcanza una síntesis de los conceptos propuestos: Rutas, Transportes, Alienígenas, traductor, Icono de Inicio. La unidad mediante una estilización similar, y elementos compositivos comunes: la diagonal, la elipse y el trazo. El color, básico (blanco en contra forma) en formas báscias. Un aspecto importante del desarrollo del ejercicio es el proceso de evolución de la idea. En primera instancia se dispuso de todo el material que se abordaría y de allí inicia la interpretación gráfica de las ideas.

Un problema de diseño de aplicación Ipod, sobre la película La guía del autoestopista galáctico, logra ser resuelto gracias a arduas jornadas de bocetación, noches frente al computador y cafés. Pero sobretodo por un proceso de asimilación, investigación, bocetación y evaluación.

“Adiós y gracias por todo el pescado...”