Maquetar a ciegas 0: el comienzo

Hace algunos días comentaba mi intención de enseñar un método para maquetar a ciegas, hoy quiero comentarles la “pizarra” que se me ha ocurrido para explicar lo relacionado con la parte visual y que puedas “tocar” todo y de este modo experimentar lo visual de un modo equivalente.

¿Porqué texto y no video? bueno, quiero recordaros que esto es cuestión de inclusión, las personas sordas y sordociegas tienen el mismo derecho a maquetar que tu ergo uso el método más inclusivo a mi alcance.

Materiales necesarios

Los materiales necesarios en esencia son tres:

  • Una superficie del tamaño aproximado de un folio A4, con preferencia de cartulina. Si tienes baja visión te recomiendo que sea de color negro.
  • Spaguetti crudos, los usaremos como “líneas rectas” para delimitar áreas como el encabezado o el pie de una página y de este modo poder “tocar la web”.
  • Pastillas de caldo cuadradas, si no dispones de ellas, algo parecido: pequeños cuadrados de 2 a 3 centímetros de lado y un alto de al menos 1 centímetro de altura estaría bien. Los combinaremos para jugar con ellos (entre 12 y 32 calculo estará el mínimo y lo ideal para trabajar).
  • Opcionalmente recomiendo papel con un adhesivo suave (celofán, fiso o similar), para fijar los spaghetti durante los ejercicios (una bolita de plastilina en cada extremo también podrían servir para que no rueden por la superficie).

¿Y para qué este material?

Vamos a hacer un pequeño experimento con el que trataré de explicaros cual es el motivo de este material. Lo describo por pasos:

  1. Situamos la cartulina apaisada frente a nosotros, esa cartulina representa el área visible del navegador, de forma similar a como la pantalla del ordenador representa la zona visible del escritorio virtual.
  2. Toma cuatro pastillas de caldo, forma con ellas sobre la mesa un cuadrado grande al unirlas en dos filas de dos, esto representará una foto que queremos situar en una galería de imágenes.
  3. Toma ocho pastillas más y crea dos “fotos” más con ellas.
  4. Ahora entran en juego los spaghetti crudos, toma dos de ellos e intenta situarlos verticalmente sobre la cartulina de forma que los tres espacios que forman horizontalmente sean lo más parecidos posible (ayúdate de tus manos para medir el espacio).
  5. Aunque hablaré técnicamente de la cuestión en posteriores capítulos, intuitivamente hablando, una distribución regular resulta bastante armoniosa a efectos visuales, del mismo modo que la regularidad del latido de un corazón humano nos conforta.
  6. Una vez hemos realizado estas divisiones con los spaguetti (si los fijas con un poquito de celofán mejor) , intenta situar cada “foto” dentro de cada columna (en cada hueco creado con los spaguetti.
  7. Trata de que cada “foto” esté verticalmente en el centro de la cartulina, y a su vez trata de que esté horizontalmente en el centro de su zona, usando los spaguetti como referencia.
  8. E voilá, tus tres fotos están ahora ubicadas en pantalla de un modo que una persona que ve considerará, cuando menos agradable, sino armoniosa.

¿Me mandas una foto del resultado? ¡me gustaría ver tus progresos!

Tu feedback es lo más importante

Cuando pruebes a hacer esto, te pido que me cuentes si te haces a la idea, que tan difícil te ha resultado o si la forma de explicarlo es suficiente para que puedas seguir los pasos.

Pretendo con esta técnica poder explicar de forma táctil algo que luego se traslade a código de forma relativamente sencilla.

Nuestros spaghetti serían tres áreas de 33% de ancho por ejemplo, y cada foto estaría situada en el centro de su área correspondiente mediante código que equivaldría a lo hecho de forma táctil.

Si eliminamos esta barrera juntos, no creo que haya nada de maquetación que no pueda explicaros, aún cuando no hayais visto jamás. Es algo que , insisto, me gustaría que hiciésemos todos juntos, antes de seguir con el “curso de maquetación visual a ciegas”.

¡Seguimos adelante!

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>