Adolfo Morales

Diseño de Video Player para Sofatutor

Adolfo — Thu, 11 Feb 2010 12:52:04 +0000

Dentro de todo el trabajo que fue diseñar completamente la plataforma Sofatutor, hubo una faena en particular que fue muy interesante. Se trataba de diseñar la interfaz del Player de los Videos de la plataforma. El desafío se volvió interesante porque era la primera vez que me tocaba investigar y diseñar en torno a esta interfaz que como primera complejidad trae el tamaño. En una reducida área de 650 x 370 px se debía diagramar todos los elementos gráficos de la interfaz: botones de acciones básicas (play, pausa, tiempo, volumen); botones de acciones auxiliares (full screen, on-off de comentarios); comentarios hechos por otros usuarios en el timeline; y, por supuesto, el propio menú que debía dejar la posibilidad que el usuario controlara el video (ranking, tags, links, preguntas, email). Visitadas muchas plataformas de videos se llegó a esta interfaz que no debía romper la armónia de la estética ya diseñada en la plataforma, es por eso que se escogió el color negro para garantizar un buen contraste con el menú y sus íconos asociados que se diseñaron con aspecto silver (usando grises del verde corporativo). El aspecto de los íconos conservó líneas suavizadas y blandas con un cuerpo degradado que deja la posibilidad de contener líneas internas suavizadas o duras. En cuanto al color se estableció el verde corporativo como el color para la interacción en los botones (efecto over), así como también para su estado acti, que incluían los títulos. Se conservó el azul para links (textos y botones) y el rojo consignado a las alertas.

En mi Flickr pueden ver todas las pantallas diseñadas, además de los wirefames enviados por el cliente. Es importante que se den cuenta la cantidad de pantallazos que salen de una “pequeña” área de interacción. Para que lo tengan en cuenta a la hora de cotizar colegas.

10 Ejemplos para potenciar tu marca en home pages

Adolfo — Thu, 30 Jul 2009 17:48:51 +0000

La semana pasada fuí gentilmente invitado por Multiplica (empresa a la cual asesoro en diseño de interfaz) a dar una charla a gerentes de marketing de distintas empresas chilenas. El tema era el “diseño de interfaz” que tal vez para la audiencia podía sonar muy ténico o incluso fome. Sin embargo traté de que el diseño lo vieran como una oportunidad de potenciar sus marcas a partir de debilidades que presentan muchas interfaces en el medio chileno y enfocado solamente a las homes. La charla se dividió en tres partes: la primera para generar un contexto donde expliqué qué es el diseño de interfaz; la segunda enumeré conceptos a proyectar de una home; y finalmente (lo más entretenido) expuse 10 ejemplos de cómo las grandes marcas lo están haciendo hoy. Para eso último analicé las siguientes 21 marcas:

A Florencia nos vamos

Adolfo — Mon, 20 Jul 2009 14:54:56 +0000

Amigos, no podía ser de otra manera. Con Mili estamos más que felices y yo muy orgulloso de ella. Estuvimos mucho rato tras este sueño y por eso lo mantuvimos reservado durante estos últimos meses hasta que se concretara. En abril de este año Mili recibió la aceptación formal del Centro Europeo de Restauro (Florencia-Italia) para realizar el curso “Técnicas de Restauración Arquitectónica” (curso al cual entran alrededor de 20 alumnos) y en el día de ayer recibimos la noticia de que se adjudicó un Fondart para financiar sus estudios. La verdad es que este tiempo será muy vertiginoso (nos quedan practicamente 60 días) para organizar nuestra mudanza, así que desde ya vamos buscando una fecha para hacer una celebración-despedida, ya que nos nos veremos hasta el 2011. Por mi parte seguiré trabajando desde allá con mis clientes de acá y por supuesto que aprovecharé de estudiar arte, obvio!

Sofatutor: progresión de diseño de contenedor de temas (Fächer)

Adolfo — Fri, 27 Mar 2009 16:25:01 +0000

A continuación describo y muestro la progresión para el diseño del contenedor de temas implementado para Sofatutor. Para la mayoría puede sonar muy técnico pero para los diseñadores de interfaz es de todos los días Pueden ver y descargar la imagen también en mi Flickr.

01 Propuesta Wireframe

Forma: Contenedor clásico de temas desplegables/colapsables con ancho fijo y alto indeterminado.
Tipografías: Uso de familia tipográfica que permita mostrar cantidad de videos de los temas.
Color: Construcción cromática para diferencia de contenido e interacción.
Interacción: Acción para desplegar/colapsar segundos niveles.

02 Propuesta Inicial

Forma: Contenedor de contorno mixto (cabecera curva con brillo y pie recto a 1 pixel), bordes a 1 pixel e interior blanco con líneas divisorias de 1 pixel con degradaciones para volúmen.
Tipografías: Propuesta inicial con Lucida cuerpos 13 y 11 en estilo normal para 1er y 2do nivel respectivamente; opción con Arial para disminuir anchos de palabras del idioma en cuerpos 13 en negro y 11 normal para 1er y 2do nivel respectivamente.
Color: Juego generales de estilos grises provenientes del verde corporativo de la marca, con uso de tonalidades verdes (diferencia de niveles) para etiquetas de cantidades.
Interacción: Acción para desplegar/colapsar segundos niveles con uso de iconografía +/- respectivamente. Propuesta opcional de despliegue de contenedor para más temas con pie volumétrico y cabecera con acción de intercambio de videos.

03 Propuesta de 3er Nivel

Forma: Aumento de ancho.
Tipografías: Propuesta de cuerpos 13 en negro, 12 y 11 normal para 1er, 2do y 3er nivel respectivamente.
Color: Eliminación de etiquetas por textos. Estados de íconos de acciones en color.
Interacción: Acción de intercambio de videos iconografizados.

04 Propuesta de interacción de despliegue/colapso

Interacción: Acción para desplegar/colapsar segundos niveles con uso de flechas izquierdas antecesoras al texto construyendo acción más reconocible y usable. Acción de intercambio de videos iconografizado con flechas de intercambio.

05 Propuesta Final

Forma: Incorporación de sublíneas divisorias punteadas entre 1er, 2do y 3er nivel.
Tipografías: Estilo negrito del 2do nivel para remarcar jerarquías tipográficas.
Interacción: Diferenciación entre vínculos para desplegar/colapsar temas y cantidad de videos.

Sofatutor: II Etapa

Adolfo — Tue, 10 Mar 2009 02:28:26 +0000

Mientras espero el lanzamiento oficial de la versión 2 de Sofatutor, trato de ordenar y listar en mi cabeza los temas que más adelante escribiré a propósito de esta experiencia. Porque es harto lo que puedo compartir en cuanto al trabajo que hice para el diseño de esta segunda parte que no tan solo consideró una evolución natural del “look&feel”, sino que se enriqueció con distintos elementos (nuevos para mí desde el punto de vista del diseño de interfaz) como videos con interfaces propias de navegación e interacción con usuarios o visualizaciones de notas de videos, que responden a una variable muy importante del diseño para pantallas: la usabilidad. Ahora en esta etapa beta nos dedicaremos a testear el comportamiento de estos nuevos elementos, implementar ideas que salieron en el camino y resolver algunos detalles pendientes. Esperemos…

Para los AyerVierninos

Adolfo — Tue, 03 Mar 2009 17:05:42 +0000

Ahora que llego de mis vacaciones y me conecto me doy la licencia de hacer un rápido recuerdo. En marzo del año 2000 nos encontramos con Jorge en el MNBA por el lanzamiento de la Corporación Amereida de la Escuela y coincidentemente se lanzaban unos CDs recopilatorios de obras gráficas de sus fundadores, de entre los cuales yo diseñe uno . Ese encuentro sin duda marcó un momento muy especial en mi vida sobre todo en lo profesional, atendí la especial invitación de Jorge de construir una empresa para medios digitales: AyerViernes. Empezaba a trabajar en ese entonces con “cero” conocimiento de internet, tal vez lo único que tenía era mi experiencia de 1 año del proyecto de título diseñado enteramente para pantalla, pero lo más importante es que empezaba apostando sin saber como nos iría. Los primeros 3 años fueron de bastante esfuerzo y dedicación en tratar de formarnos y darnos a conocer, los siguientes 3 fueron de especialización de nuestros oficios y terminar de consolidarnos en el mercado; y estos últimos años fueron de disfrutar lo que sembramos en aquel momento y encontrar a las personas que continuaran con el sueño de convertir AyerViernes en una empresa deseada y la más destacada de LA. Para estos AyerVierninos les deseo lo mejor y no olviden del bautizo de cada integrante nuevo de mandarlo de inmediato a comprar el desayuno con mapa en la pizarra; y para Jorge las infinitas gracias por haber apostado en mí.

Ahora yo comienzo un nuevo año y una nueva etapa con la misma incertidumbre con la cual empecé en AyerViernes. Estoy ansioso y feliz!

Diseño de Interfaz: Exportación no Tradicional

Adolfo — Mon, 28 Jan 2008 02:20:04 +0000

(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.

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

Adolfo — Thu, 18 Oct 2007 01:54:18 +0000

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:

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?
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.

3er Seminario de Arquitectura de la Información en Viña del Mar

Adolfo — Mon, 01 Oct 2007 03:33:01 +0000

Este Viernes 05 de Octubre, a partir de las 15:00 hrs., se llevará a cabo la segunda parte del 3er Seminario de Arquitectura de la Información. ¿Dónde? En nuestra querida Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso (Matta 12, Recreo. Teléfono: 32 - 277 4401).

Expositores:

Herbert Spencer “Media Franca. Interaccción como participación democrática”
Rodrigo Guaiquil “Móviles: acá está tu próximo sitio web”
Jorge Garrido “Faz: llega una revista para la AI “
Malisa Gutierrez “Cajeros y Autoservicios: desafíos en experiencia de uso.
Javier Velasco “Redes sociales en la web“
Maximiliano Martin & Yo “Descorchados. Desafíos de Diseñar una web 2.0“

Las exposiciones están interesantísimas y sobre todo bastante dinámicas. Lo único malo es que ya se cerraron las inscripciones Los que ya están listos deben llegar unos 15 minutos antes para acreditarse y empezar a la hora. Mayor información visiten el sitio de AI Chile.

Nos vemos!

Mini íconos para Blog Cocha Joven

Adolfo — Sat, 29 Sep 2007 04:02:55 +0000

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!