Cuatro versiones del home: elegir con la cabeza, no con lupa

Acá se junta todo lo que hicimos: los wireframes (la estructura), los cuatro design.md (la piel) y la marca. La skill va a tomar el wireframe del home y le va a aplicar cada uno de los archivos de diseño. Una copia por diseño. Vas a ver la misma página cuatro veces, con cuatro pieles distintas, y vas a elegir una.

Es el momento en que se entiende para qué servían los wireframes. Si la estructura hubiese sido otra, el diseño sería el mismo pero la página sería distinta. Estructura y diseño son dos cosas separadas, y por eso se pueden combinar.

Paso 10: las propuestas

Cuando decís «sigamos», la skill te cuenta qué va a usar: los cuatro diseños (Dark, Verde, Violeta y Pink) y dos de las skills que instaló al principio, una de diseño y una de prototipos.

Te hace una pregunta sobre las imágenes: ¿qué ponemos donde van las fotos de los productos? Como ChatGPT puede generar imágenes, yo le pedí que use fotos de muestra: que genere fotos de zapatillas de ejemplo, así veo algo lo más parecido posible al resultado final. Vos podés pasarle tus fotos reales si las tenés.

Y arranca. Esto demora: genera un archivo HTML por cada diseño, sólo del home, y una página índice para verlos todos juntos. Por cada uno abre Chrome, le saca capturas en escritorio, en tablet, en celular vertical y en celular horizontal, y corrige lo que no se adapte. Vas a ver pasar las capturas. Fijate que el modal (el cartel emergente, lo que los programadores llamamos pop-up) también lo diseña.

Cuando termina, abrís el índice y ves las cuatro propuestas. La estructura es la misma en todas; cambian los colores, la tipografía, los botones, las fotos. Esa es la magia de la skill: toda la información que extrajo de tus referencias, aplicada a tu estructura.

Hay algo más que me gusta señalar: cada etapa va creando documentos que después se pueden modificar a gusto, pero que tienen la información específica de ese paso. Esto no es «hacéme la mejor página del mundo». Es haber buscado referencias, haberlas armado, y ver el resultado aplicado a algo que ya era tuyo.

Elegir

A mí el diseño Dark me pareció muy sólido. Pero el que más me pareció oportuno para una tienda de zapatillas fue el Violeta. Te muestro los cuatro en el video, incluido el Pink con una tipografía bien distinta.

Acá hay algo que quiero decirte con claridad: no es el momento de ser detallista. Elegís lo que mejor se adapte a lo que querés y seguís. Podés pedirle cambios (te va a generar un archivo de diseño nuevo), pero no te pongas fino ahora. Ya va a llegar el momento. Pensá que ya teníamos la estructura con los wireframes y ahora le estamos poniendo el cuerpo, la piel. Nada más que eso.

Vamos con el Violeta.

ChatGPT anota la decisión y arranca el paso 11.

Paso 11: la versión final del home

Antes de hacer todas las páginas, la skill refina el home con el diseño elegido. Empieza a meter cosas de diseño un poco más bonitas: cómo pone la foto, el uso de la tipografía. Y audita otra vez que el diseño sea responsive, que se adapte a todas las resoluciones.

Un ejemplo de por qué eso importa. El hero (la primera parte de la página, lo que se ve al entrar) tiene dos columnas: a la izquierda el título, la descripción y el botón; a la derecha la imagen. Es una estructura muy usada, porque la lectura del usuario va en forma de F: primero la barra con la marca, después el título, después la bajada, después el botón de acción (el call to action, el botón que invita a hacer lo principal). En el celular esas dos columnas se transforman en una, y la de la derecha queda arriba. También podría ser al revés, pero siempre conviene que el texto quede abajo de la imagen.

Cuando el home está listo te pide que lo apruebes. Fijate que dice «versión 1». A partir de este paso, cada modificación que pidas crea una versión nueva. Si después preferís la 2, o querés volver a la 1, se puede. Nada se pisa.

Como estaba de acuerdo, lo aprobé. Paso 11 completado. Ahora, todas las páginas.