If you arent following standard practise of a web app design like containers, section, headers, autolayouts, containers, grouping common elements etc to make it easy to convert to css classes, then you should not call this a web app design. This is more like graphic designs for ads or whatever You have good skills with Design, but have you converted this into html and css. Its a nightmare. Figma gives the css for colors height etc, but does not out of box provide responsive design, and relative element positioning. For instance the lines you used are like shown as individual divs with hard coded positions. If you use any automated code generator, it will give css of 1000s of lines with duplicates style codes for each pixels you miss matched in the lines
In this modern time, it's better to learn about responsive and PWA layouts and how they transition... that's what UX/UI is all about, that said thank you for the video as it's a nice combination between AI software UI design.
good point. I think we should learn a bit of everything and master one, especially with AI that's going to change the game. the full course also teaches about adaptive layout.
I am just starting frontend design so I don't know about the field, but I assume a big problem with this is surely there must now be a service that lets you design websites and then just gives you the html and css when you are done.
@@jackmiddleton2080 There are many ways to convert things. But the question is always, what you intend to do with it. Something I personally do not like so much regarding generated HTML and CSS, is that it can cause problems, if you want to change, or use it "manually" later. Since it has been generated to be efficient for the particular service, that does not mean that it is for what you intend to do with it. Totally dependent on the project. But another way can also be to e.G. convert a Figma Layout into a Webflow Layout if you only need a frontend for a UI that is easy to maintain and does not need its own codebase etc. I think often the challenge is that there are so many possibilities to do things, which can overwhelm people until they found their preferred workflows for certain tasks.
@ 8:04 the button labels disappear when she moves on to the next bit but I don't know how this was done, someone please help explain. Thanks in advance
@@DesignCodeTeam The general design principles aren't overly complex, but I'd love to understand how you determine spacing between buttons, sections and margins. This is what fundamentally holds me back from making my own designs. Thank you :)
Meanwhile the developer after seeing this design left the job because it will be so hard to actually put this into html css js 😅😅 it will be more easy if you will teach us how to deploy this in code...
there are far harder techniques to pull if you look at the modern sites landscape, specifically stripe, apple, linear, etc. we do have courses teaching how to code this type of site: designcode.io/framer-3d-site designcode.io/react-hooks
The design is beautiful (good colors, good images), yes, BUT everything shown is a terrible development path. You don't use autolayers, you don't use components. All your work is harmful advice.
I have subscribe to the premium service on CZcams x100 and do see the component et prototype of this interface ? Don't understand, where i could find this video ?
How do you turn rectangles into frames in Figma? Because you made the side bar, search bar and others as rectangles and then they turn into frames. Also the search input, I don't understand how being into a the search bar frame you set the distance acording to the larger frame the search bar frame is in, instead of setting the distance accrding to the search bar frame. I'm trying to follow what you do but some things I can't do them the same.
@@MarcelinoSandroni thank you, I'll try. By the way, do you know how to increase or decrease the gradient of the radial color like she does? I can't find a way to do it.
To add a frame to the rectangle, you have two options: either select the rectangle and use the keyboard shortcut option+command+G, or right-click on your mouse and choose "Frame section" from the menu.
To modify the radial gradient, there are three circular arrow icons that you can use to adjust it. Additionally, you can change the angle of the gradient by clicking and dragging one of the circular arrow icons.
The only problem with AI voice and AI script editing is it can make it feel like less effort went into creating the content which might turn some people away. Though it is clear to me a lot of effort went into this. And as the technology gets even better maybe nobody will be able to tell the difference.
We spent 2 months on this course. We definitely didn’t cut corners. We use AI for quality, as our instructor struggles with English and there is a thick accent. We’ll try to get better!
Wow, how cool, look at this one hundred and thirty-ninth generation that artificial intelligence did, it's going to be the one we're going to use and say we did the whole creative process
@@DesignCodeTeam There is a big difference between the - supposedly - creative process carried out by artificial intelligence and the creative process carried out by the intelligence of a human being, but that is the point, the input of each one. AIs manage to offer a great product with very little, in a few years, it may be that even if it is the most random it is, the countless generations it makes are great, and this is where the problem comes in, let's assume dedicated artificial intelligence for the creation of visual identity for brands and companies, WHY? Why would I need an artist? If mostly the artistic market demand does not care if the product is more or less artistic, what matters is only if it works and is applicable, something that AI can do well. Using AI as a tool to expand creativity is contradictory, because in many cases, you don't even have to think about it, AI already manages to make a great mix of images which you predominantly already like and even in its initial stages of learning, in these cases it doesn't there is no human creative process, there is only the act of clicking buttons. Do you realize how irrelevant being creative is in all these situations? It may happen that the profession does not cease to exist due to a requirement of division of labour and specialization, but the area in many sectors will be greatly undervalued, that is, making a living from art will become increasingly impossible or difficult.
Within the video, we made it clear that downloading the asset is a necessary step for applying both color and text style. We also provided a demonstration on how to add your own color. For your convenience, we have included a link to the asset in the description. www.figma.com/community/file/1218595052516978368
- we did take inspiration from the yt layout, but we added quite a bit of customizations to it. we broke it down into wireframes, styles, components, variants, etc. that was the challenging part, and of course the teaching part. - we were still new to midjourney at the time so we took the time to explain that process. the next course will dive a lot deeper and use it more for ui designs, etc. - the vast majority of this course is free. - thanks for your feedback. we'll do better at explaining the layout. - sorry if you don't like it. - it doesn't hurt to be nice in life.
@@DesignCodeTeam I like that answer, also Im reviewing it as a paid product, theres way too many useless courses that dont teach nothing about designing real products and only show some useless trends that wont ever help anyone
the truth is, our team is learning too. it's both our weakness and strength. weakness because we do tend to fall more into trends as beginners; strength because they can relate to us. we'll get better!
"You can CREATE" HAHAHAHA it's artificial intelligence that does it for you, there is no such thing, you can't take something that the AI DID and say that you did it
as an artist who ran a community of 50k artists and did many graphic designs in 20 years, I understand the frustration towards ai. but I think it's healthy to think of it as a tool, to find inspirations, be more productive and expand your knowledge quicker. I do agree that if you *only* use it to copy without efforts, ai is not the future I want to see. for example, an artist can take their own work and recreate that work multiple times for many concepts for clients.
The most underrated channel i ever visited❤
Your videos are complete GEMS💎.
Keep creating these great content 🙌
that's so lovely to hear
Completely agree with you 🙏
This is the best tutorial I've ever seen.
thanks so much, this means a lot to the team!
If you arent following standard practise of a web app design like containers, section, headers, autolayouts, containers, grouping common elements etc to make it easy to convert to css classes, then you should not call this a web app design.
This is more like graphic designs for ads or whatever
You have good skills with Design, but have you converted this into html and css. Its a nightmare. Figma gives the css for colors height etc, but does not out of box provide responsive design, and relative element positioning. For instance the lines you used are like shown as individual divs with hard coded positions. If you use any automated code generator, it will give css of 1000s of lines with duplicates style codes for each pixels you miss matched in the lines
In this modern time, it's better to learn about responsive and PWA layouts and how they transition... that's what UX/UI is all about, that said thank you for the video as it's a nice combination between AI software UI design.
good point. I think we should learn a bit of everything and master one, especially with AI that's going to change the game. the full course also teaches about adaptive layout.
I am just starting frontend design so I don't know about the field, but I assume a big problem with this is surely there must now be a service that lets you design websites and then just gives you the html and css when you are done.
@@jackmiddleton2080 There are many ways to convert things. But the question is always, what you intend to do with it. Something I personally do not like so much regarding generated HTML and CSS, is that it can cause problems, if you want to change, or use it "manually" later. Since it has been generated to be efficient for the particular service, that does not mean that it is for what you intend to do with it. Totally dependent on the project. But another way can also be to e.G. convert a Figma Layout into a Webflow Layout if you only need a frontend for a UI that is easy to maintain and does not need its own codebase etc. I think often the challenge is that there are so many possibilities to do things, which can overwhelm people until they found their preferred workflows for certain tasks.
That's some beautiful gradients!
OMG, this website and animations are so beautiful! Thanks for the video
Love how you made your voice as an AI voice clone. I made mine, too. 🙌
Makes it easier to understand and transcribe! :)
@@DesignCodeTeam exactly. I used that, too.
What did you use?
@@ndrwumelevenlabs is best
What did u use？
i only see a recreated youtube layout.
This is a great channel. It’s been really helpful. Thanks very much for sharing.
that means a lot, thank you!
@ 8:04 the button labels disappear when she moves on to the next bit but I don't know how this was done, someone please help explain. Thanks in advance
You just used AI for the graphic material, and then the video title is Web UI deaign with AI?
Hey this is really awesome. I really like it. Thanks for your contribution.
My pleasure!
It is very easy for you, but we have difficulties while coding.
Give me invalid discord invitation after pressing join the beta, can I fix this?
what could this art style that is featured at 00:50 seconds be called? the current, general style.
It was great session watching your work
Glad you enjoyed it!
Excellent work
Many thanks
I always make new knowledge on your videos but i wanted ask will you make courses for beginners? Thank you before hand for answer
Our courses are mostly for beginners. Which part is too difficult? :)
@@DesignCodeTeam The general design principles aren't overly complex, but I'd love to understand how you determine spacing between buttons, sections and margins. This is what fundamentally holds me back from making my own designs. Thank you :)
@@jordansaycell4227 once you highlight/select a particular frame, press Alt key it will show the spacing pixel.
WTF in 8:03 u had difference names of frames/groups and then switch to another names and they looks like all be frames now ? ???
Meanwhile the developer after seeing this design left the job because it will be so hard to actually put this into html css js 😅😅 it will be more easy if you will teach us how to deploy this in code...
there are far harder techniques to pull if you look at the modern sites landscape, specifically stripe, apple, linear, etc.
we do have courses teaching how to code this type of site: designcode.io/framer-3d-site
designcode.io/react-hooks
@@DesignCodeTeam VoCê pode fazer um video Explicando como Exporta esses códigos de animação botão para o ELEMENTOR?? ou não é possivel de fazer?
YAYYYYYYYYYYY!!!
❤️
ALGUEM TEM O HTML COMPLETO DISPONIVEL ?
Clickbait starts at 33:50
amazing
thank you!
The design is beautiful (good colors, good images), yes, BUT everything shown is a terrible development path. You don't use autolayers, you don't use components. All your work is harmful advice.
I have subscribe to the premium service on CZcams x100 and do see the component et prototype of this interface ? Don't understand, where i could find this video ?
Hi, we’re still editing that video and will release it at the end of the week. Thanks for subscribing!
@@DesignCodeTeam Cool, i'm waiting for it so excited !
Any news ? I don't see the release of the prototype, inteface of this interface + the vidéo section like we see in the teasing. Thank you
When you release the tuto with video player like youtube with this design. You told me next weekend 2 weeks ago
there is a bit of video in your ads
How do you turn rectangles into frames in Figma? Because you made the side bar, search bar and others as rectangles and then they turn into frames. Also the search input, I don't understand how being into a the search bar frame you set the distance acording to the larger frame the search bar frame is in, instead of setting the distance accrding to the search bar frame. I'm trying to follow what you do but some things I can't do them the same.
I think it's auto layout, try to learn figma resources and shortcuts, the only think you need to be better in anything is practice
@@MarcelinoSandroni thank you, I'll try. By the way, do you know how to increase or decrease the gradient of the radial color like she does? I can't find a way to do it.
To add a frame to the rectangle, you have two options: either select the rectangle and use the keyboard shortcut option+command+G, or right-click on your mouse and choose "Frame section" from the menu.
To modify the radial gradient, there are three circular arrow icons that you can use to adjust it. Additionally, you can change the angle of the gradient by clicking and dragging one of the circular arrow icons.
@@DesignCodeTeam thank you for your replies, you're very kind ❤️
You are a diamond 💎
Great to hear!
Nice one
Thanks 🔥
The only problem with AI voice and AI script editing is it can make it feel like less effort went into creating the content which might turn some people away. Though it is clear to me a lot of effort went into this. And as the technology gets even better maybe nobody will be able to tell the difference.
We spent 2 months on this course. We definitely didn’t cut corners. We use AI for quality, as our instructor struggles with English and there is a thick accent. We’ll try to get better!
@@DesignCodeTeam I think you did an incredible job and disagree with that person. The effort is extremely obvious here. Thank you so much
great copy of youtube!
this effects are the nightmare of css devs =P
it never hurts to learn :)
I can use this in production?
This asset is for personal use only.
the content is great probably but the voice could not be more boring than that
OMG
thanks !
Good jod, I like you,....
So nice 😍
look at this bot bro hahahaha
Function of professional artists in the future: Clicking buttons
Wow, how cool, look at this one hundred and thirty-ninth generation that artificial intelligence did, it's going to be the one we're going to use and say we did the whole creative process
we do click buttons, that has always been the truth since computers.
@@DesignCodeTeam There is a big difference between the - supposedly - creative process carried out by artificial intelligence and the creative process carried out by the intelligence of a human being, but that is the point, the input of each one. AIs manage to offer a great product with very little, in a few years, it may be that even if it is the most random it is, the countless generations it makes are great, and this is where the problem comes in, let's assume dedicated artificial intelligence for the creation of visual identity for brands and companies, WHY? Why would I need an artist? If mostly the artistic market demand does not care if the product is more or less artistic, what matters is only if it works and is applicable, something that AI can do well.
Using AI as a tool to expand creativity is contradictory, because in many cases, you don't even have to think about it, AI already manages to make a great mix of images which you predominantly already like and even in its initial stages of learning, in these cases it doesn't there is no human creative process, there is only the act of clicking buttons. Do you realize how irrelevant being creative is in all these situations? It may happen that the profession does not cease to exist due to a requirement of division of labour and specialization, but the area in many sectors will be greatly undervalued, that is, making a living from art will become increasingly impossible or difficult.
Nice tutorial
Thank you! Cheers!
The problem with mid journey is, every artwork seems to be created by the same artist.
Unless you tell it to do otherwise, of course
Is it AI talking?
It’s AI voice cloning from a real voice
@@DesignCodeTeam Yeah, it sounded artificial
and the second one, how the fuck can i import ur color style in stroke properties, imagine i have a head ache trying do this shit since 2 hours xD
Within the video, we made it clear that downloading the asset is a necessary step for applying both color and text style. We also provided a demonstration on how to add your own color. For your convenience, we have included a link to the asset in the description.
www.figma.com/community/file/1218595052516978368
ok
You are 👽
I think the one talking on the video is an AI AHAHA
It’s an AI voice cloned from a real voice. We do this to sound more clear to the viewers. But it’s all prepared meticulously by a human.
@@DesignCodeTeam thank you for this tutorial. I'm still a beginner, I gonna watch more of your videos
😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮
Copy pahhst. 😂
you sound like an AI
- copy yt layout 1 to 1
- add gradients and glassmorphism
- use ai for nothing but some thumbnails
- sell course
🤡
- spit some useless pixel values instead of explaining layout
- we did take inspiration from the yt layout, but we added quite a bit of customizations to it. we broke it down into wireframes, styles, components, variants, etc. that was the challenging part, and of course the teaching part.
- we were still new to midjourney at the time so we took the time to explain that process. the next course will dive a lot deeper and use it more for ui designs, etc.
- the vast majority of this course is free.
- thanks for your feedback. we'll do better at explaining the layout.
- sorry if you don't like it.
- it doesn't hurt to be nice in life.
@@DesignCodeTeam I like that answer, also Im reviewing it as a paid product, theres way too many useless courses that dont teach nothing about designing real products and only show some useless trends that wont ever help anyone
the truth is, our team is learning too. it's both our weakness and strength. weakness because we do tend to fall more into trends as beginners; strength because they can relate to us. we'll get better!
"You can CREATE" HAHAHAHA it's artificial intelligence that does it for you, there is no such thing, you can't take something that the AI DID and say that you did it
as an artist who ran a community of 50k artists and did many graphic designs in 20 years, I understand the frustration towards ai. but I think it's healthy to think of it as a tool, to find inspirations, be more productive and expand your knowledge quicker. I do agree that if you *only* use it to copy without efforts, ai is not the future I want to see.
for example, an artist can take their own work and recreate that work multiple times for many concepts for clients.
A+ content!
That's some beautiful gradients!
Thank you! Cheers!