Manual de interfaz para Ipad

1

DiseĂąo de interfaz Regulador de ĂĄnimos app. para ipad

Daniel Lara Cardona Diseño de Orientación Gráfica Bog o t á , 2 012

Contenido 4 Introducción 5 Problema 5 Descripción 6 Documentación 11 Bocetación & pantallazos 21 Conclusión

4

Introducción “palabras breves sobre la orientación gráfica” La orientación es uno de los procesos primarios del hombre, en tanto es la actividad que le permite dar cuenta de un espacio-tiempo en el que se desenvuelve.

Tal característica hace de éste, una actividad cotidiana e importantísima, a la cual el diseñador debe prestar toda su atención para resolver los problemas existentes, de una manera eficaz.

Sea desde la señalética, desde la cartografía, o aún desde elementos tan simples como un medio impreso o una aplicación para Ipad, el diseñador debe cumplir a cabalidad su tarea. Debe ser capaz de facilitar el movimiento del usuario a través de ésta, así como debe ser sumamente conciso y creativo como para captar la atención de éste, y además transmitirle un mensaje determinado.

5

Problema Diseñar la interfaz gráfica de usuario (GUI) para una aplicación de Ipad, teniendo en cuenta el referente: “¿Sueñan los androides con ovejas eléctricas?”, novela de ciencia ficción escrita por Philip K. Dick.

Descripción Aplicar los conocimientos adquiridos en clase, en el diseño de una interfaz gráfica para una aplicación de Ipad. Para ello, se realiza una búsqueda previa de referentes que permita ampliar el repertorio de imágenes al respecto, y que además permita el análisis y futura construcción, de los pictogramas que harán parte de dicha aplicación.

Tales referentes deben concordar con el objetivo previo de la aplicación, y deben colaborar en la construcción de un discurso sólido que permita la verosimilitud y la coherencia de la aplicación.

6

Documentación Sobre Philip K. Dick Philip Kindred Dick fue un escritor estadounidense de ciencia ficción, nacido el 16 de diciembre de 1928 en Chicago. Sus obras más reconocidas incluyen: “El hombre en el castillo”, “Los tres estigmas de Palmer Eldritch”, “¿Sueñan los androides con ovejas eléctricas?”, “Ubik”, “Tiempo de Marte”, “Fluyan mis lágrimas, dijo el policía”, “Una mirada a la oscuridad” y “SIVAINVI” En especial, sus obras se centran en futuras realidades distorsionadas donde el hombre debe hacer frente a las máquinas. Así pues, se puede decir que Dick, a través de sus obras, exploró las dimensiones desconocidas del ser humano (en especial la psicología y la incertidumbre sobre el futuro)

7

“¿Sueñan los androides con ovejas eléctricas?”

El primer referente que se tuvo en cuenta para el desarrollo de la aplicación, corresponde al libro “¿Sueñan los androides con ovejas eléctricas?”. A partir de su lectura se procede a hacer un análisis sobre el Regulador de ánimos, objeto propio del libro que sirve como punto de inspiración para el diseño de la aplicación para Ipad.

Así pues, se procede a analizar cada una de sus características, entre las cuales encontramos: Funcionamiento a través de un dial, combinaciones de números que le permiten al usuario ingresar a un estado anímico predeterminado, la posibilidad de agendar emociones para determinados días y horas, y por último, el ofrecimiento de un basto catálogo de emociones que abarca desde la euforia más grande, hasta sentimientos de depresión y tristeza. Gracias a ésta investigación, se dilucida en primer momento la función de la aplicación.

8

Blade runner El segundo referente que se tuvo en cuenta para la planeación de los pictogramas, fue la película “Blade Runner” (basada en el libro de Philip K. Dick) El interés particular en la adaptación de “¿Sueñan los androides con ovejas eléctricas?” para la pantalla grande, consistió en su estética; puesto que lleva a la “realidad visual” toda la gran mayoría de la

MEGAMAN BATTLE NETWORK

tecnología puesta en el libro. Así pues, sirvió

Éste es uno de los dos referentes externos

como punto de partida para lograr una pro-

tomados en cuenta para la definición de la

puesta estética consistente.

estética de los pictogramas. Dada la ambientación futurista y digital que se encuentra detrás de éste, sus acercamientos al problema de los íconos y los pictogramas son un elemento tenido altamente en cuenta para el diseño de los mismos en la aplicación de Ipad.

Así pues, su análisis permitió acercarse a la estética futurista desde una perspectiva de lo didáctico y funcional.

9

Megaman zero Otro de los referentes externos tomados en cuenta para la determinación de la estética final de la aplicación. Posee también un carácter futurista y ofrece una vista totalmente distinta a la de Megaman Battle Network, en tanto habla de una distopía.

ICONWERK

Gracias a éste, fue posible hacer un análisis de lo que podría ser el futuro (dentro de lo utópico y lo distópico), condensando así ambos puntos de vista para lograr una interfaz que resuma tales visiones del mundo.

Ya dispuestos en un ámbito más académico, se procede a estudiar la lógica de los pictogramas. Para ésto, se tiene en cuenta el trabajo de ICONWERK, aclamada por sus trabajos concernientes a pictogramas.

Partiendo de éstos, se analiza el nivel de simplificación, la cantidad de figuras usadas, el manejo del alto contraste, el calibre de las líneas, la facilidad de identificación y recordación, y la unidad estructural entre íconos de la misma gama. Tal estudio se verá reflejado en el desarrollo de los pictogramas de la aplicación.

10

Who has the biggest brain? Ésta es una aplicación de Playfish que inicialmente se pensó para facebook, y que luego se expandió a Ipod.

A través de una serie de actividades lúdicas, permite calificar “el nivel de inteligencia de una persona” Su interfaz, trabaja distintos colores dependiendo del área del pensamiento que trabaja el juego en cuestión, y cada uno de sus elementos corresponden a una misma estética. Analizando a ésta, se parte a realizar soluciones gráficas que dentro de la misma aplicación conserven grandes rasgos de semejanza. Asimismo, se toma la idea del color como método para destacar áreas concretas (En éste caso sentimientos)

11

Bocetación & pantallazos

Los bocetos incluidos en ésta página corresponden a las bocetaciones que se hicieron entorno al ícono de la aplicación.

12

Los dos primeros bocetos corresponden a las ideas de Ă­conos. Los demĂĄs corresponden a bocetos de los pictogramas de la aplicaciĂłn.

13

Muestra de bocetos digitales realizados para los pictogramas de la aplicaci贸n.

14

Ícono resuelto para la aplicación

15

Árbol de navegación

Agenda

Dial

Ventana de carga

Menú

Juegos

Sincronizar

Opciones

16

Pantallazo del Ă­cono en la pantalla del IPad

17

Pantallazo de la pรกgina de carga

18

Pantallazo del menĂş

19

Pantallazo del menĂş de Dial, con varias de las emociones listas para ser marcadas

20

Pantallazo de la secci贸n de sincronizaci贸n

21

CONCLUSIÓN Apuntes finales del trabajo El ejercicio de clase fue una clara herramienta para entender el razonamiento de los pictogramas.

Durante todo el proceso fue evidente la necesidad de que éstos debían ser claros, concisos y facilmente identificables. De éste modo, desde el mismo proceso de bocetación fue relevante el desarrollo de una síntesis efectiva de los caracteres.

Asimismo, el ejercicio para mantener una unidad fue el eje que demandó la búsqueda de una serie de formas y fórmulas propias para éste problema. En éste caso, un contenedor circular que es penetrado por un rectángulo blanco, en cuyo centro hay un círculo que es perforado determinadas formas.

Gracias pues a éste ejercicio, se tiene claridad sobre las condiciones que deben tener los pictogramas.

22

NOTA IMPORTANTE: Todas las imágenes presentes en la sección de documentación pertenecen a sus debidos autores. En orden de aparición: Página oficial de Philip K. Dick, Tony Parker, Capcom©, Iconwerk & Playfish©

24