No video

AI03: Build a Website with Midjourney, Figma & ChatGPT

  Рет қаралды 891,223

CJ Gammon

CJ Gammon

Жыл бұрын

alieninterface...
Alien Interfaces Episode 03
In this episode we create a web application design in midjourney. Then we create the assets and prototype in figma. Finally we use ChatGPT to help us generate the HTML, CSS and Javascript.
Prompt: UI UX interface design side by side Behance Dribbble, beautiful colorful creative app marketplace --q 2 --stylize 1000 --v 4
Source Code:
github.com/ali...
Midjourney: www.midjourney...
Stability Photoshop Plug-in: christiancantr...
Greensock Animation Platform: greensock.com/...
Music:
- DaniSogen - The Magic Unfolds
- Provided by Lofi Records
- Watch: • DaniSogen - The Magic ...
- Download/Stream: fanlink.to/The...

Пікірлер: 278
@oladapoogidan8543
@oladapoogidan8543 Жыл бұрын
The mistake we are all making is that AI is here to take our job, but it’s a big lie. AI is here to save more time just like the computer does, anyone without solid knowledge can never do what you just did even if he or she knows all the AI tool in the universe. I am a data analyst and I can say AI has helped me finish project much more faster and professionally, clients are really loving the delivery speed nowadays.
@iciest.icy.n.icy.rice.1
@iciest.icy.n.icy.rice.1 Жыл бұрын
but this is just the beginning tho? The whole AI revolution thing started with Chatgpt and it hasn't been much since it came out, yet the increase in AI capabilities is better than anything in the past decades. Of course people can't do much even if they have AI help right now... but in the future, we might just get AIs that can take simple text as input and create entire project by itself.
@lorgerdat
@lorgerdat Жыл бұрын
It will take the jobs of those who fail to adapt to it, which will be alot of people especially those late in their careers, and also companies who focus on niche products that are now easily replaced by AI.
@LuismaLorca
@LuismaLorca Жыл бұрын
@@iciest.icy.n.icy.rice.1 "its just the beginning bro!" I swear you AI bros all sound like crypto bros.
@dipanjanghosal1662
@dipanjanghosal1662 Жыл бұрын
Stop the copium
@iciest.icy.n.icy.rice.1
@iciest.icy.n.icy.rice.1 Жыл бұрын
@@LuismaLorca It literally is the beginning tho? How long do you think it's been since chatgpt came out? it was good as is but now we have gpt 4 which can generate 3 times more text compared to its predecessor, can scan images and solve any problem in it, pass the hardest of tests with flying colors, scan and write entire documents by itself as well. And now we have plugins for gpt 4 which can connect it to the internet. This is the start of a new era, dude. Github copilot, VS code copilot, Microsoft copilot 365, microsoft bing copilot, etc., these are all crazy in terms of funtionality. The you have image generators, stable diffusion, novelAI, midjournry, anything v3, automatic 1111, adobe firefly etc etc that can literally materialize your imagination within seconds. It is on par with professional artists. The whole "bad hands" thing has been fixed with midjourney v5 and poses and other things are fixed by controlnet in stable diffusion. Now you have slides ai, voice ai, tome ai, code ai, etc etc that can easily do what people would take weeks or even months for. Think about the first smartphone and look at how far humanity has come within the past two decades in terms of the capabilities of smartphones. It's the same for AI, except the advancements are happening on a much more rapid scale.
@alejandrosauqueperez931
@alejandrosauqueperez931 Жыл бұрын
I think the speed in which you manage this tutorial is great! It is neither rushing nor dragging.
@ado011235
@ado011235 Жыл бұрын
Nieman?
@elroroces
@elroroces Жыл бұрын
Nice tempo
@Freshlygrazed
@Freshlygrazed 6 ай бұрын
For the last father @%#$-ing time!!!!
@dontsubscribepleaseibeg
@dontsubscribepleaseibeg Жыл бұрын
Upcoming websites will be visually beautiful.
@allcaps4141
@allcaps4141 Жыл бұрын
websites will never be like that, it's a pain to develop and the ai tool sucks because it's a rasterized image
@trapido0296
@trapido0296 Жыл бұрын
@@allcaps4141 there will probably be ai generating vector graphics very soon
@allcaps4141
@allcaps4141 Жыл бұрын
@@trapido0296 hmmmmm not sure about that
@briannaalejo9226
@briannaalejo9226 Жыл бұрын
@@allcaps4141 adobe firefly is coming out soon. It’s just a matter of time and def doable
@dinoscheidt
@dinoscheidt Жыл бұрын
Lacks too much context for UX. Great for inspiration, but for users your app is a tool - and these users are different for every product. So there needs to be collaboration between designers and AI to get the context in; because pixels don’t make money, low friction features do. Like dribbble: Great for inspiration
@TejasHullur
@TejasHullur Жыл бұрын
This was one of the best tutorials I've seen on KZfaq.
@tcortega
@tcortega Жыл бұрын
what the fuck have you been watching
@kamgdy89
@kamgdy89 Жыл бұрын
you've seen very little
@junedshaikh5162
@junedshaikh5162 Жыл бұрын
I have been making html development for years and I realize that it's real tough to convert a complicated designs from figma I use to fight alot with the designers but now seems like there is possibilities to achieve...things easier
@alecule
@alecule 10 ай бұрын
how is it making easier for the developer if the whole thing still needs to be implemented in html without the use of AI :) it helps only the designer
@MidnightLux
@MidnightLux 7 ай бұрын
Devs are just lazy af
@stephaniealbert6448
@stephaniealbert6448 5 ай бұрын
Bro this is crazy. I'm on a caffeine buzz and I just came across your account, jumping and buzzing around from the excitement of how amazing this is, thank you for showcasing the possibilities of AI for creatives. So cool!!!!
@BantuNiLo
@BantuNiLo 4 ай бұрын
I dont know why am watching this. You hypnotized me😂😂
@imago_deon
@imago_deon Жыл бұрын
I was never into this level of web design nor do I have the chops to create UX, but now it seems it's easier to get into more than ever. Thank you for this!
@yesiam6758
@yesiam6758 Жыл бұрын
This is not UX, this is graphic design + UI territory
@benfrese3573
@benfrese3573 Жыл бұрын
the problem is to make this consistent throughout an app. This is not functional design, it just looks pretty.
@Syphronix
@Syphronix Жыл бұрын
Excellent video, thank you!
@CJGammon
@CJGammon Жыл бұрын
You are welcome!
@Hector.levelup
@Hector.levelup 5 ай бұрын
Very clear and concise. Thank you!
@CJGammon
@CJGammon 5 ай бұрын
Thanks for watching!
@pranavanilkumar1246
@pranavanilkumar1246 Жыл бұрын
hardworking developers left the chat
@BobbyBundlez
@BobbyBundlez Жыл бұрын
still quite a bit of work in this... maybe it looks simple to you as a dev. but I am a dev and i know there is still a lottttt of work in this entire process lol
@alexandrudeac9791
@alexandrudeac9791 Жыл бұрын
If only apps would work like that
@w0mblemania
@w0mblemania Жыл бұрын
Apps don't work like this because it's vastly harder to put together an app that works like this, than it is to mock one up in Figma. Like so many Dribbble concepts, these designs are effectively unusable in the real world. They don't take in to account real users, real devices, real data.
@ryosuwito331
@ryosuwito331 Жыл бұрын
agree, it just take more time for development which can achieve the same functionality as the good old list and button.
@aqema
@aqema Жыл бұрын
I am a UX and UI designer and I feel your pain 😂 Usually I put together a beautiful design that works in theory but as soon as a user or client sees it, it's getting listified 😂
@hashieb8765
@hashieb8765 7 ай бұрын
Haha. Pause the lofi stream to listen to this video just for it to continue here :D great stuff
@SomeOne-mc7ev
@SomeOne-mc7ev Жыл бұрын
Bravo This video is really helpful to learn new way to design and develop website. Love it
@ardjunas1229
@ardjunas1229 Жыл бұрын
I have been trying to figure out a way to pull out high res versions of the midjourney generated images, little did I know it was right under my nose with stable diffusion and photoshop. thank you, this was very helpful.
@wecharri
@wecharri Жыл бұрын
Awesome! Thanks for sharing it!
@CJGammon
@CJGammon Жыл бұрын
Glad you liked it!
@lga9046
@lga9046 Жыл бұрын
AI is here to make it possible to make every website and design look exactly the same in a fraction of the time
@allisonking4274
@allisonking4274 7 ай бұрын
LOL yeah def need to the creative juices flowing
@foreverandever261
@foreverandever261 Жыл бұрын
Exactly what I needed! Thank you, you have a new subscriber 😊
@borazan
@borazan Жыл бұрын
this was stunning, well done!
@sonoftroy8572
@sonoftroy8572 9 ай бұрын
If you have V.S. Code with EMMIT installed as a plugin. You can generate boilerplates way faster!
@dismal368
@dismal368 Жыл бұрын
amazing. i think the AI only brings more capability to you to do better things, of fullfill
@yjtheartist2711
@yjtheartist2711 Жыл бұрын
pace of the tutorial was good, you forwarded at all the right places, good job, you made it look easy 😅
@maxgoette
@maxgoette Жыл бұрын
that video is really dope :O I really like your approach :)
@iUmerFarooq
@iUmerFarooq Жыл бұрын
Wow, Amazing Brother. The idea is amazing 😃
@CJGammon
@CJGammon Жыл бұрын
Thank you!
@_storm_8_
@_storm_8_ Жыл бұрын
I'm liking this video just for bgm
@zingnolan
@zingnolan Жыл бұрын
OMG YOU ARE AWESOMEBRO
@paulTimothyk
@paulTimothyk Жыл бұрын
This is bloody amazing
@orestesjaviermonteagudo601
@orestesjaviermonteagudo601 10 ай бұрын
you got another subscriber. this was great!
@CJGammon
@CJGammon 10 ай бұрын
Awesome, thank you!
@apolloapostolos5127
@apolloapostolos5127 Жыл бұрын
A video that delivered on its title. 🙏🙏🙏
@veshua_j
@veshua_j Жыл бұрын
I watch and admire you! Now I have to think about how much time I spend on completely unnecessary and meaningless things. I envy you with white envy). Thanks for the video)
@OboseUwadiale
@OboseUwadiale Жыл бұрын
YOURE GETTING VERY GOOD AT THIS \
@VaibhavShewale
@VaibhavShewale Жыл бұрын
looks amazing!
@szalailaci3722
@szalailaci3722 Жыл бұрын
I love these colors
@SilviuIT-tn3dn
@SilviuIT-tn3dn 11 ай бұрын
for me ...as a novice, is incredible...
@samuelBohren
@samuelBohren Жыл бұрын
I'm not very experienced in web development - I mainly work on developing games. I'm curious why Figma doesn't generate all the necessary CSS and HTML code. I understand that JavaScript still needs to be coded separately. With Unreal Engine, there's a user interface editor that automatically generates all the required code. Shouldn't something similar be possible for web development?
@lordseidon9
@lordseidon9 Жыл бұрын
There are tools like that but it will not be as responsive as a website built by a human. There are also drag and drop website builders but they fail a lot too.
@fanart139
@fanart139 5 ай бұрын
You’re amazing ❤
@TheGreatUk
@TheGreatUk Жыл бұрын
That was great. Keep it up :)
@CJGammon
@CJGammon Жыл бұрын
Thanks a lot!
@Way_Of_The_Light
@Way_Of_The_Light Жыл бұрын
So cool man 👏👏
@affiliateme7414
@affiliateme7414 Жыл бұрын
Magic images and colours
@user-gt5ks3bq6w
@user-gt5ks3bq6w 11 ай бұрын
this is game changing
@tonyeneh8194
@tonyeneh8194 8 ай бұрын
This is just wooooow
@Andy-bz9cb
@Andy-bz9cb Жыл бұрын
pretty cool ui
@Waladhoolin
@Waladhoolin Жыл бұрын
THIS IS LIT ❤‍🔥🔥
@sale7680
@sale7680 Жыл бұрын
Awesome ❤
@MACH_SDQ
@MACH_SDQ Жыл бұрын
Very gooooooood
@OboseUwadiale
@OboseUwadiale Жыл бұрын
I REALLY LIKE IT
@gunnarautterson2838
@gunnarautterson2838 Жыл бұрын
so cool!!
@whonayem01
@whonayem01 Жыл бұрын
Incredible
@ojasvisingh786
@ojasvisingh786 Жыл бұрын
🎉🎉
@austinastray4444
@austinastray4444 Жыл бұрын
Dude... whoa.
@sujeetv3442
@sujeetv3442 2 ай бұрын
As a ux ui designer do i have to learn home to code as well? Im not particularly fond of coding , have learnt java and its not fun at all for me
@UnlockWave
@UnlockWave 8 ай бұрын
osm brother
@tryphenepower6652
@tryphenepower6652 Жыл бұрын
So Photoshop will never die no matter what AI is coming with , but it still need somehow the photoshop...
@TylertheHypnotist
@TylertheHypnotist Жыл бұрын
Photoshop will integrate AI so it doesn’t die
@lipin007
@lipin007 Жыл бұрын
Adobe has introduced Firefly!
@CJGammon
@CJGammon Жыл бұрын
@@lipin007 kzfaq.info/get/bejne/kNthnMqGzcjSko0.html
@Aimodellookbook
@Aimodellookbook Жыл бұрын
big companies find there way to create something new so they don't die in market the worse come they just Buy the competitor if they are new and competitive
@EPmessi9800
@EPmessi9800 Жыл бұрын
@@lipin007 I’m excited for that!
@chychywoohoo
@chychywoohoo Жыл бұрын
The midjourney result was blended better
@adrianomg94
@adrianomg94 7 ай бұрын
this is gold
@ammarmuhammadirfansyah4633
@ammarmuhammadirfansyah4633 Жыл бұрын
mantap betul
@yitangcui1165
@yitangcui1165 6 ай бұрын
man you re awsome
@abrahamouattara8757
@abrahamouattara8757 9 ай бұрын
it is great thank
@TheAILab67
@TheAILab67 10 ай бұрын
19k+...Thanks CJ. Can you create a slow, step-by-step please on Figma next time. Im trying to apply Figma to an Android application I'm planning to create.
@MohanaKumar-xy5xm
@MohanaKumar-xy5xm 7 ай бұрын
I wish i was skilled as you.
@mohammedjoubba318
@mohammedjoubba318 Жыл бұрын
awesome
@textgb125mb
@textgb125mb Жыл бұрын
this is a useful video ❤
@ahmadichsanbaihaqi
@ahmadichsanbaihaqi Жыл бұрын
great!!
@anonymous_basics
@anonymous_basics Жыл бұрын
that's very clever .
@BenjiiBee
@BenjiiBee Жыл бұрын
Just curious as to why you're using figma and not Adobe XD since you're already working with photoshop?
@JohnThomas20340
@JohnThomas20340 Жыл бұрын
Nice Video
@CJGammon
@CJGammon Жыл бұрын
Thanks!
@nikolaykolev5143
@nikolaykolev5143 Жыл бұрын
Question to the author of this video: how much time you used to do all this, start to finish? Just curious…
@RobBrogan
@RobBrogan 2 ай бұрын
Damn... lost me when he opened Photoshop. Was hoping that Midjourney could start delivering PNG assets.
@shakibhossen1970
@shakibhossen1970 Жыл бұрын
Sir can you please show us slower thats why we learn and do coding step by step with you, as well as ui design . please
@GGGamingYoutube
@GGGamingYoutube Жыл бұрын
imagine asking ai to make boilerplate when you can just type ! and press enter alsdjflksdjflskjdflkjsdfjlk
@BobbyBundlez
@BobbyBundlez Жыл бұрын
i know... thought the same thing lmfao. kind of funny how this is all unfolding
@kaosang6754
@kaosang6754 8 ай бұрын
This is so good!
@LoveDsgn
@LoveDsgn 10 ай бұрын
Even your Voice while explaining all of this is made by AI
@ericsnguyen4649
@ericsnguyen4649 Жыл бұрын
cool, really cool, but i wonder how to create the bottom border of the images, it looks like 3d model ...
@r2in360
@r2in360 Жыл бұрын
Hmm now I want to try and make something similar in react native
@bhadawang
@bhadawang 9 ай бұрын
wow
@otaibi3084
@otaibi3084 Жыл бұрын
designers in danger , nice tutorials bro liked and subed
@kedarlondhe3995
@kedarlondhe3995 10 ай бұрын
1:18 can we get these manual steps done by any AI tool ? People like Product Manager(not UI/UI designer) takes lot time in these steps.. TIA
@theweirdos7405
@theweirdos7405 Жыл бұрын
awsomme bro it will help me to earn a bit more
@joegrant413
@joegrant413 Жыл бұрын
Not saying I have great svg chops, but wouldn't it have made sense to edit the MidJourney images as SVG in Figma? It looks like you jumped instead to tracing over them.
@sitaro8
@sitaro8 Жыл бұрын
So, where is the website :X Loved the video but the title seems to be a bit misleading.
@me_sumit_0
@me_sumit_0 Жыл бұрын
Dope....🫡❤️‍🔥❤️‍🔥❤️‍🔥
@comebackcs
@comebackcs Жыл бұрын
As a beginner, it seems very difficult to me, the coding part.
@AdeelTariq0
@AdeelTariq0 Жыл бұрын
You shouldn't be watching this as a beginner. Get your basics right first. Then after a few years of work you can think about incorporating AI into your process.
@TheEnterthedreaming
@TheEnterthedreaming Жыл бұрын
This doesn't work the same in v5 so be sure to use the --v 4 prompt.
@mehrshad.h6919
@mehrshad.h6919 Жыл бұрын
but do we need to work with html and css as a ui ux designer? or we just have to design it?
@lasangagamers
@lasangagamers Жыл бұрын
its good to know some html and css and javascript
@johiny
@johiny Жыл бұрын
AI will give developers super powers to complete normal things like them was nothing and make things that look almost impossible in normal things
@MicahBratt
@MicahBratt Жыл бұрын
Soon AI will just create the design, turn it into html, style it with css based on design all behind the scenes.
@dontpanicalreadyhappened
@dontpanicalreadyhappened Жыл бұрын
Please provide the prompt image (one can't get it now without subscription)
@ai-man212
@ai-man212 Жыл бұрын
Woah woah woah woah. TMI coming at me at once. lol. I'm just waking up. I'm writing a book about embracing AI and teaching people how to turn AI-generated art into real traditional art. Playback speed .5
@workemail4460
@workemail4460 Жыл бұрын
Hello, can you make an example with 1 ecommerce?
@LukeJT22
@LukeJT22 Жыл бұрын
Do you have any tutorials or anything about learning Figma? I've been spending time learning Webflow. I recently discovered Figma and have plans to learn it and use the 2 together to hopefully make money freelancing.
@nickzubrik
@nickzubrik Жыл бұрын
Figma and Webflow are both great tools for web design and development.Hope you’ll achieve your goals. ✌️
@LukeJT22
@LukeJT22 Жыл бұрын
Yeah I love Webflow. They upgraded their "University" and I read they have plans to integrate AI tech into their software. Its gonna be so awesome. I built an online portfolio to go with my resume to try and make a career change from 50 hrs/week in a shop to building businesses online.
@nickzubrik
@nickzubrik Жыл бұрын
@@LukeJT22 Yeah, Webflow University is awesome. I also would like to see their AI tool. I'm doing a very similar career change as you described but I go from radiologist to Webflow developer 😄. Good luck to us
@aixizu
@aixizu Жыл бұрын
i was loving it but then you asked chatgpt to make a html boilerplate and my mind went numb
@AnnoyedBowlOfSpaghetti
@AnnoyedBowlOfSpaghetti Жыл бұрын
Lmao same
@AnnoyedBowlOfSpaghetti
@AnnoyedBowlOfSpaghetti Жыл бұрын
1. He could've used emmet for that 2. Who tf needs external helf for a goddamn html boilerplate?!
@benfrese3573
@benfrese3573 Жыл бұрын
@@AnnoyedBowlOfSpaghetti of course he can, but this is about AI and the current state. Soon this all will be a short prompt and much quicker than emmet ever was
@QuickTuts
@QuickTuts Жыл бұрын
Always save your images as svg
@BobbyBundlez
@BobbyBundlez Жыл бұрын
uh.. no. only monochromatic photos. others should be jpeg, png, or webp lol
@QuickTuts
@QuickTuts Жыл бұрын
Until one day a client calls you at 1 am complaining that one of the images is blurry on some device lol
@InTheCity3D
@InTheCity3D Жыл бұрын
Web design is still such a massive headache. I mean for fucks sake, this tutorials is great, but the lengths you have to go to in order to accomplish the simplest concepts is ridiculous. It boggles the mind that tools like Figma and Adobe's piss poor XD can create these interesting concepts, but can't just execute an html deliverable without all this back-end shite. It's no wonder that in 2023, 99% of the our experience surfing the web is just devoid of any imagination. I went to work with Facebook, Apple and Google and in the end I was like "Why hire a guy like me, if you intend to keep all of your work this branded and boring?"
@sw-ln1hh
@sw-ln1hh 8 ай бұрын
thank you may i ask this video that used photoshop replace another free tool recomend plz
@mokkimheng2728
@mokkimheng2728 6 ай бұрын
1. Photopea 2. GIMP
@hitoshitakata4679
@hitoshitakata4679 Жыл бұрын
withour handson knowledge AI wont take our job
@voodazz
@voodazz Жыл бұрын
Oh well.. if you can't beat em', join em'
@user-ny1kn7uv1p
@user-ny1kn7uv1p Жыл бұрын
Awesome workflow, can you show how to install those AI plugins on Photoshop? Thanks
@dav5844
@dav5844 Жыл бұрын
They ... Are not plugins. Have you watched the video
@zehfred
@zehfred Жыл бұрын
It's the Stability plugin
@CJGammon
@CJGammon Жыл бұрын
exchange.adobe.com/apps/cc/114117da/stable-diffusion
@norzillian9867
@norzillian9867 Жыл бұрын
​@@dav5844 check 2:34
@jadson_
@jadson_ Жыл бұрын
hello, I really liked it but I found it too fast, I'm a beginner, do the same with a focus more for those who are starting, thank you very much
@axetroll
@axetroll Жыл бұрын
I downloaded git project, but it seems not working as the video. Do I need to put the files in some kind of server?
@CJGammon
@CJGammon Жыл бұрын
I'd make sure it's on a mobile browser dimensions. You can also see a working version here: codepen.io/cjgammon/pen/vYzLjae
@christianfigueroa
@christianfigueroa Жыл бұрын
I’m just confused how to bring from figma into code 😢
Survive 100 Days In Nuclear Bunker, Win $500,000
32:21
MrBeast
Рет қаралды 153 МЛН
ОБЯЗАТЕЛЬНО СОВЕРШАЙТЕ ДОБРО!❤❤❤
00:45
Look at two different videos 😁 @karina-kola
00:11
Andrey Grechka
Рет қаралды 12 МЛН
👨‍🔧📐
00:43
Kan Andrey
Рет қаралды 9 МЛН
Flat design is OVER. What's next?
8:01
Malewicz
Рет қаралды 195 М.
How I Coded An Entire Website Using ChatGPT
18:22
Nick White
Рет қаралды 1,9 МЛН
world's shortest Figma course
6:54
Juxtopposed
Рет қаралды 280 М.
AI11: Build a 3D Animated Website with Dora, Figma, & Blender
11:59
Responsive Image Slider with HTML CSS and JavaScript
16:11
iron coding
Рет қаралды 2,3 М.
Unbelievable AI Tool Converts Figma to Code🔥
17:46
Tech With Tim
Рет қаралды 289 М.
AI15: Create 3D Websites with Dora AI & GPT-4o
6:34
CJ Gammon
Рет қаралды 4,7 М.
I tried every website builder. This is the BEST
19:31
Steve Builds Websites
Рет қаралды 68 М.
The Easy Way to Design Top Tier Websites
11:54
Sajid
Рет қаралды 300 М.
Survive 100 Days In Nuclear Bunker, Win $500,000
32:21
MrBeast
Рет қаралды 153 МЛН