vista previa de la web que voy a diseñar
2023 se perfila como el año de la IA. Recuerde que probé Framer AI hace unos meses y pensé: “Está bien, genial, pero todavía hay un gran margen de crecimiento en el diseño web impulsado por IA”. Sin embargo, también he dicho que la IA está transformando la forma en que trabajan los diseñadores de UX/UI y creo que será aún más capaz de manejar tareas complejas en el futuro cercano.
Un avance rápido hasta ahora, descubrí Relume, un creador de sitios impulsado por inteligencia artificial. Así que estoy planeando intentar registrar todo el flujo de trabajo del diseño de un sitio web conceptual usándolo. Vayamos🚀 y veamos qué significa Relume AI para nosotros, los diseñadores.
Foto de Cash Macanaya en Unsplash
Lo primero es lo primero, démosle una pista. Recientemente comencé a hacer pilates, entonces, ¿qué tal si creamos el sitio web de un estudio de yoga y pilates?
Aviso de diseño:
Cree un sitio web moderno y energizante para un estudio de yoga y pilates. Asegúrese de que el horario, los detalles de las clases y los precios sean fácilmente accesibles para los usuarios que buscan una experiencia de fitness consciente.
Lo primero que encontré realmente impresionante es que, en lugar de generar un montón de estructuras alámbricas sin sentido, Relume AI puede ayudarte a planificar y construir el mapa del sitio primero. Una vez que proporcionemos el mensaje y especifiquemos cuántas páginas queremos, generará el mapa del sitio detallado para la página de inicio y también planificará las páginas secundarias.
el mapa del sitio de la página de inicio
Después de estar satisfecho con la página de inicio, al hacer clic en el botón Continuar, la IA generará todos los mapas del sitio detallados para las páginas secundarias. Podemos editar el mapa del sitio agregando, moviendo o eliminando secciones individuales o incluso volver a ejecutar el proceso de generación hasta que nos sintamos satisfechos. La descripción de cada sección también es editable, lo que significa que tenemos todo el poder de personalización de esta.
los mapas de sitio de las páginas secundarias
Muy bien, déjame leer los mapas del sitio completos y ajustarlos para crear una estructura lógica y bien organizada para el sitio web de Yoga & Pilates Studio.
Eliminé algunas secciones que sentí que eran innecesarias y agregué una página de contacto. Descubrí que agregar una nueva página es realmente fácil: no es necesario volver a proporcionar el mensaje de diseño ni agregar secciones manualmente. En su lugar, puedo simplemente hacer clic en el botón generar, escribir el nombre de la página y generará rápidamente el mapa del sitio para esa página específica.
generando una página de contacto
Ahora tenemos nuestro mapa del sitio. ¡Fácil! Avancemos a los wireframes.
mapa del sitio ajustado
¿Ves los botones de alternancia en la parte superior central? Una vez que hagamos clic en los wireframes, Relume AI comenzará a crear wireframes de acuerdo con los mapas del sitio que acabamos de crear.
los wireframes generados por Relume AI
¡Esto superó absolutamente mis expectativas! ✨
Si bien obviamente no son lo suficientemente refinados para una presentación directa al cliente, es un punto de partida extraordinario. Esto está más alineado de manera lógica y realista con las páginas web que cualquier cosa que haya usado antes entre las herramientas de inteligencia artificial de diseño web. Y creo que es por eso que es necesario considerar primero un mapa del sitio.
Además, solo tomó aproximadamente 20 segundos generar esquemas para las 9 páginas. Si tuviera que crearlos para un proyecto de un cliente real desde cero en papel y luego transferirlos a los wireframes de Figma, probablemente me llevaría al menos 2 o 3 días. Y crear el mapa del sitio me habría llevado otro día.
reemplazando componente
Al pasar a cada sección individual de una página, podemos ajustarla o incluso reemplazarla utilizando componentes prediseñados en la Biblioteca Relume.
Por cierto, así es como descubrí Relume. Si ha leído mi último artículo, sabrá que actualmente me estoy preparando para mi propio estudio de diseño en solitario y construyendo el sitio web de mi estudio utilizando Webflow. Los componentes de la biblioteca Relume se pueden copiar a Webflow, lo que me ayuda a crear mi sitio aún más fácilmente.
Volviendo al sitio de Yoga & Pilates Studio, voy a refinar los esquemas y tal vez agregar algunos estilos e imágenes para crear una maqueta. Así que ahora quiero volver a trabajar en Figma. Otro aspecto positivo de Relume es que, como amante de Figma, el uso del complemento Relume Library nos permite exportar fácilmente tanto mapas de sitio como wireframes a Figma. También crea capacidad de respuesta móvil para cada página.
exportar estructuras alámbricas a Figma
Después de eso, probé si podíamos editar estructuras alámbricas en Relume y copiar sin problemas una sola sección a Figma. Por lo tanto, hice un cambio en la sección de lista de funciones en nuestra página de inicio e hice clic en el botón copiar. ¡Y sí, podemos! El proceso es muy sencillo: simplemente use el complemento nuevamente y haga clic en pegar. De esta manera, ahora tenemos versiones web y móviles de la nueva sección “Nuestras Clases” en el lienzo de Figma.
pegar una sola sección en Figma
Además, al exportar estructuras alámbricas a Figma, Relume también crea automáticamente componentes y estilos locales utilizados en las estructuras alámbricas. Este es otro aspecto positivo que encontré sobre Relume. Esto significa que podemos ahorrar mucho tiempo personalizando cada sección reutilizada en cada página.
componentes y estilos locales
Por cierto, exportar de Relume a Webflow es aún más fácil, solo es copiar y pegar, y es totalmente personalizable en Webflow.
Si se trata de un proyecto de cliente real, una vez que refinemos ligeramente los esquemas y creemos un prototipo con el flujo principal, estará listo para ser presentado al cliente y tal vez ejecutar una prueba con usuarios potenciales. Pero como se trata de un trabajo conceptual, elegiré una página y crearé rápidamente una maqueta para exhibirla en mi Dribble y Behance. Y decidí seguir trabajando en la página de destino.
Démosle una marca simple.
un moodboard simple, imágenes de Pinterest
Después de crear un moodboard con las imágenes de Pinterest, también utilicé ChatGPT para generar un nombre de estudio y algo de contenido para la página de destino.
Y… 2000 años después…
¡Todo listo!
Aquí está la estructura alámbrica y el diseño de alta fidelidad de la página de inicio de nuestro Estudio de Yoga y Pilates 👇
maqueta de la pagina de destino
Como puede ver, no me quedé exactamente con la estructura alámbrica que creó Relume AI. Hice algunos cambios, especialmente en el diseño de la sección de beneficios. Sin embargo, la sección de héroe, la sección de blog y la sección de promoción son casi iguales.
Relume AI ha redefinido mi perspectiva sobre el diseño web impulsado por IA en 2023. Su capacidad para generar mapas de sitio significativos, generación rápida de estructuras alámbricas y una integración perfecta con plataformas de diseño como Figma y Webflow muestran su compromiso con la eficiencia. Nos ha ahorrado mucho tiempo, especialmente en proyectos reales donde necesitamos centrarnos más en la resolución de problemas. Ahora podemos dedicar menos tiempo a planificar mapas de sitio escribiendo infinitas palabras y creando el primer borrador de esquemas, lo que nos permite dedicar más esfuerzo al diseño crítico y al trabajo creativo.