Planear tu página web

¿Cómo puedes convertir una página en blanco en la página web de tus sueños? Podrías simplemente empezar a escribir HTML y CSS, cambiar cosas en el camino, eliminar cosas que no quieras, agregar cosas que de repente se te ocurran o reacomodar partes de la página.

Sin embargo, esa no siempre es la mejor estrategia, ya que puede conducir a mucho tiempo perdido en escribir HTML y CSS que después vas a descartar. En lugar de eso, debes planear tu página web antes de construirla. Puedes averiguar el contenido, el diseño e incluso la apariencia.

El primer paso para planear cualquier cosa suele ser una lluvia de ideas: averiguar cualquier cosa y todo lo que podrías querer hacer. Haces la lluvia de ideas al dibujar mapas en papel, al hacer notas en un documento o al poner notas en un tablero.

Puedes hacer la lluvia de ideas tú mismo o, si quieres multiplicar el rango de ideas, reclutar a un colaborador para tener la lluvia de ideas contigo. Mientras estés en la lluvia de ideas con un colaborador, usa el enfoque "Sí, y…". No te enfoques en lo que no va a funcionar de las ideas de tu colaborador, enfócate en lo que podría funcionar y qué cosas relacionadas podrían funcionar.

Después de generar muchas ideas, vas a tener que decidir cuáles en realidad vas a querer implementar. Prioriza las que te emocionen más: trata de ponerles estrellas o ponerlas en una lista y descarta el resto o guárdalas para después.

Un buen paso siguiente es crear un prototipo en papel: tu página web, pero en papel. Es un boceto de los componentes de tu página web, con garabatos para contenido y cajas para elementos.

A continuación está un prototipo en papel para SF quiche, una web app que va a satisfacer todas tus necesidades para encontrar quiches:

Como no toma mucho tiempo hacer un prototipo en papel, puedes iterar rápidamente y no sentirte demasiado apegado a tu diseño original. También puedes hacer diferentes prototipos a la vez y puedes hacer prototipos para múltiples páginas de tu sitio.

Después de haber hecho un prototipo, podrías querer hacer algunas pruebas de usuario. Muéstrale el prototipo a un amigo, después pregúntale qué es lo primero a lo que le haría clic, o qué es lo primero que ve. Ve si tiene algo más de retroalimentación.

Una vez que te sientas bastante bien con tus prototipos en papel, puedes querer convertirlos en wireframes. Un wireframe es como un prototipo, pero típicamente se dibuja digitalmente y es más preciso. Un wireframe está hecho de cajas que representan cada parte de la página, además de pequeños pedazos de texto e íconos según sean necesarios. Por ejemplo, a continuación está un wireframe de nuestra app SF quiche:

Este wireframe fue creado en una herramienta de prototipado en línea popular llamada Balsamiq. También puedes hacer wireframes con las herramientas de los programas de oficina, como Powerpoint/Keynote, o al usar aplicaciones de diseño como Photoshop, Gimp o InDesign. También puedes buscar más herramientas de creación de prototipos en línea. Cuando estés decidiendo cuál usar, ten en cuenta que muchas aplicaciones para hacer prototipos cuestan dinero.

Una vez que hayas hecho tus wireframes, puede que quieras hacer otra ronda de pruebas con los usuarios. Algunas herramientas para hacer wireframes te dejan compartir tus wireframes con otros para que las comenten. También hay herramientas como InvisionApp que te dejan crear wireframes interactivos, en donde las áreas en donde puedes hacer clic te llevan a nuevas pantallas.