Cuando estás en el proceso de diseñar un sitio web o una aplicación para tu negocio, es fundamental considerar la importancia de los bocetos de páginas web, también conocidos como wireframes.
Estos elementos desempeñan un papel clave en la creación de una experiencia de usuario efectiva y un rendimiento óptimo. La razón es simple: elaborar un boceto de página web es una estrategia esencial para planificar la estructura y la usabilidad de tus productos digitales.
Si bien la creación de bocetos puede ser un proceso que demande tiempo, es en este punto donde las herramientas de inteligencia artificial se vuelven invaluable. Estas herramientas no solo agilizan el proceso de diseño, sino que también ofrecen características útiles que facilitan la tarea, permitiéndote obtener resultados de mayor calidad de manera más eficiente.
Pasos para crear Wireframe con IA
Los pasos a seguir son muy sencillos. Accede a Bing Chat y sube la imagen que hayas creado en tu proceso creativo cuando hayas pensado estructura que quieres que tenga tu página.
Ahora vamos a preguntarle para que nos devuelva código para crear una plantilla web:
Escribe el HTML/CSS/JS breve para convertir esta maqueta exacta en un sitio web:
- Respeta todos los elementos de la imagen.
- Reemplazar COLUMNA 1 y COLUMNA 2 por dos columnas en CSS.
- Dentro de COLUMNA 1 reemplazada TEXTO 1 por un texto de 3 parrafos con lorem ipsum.
- Dentro de COLUMNA 2 reemplazada FOTO por una imagen.
- Reemplazar [BOTÓN] por un botón que dirige al sitio web "https://open.spotify.com/show/4q7eIiAyuOqvwvDUcWoMEe"
- Reemplaza el TEXTO 2 de 5 parrafos del final por un texto con lorem ipsum.
- Centrar todos los elementos
Y como bien dice Álvaro Peña en su Tweet sobre este prompt, ahora, a esperar la MAGIA.
🤖 Prompt para crear una plantilla web con IA 🤖
— 🚸 Álvaro Peña (@isocialwebseo) September 19, 2023
En este caso usaremos Bing Chat.
1⃣ Dibujamos el esqueleto y le hacemos una foto
2⃣ Definimos prompt con todos los elementos
3⃣ Arrastramos la foto del dibujo
y MAGIA 👇 pic.twitter.com/MwkmvtziCy
Head SEO y coCEO de iSocialWeb. CMO de Growwer. Especialista en optimización de conversión y Marketing Experiencial.