Prototipado web con Excel, ¿genialidad o locura?. Si eres de los que se alegran al descubrir usos nuevos para herramientas de siempre, te interesarán estas claves que hemos tomado de Design Intellection para prototipar con hojas de cálculo.
En la primera fase del prototipado web es crucial la creación de la retícula base, aunque la falta de herramientas adecuadas puede consumir mucho tiempo. El papel no representa con fidelidad las proporciones, y los programas de diseño gráfico restan agilidad al proceso. David Yeiser propone una alternativa: ¿Qué tal si usamos una hoja de cálculo?
Ventajas
- Ofrecemos una representación visual exacta que respeta las proporciones.
- Podremos calcular fácilmente las dimensiones en píxeles de cada área del diseño.
Configuración de la hoja de cálculo
Reproducimos aquí el tutorial que propone Yeiser para hacer prototipos con hojas de cálculo. Las instrucciones están basadas en Excel, aunque el proceso es válido para cualquier editor de hojas de cálculo como Spreadsheets o Calc.
Paso 1. Introduce los valores para las columnas y los márgenes, uno por celda, en una misma fila. En el ejemplo, los valores para cuatro columnas de 150 píxeles de ancho y márgenes de 30 píxeles.
Paso 2. Selecciona todas las columnas. Para ello, sitúa el cursor encima de la cabecera de cada columna hasta que aparezca un cursor con forma de flecha negra hacia abajo y haz clic. Si lo has hecho bien, toda la columna debería aparecer sombreada. Ahora presiona la tecla Ctrl y selecciona las otras columnas del mismo modo. El resultado debería parecerse a esto:
Paso 3. Ahora vamos a cambiar el ancho de las columnas seleccionadas: sitúa el ratón justo en el extremo derecho de una de las cabeceras hasta que aparezca un cursor similar a una barra vertical con una flecha mirando en cada dirección. Haz clic y arrastra las columnas hasta que tengan el ancho asignado (150 px, en este caso).
Paso 4. Ahora haz lo mismo con los márgenes. En este caso tendremos que reducir el ancho en lugar de aumentarlo.
En este punto, ya tenemos la hoja de cálculo preparada con las proporciones exactas. Lo que hagas en adelante depende de tus propias preferencias, aunque añadiremos algunos pasos más para ver cómo quedan las columnas y obtener una vista mejor alejando el zoom.
Algunos pasos más
En primer lugar, destacaremos las columnas dándoles color. Selecciona áreas iguales en cada columna manteniendo presionada la tecla Ctrl mientras haces clic y arrastras el ratón sobre las áreas deseadas.
Después, haz clic en el botón Color de Relleno para colorear las columnas. El resultado debería ser similar a esta imagen:
Por último, conviene alejar el zoom, ya que la proporción de tamaño real no es muy apropiada para hacerse una idea de cómo es un diseño completo. Ahora puedes empezar a jugar con los colores y las áreas para dar forma a tu prototipo.
Calcular los valores en píxeles
Una vez tengas tu retícula final, puedes aprovecharte de la parte más práctica de prototipar con hojas de cálculo: obtener los valores exactos en px rápidamente.
Para hallar el ancho de cualquier elemento, selecciona la cabecera de las columnas y márgenes que ocupa. La suma se muestra automáticamente en la esquina inferior derecha, tal y como puedes ver en esta imagen: