Combining 6 AI Tools to Design a Website (Midjourney, Relume AI, ChatGPT, and More!)
HTML-код
- Опубликовано: 31 май 2024
- 🚀 Embark on a design journey with me as 6 cutting-edge AI tools transform a surfboard company's website. From Relume's AI wireframes to Figma's customization, AI Colour's vibrant palette, ChatGPT's personal touch, and Midjourney's images, to Vectorizer and Photoshop AI's refinements-the outcome is a stunning, seamlessly integrated design masterpiece. If you enjoyed this AI-driven adventure, subscribe for more Fullstack design.
🔗 Access the tutorial files here: tutorials.emersonvisuals.com/...
🚀 Discover more tutorials at: tutorials.emersonvisuals.com
Explore the featured AI tools:
Relume AI: AI Site Builder
Midjourney: Midjourney
AI Colors: AI Colors
ChatGPT: ChatGPT
Vectorizer AI: Vectorizer AI
Photoshop AI: Adobe Photoshop AI
Video Timeline:
0:00 - Introduction
0:47 - Figma Files
1:10 - Relume AI - Wireframes
3:38 - AI Colors - Color Palette
4:15 - Figma - Color Refinement
5:07 - Midjourney - Logo Image
5:27 - Vectorizer AI - Logo Vector
6:18 - ChatGPT - Company Name
7:29 - Midjourney - Stock Images
7:52 - Photoshop AI - Editing Images
10:13 - Figma - Adding Images
10:35 - Figma - Final Refinement
11:22 - Conclusion
Unlock the potential of AI and Design. Thank you 💻✨
The music used in this video is "Chill Day" by LAKEY INSPIRED. You can find more of his music on his official RUclips channel: ruclips.net/channel/UCOmy...
This track is licensed under the Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License. You can read the full license here: creativecommons.org/licenses/...
The music is promoted by NCM goo.gl/fh3rEJ.
If you want to see more AI related content with web or UI design, go check out this video I made previously: ruclips.net/video/wOwHRqpecN4/видео.html
Great video! I am excited to start using some of these tools.
Thanks so much!
This is amazing! Will be using these in my future designs. Thanks so much!
You're so welcome!
Great video! Thanks for showing the workflow. I'm curious if you tried any tools for designers to make the website live, like Webflow for Figma or any of the AI tools that generate code from Figma
Hey there - yeah I’ve tried web-flow! But I personally prefer coding - it really just depends on your preference!
If I come across any other AI tools to generate the code I’ll definitely create a future video on it!
Glad you enjoyed it!
@@emersonvisualsyeah I tried Anima Figma Pluign app, it does a decent job as long as you convert layers into auto-layout and group them similar to code. I'm actually a Figma Plugin developer and doing research on next set of tools to build 😊. So if any painpoints come to mind, love to take a look at those.
Another thing I noticed is when you implement it, you'll need to create a responsive design as well. Did you find any tools that help you automate that part? Or a workflow that helps create the responsive design more quickly?
Great vid! I wish if you showed us how to link the site and make it working live!
Hey there! I'm so happy you liked it! If you want to learn how I actually convert my designs to real life, you're more than welcome to check out my other videos where I also code my designs and bring them to life. Feel free to subscribe to my channel to keep updated and learn how I do this!
Alternatively, if you don't feel comfortable coding, there's also other options with website builders like Webflow and Wix Studio which I'd be happy to make videos on into the future :)
How do you import a color palette from AI color into Figma?
Hello! Simply take a screenshot on your computer, copy, and paste it onto your Figma board. Afterward, utilise the eyedropper tool to select the colors from the palette :)