Archivo para la categoría ‘Métodos y proceso de diseño’

Aprender web es como montar bicicleta

Escrito por Tzek el 07/06/08
Clasificado en: Diseño Web, Métodos y proceso de diseño, Profesión, Reflexión, Tertulias, XML/CSS

Dado el post anterior que me dejó reflexionando, sobre cómo aprender a diseñar páginas web, comento con un colega: 

No estoy seguro si comenzar un curso de diseño web deba incluir manejo de tablas. Sino empezar directo con CSS.

Es como aprender a montar bicicleta. Puedes aprender con “rueditas” o sin ellas. Al final es lo mismo, acabas sabiendo como montar bicicleta.

Nota contextual: El “pecsi” tiene que ver con la premisa de que a los diseñadores les cuesta trabajo aprender “código”… Jum. ¿Quién habrá inventado y diseminado esta idea?

Razones para no maquetar web en Photoshop

Escrito por Tzek el 04/06/08
Clasificado en: Desde la web, Diseño Web, Diseño de Información, Diseño de Interfaces, Métodos y proceso de diseño, Profesión, Tecnología, XML/CSS

Casi me voy de espaldas cuando leí el título que puso Elías en Isopixel: Razones por las que NO hacer un mockup con photoshop para un trabajo web. De la traducción libre que está en blog tomé los siguientes puntos:

1. Photoshop limita completamente el trabajo, no se pueden incluir enlaces, áreas “clicables” o menús. Con el papel pasa lo mismo. Lo ideal es [añadido por mi] primero hacer un planteamiento muy básico sobre el papel [/añadido por mi] y luego pasarlo a CSS/XHTML, donde representaremos lo que se hizo en papel más resto de funciones básicas como navegación, enlaces etc.

  • Si estamos hablando de una maqueta o mockup, ya desde el papel y lápiz, es buena herramienta. La idea está en maquetar el sitio, hacer una disposición de los elementos, es el pensar cómo quedarían. Justo cómo ha mencionado un alumno de Javier Cañada dentro del programa Vostok. Lo que sí, viendo una maqueta como prototipo de baja fidelidad, en Photshop es posible concentrarse en los detalles visuales, esto es, enfocarse mucho en la forma. Aunque es tardado, su ventaja podría ser el dar una mayor calidad final en el prototipo a diferencia de tomar lápiz y papel. No hay que olvidar que en el prototipeo lo relevante es obtener, de ser posible, resultados sobre aspectos de usabilidad; ahí el photoshop es un arma de dos filos, es más fácil para este caso optar por lápiz y papel o un wireframe simple. No importa si se puede “cliquear”.

2. Photoshop proporciona muchas herramientas para conseguir detalles y justamente buscamos lo contrario, no queremos dar detalles concretos, solamente lo esencial. El programa nos distraerá en cosas que ahora no tocan hacer.

  • Efectivamente, pero justo se repite mi apreciación en el primer punto. ¿Qué tipo de calidad se requiere en el prototipo y con qué propósito se está realizando? Un detalle curioso es que si el proyecto lo amerita, un prototipo simple con CSS no puede competir con uno visualmente más preciso (de preferencia con una versión más simple en papel o wireframe ya evaluada).

3. La fuente de un sitio forma parte imprescindible y es muy probable que necesites cambiarla varias veces. Photoshop hace más complicado este proceso: abrir el .psd, seleccionar la fuente del lugar concreto que queremos cambiar, cambiarla, exportar a .png .jpg para poder enseñar los cambios a, por ejemplo, un cliente etc. Además de queen photoshop las letras NUNCA se comportan igual que en la web, a pesar de darle la misma fuente con las mismas características en el programa se ve de una forma y en la web de otra [añadido por mi] (nunca entendí porque pasa esto) [/añadido por mi].

  • Con respecto a la fuente, es claro que no todos los textos pueden ser arbitrarios, esto es, utilizar la fuente que quiera y luego pasarlo a imagen. Vale para ciertos encabezados y es obvio que hay que tomar en cuenta qué tanta sustitución con imagen habrá de hacerse en los textos y por qué sería conveniente tomar este tipo de decisiones. Para los textos “comunes”, esas cosas no se pueden probar mejor que con texto “en vivo”, que se está viendo en el browser y eso sí tiene que hacerse con CSS (referente a familia tipográfica, puntaje, interlineado y variantes).

4. Photoshop se enfoca en la producción y no en la productividad. En este primer paso se busca conseguir los puntos esenciales para crear un sitio accesible, claro etc. Luego nos preocuparemos de darle un aspecto “bonito”.

  • Eso no lo voy a negar. Si se maqueta en photoshop, cuestiones accesibilidad, navegación y usabilidad tienen que tenerse en la cabeza “en segundo plano” (como en cómputo, un proceso corriendo ahí atrás) mientras se diseña. Esto implica que no importa tanto la herramienta (photoshop o lápiz de papel) sino la integración de los conocimientos sobre diseño visual, diseño web, diseño de información, arquitectura de información, accesibilidad y usabilidad. Insisto, ¿para qué va a servir el prototipo o maqueta en cuestión?

5. Perderemos tiempo en pasar el mockup de photoshop a css/html.

  • Otra gran verdad. Llego a una conclusión rápida que este es un vicio, el cual tengo y esto casi seguro que tienen muchos que empezaron con esto de la web en los 90s cuando el ensamble de las interfaces venía en forma de tablas. Lo que creo que este punto puede ser evidente dependiendo de tu forma de “aprender web”; si desde el principio rompes con la maquetación en photoshop y te acostumbras a hacer “drafts” a partir de una lógica-de-ensamble vía CSS/HTML, entonces tu perspectiva/proceso sobre cómo ir diseñando, definitivamente cambia. La estructura mental para esta tarea cambia. Al comenzar a hacer la “integración” que menciono arriba con una maqueta hecha en photoshop, los tropiezos te enseñan a discernir cuáles áreas “no deben o tienen por qué tocarse”. Pero sí es interesante ver como el cambio en el paradigma de diseño web en cosas que a gente más reciente en estos rollos (post-liberación-de-las-tablas) hace que tengan soluciones creativas que pueden pasar por obvias para ellos.

6. Con html/css podremos seguir un flujo de trabajo mucho más productivo: Hacemos el cambio, guardamos y refrescamos.

  • Esto está relacionado con el punto anterior. En ese sentido, estoy de acuerdo. Aunque una vez pasada la migración de photoshop, esas áreas “intocables” tienen que trabajarse siempre como se plantea en este punto.

7. Photoshop es poco práctico, aunque lo manejes desde hace mucho tiempo, es complicado hacer las cosas de forma simple.

  • Si es el caso de un prototipo visualmente complejo, es tardado, pero no creo que ese sea el punto general de estos siete, sino identificar quién implica a quién, si photoshop luego CSS/XHTML o primero CSS/XHTML luego CSS. Sí son dos formas de pensar/diseñar diferentes. Y también hay que recordar el contexto, el usuario y el cliente. Mis comentarios van enfocados a sitios web “usables” por no decir cuasiplanos visualmente, no tanto a esos “interactivos” ganadores de premios y llenos de factores de diseño emocional y metáforas navegacionales rebuscadas. De una u otra forma, concuerdo en que hay que obtener un equilibrio.

Y la razón por la que casi me voy de espaldas, es porque, usualmente tengo que “concretar visualmente” una maqueta en photoshop, justo como estoy diseñando algo de web en estos días. Aunque, admito que en momentos de frustración, sobre todo por el trabajo “talachero” de pasar de PSD al ensamble CSS/XHTML donde a veces suele suceder que no queda justo como “habías pensado”. Un debate interesante el asunto.

PD. Ya está el foro de discusión en Isopixel al respecto.

Actualización.

CyberGus nos comparte también su opinión sobre este tema, con comentarios bien enfocados. 

Observaciones en señales aeroportuarias

Escrito por Tzek el 12/05/08
Clasificado en: Diseño de Información, Diseño y Sociedad, Métodos y proceso de diseño, Profesión

El buen diseño de señales para la navegación en espacios físicos (wayfinding) resulta relevante en lugares con mucho tráfico (de usuarios). El Aeropuerto Internacional de la Ciudad de México (AICM) es un buen ejemplo. Estas son algunas observaciones sobre las señales de este lugar las cuales podrían servir como referencias para cualquier sistema.

Tipografía legible y con buen cuerpo

En el caso del AICM parece ser Helvética en una versión bold (o al menos, seguro del peso 55 de la fuente). De cualquier forma, la tipografía parece tener dos ventajas aparentemente contradictorias: 1. por un lado, es gruesa de forma que se identifica claramente el rectángulo-manchón blanco asociado al texto (obviamente apoyado por el contraste) y 2. Tiene buen diseño de “espacio negativo” con lo cual se puede identificar considerablemente las letras relevantes para armar las frases en nuestra mente, no muy lejos pero sí con mucha anticipación.

Jerarquías visuales y Taxonomías

Una tarea importante de cualquier proyecto de señalización tiene que ver con la elaboración de taxonomías. En sí, es un trabajo involucrado con arquitectura de información, sólo que en espacios físicos. En el AICM lo más básico es derivar el concepto sala, aunque también pueden tenerse otros como salidas y puertas.

Cuando llega el momento de concretar estas taxonomías en o dentro de una señal, claramente hay elementos que son más importantes que otros. En lugares como el AICM esto tiene que ver con la tarea: resulta más relevante para alguien que va apresurado identificar cuál es su sala de espera que saber dónde está el extintor (sobretodo si no hay peligro de fuego). 

Aunque es cierto que una imagen dice más que mil palabras, el texto escrito, tiene un carácter más monosémico, es decir, no hay pierde. Por eso para las salas son empleadas letras como A, B, C, etc. y para cosas “más largas de decir” pero cuya tarea no involucra acciones rápidas (como en el caso del extintor) suelen transformarse en pictogramas.

Además, dentro de todo lo textual, lo más importante, en síntesis, va “más grande”. Por cierto, aquí es donde entra la decisión de cómo casarnos con cierta familia o familias tipográficas; en el caso del AICM, parece que todo está en romana y con el mismo peso, por lo que la jerarquía tiene que ver el tamaño.

Códigos de color y consistencia en layout

Las señales son congruentes en tamaños. Esto da, cual mensaje subliminal, un ancla al usuario de que pre-identifica que está viendo. Por ejemplo, en el AICM las señales “grandotas y pegadas a la pared” tienen que ver con puertas y/o accesos, mientras que las “rectangulares” tienen que ver con la dirección (dar información para moverse hacia un lugar específico). Esta consistencia, no sólo está relacionada con los tamaños sino también con el layout  de la señal misma. La regla básica en el AICM, y en general para la mayoría de los sistemas de señalización, es “información” a la izquierda y “flecha” a la derecha. 

Sin embargo, el proceso de diseño involucra mucho más. Anteriormente me habían pasado la fórmula del tamaño adecuado de una señal. Sería interesante comprobar si las del AICM cumplen con la norma mexicana. Por otro lado, está el manejo del aire o espacio negativo para aumentar o garantizar una buena legibilidad en la señal; las señales del AICM muestran siempre un margen el cual se convierte en una especie de marco, delimitando así la lectura individual de cada elemento. 

Como sucede en muchas señales, las del AICM manejan código de color. Parece una tarea trivial pero es dónde más rápido se pueden cometer errores. En el caso del AICM, el azul marino es el que más problema de contraste tiene sobre las señales de fondo negro pero se apega al estándar de señal para personas con capacidades especiales, sin embargo, la señal no es tan frecuente como las “amarillas” o “verdes” y se apoya de formas blancas causando así un alto contraste para lo importante (lo “de adentro”).

Las señales del AICM como parte de su layout manejan un filete arriba y abajo, estableciendo bloques de señales. Se respeta para cada unidad del bloque el “marco” antes mencionado. Los únicos elementos que no tienen filetes arriba y abajo son las flechas, las cuales en vez de marco, emplean un círculo blanco para romper visualmente con cualquier otro elemento dentro de la señal. Parece no importante, pero el que las fechas no tengan estos filetes hace se vayan a un primer plano, el cual es más notable en las señales “horizontales” y cuando uno está considerablemente lejos; el propósito de la señal en este sentido, es dar una escaneada rápida (sobretodo por los pictogramas) y luego anclar la vista en la flecha, muy útil  cuando se sabe lo que se está buscando y que se encuentra en esa área (por ejemplo, un baño).

Buena implementación

Las señales pueden estar muy bien diseñadas, sin embargo, en la implementación juegan otros factores que contribuyen al éxito de navegación de los usuarios, tales como la forma física de la señal misma, su posición e iluminación.

En cuanto a color, un poco contraste y mayor elegancia, parecen suceder sólo cuando el tamaño lo permite, tal y como sucede en las señales exteriores de la nueva terminal. En el caso de la señal de arriba, de 4×2 metros aproximadamente, el gris no resulta perjudicial como fondo. En la noche, la posición de la señal juega un papel importante ya que si el vinilo no resulta reflejante, ésta debe estar colocada de tal forma que sea iluminada por los carros que pasarán por ella a lo lejos.

En el caso de las señales interiores del AICM, el detalle está en dar a los usuarios (de baja estatura) un confort con el simple hecho de mostrarse inclinadas.

También está la contraparte de cuidar los “oops, no lo había planeado”. Si cuidamos los estándares de tamaño y dónde ponerlos, también hay que tener en cuenta que las señales tienen que ser flexibles porque dar información es más importante. Quizá los espacios cambien o información nueva aparezca, de forma que rompe con lo planeado en el sistema. En el AICM, se me hizo muy curioso notar la señal de la imagen de arriba para luego ir a otra puerta y ver la imagen de abajo.

¿Que habrá sido? Falta de planeación o un exagerado apego a las normas documentadas de forma que a los que implementan no les interesa o bien, no se les da la facultad de tomar decisiones que son necesarias.

2o. Taller Mexicano de Interacción Humano Computadora (MexIHC 2008)

Escrito por Tzek el 14/04/08
Clasificado en: Desde la web, Diseño Web, Diseño de Información, Diseño de Interacción, Diseño de Interfaces, HCI, Métodos y proceso de diseño, Profesión, Tecnología

Se abre la convocatoria para la recepción de trabajos en el taller de HCI en México. Participan, computólogos e ingenieros (en cómputo o sistemas), diseñadores, psicólogos, etnógrafos y cualquier profesionista relacionado con el estudio de los usuarios y su interacción con dispositivos/interfaces computacionales. 

Logotipo del 2o. Taller Mexicano de Interacción Humano Computadora - MexIHC 2008

El taller será dentro del Encuentro Mexicano de Computación 2008, uno de los congresos más importantes de cómputo en México. Los trabajos aceptados serán publicados en las memorias de dicho congreso bajo la edición de la IEEE. La sede será la Universidad Autónoma de Baja California, Campus Mexicali.

La ventaja de participar como diseñador es el cruzar la frontera entre lo clásico, el enfoque de cómputo y sistemas, por lo actual, los estudios cualitativos (y la investigación secundaria en general) que inciden en el conocimiento general de la disciplina y la creación de productos (de diseño) innovadores.

Hay tres modalidades para participar

  • Poster. Una página.
  • Ponencia corta. 2 a 4 páginas.
  • Ponencia extendida. 5 a 8 páginas.

La fecha límite para el envío de trabajos es el 30 de mayo del presente.

Para la gente de las disciplinas proyectuales es una gran oportunidad para involucrarse con la comunidad científica y tener una publicación oficial, lo cual curricularmente es muy bueno; además del enfoque fresco que pueden aportar.

Mayor información en el sitio oficial del taller: www.mexihc.org.

Los Memes

Escrito por Tzek el 28/03/08
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño y Sociedad, Métodos y proceso de diseño, Reflexión

Meme 

Un meme es una unidad de información o cultura, es decir, una idea, un valor o un comportamiento, que se transmite de generación en generación o dentro de ciertos nichos sociales en formas no convencionales, a diferencia de las cosas que transmiten en forma genética. 

Por ejemplo, el gusto de los mexicanos por comer tacos (de tripas, lengua  o sesos de res) y chile, cómo podríamos bañarnos con una cubeta, cómo regatear a la marchante en el mercado para que baje sus precios o bien al taxista, cómo pedir las cosas y saber como dar las gracias. Memes.

Meme de comer picante en México

 Así, existen memes que ayudan al desenvolvimiento social de un individuo y otros más relacionados con la supervivencia: recolectar frutos, cazar o “hacer fuego”.  

 ¿Quién no recuerda su primer encuentro con texto predictivo para enviar mensajes vía celular? ¿La primera vez que ocupó un cajero automático para sacar dinero? ¿cómo enviar un correo electrónico?¿cómo comprar en línea? Muchas de estas situaciones son domadas por práctica, pero en casi todos los casos, las personas se han valido de otras para hacer la clásica pregunta ¿cómo le hago?

Los memes asociados al diseño de interacción dependen en parte de la cultura o alfabetizacion tecnológica que el usuario tiene. Programar una videocasetera (en los 80s-90s) era una tortura para muchas personas y pocas realmente se tomaban el tiempo de entender y aprender lo especificado en el manual… no faltaba quien te mostrara cómo, porque así era más fácil de entender. ¿Será que así nacieron los wizards en las interfaces de usuario?

El problema de programar una BetaMax o una VHs para grabar un programa de TV 

 La transmisión de los memes es en sí una forma de diseño de información: pícale, muévele, apriétale, no hagas eso y esto va así… son expresiones en las que se transmiten estas unidades de información o culturales. A diferencia de hacer el mejor manual esquemático o la mejor infografía para transmitir la información, un meme se transmite en forma viral y su transmisión está envuelta en un lenguaje común entre dos personas/mentes. Este diseño de información va mutando, se va puliendo y va aumentando su grado de utilidad conforme se pasa de boca en boca.

Un enfoque para el diseño, en particular para de interacción e información, es detectar y entender los memes asociados al contexto del usuario. Puede que existan patrones de diseño o patrones de interacción, pero desde una perspectiva de innovación, los patrones son carentes o bien, no están bien establecidos o delimitados… esto es, aún no pasan de ser moverse en dicho contexto en forma de memes.

 

Card Sorting

Escrito por Tzek el 24/08/07
Clasificado en: Diseño Web, Diseño de Información, Diseño de Interacción, Métodos y proceso de diseño, Profesión, Reflexión

Una vez, llegué a la Ibero Puebla y alguien me dijo algo como : “Tu oficina en la UDLA está en tal lugar, ¿verdad?”. Yo dije: ¿como supiste? Y la respuesta fue: “Pues nada más vi los post-it pegados en tu pared y pregunté que si efectivamente era tu oficina…”

Mi pared

Mas que estar pegando post-ti a lo bestia o estar ordenando tarjetas para luego ponerles una liga de hule como método de agrupamiento, el card sorting, a mi juicio, es un buen ejercicio para manifestar físicamente el proceso cognitivo de alguien.

El Card Sorting consiste en la agrupación de items o conceptos por parte de los usuarios. Es común encontrarlo dentro del proceso de arquitectura web para que los usuarios agrupen conceptos relacionados y así determinar la estructura navegacional del sitio. Pero ojo, este método no puede definir la estructura de un sitio por si sóla.

Bueno, el punto está, que creo que funciona bien cuando quieres tener algo presente y no estar divagando entre ideas. Similar a hacer una lista, pero el “pegar, despegar, poner y acomodar”, lo hacen un método de diseño muy eficiente para trabajo en grupo.

Alumnos de licenciatura haciendo card sorting

Ahora bien, el card sorting no debe limitarse a web y creer que sirve para definir estructuras navegacionales. Por ejemplo, esos papelitos que tengo pegados en la pared de mi oficina (cosa que no quito porque: 1) para tenerlo a la mano cuando lo ocupe y 2) porque se ven bonitos :) ), me sirvieron por primera vez para definir copies:


1. Haces un card sorting de los elementos que constituyen la marca. En mi caso, no hice mucho, porque en CIRIA la estructura se puede identificar claramente, pero ahí me ven pegando papelitos en la pared.

2. Te centras en un grupo y notas quiénes están.

3. Relaciones conceptos y enfoques (pensando en un gurpo meta, en este caso la comunidad UDLA) a partir de los elementos del grupo.

4. Redactas el copy.

Alumnos de posgrado haciendo card sorting

Así, este método puede aplicarse, según yo, a casi todo, desde educación (en niños de primaria o kinder estaría genial), publicidad, identidad corporativa, comunicación, etc. Quizá lo veo así porque desde mi perspectiva, diseñar es un proceso cognitivo al fin y al cabo.

Aquí está una muy buena guía para aprender y aplicar el método:
http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide

¿Por qué hacer prototipos en diseño de información e interacción?

Escrito por Tzek el 17/08/07
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño de Interfaces, HCI, Métodos y proceso de diseño, Profesión

Entonces, tienes una página web para facturar en una llantera, por ejemplo y necesitas saber si “está bien”… hiciste cuanta investigación y contextualización de usuario. Hiciste la entrega, todo super. Pasa no más de una semana y ya te están diciendo que se necesitan “unos cambios”…

Prototipo Power Point

Tu mueres al ver que esos cambios es hacer todo de nuevo. Claro, te comprometiste “de pilón” a realizar dichas correcciones. El punto está en que tu cliente fue honesto e incluso aceptó este rollo del “diseño de información”. En momentos cómo este y con la oportunidad en tiempos (aunque no con mucha lana), tu solo te preguntas ¿por qué no hice pruebas con un prototipo?

Una de las grandes ventajas de hacer prototipos de páginas web o interactivos es la poca inversión en contraste al gran número de respuestas y comentarios obtenidos de probarlos con los usuarios.

Los prototipos, de baja fidelidad, pueden incluso hacerse con lápiz y papel. Casi casi producto final se puede ver en un prototipo de alta fidelidad. Pero si no hay lana, uno de baja puede ser buena opción y reafirma que se está chambeando arduo y serio en el diseño de la interfaz así como en el diseño de interacción.

Todo este choro fue porque encontré dos buenos artículos sobre hacer prototipos, uno con PDFs y otro con Power Point en Boxes & Arrows. Muy recomendables:
* Prototipeo con PDFs,
* prototipeo con Power Point y
* además está este artículo sobre cinco tips para prototipeo en papel.

Mi pregunta, es ¿crees que hacer prototipos funciona? ¿cuáles son las ventajas y desventajas de hacer prototipos en el diseño?

Nuevo portafolio: Tzek a un año…

Escrito por Tzek el 03/07/07
Clasificado en: Diseño Web, Métodos y proceso de diseño, Profesión, XML/CSS

1er Aniversario Tzek

Hace un año que me animé a conseguir alojamiento y tener un dominio desde OmiConcibeIdeas, mi viejo portafolio cuando estudiaba en el CIMAT…

Para festejar (1. vaya manera, 2. si no me autofestejo, pues quién… verdad?) ya era hora de darle una chamba de albañilería a Tzek Design. Este es el index resultante:

Página de Inicio nueva en Tzek Design

Aunque ya me he quitado el casette de las tablas de la cabeza, si que he sudado la gota gorda (tanto tiempo sentado) con este nuevo portafolio (super artesanal… todo “a pata”). El trauma de siempre, el ajuste de Internet Explorer (IE) porque no renderea bien las hojas de estilo… En Diseñorama hay un artículo muy bueno sobre condicionales para IE.

(Por cierto, si no han leído Diseñorama, de lo que se están perdiendo… Es como Verlee pero orgullosamente mexicana).

Ventanas Pop Up

Pero necio de que quería unas ventanitas pop-up tipo nuevo sitio de mac, estuve busque y busque un script que jalara bien para lo que quería… Esta es la dirección donde encontré por fin lo que necesitaba… Si, si.. ya sé… si mis compañeros computólogos me dicen que por qué no lo hice desde cero, pues prueba que estoy oxidado en JavaScript. Jejeje…

El diseño gráfico es muy minimalista y está inspirado en el papel, en particular la cartulina opalina y los suajes. La idea es ajustarse al manejo de aire compositivo, jerarquía tipográfica (croma, familia y peso) y contrastar fuertemente cuando se ocupe. La navegación fue reducida notablemente (ya checaré en Google Analytics si me funciona bien o no). Era importante hacerlo muy “petit”, considerando como resolución más baja 800×600 aunque con scroll vertical necesario, aunque en realidad va para 1024×768 como mínima conveniencia.

Portafolio de Diseño de Información

La “interacción” fuerte es un programita bajo AJAX tipo slider, el cual se llama Smooth SlideShow y funciona muy bien. Es genial, justo lo que necesitaba… ahí si no lo niego, está cabrón, estoy cero en AJAX (ya por definición de JavaScript) por lo que modifiqué el archivo de código y CSS para ajustarlo al estilo gráfico del portafolio, pero al final conseguí mi slideshow inspirado en flickr y componentes para CMS que he visto en la red.

Ilustrciones

Una de las cosas que más me entretuvo y gustó hacer sin duda fueron las ilustraciones. No tengo painter, ni una Wacom… ahí le fui dando con el mouse.

Pues así fue. Un año más… es hora de soplar las velitas del pastel.

Rediseño del homepage CIRIA UDLA

Escrito por Tzek el 06/06/07
Clasificado en: Diseño Web, Diseño de Interfaces, Métodos y proceso de diseño, Profesión

Una de las primeras cosas que se me pidió en CIRIA UDLA fue el cambio del sitio, el “rediseño”. Yo expresé que dicha actividad resulta no trivial y habría que pensarse una buena estrategia de arquitectura de información. Entonces la petición fue la siguiente: “el frente tiene que ser replanteado… danos una muestra de lo que harás en un futuro”.

Una vez planteado el reto, había que entender la necesidad real. ¿Iba esto en un cambio de colores? Para entender dicha necesidad, había que entenderse también el contexto. CIRIA significa “Centro Interactivo de Recursos de Información y Aprendizaje”, un concepto que trata de colocar en el imaginario de la comunidad UDLA un lugar allende a una biblioteca; pero he ahí el problema, la gente sigue denominando físicamente al edificio como “Biblioteca” (en realidad CIRIA tiene a su cargo 2 bibliotecas más…). ¿Es este un problema de colocación de marca? Parcialmente sí lo es.

esquema 1

Si yo te platico de un lugar, donde se realiza software que te ayuda a acceder de algún modo a información, por ejemplo una “ayuda en línea”, independientemente si se trata de un libro o un sitio web, si te contara que es un lugar donde se realiza academia (ofreciendo una licenciatura y albergando un laboratorio de cómputo), que se cuenta con salas tipo “enciclomedia” (pore así decirlo)… quizá en esta forma vaga, lo último que te venga a la mente es que estoy hablando de la “biblioteca”.

Entonces se tenía la página original…


Homepage de CIRIA UDLA original

Pa’ la talacha de infodiseño, necesitaríamos la organización, jerarquización, etiquetación y presentación de la información de la homepage; claro, considerando cuál fue la estrategia planteada de comunicación, el contexto ya comentado y pensando en los usuarios. ¡Enchúlame la maquina!

Esquema 2

Este fue el resultado final…

Homepage de CIRIA UDLA rediseñado

Son muchos puntos que se pueden señalar en este rediseño. A groso modo:

Disección del homepage de CIRIA

  • El layout además de acoplarse al flavor institucional, buscaba realizar una lectura cruzada: La división por columnas buscó enmarcar/asociar áreas de trabajo, mientras que las “franjas” de lectura horizontal vayan concretizando este concepto de CIRIA en el usuario.
  • Además había que considerar que en la nueva organización, el labeling apoyara a esta evolución ahora conocida como CIRIA. Por cierto, resulta algo similar con la pleca fotográfica.
  • Los comienzos de columna, bajo la pleca fotográfica, son muy importantes. El primero marca una actividad académica departamental (”la biblio ya da una licenciatura?” - diría alguien). El segundo realiza una “colocación de marca” de un software desarrollado en CIRIA relevante para establecer bien con este concepto. Por último, las salas multimediales, tan sólo existen en CIRIA y las cuales serán usadas por toda la comunidad; además de reafirmar la idea de un “centro”, son uno de los mejores “ganchos” para ser explotados en el campus.
  • Si los usuarios expertos necesitan acceso a la información por búsqueda, se separó en la maquetación, tensionando su fuerza, por cromacidad y por “alinearse” en la columna de servicios más solicitados, novedad tecnológica (las salas multimediales) y la comunicación social del CIRIA (”hay algo que debo saber como usuario?”).
  • Por otor lado, y necesario para este “pimp my page!”, la identidad de CIRIA fue modificada (quizá escribe sobre el retrazado del imagotipo luego) hacia un sabor más institucional.