AI Tools for UX UI Designers and Web Designers - AI Design Tools | Expert Azi | Skillshare
Search

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

AI Tools for UX UI Designers and Web Designers - AI Design Tools

teacher avatar Expert Azi

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction and what you will learn

      1:09

    • 2.

      Basic Prompt engineering 4k

      3:22

    • 3.

      AI Tools for Copywriting, problem solving,

      4:26

    • 4.

      AI Tools for Image Generator Free and Paid

      2:16

    • 5.

      Generating Images from Prompts

      13:27

    • 6.

      AI Tools for Generating Website and Idea

      4:53

    • 7.

      How AI Website Generation Platforms Works

      13:36

    • 8.

      Make High Converting Landing page using AI

      10:42

    • 9.

      How i use AI for designing Website

      5:18

    • 10.

      Assignment, Now its your turn: Homework

      0:28

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

112

Students

--

Projects

About This Class

Are you tired of spending countless hours on design creativity, copywriting, and competitor research? Welcome to “AI Tools for UX/UI Designers & Web Designers” a life-changing course for UX UI designers and Web designers

In this course, you'll learn how to use AI's power to simplify your design process, boost creativity, and increase productivity. Whether you're a beginner starting your UX/UI journey or an experienced designer working on client projects, this course will improve your skills and efficiency

What You'll Learn:

  • Master the basics of prompt engineering for AI tools

  • Utilize AI for copywriting, problem-solving, and decision-making

  • Explore both free and paid AI image-generation tools

  • Generate website ideas and designs using cutting-edge AI platforms

  • Create high-converting landing pages with AI assistance

  • Understand the workings of AI website generation platforms

  • Apply AI in real-world design projects

By the End of This Course, You Will Be Able To:

  • Craft effective prompts to generate high-quality designs and content using AI tools

  • AI copywriting tools for engaging and SEO-optimized content

  • Generate unique images and visual elements using AI tools like Midjourney

  • How to use Uizard, Musho ai, visily ai, and more to easily craft prompts that generate stunning designs and content.

  • Conduct efficient competitor research with AI

  • Create high-converting landing pages by integrating AI-generated elements and copy

  • Stay ahead of industry trends by incorporating AI into your UX/UI and web design work

Meet Your Teacher

Teacher Profile Image

Expert Azi

Teacher

Hello, I'm Expert Azi. I have been working in the field of UX/UI design for over 5 years and I specialize in creating great experiences for both web and mobile users. 

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction and what you will learn: Almost 90% new designers, they get confused when they're doing design. It's something like, am I doing right design or doing something wrong. Sometimes they spend hours for just gathering design idea and copywriting, or even competitor analysis and research. But if I tell you, everything is possible to do with AI, Recess to UI design, you can do it all with Help Op AI. But first, I will teach you basic prompt engineering or if you complete beginner, then how you can take Help AI to write prompt, A tools for copywriting, problem solving, and decision ideas. A tools for image generation, step by step video for generating images from Prompt. AI tools for generating website and idea? How AI website generation platform works? High converting landing page with AI. Then tell you my circuit like how I use AI for designing website. This is not finished yet. There is some more. This course is totally for everyone. Whether you are just starting your UXA journey or someone already working on a job or doing client project, everyone. So what are you waiting for? 2. Basic Prompt engineering 4k: We're going to see about basic prompt engineering. But what is Milly the prompt? Prompt, it's something like giving an instruction to AI that what they need to do, or what do you want, Melly. They're going to follow your instruction and give the result. When you're just going to write the thing, this is merely the prompt. If you don't understand, no worries, let's take an example. As here have a two example. One is without a prompt, and one is like with the prompt. Without a prompt, we're just going to talk with AI, we're just going to say, design an Edens website. But what website, do you need? How you want? They will do. There is nothing details. But with the prompt, as you can see, we are telling details that what we exactly expecting as a result or what we merely want. So if you just past the video and if you just read this prompt, then I believe you will understand more. But how can we write a base prom? So it's have many way to write the best prom. So when you just going to write the prom, try to put as much as possible details in the ear or which se expectation you are just going to looking for, tell them on your texting text then they're going to follow this and they're going to give you similar type of result. Or if you're just going to give an example of there, then it's going to be more better. Sometimes what happened, you like to make a same e mail, you're going to copy that and tell them, this is the issue, read it and give me something better. They're going to give you a better thing. That's why I'm telling write temas as possible details in your prompt. But if you don't understand this, fine, I have a solution for you. It's called mainly root framework. Root is something like rule, objective, unique selling point, tone and emotion. When you're just going to write a prompt, probably cover all of this thing. So AI can give you a better result. For example, if you see here this prom, then we are saying to the AI, current compiling and professional concept for Agent CFSA design. Focus on showcasing agency expertise and portfolio will emphasize a modern user friendly interface, including a suggestion for an caching hero section and a brief description of how to structure the main navigation. As you can see, this prompt is totally clear, and what exactly expecting from the prompt, it's totally mentioned. If you see here this breakdown in there, role is tempting like we are telling, hey, I just need an agency website design, objective to develop a professional and effective website design concept that highlight agencies train and engage potential client. A unique selling point, as you can see, we can say about the specific agency. As you can see it's trolley agency and key elements is expertise showcase, pfolio uridiction, like this. Also, you see this precision, precision is like modern and user friendly. Tony is like professional compiling suitable for agency website, and emotion is like confident, innovative and inspired trust in potential clients and showcasing agency capabilities. This is mostly important that with emotion you like to put in a design, even on your text also, or it's going to be your e mail also, or it can be anywhere. It's definitely important just adding the emotions. Other words, people cannot connect that. I hope now you understand about the basic pm engineering, and this is all about 3. AI Tools for Copywriting, problem solving, : Mm. Now we load know about basic problem entering, right? Now, let's talk about a few AI tools for copyrting, problem solving, and decision idea. I believe you're going to love it, so. First is like Gemini. This is really awesome tool. If you like to get a human friendly conversation, this tool is really great. Let's say if you like a website, copywriting, or getting problem, getting confusion, you can just ask Gemini. They're going to help you definitely. Next is like chatting. This is most popular tool ever. Everyone know about it, and if you'd like to learn more about it, this is such a YouTube. We'll get 1,000 of videos about that. But this is work same. But this is mostly used for research thing, or let's say writing professional things. We mostly use Chad DPT. Next is like Cloud AI. This is also a great tool. If you just compare with Chad DPT and Gemini, this is also good. These have some advanced features. Let's say if you like to make a website with coding, they're going to do everything for you. They going to do it, you can see the pre everything you can do with Cloud AI. It's also offer a presentation. If you like to make a presentation, just tell there, they're going to do it. You want to do dt analysis, just tell them, they're going to do it. What happened? When I'm just going to get a problem, same problem, I ask them three of them, then I analyzes myself, which one is providing more great results. That I tell This is for human friendly conversation. This is mainly for doing research, or if you like to learn something. This is great for. This is also for learning something, or sometimes it's not giving better output, but when we're just going to write the same for three of this platform, definitely you will get a great result. What do you expected everything you'll get from there. Next is like perplexity AI or Microsoft copylet. Both are the same, but they have a little bit difference in there. If you see, perplexity is more faster and they're using Open AI and copilot, they are doing the same thing, but it's a little bit slower. Publixity is more better than copilot, because it's taking much time and how we want. It's not working like that. And it's also having some installation thing, if you're not using microsoft thing, you need to install the browser, right? I know this time, I think they're going to solve it. Now we can use it any of the browser, but before you do, But publicity, if you're just going to compare with that, publicity is more better. This two tool we're going to use for searching, when you're getting together a problem, you search it Google, and just calling and checking 100 of articles, just reading there, then you just find it a solution. But Publicity AI just ask it your problem. They're going to summary, they're going to give you a solution definitely with a link, like source link. Like most of these AI tool, Gemini, CGT clot. They cannot search something from Google, but Publix ity, they can search it from the Google. Next, x like point.com. This is also good for coding bots. Now you're thinking, we have a Gemini, C lot of AI tools we have, but we need to start with poem. Poe is something like a bot system. So they're going to tell you specific result. Based on the main problem. Okay. So what happened? When you're just going to start conversing with Gemini or let's say pplexity, or any of this AI tool. You need to tell the brief direction. In point.com, or let's say when you're talking with the body specific bot, they already sent the same direction, which thing they're going to do, S the thing there at the beginning, and they're going to follow the same process every single res. So that's why many people also like about this board. And if you want to earn money from point.com, definitely you should try. The summary is, you must need to try all of this AI tool, every single day, AIS crowing, technology, new technology is coming Saral summaries, try all of this tool by yourself, just go to Google and search all of this tool and just try with the same prompt. Just ask them same point, see the result. Which one is good. But if I tell in a summary, then I recommend you that try all of this tool, just go to Google, search about this tool, create an account there, and try your first prompt and see which one is really working fine. When you're just going to get a problem, try to use all of this tool at the starting, open a few taps and open all of these taps in there. I mean, websites, and just ask the same prompt in there and see which one is providing better result. 4. AI Tools for Image Generator Free and Paid : Now you already know about few AI tools that are really great for copywriting, website copywriting, problem solving, and decision making idea, and Google Sears alternative. Now it's time to learn few AI tools that are good for ema generation, and it's also include free and paid both of them. The first tool is here Mt Journey. This is really awesome tool if you'd like to generate website design or if you like to generate anything, logo design or whatever you just in your mind. You would just like to get in an ema. You can do everything literally and M Johny. But definitely to have a few limitation. Next is like free Peak AI. Last couple of months, I'm only using it, and this is really great. If you're just going to compare with M Journey, this is not like this type up, but free Peak AI. It's good. As a starting if you see about considerable the free thing. This is really good. Next is like AVF fly. So if you're going to compare with free Peak and A Firefly, this kind of be same. AIFFly going to offer some more extra options that don't offer free peak. But both are good because they're free. Next is like Bing Image corer. This is also good IC few months ago and I trained on Facebook, that people are using Bing AI image corder to generate thereafter. So this was really great, and if you like to generate any different images, then definitely you can try that in there. Next is like Leonard D AI. This is also going to be so popular. Many people are just talking about it, and many people just using it. I did not use it before, but we're going to try the next video that how it's going to work. We're going to taste prompt. Next is like Lexica. Previously, I use it for understanding the how My writing prompt to checking people prompt, I was using Lexica it's also generating images. If you want to try, definitely you can try it. Next is like get mg.ai. This is also a great platform, and this is also offering free image generation, so you can definitely try that. 12 SR is try all of this platform, just go to Google and search it and just write a common prompt from AI, just write one of them or use one of them and see which one is giving better result. 5. Generating Images from Prompts: In last video, I show you a lot of AI tools that you can use to generate images. Now we're going to see a practical example like how we can droing images from prompts, and it's going to be a step by step tutorial only for you. Now first try to understand here with this context and why we need the image and which type of images we malnate. So I was designing an Abouta speech and I need an mage that I'm going to use above the four. Only like something like my group of team members. I need these type of images they're smiling, confidence, like this type of image I need, so we need to generate mealy. Now, let's start writing the prompt. So I was thinking something like let's say, we're on a marketing agency website. We need an image for about a speech, for sure and a group of people sitting and standing up together. Camera need one angle picture. Each person need fees happy and confidence. This I write myself, and now let's polish it using AI. So, what I do, I really come here on Gemini, and I just say let's say you're in a prompt engineering expert, read it, and understand it and write for me and a prompt. Okay? So I just type in there. I know it's kind of wrong, but let's see what happened. Which output they're giving. So I just passed my old prompt that I was right. I show you. And now I do together, and let's try the same thing on clout Also the same thing on gibt. Let's see which one is performing more better. So as you can see, they're Mally generating and a prompt, generating a wide angle image for a diverse group of people, both sitting and standing in modern professional setting. The group should appear confident, happy, and genuine smile and positive body language, focus on capturing sense and collaboration and teamwork. Consider using natural and lighting and deep a field highlight a group while burning in the background. Okay. Okay, that's pretty nice, and exactly I want like this. And this is the big prompt that's goding by cloth. A, man. It's really big. But anyway, we're going to try also. And let's go to the Cgbty one, and this is the C chargebt generating it. So yeah. Now we can do analysis together, all of this prom, and we can use step by step one by one, okay? So I think that this looks pretty nice. I want like this. And you can also analyze by yourself, all of this from all of this AI providing. Okay, so I'm going to try with this one, okay. So now let's see about this tool. So first tool is as you can see, it's Mt Johny and then Free P AI. So let's first try with Mt Johny. But unfortunately, I don't have any access of M Johny right now. So if you have any M Johny access, then you can try. So, I think it's working. Okay. Let's try. Oh, okay. We need to join now. Otherwise, we cannot. I mean, we cannot generate it. And right now, we can see images of it with, let's say, prom, as you can see people was generating. So we can see some of this example of prom that people was writing down here, so we can see an example. These results are pretty nice. As you can see, this is pretty nice result that they was making. But anyway, let's go to the next tool. It's a free Peek AI. So first of all, login in your free Peak account, and then you will get to see something like this. And now you need to click on here ema generator option, click on there. Or if you search here free peak.com slash AI, then mag generation generator, then you will get like this. Okay. And now in here, we need to pass our prompt on the lab site, simply just pass it. And then you can do the customization. If you like to change the style, like, which style you'd like to get, you can simply select in here. Then it's about color, which color you like to gate, and which is mainly the camera angle you like to get, lighting, and structure and setting, all of these things you can do from here. So I like to get, let's say y screen. And if you'd like to add negative prompt, then you can do it. So let's click on this create button to generate an image. So now as you can see it's a lot of image that there was suggested. So I personally like this image. This is how I want. This is exactly kind of same. So let's click on an image. And now it's so a few more settings that you can definitely try. It's something like re imaging. If you don't like it, if you think, okay, this is need to be something different or different topic if you want, then you can do it. And's have a retest option, and if you want to make it pi scale, you can also do it. And it's really great. I use it several times, and this is great. Let's try this pi scale. Right now, this is the image, and some of the places not clear. Some of them are not look scared, right? So What you can do, we can simply, as you can see this prompt in there, there was made by them automatically. And now let's click on here this pisce barn, then you will get to see an magic. And now, if you see it, the reason. I mean, see this comparison, then you get to see, this is right now active, and this is before, and this is after, how clean it is, how clean, you can see how clean it is. And it's really awesome. I like a lot Free Pak AI because if you'd like to get images for your website, then this is the great platform. You can definitely try that. Now let's go to the next platform. It's mainly HdB Firefly. This is also a great tool. I was used it before, and it was good and foto shop, and also since it's have a free version of Firefly, so definitely you can try. Okay. Now, let's open the website. It's taking a little bit time. So let's click on here. Create with text to image like this one. Just click on this button. Let's see. So as you can see now it's done, and as you can see we see a lot of images there. So we need to just piece here our prompt that we like to get. So this is the prompt. And now let's simply click on this generate button, and then they're going to take a little bit time and also on the left side you'll get I'll see a lot of settings there. As you can see five f three is sn selected, and which of images you like to get. So I'd like to get a white screen images. Okay. Okay. This is something art, and this is the images. So this is photo. Okay. I want with images. Here, you can see the reference image, you can upload. Here, you can have some more settings, but overall, I'm not satisfied with what they make. I don't really like it, what they make the output. I don't like it. Okay. Now let's go to the next platform. It's merely called Playground AI. I also tried also. And this is good. Now let's try again together. So in playground, I already cried my account, and I'm just lugging in the air. So now in here, I simply going to past prompt that I was passing every single platform. And now let's create, simply create in there. And if you see this right side, have a lot of settings that whichever images want. So I want like the te images, and this is going to be fast and high quality. So it's in to be pro plow version. And we can aplod the images for reference, and how many images I want, I can simply select there. This is they was make by themselves. I don't really like them, so let's make them four of them. This is four. So this is the W M, and I don't like it. I think that if I try the before one, it was like this prompt. I think it's going to work better because at the beginning when I was try my old prompt that I was tried by myself, it looks good, but this is not looks good okay. Alright. So now let's try again, so I'm going to create again. Let's see, about the output. It's going to taking time. So in the meantime, we can go to the next tool. It's merely Bing AI generator. Many people are just going to use it, so we can definitely try that also. So you can simply search on Google Microsoft Image Generator AI. Then you get a lot of website in there. So you can simply open any of those, so I'm going to open any of this. So as you can see, now it's open the same thing. And now in here, we need to past our prompt and let's click on Create button, then you will get to see a few version of the images. So now, I need to log in my account. So I don't really want to log in on my Microsoft account. To see, but you can definitely try that by yourself. So I try it and it's good. So this is as you can see. This also looks good. Right now, when I try with this five, I mean this 41. Now it's good. This is perfect, I think, how I exactly want. This is good. This is I person like it. This is awesome. Yeah. This is awesome. Okay, as you can see, this is also good. I mean, this playground. This is also good. Okay, with the free version. Definitely you can try it. Alright. So now let's go to the next tool. It's Melly Leon the AI. Maybe later. All right. So now in here after logging, you get to see something like this. And now let's click on create image coration. And now let's cross it. Yeah, I just cross finish. And let's simply pass the prompt, and let's simply click on generate button. And before I was try this, the same phone prompt and I get like this typ up images. And I try it again. And let's see, what's happening. Okay. Okay, now it's taking time. It's fine. Now let's go to the next two, it's merely Lexica. This is interesting. What I'm saying interesting because if you see carefully, that when you're just going to search it, you can literally search the images. That people already write the prom, they use the images. You can definitely try that from there. Also, if you like to generate an image, then you can do it. So when you copy pass this prom, as you can see, I get a lot of images that was already generated by people. And if you like to use it or like to make them more better, definitely, you can say this. And also if you like to learn prompt engineering for the images, then you can definitely try this. You can definitely read this prompt, definitely. I think it's a really great option. You can definitely try that. Because I personally like this platform because I see people I can see a lot of prompt there, how people are just doing prompt, how the image is generating. So for the getting idea, this is a great platform, for getting idea. So this is really awesome. You can definitely try this platform. As if you generate it, then you can simply click on this generated button. You can describe the images. If you have any negative plan, then you can do it. For the starting, if you like to generate the images, then you need to subscribe it, then you can generate images and otherwise, you need to search it. I think the search option is really good. If you like to get the images, it's kind of good because they have a lot of variation there. Alright. So now, let's go back to the old platform. Is Leaner the AI. This is Leo the AID. So I don't really not fan of this Lo the AI I think, because this is not generating good. So now, let's try with the last one. It's called IMG g.ai. Let's see. So this is something. Okay. Let's see the spelling. It's something like G IMD. Okay. This is not. So let's try get IMG. Okay, so this is the platform that we are going to try right now. Let's curate an account. So I'll already log in in my account and here you can see something like this. And now let's click on here this gener image, this pattern. So let's click on this generad image. Now you can simply pass it like he prompt in the ear. And now it's also have a few settings that you can definitely try. Okay, let's simply change this image portion. I like to get something like this, and it's going to be this. Let's generate for images. Let's see how manly they work. Okay. So now let's simply cross it. And as it's a taking a little bit time for generating images. Okay? Let's wait. And also If you see here this top button, then, as you can see, we can generate every single month, 100 images, I think. Yeah, every single month, 100 images. Okay, so they already start generating. This looks pretty nice before I try with the different prompt. And this was the output. This was realistic. I like it. Like, how it was. And all of these images looks pretty fine. I mean, this is also pretty nice. If you see that, this looks pretty nice. This is also taking much time. But if you see the result of this, then it's good. A lot of people India. Group people. It's a lot of people if you see in there. This is pretty nice. So overall, if I tell you with the summary of all of this AI tool tool, you can definitely try. Fast is like prep AI. This is a good tool. If you like to get human images, then necess really good. Then playground AI. This is also Los good, if you like to get human images, and Lexia is good platform, and get IMG. This is also Los good. Like four of these platforms really works fine. Also you lets have a few more things. Like if you have a adivity subscription, if you're using pro version, then it can definitely try their image generation tool. Our Gemini also have an image generation feature. So this platform also have the image generation feature. We can definitely try that. If you have this access, then definitely you can try that. So yeah, this is all about the video. So I hope you're going to enjoy it dialog. And the next video, we're going to see a few more AI tools. It's going to be mainly for designing website EUI. 6. AI Tools for Generating Website and Idea: Previous video, I show you that how we can write prompt, how we can polish the prompt using AI. Also, we use the same prompt, and we try a multiple website and generating different different images, and we also do comparison. Now, in this video, we're going to show you a few more AI tools for generating website and IDA. The first tool is here is Widget. This is really great platform, if you'd like to make your website or app EI within a minute or with a second. Also, it's a prompt feature option. You can just ask like AI to do, that's change the color, change the text, replace it, all of the things you can do using AI. It's also some template option like library type of option. If you'd like to get any specific thing, let's say if you like a header or footer or a specific web pages, then you can definitely do this using Wiger. Next is like Mucho AI. This is a great plug in for FICMA. It's me Figma plug in, you can say, and you can me get an idea. You can just simply type the prompt and you will get an idea or specific section based on the prompt, even they can make your website also. I mean UI and FICMA. Next is like I. This is also a great platform. It's software like Figma, and they're offering AI options, and I tried it a little bit and also see videos on YouTube. I found out that if you have, let's say you take a screen in there on a frame and there and if let's say, I just need a header, simply have a header, and then you've got a bunch of header in there, simply drag and drop, then your website will be ready, your header will be ready within a second. This is also a great tool if you have a time, then you can definitely try that. Next is like room AI, om AI. This is really great. I personally like it. Why I like it, let me tell you. When you're just going to start a project, every single time, we need to make this side pap. We need to make this layout like which section, how many section we going to do? Every single section, what going to do, all of this thing we need to write. But in this platform, you can simply tell one prompt, then they're going to do for everything for you. Not like that. They step by step, they're going to make it. Also, every single page, they're going to make step by step. Also, if you click on this wireframe, they're going to make you wireframe also within a second. And if you don't like the wireframe, if you don't like the section, within a second, you can simply change the wireframe, and they just give it the option. And it's also a great option that you can simply export the file into FICMA, or if you like to export in Webflow or Framer, I'm not sure about Framer, but you can definitely go with FIMa and Webflow. Next is like is AI. This is a great platform and kind of software like Figma, kind of similar type of if you see on there. And they have a bunch of AI options, like if you like to get a screen hot to you, like Images, then you get it, simply drag and drop the screenshot. Then after this, you can do the customization. If you have any skitch in the ear, you can make the visual presentation. I mean, visual things, simply drag and drop, and then you can do. And it's same thing off widget, the same thing offer widget if you'd like to try. I recommend you try it as it is trying, it's kind of free, so definitely try it. And if you like, then you can keep going. Next is like me Jonny. This is a great tool if you like to get inspiration from design. What happened when we're just going to create a design, we just go a pinterest, a dribble, beans like this platform for joining idea. But in M Johnny, it's easy prompt whatever you want, and they're going to make a visual for you. And then you can use the thing to make your website EI or API, whatever you want, you can make it on FICma. They're not providing any kind of a Figma file or Webflow file or Framer file, but they're mainly providing PG, and you need to merely customize it in FICMA. Since in Market have a lot of tools right now, let's say, it can be Vs or Wig this platform already here. So you can pick the PG and you can go to this website. I mean, this software and just pi the here, and they're going to do your VSL also. This is a great option. If you have a subscription, I highly recommend you, try it. Next is like Framer Webflow and hosting your website Biller. They are all kind of same, and I try with Framer. I'm just typing my prompt and they just make my website. And hosting your website builder is kind of same. Webflow is kind of same. So they're not doing high quality work, but as the starting, it's a good enough to go ahead. If you're a beginner, though, it's a great starting. But I recommend you try all of this platform. I like framer is free. Webflow is kind of free. I'm not sure about hosting, but if it's free, then definitely, I will recommend you try it, and I hope you're gonna love. 7. How AI Website Generation Platforms Works : Video, I'll show you a lot of AI tools for joining website and idea. Now you and me together, we're going to explore all of this tool, step by step. Let's go. The first tool is like Widger. At the beginning, we talk about Wiger, and after logging, after creating an account, you'll get to see something like this. If I'm going to see here that it's start from Blank project, Jared with Auto Wier auto designer, start from screenshot and from Template. All of the features there. Is also have some brand option. We don't really need that. I'm super curious about joining auto designer, so let's click on there, and then as you can see, we can select here the option, which one we need. So let's say, I like to make a dektop. Now let's say try an example, landing page for business that provides supply chain services. Okay, that's fine. Let's click on a continue batern. And then they're saying about what do you want, okay? I want the prompt. Okay. Now we can try here on a prompt in there, like purple color with soft chili Vb. I don't the insurance company. I don't need that. So let's try serious and classic, Cybo techy, yellow, like a banana, like pupple. That's fine. Okay, Green and Darko, I like this. And now let's click on Gard My project is better. Okay. So as you can see, it's going to take a little bit time for generating it. And also, it's showing like D you know when describing a project style, you can ask auto designer to be inspired, Auto designer can wearing a concert, no matter specific. Okay. That's pretty nice. But don't think that it's going to do something like you're going to put a huge big prompt, and they're going to analyze it and make your website. So now let's wait in here. I think it's need a little bit more time. So in the meantime, we can go to the next platform. Okay. So this is mainly about a musho.ai. This is really great. But unfortunately, they don't have a free tL option if they go to this pricing and Then you're going to see they have also multi plan. It's only $15 per month. That's fine. If you see here this, then some other people already do it. If you see all of this creation, just create view creation, the shocks, then it will get all of this. People going to use this prompt for joining this website. This looks fine. If you see definitely it's good, but definitely it's also needed a human touch. It's definitely need a human tie for making this design more better. So yeah, this is all about the shocks. So if you want to spain $15 per month, then I recommend you try this plug in and let us know that how it is. Okay. Now, let's go to the next tool. It's merely about Codi. This is also a great platform. Okay. And it's kind of similar to FIMA kind of similar. As you can see it team option, and if you want to create a new file, then you can do. Also if you to import the file from FIMA XT. Or kg from any, you can definitely do that from there. So as you can see, you can see here a few of them features. Let's automatic get style guide, create Wizard and like Mag icon, the AI image enhancer, a few tools and design auditor. That's really great, right? Okay. So let's go with Create Wizard. So you can take a little bit time. Yeah. It's kind of same to you Figma, but not exactly the same, but kind of we can say similar type of thing. All right. So now, it's have a option in there. This is the widget option, so you can simply try that. Okay. So let's simply select it. It's kind of work same like if I go here anywhere, and if I press V, it's work same. Okay. So now it's kind of lock. So let's go with playground, so unlock it, so click racks button. Okay. Here have an option for unlock. Okay. So this is lock. Okay. Right now it's unlocked, so let's click on there. Let's go here like this Wig one, this brush one. Now, how you want you can do. This is the M for the C write. All right. As you can see, when I just going to click on there, and let's say I like to do something and here inside of it. I can simply select like this way and as you can see what you want, then it can simply press on there. Now we can simply write what you want, and as you can see it's suggesting a lot of things. You can simply place it down here. If you'd like to place this one or this one, this one. Based on the size, you can simply do it. Let's say I like to get it a header, so I'm just going to search header. Then they're going to give me a lot of headers in there, so I can simply select in there. As you can say based on my width, they're suggesting. This is really great. This is mainly for the icon if you'd like to get any icon there, so you can definitely do trod Tody icon. You can do it. It's similar. If you just open it after opening it, it will get a lot of things like this. You can spend a little bit time and read it. I believe it will get a lot of information about Cody. I think it's steel loading. I'm not sure why. I think it's my Internet issue. Let's go to the next one. It's merely start from the screenshot. It's have an option for if you're just going to At the screenshot, then after this, you can definitely customize it. As you can see, they're showing about a few examples. As you can see you're showing examples, you can definitely do it. Let's select this one, select it, let's say import it. It's taking a little bit time. It's also a few more tools. As you can see on the left side of magic. It's have a few more. All right. As you can see, we get it. And now we can definitely do the customization in here. So this is really great option, and it's also have a few more tools, then you can definitely try it. If you go with this next one and start from template, then you can simply search a template. Let's say I like to go with Agency website. As you can see, when it search agency, this is a marketing agency website. Simply I can view it. If I like it, then I can go ahead. But this is mainly for pro version. If you like to go, then it's mainly for the pro version. This is not free. But if you like it, then can definitely access if you have a pro option. This is different one. This is also pro. This is have something better option. And if I go back, then as you can see have a few more things that are free. So the free one, you can definitely access it. But the paid one, you need to upgrade the account. I try the different prompt in here again, and it was something like I tell him to design one page only with the five section, and he does exactly the same as it is, but I don't really satisfied with the output. This is pretty basic. And as is starting, if you don't have any idea about website, then you might think, this is great. But since all are designers, you can just by yourself that how the design is. But this is good as a starting. They just save you time. Now we can do start customizing and make it more better so that you don't need to do from the beginning. This is a really good option. But if you look at the quality, this is not so good, but as a sorting, it's fine. And it's also a great option like if you want to access the template, then I think you don't need to make or about this. You can simply type here what you want and then you will get. Okay. And also, it's have a 2.0. You can simply say here what you want and it's have a lot of options. You can select and tell the AI what you want, and they're going to do everything for you. This is really interesting. And I also makes some few like interactive prototype. That's also great. And now, if you look at the top, then it's have an option called wireframe. So right now as you consists of a wireframe with prototype, also have an AA option in there. And right now, we can export the design as a PDF as it consists of an option for PDF and PNG all this option in there, so you can definitely export it else. And I cannot use this template because it have a limit for 400 components to be used. In our design, we have already used that. That's why we cannot do new. If you like to generate a new one, Then you need to go back. So let's go back again. All right, let's cross it. You need to go back and you need to delay the file for joining new one. Let's delay it. Sim type the delay the file, delat it. And as you can see, now my compant will be again before as you can see 24 only. So I believe you can try it by yourself. This is really great tool. I believe as it starting, if you'd like to save your time, this is really great. Definitely try it. Next tool is like this one. This is also great. For starting out, simply click on here, create a new project just at this top right side. Just click on this button. All right. Now as you can see, we get this type of option where you can add the prompt as you can see. Now let's try with an example. So let's say let's try with this one or let's say this one, let's say, this one, this is good. I think all look same. Okay. Let's go with this one. As you can see, now we can select here how many pages we need, one to five or five to ten, how many pages you need. I'm going to select one to five. Now they're going to create the side map. So it's have an option at the top hall sideb the next have a wireframe. So let's click on generate option. And as you can see, they are successfully generated, and also, as you can see a few more pages, they also include. Let's say, how about us and services need services details, block needs block post, and About is good, they generate it two times. So if you don't need it, then you can simply just dilate it. Okay, S H have a deal option. So you can simply dealt that. And so we also have a services action like mobile app and diga wallet, so we don't really need that, so we can simply do the delat option for delting it. All right. So now, as you can see, they already make the structure. Structure means like how many section, which section we're going to add all of this. So since I was placed multiple time, that's why they make it multiple times. So let me delay and try it again. Let's try it again. Okay. Now as you can see, we have a NAPO hero section, feature section, benefit section, testimonial. A lot of this section is there. So I think we can definitely if you don't like, if you like to say, I like to get this feature section at the top. Definitely can do that. I'll see if you'd like to do anything else in there. Let's say You don't really like this, so simply delay it. Also like to delay it. Testimonial. You'd like to only kept this thing, so you can do this. All right. Now if you go here this wireframe option, then Then as you can see, now they're going automatically generating my wireframe in there. As you can see all of this is doing. Let's see update to V R frame, so we cannot do this all of this, but we only do one. So as you can see the automatically doing all of this see sep by step, they are going to do. And after this, if you don't like it, then definitely you can swipe the design. You'd like to make something different. Okay. So as you can see, it's almost done right now. Okay. So let's say I don't like this design. But I person like it. This is So if you don't like it, then just click on there like replace component or regenerate copy, what do you want? So whatever you want, you can do this. Let's say I like to go place component. And then when I click on there, as you can see, it's have a lot of options. Now they're just going to recommend few more, and I can simply slick the here. Let's say I like to go with this one, or let's say I like to go with something different, then you can simply select it. And it's also have the export option for Figma and WL, or if you want something else, then I can definitely do this from here. Now let's move to the next is like a is the AI. This one. This is also interesting. So let's start from here getting started. I just open this file. And I told you that it's kind of similar to Figma, and also it's much with Wij. It's kind of similar things they offer both. All right. So as you can see, we get a few options like MT board, Wi Fi template, screenshot, two web frame, texture design, a lot of things they. So let's try with texture design. And this have an option for web and mobile. So let's say design home page, design and home page. Let's see what happened. So I tell him to design on a hero section, and now they mainly working in the back end to generating my hero section. All right. They just make it this simple hero section for me. This is nice. This is nice. This is really good. Okay. Now, let's go here. If you go here this is AI, then you'll get to see a few more options that's are in here, and you can definitely try that like screen shot to design, text to diagram, text to design, theme generator, magic image, and a lot of things you can do. So if you're just going to hover, then they're going to show you a video, like 20 seconds or 10 seconds video, how it's work, they're going to showing you. And if you want to try that, definitely you can do that try. Now let's go to the next. It's Mally like Framer AI. So if you go in Google search Framer AI, then you'll get this page called AI Tools and framer. Just open that. Let's see. All right, so let's go back again in framer.com. I think they almost removed the things. Let me open it fast. Let me try with my new project. At the top at the bottom call New Project, just click on there. So by this way, you can try this M journey, and also you can try with Framer and Hostinge and Webflow. If you're like to interested, if you'd like to know more, then definitely search in Google, Framer, AI, then you get the website and you can try by yourself. 8. Make High Converting Landing page using AI : Video, we see some of the example of the AI tools for generating website and IDA. Now I'm going to show you a Secret things that is high converting landing pit design using AI. We're going to cover everything, doing research and joining website outline, doing comparison, all of these things, we're going to do step by step together using AI. First choose one thing that which top of blending page you like to make. It's going to be Figma Template, ecomerce website, website, Bigins website, or a Shoe website, just choose one topic. And now let's visit this two links that you can see in here. One is like facebook.com slash at dot library. This is the one thing. I see it is like similar web.com. So right now as you can see, I opened both of this platform and I've already logged in here. And now let me choose here which countries. So I'd like to choose here my all countries. So if you like to specific doing like a specific country, it's can be America or something else. Can simply search the country name. And next is like a type. Whichever ad you like to do. I'd like to go with A ads, and now we can simply type here the keyword. Let me search your shoe, simply just type here. Now as you can see a lot of results. I get to see people are just running ads with this. So mainly, we need to find out here that which ads are providing links because we're just going to take their data and try to finding out and try their way and take the idea and do our customize on. Let's see this one fast. As you can see, this is the shop one, so let's open it. Also, let's try to finding out some more. This is a different one, as you can see. I don't like that. This is something for Ad now. This is different for Ad now. This is something different. So this is merely the way I'm showing you. But if you'd like to make it more specific, then definitely we can do. This is have a here, doing in a whatsapp. This is something shop now, so make sure that you're not clicking on the same link again and again. So every single lied to be different something, so make sure that you're just doing something different. Now we just open a lot of website and as you can see, this is redirect me and there. So let's wait a little bit. This is something a different one. This is something a different one. They're just redirecting me, and this is something a different. This is both are same. This is a different one. This is something a different one I get, and this is something a different one, but this is not, same thing. Also, one thing we can do since we have our different brands, so we can let's say something different because I was write something about my brand and it was like mainly for arban people and mostly targeting Nemerica, it's mainly snickers. Let me se snackers. Let's copy here and past snacker shoe. Let's search it again. I personally don't like it. This one I like or if I go this one, then I don't like the design also. This looks pretty nice, but this is not how I want. This is also looks good, but this is a good idea. I can take the idea from there. What type of we can do? This is pretty nice, that hero section, and then some categories then doing the products. This is pretty nice. This is good. I don't want to go with this one, so let's open it. This also looks good. Hero section and all of the product This is also good. Let's go back. Let's see if I get something different. So this is the pretty nice thing, as you can see, this is also good. So by this way, you can just spend a little bit more time just like 20 minutes or 30 minutes, then you'll get a lot of examples that are mostly people are using the same designer same ning page for selling their products. So by this way, you can simply find out the website idea. And then after this, when you get the specific design, then you think, k, this design looks pretty nice, or we can use it. So what you can do, you can simply copy the link and go to the next website. It's silly called similar web and simply come here and pass your website link and there, then you can simply just clop here and pass it and just click on here, this pattern, ok? Now, you need to just take their data, like how much data they have and all of these types, you need to checking out that how it's getting. So as you can see they have almost 42 k visitors. You can make a Google doc, just open it and write down all data, which website performing more well, so you can just follow them. This is this one. This is the different one also. Okay. This is also looks good. I think this is also looks good with let's have a testimonial option. This is also looks good. So what you can do, let's say, I like this one. I check on similar web, I compare with all of this, and I feel like this design is good, and this layout is good. Then, I can simply just press Control A, just Control A, copy all of this and go to any of this AH, just tell them, make the summary of the website. Make the summary of the website. Breakdown or I think it's better if we say a breakdown. So breakdown, step by step. So this is the great thing. So step by step, they're going to break down. Let's go to here this next one in Gemini. Let's try with clot. Let's enter. It's going to take a little bit time for doing it. Since my website is slow, that's why it's taking a little bit time. But this is fine. As you can see main section, what they're talking about, on the hero section, product things, all of these things they're talking about. And if you go to the next one, this is also talking like this way. But, this is something they just make mistake. Let's say again, make the outline. I don't need this type of this type of overview. Outline of each section of each section. What are you can to copy it and we can eat it in here, so just make them. Simply again tell them. As you can see, they also break down it. By this way, you can simply follow the structure. In here in Gemini and if you're using T provision, then you can simply save it. You can simply say, save it as version one, like this. Save it version one. If I need it, letter, I will use it. Use it or collo. This is save as a V one. Now as you can they're going to save. I'm not sure if it's going to save or not. It's going to save as you can see. Got it, it saved as a V one. And now, Now what he can do? Let's say there also. This is saying he is not i. It's also work, but not all the time. Let's see if it's can save it or not. Let's see it can save it or not. Let's go to the 01 and let's see about how. I'm just going to copy this about my business. All of this data I do. I mainly generate using AI. This is like talking about my brand name, my target audience, my strong point, unique selling point, all of this data in there. I'm going to copy it and now I'm going to tell him to make. Let's say, based on this, and V one, make similar high converting layout for me, for my brand. This is something. Based on this, read it. Let's copy pass, copy it. All right. So understand as a V one. Okay. Let's fine. I'm going to give the same prompt in there again, and it's not working, so I'm going to skip it, but this is also work. I try many times it works. It's not like that it's not working. It's also work. So this is pretty nice, as you can see, they already do and a different one for us. They already do it. Okay. Now we're going to save this result as V two. We're going to say this. Save this result as a V two. After this, we're going to save it. So let's go back again here. Save it. And then Compare V and V two, which one is better. So this is the great option, right? So I tell the AI, make for me something, then I tell you again, save it as a V two, and then I tell you again. Which one is really good for me. So as you can see now as they're doing this breakdown that which one is good. So now I can easily do it for myself. Okay, now as you can see what they're doing. Okay, this is fine. Okay. Now let's go with this, save it as a V two. Okay. Now I'm going to make it V two. All right. So this is the comparison they do. Yeah, that's it, Milly. By this way, you can do the same thing. You can follow it. But remember, not all the time, going to give you correct things. M we're going to use it for taking idea that okay, this is the idea, this is the thing we can do. When you have enough data, when you have everything like step by step structure of each of the section, then it's more easier for you to designing it. So I see a few of my students they do before, I tell them this way before and Milly going to follow step by step AI what they're suggesting. But don't do that in your case. You can take idea from EA, but not going to follow the instruction, not going to do step by step, like 100%. You can take the idea from EA, but never ever, copy past it. Just tack the idea. If you think this is good, then you can implement non a design. If you think this is not good, then skip it and tell him again, give me something more different and generate something different. 9. How i use AI for designing Website: Video, I'm going to tell you my process that, how I use AI designing any website. When I really start designing website, I'm not starting in Stanley. First of all, I try to understand their brands. This is most important. Understand their business, all of this, I try to understand it. And then I tell my client that, hey, I just need this information, like your business overview and unique selling point, how many products you have. What is your main goal for designing or redesigning website? Because most of the cases, I redesign website. So they already have existing website. I mainly do redesign. So every single time I tell them, like, what is mainly your goal. So I just mainly note down everything or some WCS client gave me the notes, something like this way. So when I get it, then I check their existing website, and then I try to find out their competitor how they're doing it. So I try to understand how they do. Then I start doing like my wire frame. And before that, I make an a little bit plan. So plan is something like how many section I going to do. Let's I need a five pages website. Total link five pages, right? In five pages, let's say talk about the home page. So in home page, first of all, let's say it's need a header, then it's a hero section, right, hero section. Then it's not a logos. Then let's say features. Like this type of thing, I first of all, make a list by myself. I just make a list of this when I just doing research that time. After researching it like this way, then I just go to the AI, like at DBT or this. Then I just copy pastas. First of I tell them, this is all about my brands. Read it. First of all, they're going to read it, all of this. I mean, these texts, they're going to read it at the beginning. And then when he read about it, then I tell him that this is the structure of the home page, write the copy for it. Okay then he's just going to give me an outline step by step. L a hero section you can design this way and the content will be like this. Then I just merely do like this way. This is the thing I do. This is not like I directly go to AI, then ask, I'm just going to an agency website, give me a layouts. I don't really do that. I don't do that. I do research myself and then make the list of the section that I will design, then I tell to AI. But if you don't really understand with section you're going to design, that time you can ask AI that, I'm going to design an agency website, tell me an outline, or this is all about my brands. Tell me an outline of home page. Like this way, you can also tell about them. So, this is the simple thing you can do. And some of the time, when I design it on a website, I do something like this. Let's say I have this title, and I also need this one. So what I do? First of all, I copy this about my brand, so I copy everything here like this one. I just copy it. Come to chtGBT, and read it. I tell them, read it like this. And then I this is my current current title. So I tell the current title, and then I say, write for me and subtitle of two line based on the title, based on the title. This is the thing. But if you'd like to get any specific result. Before entering the Fast prompt, you can say like this. Let's say you are whichever pery one, like copyright, website, copywriter. Website ICO friendly copywriter, friendly copywriter, so friendly copywriter, Sys if you understand it. Then I don't re, so I just press center. I like to go in to say, like, I don't need an answer like this. So like As can see, now I can simply ask them, and they're going to give me SU friendly result. So this is also an a team. I follow a few times, so I need a section title. When I need section title, then I do. If I tell you the summary, then what I do? First of all, if I need outline, then I do research myself before the last video, I show you that how I do research. By this Y M, do the research, make the outline, then I go to AI and tell them, make the copywriting for this or how I can design it, just tell me or give me the idea. This is number one. Number two is like if I don't get any idea like how my section will be, then I tell the topic of my business, tell them and make outline for me. This is the number two. Third is like I just Follow this way. This is the way I follow. This is all of my process. Let me know if you have any questions or if you don't understand anything or if you'd like to get any practical example, how I do. If you want it, then let me know I'm going to make more videos for you, or if you have any other questions, then you can 10. Assignment, Now its your turn: Homework: Congratulations, you made it. Now it's your time to make your first assignment or presentation, using AI. It's can be anything. It's going to be your business presentation. It's going to be your class presentation. It's can be anything. Just choose a topic, make a presentation, and submit here.