Bocetos Sitio web del Lab FIRP

Publicado el Lunes, 31 Octubre 2011 20:25
Escrito por Richard Márquez

Para realizar la página web del Lab FIRP me pasé por varias alternativas. Desde la página actual del Laboratorio FIRP, la antigua y la nueva página de la Universidad de Los Andes, el sitio del Software Engineering Institute, el Center for Hydrate Research at CSM, el Centre for Drug Research de la University of Helsinki, el YKI, Institute for Surface Chemistry, el Institute for Applied Surfactant Research, el centro de investigación e innovación de Lafarge (empresarial), el portal de Milestone (empresarial), entre otras decenas de páginas, tanto de centros universitarios de investigación como centros de I&D de grupos empresariales.

De estas visitas, surgieron varias ideas, algunas fallidas, y los elementos que constituyen la propuesta que se presentó al Director Honorario y fundador del Lab FIRP, el Dr. Jean-Louis Salager. La interacción con el cliente fueron inprescindibles y a veces desalentadoras. En este caso, el cliente siempre ha tenido la razón. El Dr. Salager tiene una excelente visión de la cadena de valor del Lab FIRP.

Algunas ideas sobrevivieron a la crítica del cliente, otras fueron negociadas, otras necesitaban ser repensadas, retrabajadas y reelaboradas. Esta ha sido una interacción interesante y de gratas experiencias.

Las ideas fueron plasmadas mediante diferentes medios, desde bocetos a lapiz, imágenes superpuestas en MS Paint, hasta páginas html usando plantillas css.

Algunos ejemplos fallidos

El siguiente diseño está inspirado en la antigua página web de la Universidad de Los Andes:

Primer boceto

Luego, al cambiar la página de la Universidad, comenzamos a pensar en un formato más limpio (pensando en el encabezado de la página original, pero con un fondo más claro):

Primeros bocetos

Boceto Página Lab FIRP

Regresamos varias veces a los requerimientos:

Requerimientos

Implementaciones de la página en html y css

Inspirados en el diseño de la página principal de 37signals, nos atrevimos a proponer el siguiente diseño:

Base para el nuevo diseño

En este diseño se diferencian las tres partes básicas que se presentarán en el diseño practicamente final:

Algo de UX

Entre los bocetos, incluso, se pueden notar algunos wireframes indicando posibles formas de respuesta ante acciones de los usuarios:

Bocetos incluyendo UX

Bocetos incluyendo UX