Using 7 AI Tools to Design a Website... (Relume AI, MidJourney, ChatGPT & More)

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 184

  • @CalerEdwards
    @CalerEdwards  Год назад +41

    Thanks for watching the video :D
    If you want more AI design related videos let me know.

    • @mahmudshamim3537
      @mahmudshamim3537 Год назад

      I need a full video tutorial..... please 🥺🥺

    • @nartz5361
      @nartz5361 Год назад

      instantly subscribed. please make for UI games

    • @anasbrouk7153
      @anasbrouk7153 Год назад

      yeah , thanks bro for the video very interesting workflow, can't wait to see somthing else !

    • @docsdocs8955
      @docsdocs8955 Год назад

      great! create tutorials for durableai and mobirise ai builders, thanks

    • @ethannky
      @ethannky Год назад

      Its really a great content。。。yea please do more videos like this…this particular videos will help alot of new startups to start the business with minimal cost

  • @jswanson859
    @jswanson859 Год назад +89

    I've been working on a case study just like this. I love how Relume can get you 70% finished so quickly. The details and refinement done by a designer is where the magic can really happy. All of these tools can get a design into a place where it's ready to show to a client a lot quicker. I think it's an interesting time and look forward to see where it all goes. Thanks for sharing another great video.

    • @waveril5167
      @waveril5167 10 месяцев назад

      Yeah, It will only take your job away, so looking forward to it....

    • @saisathya6274
      @saisathya6274 7 месяцев назад

      @@waveril5167 rofl, that was a brutal and straight on the face comment, but jokes apart mate even I had the same thought for quite some time I felt all the experienced designers in social media platforms are clearly sold to Open AI or Google or by any AI company, but recently I realized that AI can helps us speed up the concept to design stage in a significant way, but the need for a genuinely good designer will exist or at least for the next few years for sure.
      Yes even I fear the pace at which AI is getting better and better every day there won't be a future even for a good designer and there might be days when we may perish but just think of this one thing, AI is here to stay and the only way to survive is to learn to use AI to your benefit. That is all that a person can do right now in my opinion.

  • @Kram3r
    @Kram3r Год назад +62

    Great use of balance between AI and your decision making based on your experience

  • @catalinim4227
    @catalinim4227 9 месяцев назад +10

    I was stuck on where to start with a website layout/design, but this gives me a great starting point. thank you!

  • @afnanahmad4266
    @afnanahmad4266 Год назад +6

    i loved that color palette part so smooth.

  • @ledihildawan6756
    @ledihildawan6756 Год назад +7

    1. Relume
    2. Relume Ipsum
    3. Midjourney
    4. Vectorizer
    5. ChatGPT
    6. Photoshop AI

  • @DanieleManca1983
    @DanieleManca1983 Год назад +7

    This is one of the best videos on AI platforms I've watched lately, as a web developer looking to constantly improve productivity, this video is an absolute gem.

    • @nkovalcin
      @nkovalcin 9 месяцев назад

      I thought so too, now 3 days and I haven't finished 1 wireframe

    • @41SuPa
      @41SuPa 9 месяцев назад

      @@nkovalcin because you have to get used to figma ?

    • @gtarptv_
      @gtarptv_ 8 месяцев назад

      What have you settled on to stay productive?

    • @gtarptv_
      @gtarptv_ 8 месяцев назад

      What have you settled on for your productivity

  • @uncleI3
    @uncleI3 9 месяцев назад +1

    Would LOVE a part two where you take it from design to building the actual site. Using the same AI premise though.

  • @stuart2151
    @stuart2151 Год назад +22

    I think this is a great way for creating templates or inspiration for future clients. They might have a particular product or service that fits similarly to any of the ‘inspiration’ you’ve created. Obviously some adaptation required, but in the long run could be helpful.

  • @henrythomas7112
    @henrythomas7112 8 месяцев назад +1

    I extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.

  • @mishka0
    @mishka0 Год назад +10

    Nice tools but few of us could do that on their own as there's one critical ingridient usually missing: Personal long-year experience in website design :) The best tools cannot shine in a novice's hand.

  • @hglbrg
    @hglbrg Год назад +3

    3:55 to 4:22 is the thing AI cannot replicate or generate yet. The human expertise and touch.

  • @md.abdullahalmuid4952
    @md.abdullahalmuid4952 Год назад

    I just love the thumbnail. It says everything.

  • @curiouskidsco
    @curiouskidsco 6 дней назад

    This was such a great 101 in web design for beginner designers. Curious for myself, how did you screen record all of these while editing @caler?

  • @thedac85
    @thedac85 11 месяцев назад +1

    Loved this content style, practical application of AI - super useful, thank you!

  • @lorenzobrandimarte1427
    @lorenzobrandimarte1427 9 месяцев назад

    This is interesting and "scaring" at the same time. Thank you for the video.

  • @thebankchanneltv
    @thebankchanneltv 9 месяцев назад

    Great video thanks Caler

  • @Kimoartcave
    @Kimoartcave Год назад +2

    I still blieve there are not many AI tools that really ease the UI design process. indeed that day will come soon. thanks for sharing this walkthrough, very insightful ♥♥

  • @MeetDaveG
    @MeetDaveG 10 месяцев назад

    This is a killer tutorial.

  • @sephtchoko
    @sephtchoko 22 дня назад

    Thank you so much the video. I am testing either with webflow or Figma and i am struggling to copy the color from aicolor to webflow or Figma. Please could you help ?

  • @genesiswebagentur4324
    @genesiswebagentur4324 9 месяцев назад

    Great workflow!

  • @impulsategroup
    @impulsategroup Год назад +2

    after designing the figma page, can yo export to webflow using figma to webflow with a simple click? or you have to develop everything again in webflow guiding with your figma design?

  • @vishalchopdepatil9988
    @vishalchopdepatil9988 Год назад +1

    this one was really awesome video and so informative also... love your videos...

  • @whoismattkohn
    @whoismattkohn Год назад +1

    This is fire ! We are creating full stack marketing campaigns with a similar workflow and excited to integrate websites into the mix with this. Thank u !

    • @catalin938
      @catalin938 Год назад

      Can you tell me what exactly You used for the campaigns workflow ?

  • @clemenskotoku
    @clemenskotoku 7 месяцев назад

    Heavily AI involved but the result is good, even better than some of the less AI involved because you still applied your great design skills lol.

  • @vishalchouhan07
    @vishalchouhan07 9 месяцев назад +1

    did you use locofy plugin to convert this to code from figma?

  • @esme882
    @esme882 Год назад

    ThankU so much bro, very much up-to-date and helpful, but more importantly so clear and easily explained. Wish U very much success

  • @tiepolo71
    @tiepolo71 Год назад

    Fanastic video. I would love to see you use these to make it responsive as well.

  • @trepke2849
    @trepke2849 11 месяцев назад +2

    How did you apply the color scheme that quicky? It's not shown on the video, and I'm a definition of noob

  • @grapastudio8918
    @grapastudio8918 Год назад +59

    It's pitty that you cant export html + css. It would be the best starting point for most web designers. I would change it for figma.

    • @CMZIEBARTH
      @CMZIEBARTH Год назад +1

      I was surprised when I found out Relume didn't do that.

    • @samanen
      @samanen Год назад +3

      Wouldnt Framer plugin do that for u? Not sure but thats what I think it is for.
      Also some ChatGPT plugin might help

    •  Год назад +6

      @@samanen yeah I tried the several of the tools, but the quality of the code is mediocore and it takes more time to fix that code than to write a proper code with my own css framework.

    • @nickwoodward819
      @nickwoodward819 Год назад +1

      @ standard ai

    • @moer5432
      @moer5432 Год назад

      You need javascript

  • @navya-s3v
    @navya-s3v 2 месяца назад

    AI tools may greatly improve website design, from concept generation and graphic creation to content delivery and SEO optimization.

  • @yasinukoppal
    @yasinukoppal 2 месяца назад

    Could you please suggest any free platforms for budget-conscious or beginner designers?

  • @thejomviking
    @thejomviking Год назад +8

    Nice concept eddy,
    i always have a problem with mobile concepts, every time my team and i are about to build a webpage for the company, the director always asks us to start by designing for mobile which is a painful thought process because theres not much space around to work with. with your concept i would really love to see a mobile instance for it.

    • @17thMidnight
      @17thMidnight Год назад +3

      I also have the same problem, I do not like to start with mobile version because its small, everything is stacked vertically and I can not be creative at all. On the other hand, when designing the web, i have full page width to explore different layouts and be creative with elements.

    • @CalerEdwards
      @CalerEdwards  Год назад +3

      I'll see if I cant come up with a video around this :D

    • @CalerEdwards
      @CalerEdwards  Год назад +5

      I personally don't like designing mobile first either.

    • @kevermac1660
      @kevermac1660 7 дней назад +1

      Design desktop first, then work your way down breakpoints optimizing for each one at a time and after you've worked your way down a few breakpoints mobile becomes easy to optimize for :)

  • @robertf57
    @robertf57 8 месяцев назад

    At 3:12 in you said you import the color palette into Figma. How exactly did you do that? Did you just do a screen capture? I couldn't right-click either the large image or small palette image and and copy or save them, and clicking the export button only displays the CSS colors. Thanks.

    • @CalerEdwards
      @CalerEdwards  8 месяцев назад +1

      I usually just grab a screenshot and paste that in Figma and grab them from the image.

    • @robertf57
      @robertf57 8 месяцев назад

      @@CalerEdwards Thank you. That's what I thought.

  • @kreativethinker5987
    @kreativethinker5987 10 месяцев назад

    Wow. Just wow. Thanks! This video gave me so much inspiration to work with. I was especially wowed by Relume, The only downside is that is awfully expensive :)

  • @RicardoEsteves
    @RicardoEsteves 6 месяцев назад

    I wish you could've also pointed out how much you need to invest in paid subscriptions for each of these AI tools, in order to be able to utilize all the features used in this video.

  • @dalekim
    @dalekim Год назад

    this is So cool Love this video!!! learned so much

  • @masterstubborn9947
    @masterstubborn9947 9 месяцев назад

    Wow super and minimalist design. How can sell for this like services ?

  • @sirvladislav
    @sirvladislav 5 месяцев назад

    Creating design for landings is one thing but what is the best flow to design more complex stuff like dashboards, apps and other nonlanding things? Do you think these tools that you mentioned are capable in those tasks too?

    • @CalerEdwards
      @CalerEdwards  5 месяцев назад

      From my experience with AI so far it’s good for concepts and testing ideas and the fact that the tech itself is cool. But for a dashboard I wouldn’t use any ai at the moment as it would be faster and more efficient so just make it myself. AI has a long way to go, hope that answers your question.

  • @saadchadu
    @saadchadu Год назад +1

    What a tutorial ♥️

  • @wge621
    @wge621 9 месяцев назад

    The musho plugin in figma does all of this in one click.

  • @jgojiz
    @jgojiz Год назад

    That was fantastic

  • @tazkiavoice
    @tazkiavoice 9 месяцев назад

    Just WoW!

  • @jtisaks8569
    @jtisaks8569 Год назад +1

    Love it 👏

  • @VictoriaSeekoo
    @VictoriaSeekoo 11 месяцев назад

    I was really inspired by your video! It reminded me of another AI-based design tool I came across, known as Stylar. This web tool has a feel similar to Photoshop, offering features like interior design styles, and it's more user-friendly. However, it's still quite basic and seems to be in a beta phase.

  • @charles120001
    @charles120001 8 месяцев назад

    You used a mood board, did it influence the Relume generated wireframe and design? Also, at the end of the video you listed the tools you used but you did not list Figma. Does this mean you don't need to use Figma?

  • @IreneDv1
    @IreneDv1 9 месяцев назад +1

    Are you gonna make one about mobirise AI? Still in development, but it's gonna be impressive, I think.

  • @thegreyemperor
    @thegreyemperor 7 месяцев назад +3

    I literally subscribed as soon as you said "sent it to the shadow realm"

  • @twangerrrrrr
    @twangerrrrrr Год назад +1

    How much of this can you get done with the free version of relume?

  • @AnandhuAjiGopinath
    @AnandhuAjiGopinath 10 месяцев назад

    great share ❤

  • @ramydmk
    @ramydmk Год назад

    please can you tell me how you screen record your screen in tutorials?

  • @uifry
    @uifry 7 месяцев назад

    Awesome share :)

  • @ahmedkhabar
    @ahmedkhabar 3 месяца назад

    Can you share the result Figma Url, I'm Full stack dev and I want to developer the landing page.

  • @ubox.design
    @ubox.design 5 месяцев назад

    How use fill color for layout design? I don't see that in the video

    • @CalerEdwards
      @CalerEdwards  5 месяцев назад

      This video was more of a showcase of ai rather than a tutorial so I skipped over that step; sorry.

  • @yossimolcho841
    @yossimolcho841 Год назад +1

    Great video! what is the font being used here?:)

  • @Juandafullhd
    @Juandafullhd 10 месяцев назад

    El mejor !!!! muchas gracias

  • @l-dss8093
    @l-dss8093 11 месяцев назад

    thats absolutely crazy tbh.

  • @machinized
    @machinized 10 месяцев назад

    Thx man

  • @eduardovalentin7504
    @eduardovalentin7504 Год назад +2

    Great video!
    I hope you're squishing this video into a Tiktok, you deserve much more exposure than you're currently getting. Keep doing great stuff :D

    • @CalerEdwards
      @CalerEdwards  Год назад +1

      Thank you, I haven't posted on Tiktok yet but I might start :D

  • @relentlessslog
    @relentlessslog Год назад +1

    Is this an actual website I can view somewhere? I just want to see how responsive it is, cross-browser check and do a pagespeed test. It's pretty crazy how fast you can whip something up that looks this nice. I've only incorporated ChatGPT into my workflow but I'll have to check some of these other tools.

  • @metternich05
    @metternich05 7 месяцев назад

    I don't see this making real designers obsolete. As usual in this early stage of the AI-revolution, this workflow is mostly handy for people who can't and won't pay for professional design and development services, and affects mostly small businesses. Seasoned UX designers and frontend developers, Wordpress experts and the like, have no reason right now to worry about being replaced by a smartass AI. Although they need to embrace new opportunities AI offers.

  • @rejuantalukder8763
    @rejuantalukder8763 6 месяцев назад

    Can I get the design file you have made it on the video?

  • @gregornator
    @gregornator Год назад

    nice! how long did this whole design take you?

  • @vabatta
    @vabatta Год назад +1

    I’m curious, what’s the follow up process to make that design into an actual website?

  • @andrewguarino
    @andrewguarino Год назад

    great video

  • @khushivishwakarma9981
    @khushivishwakarma9981 6 месяцев назад

    How to export color to figma wireframe I am stuck there I cant use the color in my design

    • @CalerEdwards
      @CalerEdwards  5 месяцев назад

      You can screenshot the color palette and drag that into Figma and use the color picker do grab the colors from the image, hope that helps

  • @shamilaliev2119
    @shamilaliev2119 Год назад

    Amazing

  • @Dr.mohamed_
    @Dr.mohamed_ Год назад +1

    Could you make a vedio show us the real web design steps for real project?

  • @aliboudross
    @aliboudross Год назад

    Awsome thx so much

  • @kajananstudios
    @kajananstudios 5 месяцев назад

    The most difficult part is realizing it in coding site or export it into a real site. Is there a tutorial about that?

  • @oluizfabio
    @oluizfabio 9 месяцев назад

    what would you recommend to transform this Figma into an actual site?

  • @mostafaazzouz591
    @mostafaazzouz591 10 месяцев назад

    What’s a beautiful keep going i like it

  • @DavideTrezzi
    @DavideTrezzi 11 месяцев назад

    Same video but for mobile app?

  • @UmarHamza
    @UmarHamza Год назад

    Awesome

  • @xmaxfuture
    @xmaxfuture Год назад

    amazing

  • @ytRap007
    @ytRap007 Год назад

    amazing

  • @yulose9
    @yulose9 Год назад

    will you create a video for the new ai tools announced by Adobe?

  • @angelo90746
    @angelo90746 Год назад

    Nice! Do you have a video showing how to use midjourney for product photos and how to use photoshop beta to help with that like adding the shadows to the bottles and making the real products fit in the scenes created from midjourney?

    • @CalerEdwards
      @CalerEdwards  Год назад

      not currently but I might make videos on this in the future :D

  • @samidoesarts5296
    @samidoesarts5296 Год назад

    how does prompt work? how to do that in discord?

  • @kareemasakari
    @kareemasakari 11 месяцев назад

    🔥

  • @anasbrouk7153
    @anasbrouk7153 Год назад

    why you didnt use Midjourney to modify photo Instead of photoshop

  • @alfredosmith6107
    @alfredosmith6107 Год назад

    The goat

  • @Ryansanvy
    @Ryansanvy 9 месяцев назад

    Can i export to Shopify?

    • @TheLMMish
      @TheLMMish 5 месяцев назад

      only to Spotify, sorry :(

  • @YerbolAssylhanov
    @YerbolAssylhanov 8 месяцев назад

    cool video)

  • @필름앤슬로우
    @필름앤슬로우 Год назад

    From what I can see, that method causes problems on mobile. The custom design of the header, the illustration of the fallen leaves in Pygma, is difficult to make responsive. There is a significant learning curve to actually uploading them.

  • @aleenaakhtar8385
    @aleenaakhtar8385 Год назад

    Can you make a video about AI Tools to Design a mobile app

  • @danielfritz9471
    @danielfritz9471 11 месяцев назад

    Were you running late to a rendezvous or something?. Very good content but what's the rush for.

  • @vovet777
    @vovet777 Год назад

    🏆

  • @ThierryC-te3rx
    @ThierryC-te3rx Год назад

    How long in total ?

    • @CalerEdwards
      @CalerEdwards  Год назад

      Not sure really sure sorry, the AI took a while to generate the assets I needed. So to long tho lol

    • @ThierryC-te3rx
      @ThierryC-te3rx Год назад

      @@CalerEdwards Thanks for your reply.
      Will you estimate the time needed in days days or hours ?

  • @barrard
    @barrard Год назад +1

    where's the mobile version?
    -developer

  • @deejohn2242
    @deejohn2242 23 дня назад

    Hey can you update for 2024? I believe after 1 year everything changed fast

  • @economicblast
    @economicblast 10 месяцев назад

    there goes my job lmaoo

  • @Yothlan
    @Yothlan 9 месяцев назад +1

    Does anyone know of a tool like Relume but more aimed at application design? Relume seems efficient for marketing websites, but I'm looking for something that can assist in the design of an application - which is admittedly more complex.

  • @grav3ns3n
    @grav3ns3n Год назад

    Duuudeee :D You are fcking awesome!

  • @jreamer0
    @jreamer0 9 месяцев назад

    splineeeeeeee you need spline.

  • @jayql
    @jayql 9 месяцев назад

    My biggest takeaway is you can now copy and paste images from a website directly to Figma?!?! Wtf

  • @nickwoodward819
    @nickwoodward819 Год назад +1

    anyone got a relume alternative? it's crap

  • @AlexFromPhoenix
    @AlexFromPhoenix Год назад +3

    Will AI render UX Designers useless..?

    • @aminansar5294
      @aminansar5294 Год назад +1

      nope but yes after a long long time

    • @CalerEdwards
      @CalerEdwards  Год назад +1

      Probably not in my life time lol. I think we will guide it more and more to do repetitive tasks like wireframing but will still need designers to make ui/ux decisions and adjust what the AI creates for us.

    • @CalerEdwards
      @CalerEdwards  Год назад

      Agreed, we would need a huge leap in technology for AI to solely create designs with good UI & UX.

    • @chucklefuck
      @chucklefuck Год назад +1

      ​@@CalerEdwardsNah, one day someone will find a way to feed the source codes of a bunch of apps with world-class UI/UX into an AI, give it thirty seconds to analyze common qualities, and then release a UI/UX AI that generates websites and apps with impeccable design based on a text prompt. I give it two years

    • @kakoz24
      @kakoz24 Год назад

      ​@@chucklefuckit would still be needed to individualize and make corrections tho😅 I guess the progress in technologies gonna lead to making the process of creating complicated web sites even more possible for 1 person. The tool becomes effective but we will still need a specialists

  • @IanTrolinger
    @IanTrolinger Год назад

    holy shit

  • @Sagarclips
    @Sagarclips 5 месяцев назад