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, […]
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 […]
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 […]
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 […]
(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 […]
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 […]
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 […]