Diseño de Interfaz: Exportación no Tradicional

Comments Off | Escrito por Adolfo el 27 de Enero de 2008

(Vuelvo a retomar mi blog después de tanto tiempo y después de de un intenso fin de año que concluyó con la organización de mi memorable matrimonio).

Hace mucho tiempo quería compartir esta experiencia laboral que me ha traído bastante feliz durante este último tiempo. A mediados de agosto de 2007 estuve chateando con Andreas Spading, un amigo (ex-ayerviernino) que está en Berlín (Alemania) y aparte de contarme coloquialmente de su vida me contó que estaba gestando, junto a otros amigos, un proyecto web 2.0 que lo tenía muy ocupado. Al avanzar la conversación me fuí llevando una increíble sorpresa pues empezó a preguntarme si estaría interesado en diseñar la interfaz para dicho proyecto. Cuento corto: no lo pensé 2 veces y, después de acordar los honorarios y tener nuestra primera y única conversación vía skype, empecé a fines de agosto a recibir sus primeros requerimientos. Estos concretamente consistieron en diseñar la imagen gráfica del proyecto y el diseño de la interfaz de la primera etapa.

El proyecto Sofatutor (online desde la semana pasada y disponible solamente en alemán) es una plataforma web 2.0 ubicada en el ámbito educacional con un fin simple: convertirse en un punto de encuentro de estudiantes de todo tipo. La idea es que estudiantes de colegios, universidades o incluso personas que quieran estudiar por su propia cuenta, accedan a esta plataforma y compartan desde archivos para descargas hasta videos, y ojalá considerarla como una alternativa para la educación clásica. El desafío fue grande porque sólo a través de emails fuimos dándole forma al proyecto. Primero fue la imagen y después la interfaz misma que debía responder a requerimientos concretos como contruir una imagen lista, elegante e inteligente.

Ellos (Andreas y sus amigos) están muy felices con los resultados de este primera etapa. Yo creo que estoy más feliz que ellos por muchas razones: porque me siento muy afortunado de que de tan lejos hayan contratado mis servicios; porque diseñé una interfaz para una cultura que en términos estéticos de diseño siempre he admirado; y porque esta experiencia se suma a otras que demuestran que hay productos no tradicionales que se pueden exportar como es el diseño de interfaz.

Archivado en: Equipo

Sobre la representación y discreción de un ícono

Comments Off | Escrito por Adolfo el 17 de Octubre de 2007

Cuando partí diseñando interfaces en AyerViernes fuí asumiendo poco a poco la necesidad de destinar mínimas áereas de pixeles de la interfaz a unas unidades muy discretas que complementaban específicas entregas de información: íconos. Sí, pueden reirse de mis primeros intentos a 1 bit, pero de a poco fuí incorporandoles color

Pero estas pequeñas unidades, que son representaciones gráficas que nos ayudan a reconocer ciertos objetos, comandos o cualquier acción que un usuario necesite desplegar en una interfaz, no sólo complementan una acción, sino que construyen un reconocimento por parte del usuario de determinadas acciones a realizar. Por ejemplo, un usuario podrá reconocer rápidamente que una noticia tiene un video asociado () en cnn.com, así le ahorraremos unos segundos.

Es así como he podido establecer un par de características primordiales (a nivel conceptual, no técnico) para poder construir un ícono:

1. Representación: un ícono debe dar al usuario mínimas y certeras caracteristicas gráficas que permitan representar la acción determinada. Si bien no caer en extremos como realismos exagerados ni abstracciones indescifrables, hay que tratar de rescatar los elementos más representativos del objeto o acción a representar. Asi evitamos que un usuario se cuestione: ¿esto es una escalera o una linea de trenes?
2. Discreción: cuando el año pasado preparé una presentación para los alumnos de 4º año de Diseño Gráfico de la Escuela de Arquitectura y Diseño PUCV acerca de los íconos, reparé que estamos rodeados de interfaces con un sin número de íconos (desde nuestro reloj despertador hasta el navegador que ahora mismo estoy usando, pasando por el celular, las indicaciones de los quemadores de nuestra cocina, etc.) que construyen su espacio de una manera no invasiva, sino discreta. Esta discreción dice del como nosotros los diseñadores de interfaz, debemos definir las precisas ubicaciones y tamaños en una determinada interfaz sin que un ícono reste protagonismo a la acción y termine por deformarla.

Archivado en: Equipo

Mini íconos para Blog Cocha Joven

Comments Off | Escrito por Adolfo el 29 de Septiembre de 2007

Me llamó mucho la atención cuando hicimos el proyecto del Blog para la agencia de Viajes Cocha Joven, porque por primera vez sentí que un cliente mostraba tanto énfasis e inquietud por el diseño de la iconografía en el proyecto a emprender. Debo aclarar que en AyerViernes asumimos, por defecto, en el diseño de interfaz de un sitio web, intranet, blog u otro, una cantidad mínima de íconos para ayudar a los usuarios en mínimas, pero no menos importante, acciones como “ir al inicio”, “contactar”, “ir al mapa de sitio”, etc.. Con muchísimo más gusto desarrollamos este set de mini íconos basado en clásicas metáforas para el Blog:

Estos íconos en promedio miden 12×12 px. aproximadamente y están bordeados con trazo duro y relleno de color degradado lineal en -45°.

Que bueno encontrarse con clientes que se den cuenta del gran valor agregado que tienen los íconos en las interfaces que a diario usamos. Bravo por Cocha Joven!

Archivado en: Equipo

Explora, crea y comparte temas de colores

Comments Off | Escrito por Adolfo el 26 de Septiembre de 2007

Para cuando no hay mucho tiempo para construir armonias cromáticas está Kuler, herramienta online 2.0 bastante útil de Adobe Labs que permite rápidamente crear, rankear y, por supuesto, compartir colores.

Archivado en: Equipo

En busca del perfume o mi primer post :)

Comments Off | Escrito por Adolfo el 26 de Septiembre de 2007

Días atrás estaba leyendo un inserto en el diario y me encontré con la recomedación de un perfume de una marca reconocida que empieza con Di y termina con or.

Sorpresivamente este lunes Darcy me ofreció la posibilidad de traermelo de su viaje, entonces lo primero que hice que hice fue buscar información del producto para que lo pudiera visualizar (y también yo saber un poco más de su composición) y ahorrarle tiempo en poder encontrarlo, y me llamó mucho la atención de no encontrar en google información indexada desde el mismo sitio de la marca del producto Me dió mucha lata ver los primeros sitios para informarme, así que corte por lo sano y me fuí directo donde Cristian, ahí estaba el asunto! Otra peliculita Flash! Dejé el acceso stand by por un momento y decidí darle una segunda oportunidad y busqué en Google.com y, por lo menos, en 8° lugar había un acceso al sitio, pero tampoco era lo que andaba buscando Volví al sitio que tenía en pausa y después de 5 clicks encontré lo que buscaba, por fin!

Apuesto que si hubiese estado en html me hubiese ahorrado más de unos cuantos clicks, asi como lo piensa Cacharel (el 2°) que decide hacer versiones html y hacer más accesibles sus productos.

Archivado en: Equipo

1, 2, 3… probando probando…

Comments Off | Escrito por Adolfo el 21 de Septiembre de 2007

sí sí sí 2, 3…

Archivado en: Equipo