Transcripts
1. Introduction: Holy guys, are you interested in designing user
interface using AI? If the answer is yes, then
this course might be for you. So in this course, we are going to have multiple projects. So in the first project, we are going to design user interface for language learning
app using UISR. This tool is very easy to use. All you need to do is to write the prompt describing
your project, and in less than a minute, UIZR is going to generate you high quality UI designs like
this. Very cool, right? Next, you can also
take a screenshot of a website or mobile
applications, and UizRT will be
able to convert that screenshot into editable
UI designs. Look at this. In the next project, you're
going to scat a UI on paper, and you can take a photo of the scat and upload that photo, and physically AI will
be able to convert that sket into editable
UI designs like this. Very cool, right? In
the next project, we are going to
design user interface for Ecommerce website
using Wind Frame. Then we are also going
to design user interface for sales revenue
analytics using FSL. Look at this guys.
Pretty cool, right? Next, we are going to design user interface for sign up page. We are going to design the UI for design
up pads manually. Next, we are going to analyze the user attentions using AI. So you will get the
hitmp and the hitmp will show you where the
user attention is mostly concentrated at. And lastly, we are going to conduct user experience
research using UX Pilot.
2. Designing UI for Language Learning App with Uizard: Holy cast, welcome
back to the course. In this video, we
are going to design user interface using UIzRt. Okay, so now, let's get started. The first thing that you
need to do is to sign up. So just click Sign Up for free, and you will be
redirected to this page. As you guys can see
you have two options. You can sign up using
your Gmail account. You can also sign up using
your Microsoft account. So it's totally up to you. In this case, I'm going to sign up using my Gmail account. As you guys can see here, I got redirected
to my dashboard. Okay, so right here,
there are four options. The first options is
a new blank project. So you can create the user
interface from scratch. The second option is to
start from screenshot. So you can take a screenshot of a website or mobile
applications, then upload that screenshot, and UISRT is going to convert that screenshot into UI designs. The third option is to generate the UI designs using
Auto Designer, and the fourth option is
to start from templates. As you guys know, UISRT
has many templates, so you can pick one
of these templates and customize it
however you want. However, in this video, we are going to be
mainly concentrating on this feature, Auto designer. So just click this
and it will be redirected to this
page. All right. So now let's get started. Firstly, you will need to select which device are
you designing for? As you guys can see
here, there are three options mobile,
tablet, and deskpe. I'm going to select mobile. Next, you will need to write the prompt describing
your project. Okay, so in this example, I'm going to create
user interface for Language Learning app. Okay, so I'm going to
write something like this, a language learning app
for students and Taurus. Okay, so next, you will need to describe
the design style. You can specify things
like colors and layouts. Okay, so let's write the descriptions a modern app with light blue team. Next, you can also select
some of these keywords. I'm going to select light
moderate and elegant. Okay, so next, just click
Generate my project. Okay, so just wait, guys. The process might take
a couple minutes. Hopefully, it doesn't
take too long, and I'm super excited to see my user interface.
Okay, so just wait. Actually, I don't want
this video to be too long, so I'm going to skip this part, and I'm going to return once the user interface
design is ready. Okay, finally, the user
interface designs are ready. Actually, the process
didn't take too long, guys. It only took 2 minutes or maybe
even less than 2 minutes. Okay, so now I'm going
to click Preview. And let's click Overview. As you guys can see, UIZRt
has generated several pages. Look at this. So we have the
welcome page, sign up page, Home Screen, search, profile, and account settings.
Look at this guys. Very cool. Okay, I'm going
to zoom a little bit. Okay, look at this, guys. Very cool, right? Okay, so
now just click Preview. Just click Got it. Okay, so just click Get Started join now. Okay, so this is like
the homepage, guys. Look at this. If we
click on profile, we will be redirected
to this page. If we click on home, we will be redirected
back to this page. And if you click on
one of these courses, you will be redirected to this
page. Look at this, guys. That's amazing, right? Okay, so now let's go
back to the editing page. I'm going to close this tab. So if you are not satisfied
with the UI designs, you can feel free to
customize it, right? So you can add text.
You can add buttons. You can add form, and still many more, guys. You can also add image,
so just click Image. As you guys can see UISRT has
its own Image library here. You can also generate
an image using AI, so just click this and just
type in your prom here. And if you click on icons, you can also feel free to add any icons to your
user interface. As you guys can see here, ISAT has many different icons
here, guys. Look at this. Besides that, you can
also edit the page. So just select the page
that you want to edit. For example, in this case, I want to edit the homestren
so you just select Homestren and you
can edit the layout. You can modify the
positions, the size. You can also change the style. You can change the screen color. You can group or ungroup
the objects in this page. Lastly, if you want to Download the UI design,
just click Export. As you guys can see here,
you have several options. So you can download
this in PNG format and JPageFmat SVG or PDF format.
So it's totally up to you. I'm going to download this
UI design in PNG format. So just click Export. Okay, so the process might take a minute or two. So
just wait, guys. Hopefully, it doesn't
take too long. Alright, as you guys can see, we have successfully
downloaded this image. Look at this. Very cool, right? Alright, guys, I think that's it. That's all you need to know. I'll see guys in the
next video where we are going to create user interface design using another AI tool. So I'll
see you guys there.
3. Designing User Interface with Google Stitch & Figma: Hi, guys. Welcome
back to the course. In this video, we
are going to design user interface
using two AI tools. The first one is Google States, and the second one is FICMa AI. Okay, let's get started. Firstly, we are going
to write the prom. Create user interface designed for sales analytics software. That has two main fitters. The first one is sales
tracking dashboard. And the second one is customer segmentations,
visualizations. Make the design modert
and interactive. Next, you can select what type of app that
you want to design. If you want to design UI
for mobile app, click this. If you want to design UI
for web app, click this. Additionally, you can also
upload an image or a sketch for inspirations and let's
click Generate Design. Okay, now AI is
creating the UI design, and we will need to
answer these questions. To design a comprehensive
sales analytics software, I can create the following
two screens for you. Sales tracking dashboard. So this screen will
provide an overview of sales performance
with key metrics and interactive charts. And the second one is customer segmentation
visualizations. This screen will display
customer segments through various visualizations
allowing for deeper insights. Shall I go ahead and design
these two screens for you? Okay, now, AI is going
to create the design. It will take a few minutes.
So just wait, guys. Hopefully, it doesn't
take too long, and I'm so excited
to see the result. Well, it didn't take
too long, guys. It only took 1 minute or
even less than 1 minute. Okay, here is the UI design. So this is the sales
analytics desk work. We have sales overview,
total revenue, average sale value, customers, sales over time, and
sales by Regent. And here is the customer
segmentations visualizations. So we have customer
distributions by its customer lifetime
value versus purchase frequency and
top customer segments by revenue. Okay,
very cool, guys. If you want to download this
design, it is very easy. Just click this Download. You can also view the code. As you guys can see, we
have DDML code here. You can copy the code and you can compile the
code in VS code. Okay, next, we are going
to try the second AI tool. The name of the tool is Figma. So we're going to
use the same prompt. So let's copy and
paste this prom, and let's put it here. But before that,
make sure that you already look into FICMA. Create a user
interface design for sales analytic software
that has two main fetters, sales tracking dashboard,
and customer segmentations, hsualizations, make the design
moderate and interactive. And let's click Generate. It will take a few
minutes for VICMA to generate the UI design.
So just wait guys. Hopefully it doesn't
take too long. Well, it didn't take
too long, guys. It only took a minute or
even less than a minute. Okay, here is the
sales dashboard. We have overview total
revenue total orders, new customer conversion rate. Very cool UI, guys, revenue trends,
sales by category, performance metrics, recent
transactions, very complete. And let's click on
customer segmentations. We have segment distributions,
segment metric comparison. A detailed segment metric.
Very comprehensive. And you can also view the code. Just click this and you will
be able to see the code. You can download the code
and compile it in FAS code. Okay, guys, I think that's it. That's all you need to know. I'll see you guys in
the next video. Bye.
4. Creating UI Design for Grocery Delivery App with Banani, Nano Banana, and Manus: Holi guys. Welcome
back to the course. In this video, we
are going to design user interface for
grocery delivery app using three AI tools. The first one is Banani. The second one is Gemini, and the third one is Manus. Okay, let's get started. Firstly, I'm going to log in. I'm going to log in
using my Gmail account, so let's click
Continue with Google. As you guys can see, I have
successfully logged in, and here is my dust board. Okay, let's get started. Let's write the prom. Create user interface design
for grocery delivery app. This app has three main fitters. The first one is
product market place. With shopping card. So if the user wants
to buy the product, the user can click on the product and add it
to the shopping card. The second feature is real time package
delivery tracking on interactive map. And the third fetter is monthly spending
Analytics dashboard. So the user will
be able to track and analyze their
spending for each month. Okay, now let's click Generate
it will take few minutes, maybe one or 2 minutes. Wait guys. Hopefully,
it doesn't take too long and I'm so excited
to see the result. Well, it didn't take too long. It only took a minute or
even less than a minute. Okay, look at this
grocery dashboard. We have product categories, active delivery tracking,
monthly spending. Look at this. Very cool. And here is another
alternative. Look at this. It is relatively similar, but the design is a
little bit different. And here is the third option. Okay, very cool. If you want to download these images,
just click Export. And you can export this
image as PNG or GPG. It is totally up to you
and just click Export. Okay, now we are going to
try the second AI tool. So let's open Jim andi. And in this case, we are going
to use Nanobanana model. So let's click
this create Image. And I'm going to copy and
paste the same prompt. So we're going to create
user interface design for grocery delivery app. Okay, let's click Submit. Okay, now it is loading
the nano Banana model. It will take a few minutes, maybe one or 2 minutes. So just wait, guys. Hopefully
it doesn't take too long. Okay, here we go. Here is the
design. Okay, look at this. We have three features, right? The product market place, the real time package
delivery tracking, and the spending analytics. Das board. Look at
this. Very cool. Okay, now we are going to
try the third AI tool. The name of the tool is Manus. And we're going to copy
and paste the prom, so we're going to use
the exact same prompt and let's click design. Okay, now, let's click Generate. Well, it didn't
take too long guys. It only took 30 seconds or
even less than 30 seconds. Okay, let me zoom
in a little bit. So here is the first fetter
product market place. And as you guys can see here, we have a shopping cart so the
user will be able to click by and the product is going to be automatically added
to the shopping cart. And the second feature is
real time delivery tracking. This is the grocery store, and this is your home, and the driver is on the way, and you also have the
estimated arrival time. Look at this. Very cool, right? And here is the third fatter. Spending Analytics dashboard. So you will be able to analyze your spending for each month, and it also breaks down your spending by
product category. Very cool. Okay, guys, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
5. Designing UI Design for E Commerce Website with Wind Frame: Holocaust, welcome
back to the course. In this video, we
are going to create user interface design
using Wind frame. Okay, so now let's get started. The first thing that you
need to do is to sign up. So just click Sign Up. You will be redirected
to this page. As you guys can see,
you have two options. You can sign up using
your Github account. You can also sign up
using your Gmail account. So I'm going to sign up
using my Gmail account. As you guys can see, I got
redirected to my dashboard. Okay, so now we are going
to create a new project. So just click Create Project. You will need to enter
the name of the project. Okay, so I'm going to name
it as user interface design. And I'm going to
click Create Project. Okay, so now Wind frame
is creating the project. And as you guys can see, we got redirected to the editing page. Okay, so this tool is
very easy to use guys. All you need to do
is to write the prom describing how the
user interface should look like you can
specify things like features, functionalities, color,
layout, and styles. Okay, so in this example, I'm going to create
user interface designs for Ecommerce website. Okay, so now let's
write the prompt. Product Catalog, page for Ecommerce website with moderate Team
aesthetic Layout. And dark background. Okay, so that's my prompt. Now, let's click
this. So the process might take a couple minutes
guys. So just wait. Hopefully, it doesn't
take too long. I'm so excited to
see the result. Okay, I don't want this
video to be too long, guys, so I'm just going
to skip this part, and I'm going to return once the user interface design is ready, and I'm
going to show you. Alright, finally, the user
interface design is ready. Actually, it didn't
take too long, guys. It only took 2 minutes or maybe
even less than 2 minutes. Okay, so as you guys can see, this is the product catalog page for our ecommerce website. There are like two product
listing here. Look at this. Very cool, right? If you are not satisfied
with the result, you can feel free to ask AI to redesign this user interface, so you can write the
prom down here and just explain which part
that you want to fix. Okay, so now I'm going
to click Add to Canvas. Okay, so now we are
going to create another user interface
design using wind frame. So let's write the prompt. So this time we are
going to create user interface designs for
product checkout page. Okay, so let's write the prom. Product checkout page
for Ecommerce website. Make sure to include payment method and pay button. Okay, so now I'm
going to click this, so the process might
take a couple minutes. So just wait. Hopefully,
it doesn't take too long, and I'm so excited
to see the result. Okay, so the UI design for the product
checkout pads is ready. Look at this guys.
Very cool, right? Okay, so now I'm going to add these product out
pads to Canvas. So just click Add to Canvas. Okay, so NX, let's
click on code. You'll be able to see the
code for this user interface. So if you are web developers
or front end developers, you don't need to write
the code from scratch. You can use this code. Okay, so lastly, we are going
to export this project. So just click Export. Okay, as you guys can see, we have successfully
exported the project. You have three options. The
first options is at DML. The second option is react, and the third option is few. So I'm going to select at DML and click
Download file, right? We have successfully
downloaded the file. Okay, guys, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
6. Designing UI for Marketplace Website with V0: Holy guys. Welcome
back to the course. In this video, we are going to create user interface
using Firsal. Okay, so now let's get started. The first thing that you
need to do is to log in. So just click Login. You can log in using
your Gmail account. You can also log in using
your Github account. Okay, so next, I'm going
to click on pricing. I'm going to show you that
this tool is actually free. As you guys can see here,
Viral offers a free plan. Obviously, there are
some limitations. When it comes to the
free plan, for example, you only have 200
credits per month, so that's your maximum limit. Okay. Now let's go
back to the homepage. If you scroll down,
you'll be able to see user interface designs
that were created using FSL. Look at this. Okay, so
let's pick one example. Let's click on this one. Okay, as you guys can
see, this is the prom that was used to
generate this UI design, a dashboard for data
analytics of industrial KPIs. Look at this guys.
Very cool, right? So all you need to do is to write the prom,
describing your project. You can specify
things like features, functionality, styles,
layout, color, et cetera, and Fir SL
is going to generate you a beautiful user
interface design. Okay, so let's get
started, guys. Okay, so we are going to
write the prom Alright, so in this example,
I'm going to create user interface for
E Commerce website. Okay, so now let's
write the prompt. Ecommerce, marketplace
with product catalog, and price labels. Okay, so now let's click Submit. The process might
take a couple of minutes guys so just wait. Hopefully, it doesn't
take too long. As you guys can see now Versal is designing the user interface. So just wait All right. Finally, the user
interface design is ready. Okay,
look at this guy. Very cool, right? So this
is our e commerce website. So this is the Hub page guys. As you guys can see, we
have the search spar here, and this is like the
product landing page. This is the product
descriptions. And as you guys can see, this is the product catalog.
Look at this. Let's scroll down a little bit. As you guys can see,
there is the price list, and also add the chart button. So if the customer want
to purchase this product, then he or she will click
on this button, right? Okay, so let's click on
the other UI design. This is another product catalog, guys. Very cool, right? So if you want to convert this design into code,
you can click this. As you guys can see,
you have two options. The first is react, and the second one is at CML. So you can copy and paste
this code and give this code to the web developers or
the front end developers, and they're going to build
the website for you. Okay, very cool,
right? And lastly, if you want to
hear this project, you can click here, and it automatically copy the links
to this project, right? And you can sear it
to other people. Okay, guys, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
7. Designing Web Interface with Teleport HQ: Holy Ghost, welcome
back to the course. In this video, we
are going to create user interface design for a
website using Teleport at Q. Okay, now let's get started. The first thing that you
need to do is to sign up. So just click Get Started. You will be redirected
to this spade. As you guys can see,
you have two options. You can sign up using
your Gmail account. You can also sign up using your Github account, so
it's totally up to you. Okay, so in this case, I'm going to sign up using
my Gmail account. Okay, so this is
Teleport atsqdbg. Okay, so you have
several options, guys. You can start from scratch. You can select one of
these available templates, and you can customize
it however you want. As you guys can see, there
are many templates here. You can also generate
web interface using AI, and that's what we are
going to do in this video. Okay, so just click
Start Building. This tool is very easy to use. All you need to do is to write the prompt describing
your project. And in less than a minute, Teleport ADsq is
going to generate you high quality user
interface for our websites. Okay, so in this example, I'm going to create landing page for my web
scrapping software. Okay, so now let's
write the prompt. Websites for web scrapping. Software. Okay, so now
I just click Next. Okay, so right
here, you will need to select the team
for your website. As you guys can see, there are several options, creative,
cultural, default, eBook, echo, financial, kids, nutrition, sports,
startup, and yoga. Okay, so I'm going
to select Start Up. So the team is going
to look like this. So this is like the
light mode, guys. If you want to switch to
dark mode, just click this. So it's totally up to you guys. In this case, I'm
going to select dark mode. I think
it looks better. Okay so now just click
Generate website. So the process might take
a couple of minutes, guys. So just wait. Hopefully, it doesn't
take too long, and I'm super excited
to see the result. Okay, so just wait.
As you guys can read, the content is being generated. Okay, almost done. Okay, so next, just click. Go to the page. Okay, so this is the
editing page, guys. Now I'm going to click Preview. Okay, so you will be redirected
to the preview page. Okay, so just wait. Okay, here we go. So this is our website. The name of the
website is Scraper. Okay, unlo the power
of web scraping. As you guys can see here,
we have like five pages, home features, how it works,
pricing, and contact. There is a get started
now button right here. And if you scroll
down a little bit, there are like four features, customizable data extractions,
scheduled scrapping, proxy sport, data
quality assurance. Very cool, right? Okay, so this is like the
pricing sessions, hot the right plan for
your web scrapping need. Free basic and pro plan here. Let's scroll down again. Okay, so this is like the frequently asked
question sections. Okay, very cool, guys. There's a login button here and also a register
button up here. Okay, so now I'm going
to close this step. You can feel free to
edit the UID signs. You can change the color.
You can edit the text. Okay, so, lastly, I'm going
to show you the code. So just click code. As you guys can see,
there are two files. The first one is JavaScript
and the second one is CSS. So if you want to
bold the project, you can use this code, so you don't have to start
from scratch, right? Okay, guys, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
8. Converting Screenshot to UI Design with Uizard: Holy gas. Welcome
back to the course. In this video, we are going
to convert a screenshot into editable user interface
design using UIZR. Okay, so the process is going
to be very straightforward. All you need to do is
to take a screenshot of a website or
mobile applications. Then upload the
screenshot to UIsRt. After that, UISRT is
going to convert that into user interface
designs that you can edit. Okay, so let's get started. So now I'm going to
click Start from screenshot and we will be
redirected to this page. Okay, so just wait guys. The loading might take a while. Alright, guys, so
now we are going to take a screenshot
of this website. The name of the website is zero. For those of you who
don't know what zero is, zi is one of the largest real estate
marketplace where people can find properties for sale and also
properties for rent. However, you can
feel free to take screenshots of any
other websites or mobile applications
that you want, right? Okay, so now let's take the screenshot. Okay, so let's do it. Here we go. Okay, I've just taken
the screenshot. So I'm going to
save this image on my desktop and let's
go back to UIzRt. Okay, for now, I'm going
to close this tab. What we are going to do next
is to upload the screenshot. So just click Screenshot
scanner and just click Upload. Okay, so I'm going to
upload this screenshot, guys, just click Open. Okay, so now it is
uploading the image. The process might take
a couple seconds. Hopefully, it doesn't
take too long. Okay, so just wait. Alright, so the next thing
that we are going to do is to select the
output screen size. As you guys can see,
you have three options, mobile, tablet, and descop. I'm going to select Descop. And now let's click Import. Okay, so now we are
importing this screenshot. So just wait, guys. Hopefully, it doesn't
take too long. Okay, here we go. Okay, so now we are going to
edit this user interface. Okay, so there are many
things that you guys can do. For example, you
can edit this text. You can write whatever
you want here. You can also change
the color of the font. As you guys can see, right
now, the color is blue, but if you want to change
it to different color, maybe green, just
select green, right? Here we go. Okay, you can also change the color
of this button, so just click this icon, and right now it is still blue. Let's say I want to
change the color to red. So just click this.
Okay, here we go. And you can even use AI to give you a suggestion.
So just click suggest. As you guys right here, IZR is generating new
content just for you. It might take a few seconds. Okay, so just wait guys hopefully it doesn't
take too long. Okay, other than that, you can also replace this image
with your own image, right? So you can click on this image and just click on these tree dots and just
scroll them a little bit. But you can upload
your own image, right? In addition to that,
you can also modify the positions and the
size of the image. Okay, so now, I'm
going to close this, and what we are
going to do next is to redesign this user
interface using AI. So just click this, make sure
you select generate team, and also make sure that
you select prom, right? Okay, so now let's
write the prong. Redesign this user interface. With darker and more modern team. Okay, so now I'm going
to click Generate. You can also select
some of these keywords. So I'm going to select
dirt and modern. Okay, so just click Generate. Okay, so just wait, guys, the process might take
a couple of minutes. Hopefully, it doesn't
take too long. As you guys can
see you Izard has successfully redesigned
the user interface. Actually, the process took a little bit longer
than I expected. It took almost 3 minutes, guys. Okay, so now, just click Apply. Okay, as you guys can see now you're applying the new team, right? Here we go. Look at this. Very cool, right? Okay, so now, if you want to export this user interface,
just click Export. And I'm going to download
this image in PNG format. So just click PNG and
just click Export, right? Okay, as you guys can see now, we are downloading the
image. So just wait. Alright, so we have successfully
downloaded the image. Here we go. Alright,
guys, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
9. Converting Sketch to UI Design with Visily AI: Holgays, welcome
back to the course. In this video, we are
going to convert skats into user interface
design using PhisLE AI. In this example, we
are going to use this SCATS a foot
inventory management app. You can use any handwritten
skets and upload the image, and AI is going to be able to convert that into UI Design. Okay, let's get started. Firstly, I'm going to log
in. So let's click this. I'm going to log in
using my Gmail account. But you can also log in
using your Github account. It is totally up to you. Okay, it will take
a few seconds. As you guys can see, I have
successfully logged in. Okay, now let's click
on Welcome to facile, and let's click Start with AI. And you will be
redirected to this page. Okay, firstly, we are going to upload the image. So
let's click this. And I'm going to
upload this sketch. Let's click Open, and we're
going to write the prom, convert this sketch into
a user interface design. For context, this is Foot Inventory
Management app UI. Okay, so that's my prom, and let's click Generate. Okay, it will take few
seconds. So just wait, guys. Hopefully it doesn't
take too long. I'm so excited to
see the result. Well, it didn't take too long. It only took 2 minutes or
even less than 2 minutes. AI generated two different styles style one and style two. But for now, let's take a
look at style one first. Okay, here we go. Food stuff. We have three taps current
grocery lists and recipes. Frits pantry and we also
have Analyze button. Look at this. And we
also have expiry alerts. And you can also click on this ad button to add more food. Okay, now let's take
a look at style too. Let's click this. So it is basically the same. The structure is the same, but the color is different. To be honest with you,
I prefer style one because I think
the design is more suitable for food
inventory management app. And you can also
click on Openboard, so you will be redirected
to the editing page. Okay, guys, I think that's it. That's all you need
to know. I'll see you guys in the next video. Bye.
10. Designing Simple Sign Up Page on Figma: Holy gas, welcome
back to the course. In this video, we are
going to learn about ICMA. For those of you who are
already familiar with ICMA, feel free to skip this video. However, if you're new to ICMA and you want to learn more, make sure that you pay for it close attention to this video. Okay, so let's get started. The first thing that you
need to do is to sign up. So just click Get
started for free. Okay, so I'm going to sign
up using my Gmail account, so just click
Continue with Google. As you guys can see, I got
redirected to my Daskbk. So I have several
projects here on Figma. Okay, so now we are going to
create a new file, right? So just click Design File. And just click
Create New Design. Okay, so as you guys can see, we got redirected to
the editing page. Okay, so in this video, I'm going to teach you step
by step on how to design simple user interface
for a sign up page. Okay, so let's get started. Okay, so I'm going
to select Frame. Okay, so this is going to
be the mobile app, right? Next, I'm going to
select a rectangle, and we are going to
create three rectangles. So the first one is
for the user name. The second one is for the email and the third
one is for the password. Okay, so you can create two
other rectangles manually, but in this case, I'm just going to copy
and paste this, right? Okay, here we go. Okay, so next, I'm going to create another break
angle down here, and this is going to
be a sign up button. Okay, cool. So next
we're going to add text to this UI design. Okay, so just click text Okay, so I'm going to type in
something like this. Sign up. Page, it is too small, so we're going to make it a
little bit bigger, right? As you guys can see,
the phone size is 12, so I'm going to change it to 35. Okay, here we go. And I'm
going to put it on the center. Okay, very cool. Next, I'm also going to
add text to eat rectangle. So let's click this icon. Okay, so I'm going to change
the phone size 35-20. Okay, so let's write
something here. Full name. Okay, so we are
going to copy and paste this. Okay, so this is going
to be email address. And the third one is
going to be password. Okay, so when the user
wants to sign up, he needs to enter his full name, his email address, and
also his password. Okay, so next, I'm going to add text to this button.
So let's click this. Okay, so I'm going
to type in sign up. And we are going to put this on the center.
Okay, here we go. So if the user wants to sign up, he or she needs to click
on this button, right? Okay, so next, I'm going to change the bigger
and colors, guys. Okay, so I'm going to
block this. Here we go. As you guys can see, the
baker and color is white, so I'm going to change
it to light blue. Okay, I think this
is good enough. Look at this guys.
Very cool, right? You can also change the
color of this button. As you guys can see, right
now, the color is grey, so I'm going to change the color to maybe light green like this. Okay, it looks pretty cool. Okay, guys, so that's
how you design user interface manually on VIC
11. Creating User Flow Diagram with Miro: Hello, guys. Welcome
back to the course. In this video, we are going to design user flow using Miro. User flow is very important part of user experience design, so make sure that you pay very close attention to this video. Okay, let's get started. Firstly, I'm going to log in. So let's click Go to Dashboard, and I'm going to log in
using my GML account. And let's click Continue. As you guys can see, I have
successfully logged in, and here is my dashboard. Okay, now let's
click AI Playground, and you will be redirected
to the editing page. And let's click on this icon. And let's write the prompt. Create user flow diagram
for AI Travel planner app. So in this example, we
are going to design user flow for AI Travel planner. This app has three main fetters. The first one is cheap flight
tickets and hotels finder. The second fetter is
travel budget tracking, and the third fetter is
AI itinerary generator. Okay, now let's click Generate. It will take few seconds, maybe 20 or 30 seconds. So just the way it goes. Hopefully, it doesn't
take too long. Okay, here is the diagram. I'm going to close
this. Okay, here we go. And let's click
this add to Canvas. H take a look at this
user flow diagram. So the first one is log in. Then after the user log in, the user will need to choose
one of these three filters. The first one is cheap
flights and hotels finder. So the user will be
able to search for the cheapest hotel and
cheapest flight tickets. Then the user will be
able to view the results, and the user can
also apply filters. And at the end of the process, the user will be able to book the flight and
also the hotel. So that's the first fitter. The second fitter is
travel budget tracking. So the user will be
able to set the budget. The user will be able to
add expenses, fus spending, and the system is going to check if the spending is
above the budget, then the user is going to
get notifications or alerts. And here is the third fitter,
AI itinerary generator. So firstly, the user
is going to input the preferences and also enter
the travel destinations. Then AI is going to
generate the itinerary. Then the user is going to
review or edit the itinerary. And here is the last step. The user is going to
save the itinerary. Okay, guys, that's the
user flow of this app. If you are a UIUX designer, it is very important for you to understand the user
flow of your app. It is very important for you to understand how your app
is going to be used. Okay, I think that's it.
That's all you need to know. I'll see you guys in
the next video. By
12. Analyzing User Attention with AI: Holy gas, welcome
back to the covers. In this video, we are going to analyze user attentions
using this Figma plugin. The name of the plugin
is attention Inside. As you guys can read here, improve design performance
with pre launch analytic. So this AI tool will be able to instantly predict
where users will look after engaging with
your designs so you can save time and avoid
fixes after the launch. Okay, so now let's get started. The first thing that you need to do is to click up and end. As you guys can see, I
have several files here, so I'm going to select
this file Gaming app. As you guys can see, I got redirected to fix
my editing page. Okay, so the next thing
that you need to do is to select which frame that
you want to analyze. Okay, so let's do it. For example, in this case, I'm going to analyze this frame, so just select this frame. And next, just click Run and select Analyze design.
As you guys can see. This Figma plugin has several
features like desktop, mobile, posters, packaging shelves and
marketing material. Okay, so I'm going to select Deskcop and landing
because as you guys can see, this is like a sign up page, so I will consider this
as a landing page. So just click this Okay, as you guys can see now,
attention inside is analyzing this
frame, so just wait. Hopefully, it doesn't
take too long. Okay, so here we go.
This is the result. By the way, if you
haven't created attention inside account,
you need to create one. So just go to this
website, right? And just click try now for free. You will need to login
using your Gmail account. Okay, so now let's
go back to FICMA. As you guys can see, after
conducting the analysis, AI generated this hit map. So based on this hit map, it seems like the
user attentions are mainly concentrated
on these two parts. Okay, so you can also feel
the focus map. Contrast map. So when you are designing
your user interface, you should take this into
concentrations, right? And down here, I also
gave focus score. As you guys can see
for the focus score, we got 100, which is very good. You might be wondering
what is Fokicore. So it measures the level of attention concentrations
in your image. Okay. And for the
optimal clarity, we got 77, which is also pretty
good in my opinion, guys. Okay, so next, I'm going
to click More Inside Okay, so we will need to log in. As you guys can see
you have two options. You can log in using
your Facebook account. You can also log in using your Gmail account, so
it's totally up to you. Okay, in this case, I'm going to log in using my Gmail account. Okay, so as you guys can see, we got redirected to the
Attention Inside Dashboard. Okay, so just click that. You can download the
analysis. So just click this. Next, just click current view. Okay, so just wait, guys. It might take a couple
seconds. All right. As you guys can see,
we have successfully downloaded the hit map. Okay, so let's open this. Okay, looks very cool. The next thing that
we are going to do is to download the report. Okay, so just click Get Report. So just wait. I might
take a couple seconds. Okay, so you will need to
select the file format. You have two options.
The first one is PDF, and the second one
is PowerPoint. I'm going to select PDF. Okay, so now it is generating the report. So just wait, guys. Hopefully, it doesn't
take too long. Okay, so now we are
downloading the PDF file. So just wait. Okay, here we go. We have successfully
downloaded the report. Alright, guys, I think that's it. That's all you need to know. I'll see you guys
in the next video where we are going to be conducting user
experience research. I'll see you guys there. Bye.
13. Conducting UX Research with UX Pilot: Hello guys. Welcome
back to the course. In this video, we are
going to be conducting user experience research
using UX Pilot. Okay, so there are many
things that you guys can do. So the first one is
generate wireframe. You can also turn
text to Inside. UX Pilot also has AIB
UX design review, so you can upload
your UI design, and this tool is going
to automatically analyze your design and give
you recommendations. You can generate custom
workshop and still many more. And don't worry, guys. The store is completely free to use. Okay, so I'm going to show
you the pricing sections. Here we go. As you guys can see, your pilot offers a free plan. Obviously, there are some limitations when it comes to the free plan. For example, you can only get a preview for the
user interviews. You can only get a preview
for the design interview. And you can only have
five UX template. So make sure that you are fully aware of these limitations. Okay, so now let's get started. The first thing that you
need to do is to sign up, so just click Start for free. You will be redirected
to this page. Okay, so I'm going to sign up using my Gmail account,
so just click this. As you guys can see, I got
redirected to my dashboard. Okay, so in this video, we are going to be mainly
focusing on the design review. Okay, so UX design review,
enhance your design, spread creativity
with fresh ideas, and sharpen your UX skills
with AI based design reviews. Okay, so when you are conducting user experience analysis, your main objective is to find the most ideal design
for your customers, right? You want to make sure
that the user of your app or your
websites will have the best experience
possible when they are interacting with
your app or your website. And that's what we are
going to do in this video. Okay, so this tool
is very easy to use. All you need to do is
to upload the design. Okay, if you remember, from the previous videos, we have created
several UI designs. Okay, so in this example, I'm going to use the design
created by Musso AI. So I'm going to upload
that image. All right. You can feel free to upload whichever designs that you
want. It's totally up to you. Okay, so just open my folder. Okay, here we go. And
I'm going to click Open. Okay, so now it is
uploading the design. So just wait. The process
might take a couple seconds. Hopefully, it doesn't take
too long. Okay, here we go. Okay, so now I'm going to
click Start the review. So now AI is going to
analyze this design. And AI is going to give
recommendations for us, right? How to improve the
user experience. Okay, so just wait, guys. The review might take
a couple minutes. Hopefully, it doesn't
take too long. And I'm super excited
to read the review. Okay, here we go. All right, so now let's read the review. Firstly, we have clarity
and consistency. So the CTA or Call
to Action button, start chatting lacks contexts. Consider rephrasing to start gaming chat or similar to connect with the
service offered. Our quiz sections
clarify purpose with a subheading explaining
the surfaces provided. For the quick setup guide, we need to explain what features
can be seen by Linkin to a more detailed guide or
explaining the setup steps. So we should not assume that the users are familiar with
the user interface, right? And lastly, we need to ensure a consistent iconographic
style for custom avatars, voice and text
chat, game sensing, and live streaming to
maintain visual consistency. Okay, so those are
recommendations regarding the clarity
and consistency. Now let's read the
visual hierarchy review. Okay, so firstly, we
will need to increase the contrast of the
navigation text, dashboard features, et cetera, against the background
for better readability. So the recommendation is
to use different color. Okay, so now let's
at the second one. Join the adventure sections, we need to differentiate get started button from
the start chatting button to distinguish
Bitwin starting a chat and signing
up as a new users. Okay, so maybe it's going to be the same.
Just use different color. And lastly, for the
register sessions, we need to increase
spacing between the Google signup options and
the alternative email signup options for better
physical separations. All right, guys, those are a few recommendations that
you need to take into consideration if
you want to improve the user experience of
your app or your website.
14. Conclusion & Summary: Holi guys. Welcome
back to the course. In this video, I'm going to summarize all things that
we've learned in this course, and I'm also going to share
tips and tricks on how to improve the quality
of your UI design. Okay, let's get started with the first topic, user research. You need to conduct user
research to understand needs, behaviors and preferences
of your target audience. This insight will guide
design decisions and ensure the interface aligns
with user expectations. Okay, firstly, you will need to decide who is your
target audience. For example, if you are building
a sales analytics tool, obviously, your target audience
is sales professionals. You need to ask
questions like this. For sales professionals, what is the most challenging part when they are
analyzing sales data? What additional tool that can be built to help them to
analyze sales data? So those are questions
that you need to ask. Okay, let's go back
to the mind map, and let's talk about the second
topic, usability testing. You need to conduct
usability testing with real users to get your
feedback on the interface, functionality, usability,
and overall user experience. In addition, iterative
testing enables you to continuously improve your
product based on user input. So you have two options. You can find a
real human to test your mobile app or website
and get her user feedback, or you can also use AI tools
like UX Pilot or Cloud. You can upload your UI screenshot and you can
write the prom like this, conduct comprehensive
usability testing. Position yourself as
a user for this app. Provide insightful feedback. Okay, so that's my prom,
a very simple prom. And it will take few seconds, maybe ten or 20 seconds for AI to generate the response.
Okay, here we go. I will conduct a comprehensive
usability testing for the sales analytics testbard
from a user perspective. Okay, so here is the
first impressions and overall experience. Okay, these are the
strength, clean, professional dark team
with good contrast, clear informations, hierarchy
with logical grouping, and there are two
initial concerns. Three data tents without
clear action pads and limited contextual
information for decision making. And down here, we have
detailed usability feedback. We have four issues identified
unclear current locations, generate navigation labels,
missing breadcrumbs, and search functionality
is unclear. And we have these
three recommendations. Okay, very cool, very
insightful feedback, guys. And let's scroll down, and AI also gives you a
summary. Look at this. We have priority
recommendations. We have final user perspective. Okay, let's read
this. What I like. The dashboard looks professional and presents
information cleanly. What frustrates me, I can see
data but cannot act on it. I know my total revenue
is 2.5 million, but I don't know
if that's good bad or how it compares to the
last one or my goals. The chart looks nice,
but don't give me the details that I need
to make decisions. And here is the bottom line. This feels like a
static report rather than an interactive
analytics tool. I need more context, comparison, and interactivity
to actually analyze my cell performance and
make informed decisions. And the overall usability
score is six out of ten. Okay, now, let's go
back to the mind map, and let's talk about the third
topic readable typography. You need to use readable and appropriately
sized typography. Consider factors
such as phone style, line spacing and contrast
to enhance readability, especially for longer
blocks of text. This is very important, guys. Okay, guys, this is
the end of the course. Thank you so much for completing the course and I wish
you all the best. Bye.
Chris Raharja, Data Scientist & AI Enthusiasts
