Introducción al uso de patrones para diseño web. Artículos de Diseño Gráfico y Diseño y Desarrollo Web
Diseño Web y Desarrollo Web, informatica, programacion, paginas web
El mayor problema de los diseñadores web es la ingente cantidad de distintas formas de resolver un problema. Normalmente no pensamos sobre esto porque todos tenemos nuestras costumbres y metodos, pero hay, literalmente, miles de millones de distintas combinaciones de píxeles para cada página que hacemos.
Hay una forma más conveniente para manejar esta complejidad que hacer grandes decisiones al principio y esperar que todo salga bién. Para hacer sitios mejores, sitios más funcionales, lindos y usables, debemos romper todo el proceso en pequeños pasos independientes basados en los detalles importantes dentro de nuestros requerimintos. Christopher Alexander, el que originariamente propuso la idea, los llama pedazos de patrones.
Yo les voy a mostrar como esquivar los hábitos y costumbres que tenemos y usar patrones para tomar decisiones. Mucho se ha hablado y escrito sobre el tema, para ser simple y claro en esta introduccioón los llamare pedazos.
Empiezen haciendo una lista de todas las partes específicas que componen la página y que la hacen funcionar. Por "partes" me refiero a cualquier tipo de cosa que requiere algún diseño. Asi que esto incluye la información que debe proporcionar la página, que acciones debe incluir, etc. No hay que tener en cuenta prioridades, ni hacer grupos, ni categorías. Si hacen eso terminarán haciendo todo con las costumbres y hábitos de antes.
Estas son las partes de una página "Mi cuenta" que diseñé hace poco:
Hagan esto en papel si estan trabajando solos. Es más rápido.
Algunas partes influencian o affectan a otras (como 7 y 12), mientras que otras son absolutamente independientes (como 1 y 9). Algunas partes funcionan mejor juntas y otras no varian. Pongan las partes en grupos dependiendo si se afectan, sin tener en cuenta el lado gráfico.
Miramos a C, por ejemplo:
La contraseña (11) es parte de la información del usuario (3) y se puede editar (10).
Nótese que no estamos asumiendo cosas. Estamos construyendo sobre lo que ya sabemos con seguridad.
Decidan cuales grupos son más importantes desde el punto de vista funcional. Es decir, decidan que es lo que vale más para el usuario.
No es necesario reordenar la lista. Simplemente fijense en que grupos son más importantes y agrupenlos.
Ya que hemos agrupado todos grupos que esten relacionados directamente en categorias más grandes, podemos diseñar sin preocuparnos de los conflictos. Esta idea es, fundamentalmente, lo que dice Alexander con sus patrones (que yo llamo grupos). Se buscan por separado y luego se juntan.
Empiezen por los grupos más importantes y vayan bajando:
Las lineas parpadeantes alrededor de G cumplen 12 mostrando que esta sección debe sobresalir. ("La gente podría venir aquí para cambiar las preferencias de busqueda).
En mi abreviatura he indicado que ese enlace "Show/hide insurance info" (Mostrar/esconder información seguro) va a esconder o mostrar el bloque con Javascript. Esto cumple 9 ("La gente rara vez cambia o mira su información sobre el seguro").
Este grupo puede ser duplicado para cada usuario adicional.
Notese que los diagramas usan escalas y peso para mostrar prioridad. Estas decisiones van a guiar el siguiente paso.
Una vez que tengamos listos los diagramas, los juntamos. Piensen en las valoraciones que entraron en los diagramas. Piensen sobre las prioridades. Piensen sobre el balance. Simplemente diseñen.
Lo hice dos fases. Primero el diseño en borrador:
Lo siguiente es hacer un diagrama de mi prototipo HTML:
Cuando tengan el resultado final pueden que se den cuenta de que algunas cosas no funcionan tan bien en pantalla como lo hacían el el papel. En la página final moví la información de la compañía (4) para un balance mejor y cambie la barra lateral (E,F,H) de lado. Pude cambiar estas partes independientemente ya que los había diseñado independientemente. Vean el resultado:
