DROPCODING BLOG

Crea Diseños Web con Inteligencia Artificial (con 1 Promt)

Una de las cosas más difíciles al crear una página web es comenzar el diseño o presentación. Esto ocurre especialmente cuando se empieza un proyecto desde cero.

Si a ti también te sucede, presta atención porque en este post te enseñaré una forma de diseñar una página web en pocos minutos.

De esta manera, evitarás pasar horas haciendo el diseño tú mismo.

Antes de empezar, agradecería que le dieras «like» al video y te suscribieras al canal si aún no lo has hecho.

Resumen

En resumen, lo que haremos es utilizar inteligencia artificial para crear el diseño de nuestra página web, luego lo adaptaremos a nuestro estilo, lo llevaremos a un programa como Adobe XD o Figma y tendremos el diseño acabado. Así de fácil.

Creación de diseño con Midjourney

La herramienta que utilizaremos para esto es Midjourney. Para usar Midjourney, primero debes crear una cuenta que es gratis y acceder a su servidor de Discord.

Una vez dentro del servidor, escribe el prompt que quieres utilizar en una sala de chat.

Para hacerlo, coloca una barra diagonal y escribe «Imagine».

Luego, escribe tu prompt que debe incluir la instrucción para crear una página web para un restaurante. Por ejemplo, para crear imágenes de platos de carne, pescado y pasta, por ejemplo.

Al final, colocaremos las variables, que veremos a continuación.

Midjourney se divide en dos partes. La primera es donde colocamos todo el prompt, es decir, lo que queremos que la herramienta genere. La segunda parte son las variables. Para este ejemplo, utilizaremos «beautiful» para que la página sea atractiva visualmente, así como UI, UX y minimalist.

Después, agregaremos las variables específicas para cada tipo de imagen que queremos, en este caso, platos de carne, pescado y pasta.

Es importante utilizar la documentación oficial para realizar correctamente esta tarea, ya que es fácil equivocarse. Además, hay que tener en cuenta que esto es una versión beta y los comandos pueden cambiar en versiones posteriores.

A continuación, vamos a definir cuatro variables importantes. La primera variable es «v4», que crea la versión superior de una imagen. La segunda variable es la calidad, que debe ser «0.25», «0.5» o «1» (que equivale al 100% de calidad), en lugar de «quality 5» como suelen poner algunas personas. La tercera variable es el aspect ratio, que ha cambiado varias veces y actualmente se recomienda utilizar el «7.4». Y por último, vamos a ejecutar el comando y veremos cómo se crean cuatro mockups para un restaurante minimalista con un diseño elegante.

Una vez que se han creado los diseños, podemos elegir el que más nos guste para utilizarlo.

Creación MockUp

En Adobe XD, que es la herramienta que suelo utilizar, vamos a trabajar con el diseño.

He utilizado Photoshop para hacer algunos cambios con el pincel corrector.

Ahora solo nos queda crear el mock-up, lo haremos de manera rápida para no perder tiempo. El resultado es muy similar al diseño original proporcionado por Midjourney.

Si hubiéramos tenido que hacerlo desde cero, nos hubiera llevado mucho más tiempo.

Este es solo un ejemplo de cómo la tecnología nos ayuda a acelerar el proceso creativo.

Si tienes alguna pregunta o sugerencia, puedes dejarla en los comentarios. En el próximo vídeo/post hablaremos más sobre inteligencia artificial en diseño y desarrollo web. ¡Hasta la próxima!

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *