Patrones para el diseño de interfaz

Uno de los problemas de la gestión profesional de sitios web es crear URLs que no se rompan nunca. Mirando las entradas del sistema aterior de publicación, veo un enlace roto recursivo a este post. Lo vuelvo a publicar actualizado

La idea de patrones o patterns tiene su origen en el mundo de la arquitectura.

En 1979, Christopher Alexander (Viena, 1936) publica en The “Timeless Way of Building”, una obra que muestra de manera poética los secretos de la teoría y práctica de la arquitectura.

Esta obra ha sido adoptada por los desarrolladores de software e influido notablemente en la arquitectura de software como es el caso del diseño orientado a objetos.

Según Alexander, Cada patrón es una regla compuesta por tres partes que expresa la relación entre cierto contexto, un problema y una solución. El concepto de patrón es aplicable a arquitectura de software, y también al Diseño de Interfaz.

A nivel de interfaz, todas las acciones posibles ya están previstas. Por ejemplo, desde las acciones básicas de cualquier sistema de información (entrada, salida de datos, procesamiento y almacenamiento de información, o lo que se denomina CRUD -Create, Retreive, Update, Delete-), cualquier sistema transaccional puede ser reducido a un juego de acciones como Alta o Entrada de Datos, Búsqueda-Filtrado, Consulta, Baja o Modificación, todas ellas representadas por el juego combinado de elementos gráficos dispuestos en un interfaz.

Para Alexander, un patrón “describe un problema que se produce una y otra vez en nuestro entorno, y describe una solución para ese problema, de manera que puedes utilizar esa solución millones de veces…”

Según el Hypermedia Patterns Repository, más orientado a la web, los patrones se dividen en 3 categorías:

  • Interfaz/Layout
  • Estructura/Navegación
  • Orientadas a contenido

Algunas referencias

Existen multitud de sitios que recogen patrones para aplicar en diseño de interfaz. Su diseño áspero no invita a la lectura.

Repositorios con mejor diseño es “the Diemen Repository of Interaction Design Patterns”:http://www.visiblearea.com/cgi-bin/twiki/view/Patterns/Home_ creado por los diseñadores de la empresa Lost Boys o UI Patterns and Techniques.

Una introducción más amigable e informal para quienes quieran identificar patrones básicos la encontramos en Widgetopia, una colección organizada de elementos de interfaz presentes en diferentes sitios web realizada por Christina Wodtke.

Martijn van Welie ha realizado una extensa recopilación de patrones de interfaz web, para los que no quieran reinventar la rueda.

Una vista agregada de varios patrones en funcionamiento es la descrita en Patterns for Dynamic Websites (pdf) en la que se observa el funcionamiento de sitios dinámicos.

Y por último, Yahoo, en línea web social, quien ha liberado sus patrones, librerías y componentes de diseño para facilitar que y diseñadores y desarrolladores expandan sus servicios online agregando capas de interacción sobre los servicios propios de Yahoo. Lee, lee…

2 Comentarios Deja el tuyo...

Pingback

[…] Patrones para el diseño de la interfaz. Uno de estos artículo completitos, con muchas referencias y grandes dosis de información, que se acaban convirtiendo en imprescindibles. […]

Pingback

[…] Coincidiendo con el tema, hace unos días, Luis Villa, nos ofrecía un excelente listado de recursos sobre patrones de diseño […]

RSS feed for comments on this post. TrackBack URI

Deja tu comentario