nethodical

Si eres de los que le toca definir y hacer desde el diseño de interfaz, el de interacción y la maqueta sobre la que testar la usabilidad de tu propuesta, y estas harto de usar PowerPoint, Visio, Freehand, etc., utilizar una mezcla de papel y html para hacer los prototipos puede ahorrarte tiempo y trabajo.

¿Cómo? Crea tu propia galería de estructuras de página y de módulos de contenido en html para utilizarlos rápidamente después de esbozar en papel las interfaces que necesitas crear.

Hasta ahora me resistía a prototipar en html por miedo a tener que emplear demasiado tiempo en ello, pero a poco que uno se ponga a observar los prototipos que haya hecho hasta ahora en diferentes proyectos o las webs que visite, resulta fácil encontrar estructuras de página, módulos de contenido y elementos típicos.

Se trata simplemente de prepararlos para reutizarlos o hacer variaciones sobre ellos empleando el mínimo tiempo posible. Así podrás construirte la maqueta a testar mientras vas prototipando.

Advertencia a navegantes: Peligro de código poco ortodoxo. Puede que lo que te encuentres a partir de estas líneas sea sólo una colección de burradas, ni de lejos soy experta en html/css, soy sólo alguien que cacharrea con ello y trata de aprovecharlo a su favor. No pretendo sentar doctrina, ni ser purista ni nada parecido, sólo compartir una forma de prototipar interfaces y hacer maquetas testables que a mí me ahorra tiempo y trabajo (y me divierte :-).

Crea tu propia galería de estructuras de página y módulos de contenido

Bloques de base y estructuras de página

1. Estudia la distribución básica de las interfaces que hayas ido realizando en tus proyectos o de webs que visites:
   Date cuenta de los bloques básicos que tienen y su distribución, por ejemplo un bloque horizontal para el logo y el nombre del site, otro para un menú horizontal, 3 verticales para una columna derecha , el contenido central y una columna derecha, etc.
2. Crea una galería de estructuras de página:
   Juega con esos bloques de base a crear diferentes estructuras de página. Esos bloques serán los grandes contenedores en los que luego podrás ir incluyendo contenidos. Define sus características en sus correspondientes hojas de estilos y guarda cada estructura resultante en un archivo html independiente (por ejemplo, estructura1.htm). A cada archivo html asocia su correspondiente hoja de estilos.

Por ejemplo:

• Estructura 1: estructura1.htm, estructura1.css
  
• Estructura 2: estructura2.htm, estructura2.css
  
• Estructura 3: estructura3.htm, estructura3.css
  
• Estructura 4: estructura4.htm, estructura4.css
  
• Estructura 5: estructura5.htm, estructura5.css
  

Para ahorrar tiempo es interesante denominar a esos bloques de la misma forma a lo largo de las diferentes estructuras que crees. Por ejemplo: cada módulo puede estar denominado por el número de la posición que ocupa (uno, dos, tres, cuatro, etc). De esta forma simplificarías la inclusión o la eliminacion de nuevos bloques para componer nuevas estructuras.

Éste sería el código html para la estructura 1:

<div id="centrado">
<div id=”uno”>UNO</div>
<div id=”dos”>DOS</div>
<div id=”tres”>TRES</div>
<div id=”cuatro”>CUATRO</div>
<div id=”cinco”>CINCO</div>
<div id=”seis”>SEIS</div>
<div id=”siete”>SIETE</div>
<div id=”ocho”>OCHO</div>
</div>

Y éste seria el código html para la estructura 4 y para la estructura 5. Ambas comparten el mismo código aunque tienen composiciones diferentes, gracias a que las características definidas en su hoja de estilos son diferentes.
<div id="centrado">
<div id=”uno”>UNO</div>
<div id=”dos”>DOS</div>
<div id=”tres”>TRES</div>
<div id=”cuatro”>CUATRO</div>
<div id=”cinco”>CINCO</div>
<div id=”seis”>SEIS</div>
<div id=”siete”>SIETE</div>
<div id=”ocho”>OCHO</div>
<div id=”nueve”>NUEVE</div>
</div>

También para facilitar la composición de nuevas estructuras puede ayudarte el definir el tamaño de cada bloque a través de porcentajes.

Por ejemplo, si quieres tres columnas como en la estructura 1:
#cinco { width:23%; float:left; }
#seis { width:52%; float:left; }
#siete { width:23%; float:right;}

Y si quieres sólo un cuerpo principal y una columna derecha como en la estructura 3:
#cinco { width:74%; float:left;}
#seis { width:25%; float:right;}

Elementos y módulos de contenido

1. Estudia ahora los módulos de contenido que ocupan esos bloques de base (por ejemplo un módulo de texto con imágenes, un módulo de listado, un módulo de imágenes, etc.) y los elementos, es decir, las unidades mínimas de contenido que los componen (p.ej. fecha, título, cuerpo de texto, imagen, pie de foto, etc) así como la relación entre ellos.
2. Crea una galería de módulos individuales:
   Juega con esos elementos y combínalos de formas diferentes para construir los módulos que necesites. Define las características de cada elemento y cada módulo en una misma hoja de estilos y asóciala a los archivos html de las estructuras de página que has creado. Guarda cada módulo en un archivo html, así podrás localizarlos más fácilmente.

Por ejemplo, esta sería la hoja de estilos donde estarían definidas las características de todos los módulos de contenido: modulos.css.

Y estos serían algunos de los módulos de contenido que puedes crear:

• Nombre del site: nombresite.htm
  
• Título de página: titpagina.htm
  
• Navegación recursiva: navrecursiva.htm
  
• Raíz de navegación: raiz.htm
  
• Menú horizontal: menuh.htm
  
• Menú vertical de 1º nivel: menuv1n.htm
  
• Menú vertical de 2º nivel: menuv1n2n.htm
  
• Menú facetado: menufacetado.htm
  
• Galería de imágenes: galeriaimg.htm
  
• Listado: listado.htm
  
• Texto con imagen grande: txtimg180.htm
  
• Texto con imagen pequeña: txtimg60.htm
  
• Destacado con texto e imagen: destacado.htm
  
• Módulo con pestañas: tabs.htm
  
• Buscador: buscador.htm
  
• Login: login.htm
  
• Lista ordenada: listaordenada.htm
  

Módulos lo más completos posible. Por mi experiencia resulta más fácil quitar que añadir, así que resulta más útil hacer módulos para tu galería que contemplen el máximo de elementos posibles a quedarse corto. Por ejemplo, si has visto que algunas veces las imágenes pueden tener pie de foto y un enlace para ampliar, mejor hazte un módulo que tenga todos esos elementos. En caso de que para un proyecto determinado no necesites alguno de ellos simplemente lo podrás eliminar cuando estés construyendo su interfaz.

No identidad visual. En cuanto a las características de los elementos y los módulos, lo más útil es hacer que sean lo más impersonales posibles para que sean plenamente reutilizables para todos tus proyectos y clientes. Es decir, no pierdas el tiempo dándoles detalles de identidad gráfica. Mejor trabájalos en una escala de grises.

Asociación de la hoja de estilo a las estructuras creadas. La hoja de estilo en la que tengas definidas todas las características de los módulos deberás aplicarla también a los diferentes archivos htm que contengan las estructuras de páginas ¿para qué? sigue leyendo y lo descubrirás…

Usando tu galería en un proyecto

Primero esbozando en papel

A partir de ahora, cuando tengas un nuevo proyecto puedes empezar ensayando en papel las interfaces que resultarían para reflejar los requisitos y contenidos.

Una vez tengas más o menos claro los tipos de páginas que resultarían y los contenidos que habrían de tener cada una sólo tienes que:

1. Ir a tu galería y elegir la estructura de página que te convenga.
2. A continuación tomar los módulos de contenido que necesites e incluirlos en cada bloque de base según necesites. ¿Aplicaste antes la hoja de estilos con las características de los módulos? Entonces verás que éstos aparecen tal y como esperabas. Si no la aplicaste seguramente los módulos tendrán un aspecto diferente.
3. Puede que para controlar mejor el espacio que ocupan los módulos dentro de los bloques de base necesites crear bloques contenedores en los que incluir esos módulos. Cuando lo hagas incluye en la hoja d estilos que controla las características de los módulos.

Por ejemplo para crear una página de artículo final podemos tomar la estructura 1 y construirla de la siguiente forma:

• En el bloque de base UNO podemos incluir la navegación recursiva.
  <div id="uno">
<div id=”navrecursiva”>
<ul>
<li><a href=”#”>Opcion 1</a></li>
<li><a href=”#”>Opcion 2</a></li>
<li><a href=”#”>Opcion 3</a></li>
<li><a href=”#”>Opcion 4</a></li>
<li><a href=”#”>Opcion 5</a></li>
<li><a href=”#”>Opcion 6</a></li>
</ul>
</div>
</div>

• En el bloque DOS ponemos el nombre del site y el buscador. Para poder controlar mejor el espacio que ocupe el buscador podemos crear un bloque contenedor y ubicar dentro de él el módulo buscador. Le asociaremos una clase a través de la cual controlaremos sus característica.
• En el bloque TRES pondremos un menú horizontal.
• En el CUATRO la raíz de navegación.
• En el CINCO irá un menú vertical, en el SEIS el título de página y un texto con una imagen grande, y en el bloque SIETE varios módulos de texto con imagen pequeña.
• Finalmente en el bloque OCHO simplemente pondremos un texto como pie de página.

Éste sería el resultado: articulo.htm, estructuraarticulo.css

¿No tienes el módulo que necesitas? No importa: estudia qué elementos tiene, puede que sólo se trate de una nueva combinación de elementos que ya tienes en tu galería. Si es así sólo tendrás que crear un nuevo módulo que contemple esa combinación. Acuérdate de guardar ese módulo en un archivo html independiente para poder incorporarlo a tu galería; puede que lo necesites en otro proyecto.

¿Tampoco tienes los elementos que forman ese módulo? Tampoco importa, creálo y guarda sus características en la hoja de estilo con las características de todos los módulos.

Y finalmente, para que se adapte mejor al propósito del proyecto que estés haciendo puedes adaptar algunos detalles, por ejemplo:

• En la hoja de estilos que gestiona la estructura de la página cambia la altura de los bloques de base ( p.ej. height: 4em; ) para que sea “auto” y así se adapte a la altura de los módulos de contenido que tienen.
• En esa misma hoja de estilos quita el background-color de los bloques de base para que no aparezca detrás de los módulos de contenido y la interfaz quede más limpia.
• A medida que vayas creando todas las páginas de la maqueta sólo te queda sustutuir los textos genéricos por los propios del proyecto y enlazarlas para que sean navegables.

Tentación a evitar

Aunque a algún cliente le dé la sensación de que su web ya esté casi hecha porque ve que funciona, que lo único que le faltaría es “ponerla bonita” y quiera reutilizar esa maqueta para que sobre ella se aplique el diseño gráfico, mejor disuadirles de ello.

El código que hay detrás de eso que funciona no está listo para ser publicado en buenas condiciones, es simplemente el resultado de ir añadiendo piezas de código para construir una apariencia y un comportamiento testables. No es limpio ni guarda un orden semántico. El código de la web defnitiva habrá de ser creado desde cero por un especialista en html/css.

Publicada el Viernes, 27 Octubre 2006 a las 02:43 y guardada en Diseño Información, Interacción, La profesión, Prototipos. Puedes seguir los comentarios de esta píldora suscribiéndote a RSS 2.0. A continuación puedes dejar tu comentario, o hacer trackback desde tu sitio.