Si iniciaremos el desarrollo de un sitio web desde cero, necesitamos tener una idea clara de cómo será su aspecto final. De lo contrario, trabajaremos sin un rumbo fijo y haremos demasiadas modificaciones sobre la marcha hasta alcanzar un resultado satisfactorio, perdiendo tiempo. Por eso, es ideal confeccionar wireframes: guías visuales que trazan la estructura básica de cada página. Se trata de bosquejos que describen la plantilla, la disposición del contenido y las funciones, pero rara vez detallan componentes de estilo, como las tipografías o las imágenes. No sólo es una buena forma de organizar el contenido, sino también de previsualizar cómo convivirán las distintas secciones de cada página.

Es perfectamente posible hacer un wireframe solo con lápiz y papel. Este enfoque es rápido y otorga un boceto flexible: como en un collage, las secciones de la página pueden recortarse y reubicarse sobre el papel, permitiéndonos probar distintas combinaciones muy fácilmente.

Sin embargo, existen muchas herramientas software para lograr este mismo resultado sobre un modelo digital. Las ventajas son evidentes: bocetos geométricamente precisos, previsualización de características interactivas (como botones que cambian de color o menús que se despliegan al pasar el mouse encima) y la posibilidad de ver el modelo desde un browser. Aplicaciones como Mockingbird y Pidoco se orientan especialmente a crear wireframes funcionales. Pero incluso programas de edición gráfica como Photoshop e Ilustrator, gracias a su sistema de capas y la herramienta Rectángulo, son útiles para bosquejar una plantilla colocando «cajas» de contenido.

El proceso básico para construir un wireframe es el siguiente:

1. Crear una grilla dividiendo la página en columnas del mismo ancho. Lo habitual es usar 24 columnas.
2. Definir el layout colocando bloques: una cabecera, un banner de presentación, una barra lateral, un pie de página, etc. El ancho de cada bloque quedará delimitado por las columnas.
3. Colocar texto (aunque sea de relleno y no definitivo) y jerarquizarlo a través de diferentes tamaños de fuente.
4. Opcional: rellenar los bloques con colores (aunque sean diferentes tonos de gris) para bosquejar el patrón cromático de la página.

Una vez que tengamos listo nuestro wireframe, podemos utilizarlo como base para una plantilla definitiva en formato PSD.