Daily UI Design Challenge | Day - 01 | Sign Up Page
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- Hi guys!
Today we will design signup page in FIGMA. Let's start.
-------------------------------------------------------------------------------------------------------------------
Follow us:
Visit our website:
designsense.we...
Facebook:
Page:
/ designsense2070
bit.ly/3h5Uafm
Group:
Join our Facebook group for curated content, inspiration, design critique, and job postings:
bit.ly/3jw0VbL
Join our Webflow group.
bit.ly/3KZz3Ig
Instagram:
@designsense99
Dribbble:
dribbble.com/D...
---------------------------------------------------------------------------------------------------------------------
LS Graphics
bit.ly/3x1shKV
Collect UI:
collectui.com/
---------------------------------------------------------------------------------------------------------------------
Icon Source:
www.flaticon.com/
Source File:
bit.ly/3LxoX4i
--------------------------------------------------------------------------------------------------------------------
Music:
Song: Sapajou - Lion
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Sapajou - Lion (Vlog N...
----------------------------------------------------------------------------------
Song: Lichu - Fresh Island
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Lichu - Fresh Island (...
---------------------------------------------------------------------------------
Song: Lichu - Rain Island
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Lichu - Rain Island (V...
Hi everyone!
👌💕
I want to know software name,
U doing great man..
@@priyeshtiwari2324 figma
@@DesignSense thank u
App name tell me
Started my design learning from this video, thanks so much and I will try to do these like an assignments 😊 it's very helpful and beginners friendly.. 👍🏻
Glad to hear that, please share your practice work on our Facebook group. And get some feedbacks from our group members. 👍
@@DesignSense kindly share Facebook page link over here to show you practice work?
@@ultranature260 facebook.com/DesignSense2070?mibextid=ZbWKwL
Dude thank you! Really gives me a good direction to start thinking about design.
That's great!
Yeah right , specially that there's a demand for it in the market place . But u gotta be uniqe
@@DesignSense ye website work kese kregi? Without coding
Such a professional work. It give a motivation to work on projects. Thank you..! keep doing 😍
Thank you stay tuned for more coming videos. 😊
Totally agree, makes me want to start UI design challenges of my own!🤩
Can't believe I watch this while working. listen to the music and the real-time action feels good!
We're glad you liked it.
that music ruins the video
Thanks for this! Learning now - Icon/Logo was missing in the files folder.
did he provide the source ?
@@abdelrhmanalaa9456 Yeah, look at the links in the description, there are source files for icons and stuff
Bro, you do great work. But without voice instruction it totally useless. Because beginner doesn't which tools are you using. And what are you trying to create? Kindly add voice to make it easy for everyone.
Kind regards
Great one! I'd only suggest you changing "Sign up with--" to "Continue with--"
Thank you for the suggestions 😊
Is it possible to be both ui and ux designer
Yes
I had to subscribe after 30 seconds, amazing content! This helps a lot when I'm stuck with creative thinking. Thank you!
Glad to know that ♥️
This what is the platform to design UI?
There are I need it to start the design as like (pay plan. and etc)?
Thanks.
Figma is free or you can use other tools like pixso etc.
How do you make the vector logo it's in the place of find the 3d statement above
It's a dummy logo
I had to subscribe after 30 seconds, amazing content! This helps a lot when I'm stuck with creative thinking. Thank you!
Glad to know that!
Hey how can I get this white page and then he is doing editing how can I do this this software is paid I think please tell me
@@AnjaliKumari-rb6qb hi this tool name is figma u don't need to pay but few steps need to know 1st time u use this tool,so go and watch Figma tutorial.
So now my work is to do it with html and css and java to make it live page....
Challage accepted
😎
From where you get that 3d image for free?
Watch the full video, i have showed in the video how to download these 3d images. Thanks
Nice design however it would be nice to see what your take on mobile version of it :) This way we can learn more about design process :)
Thanks for the suggestion.
I want to start my own TH-cam channel so can you give some type of suggestions plz
Inbox on our Facebook page
Hey dude, I'm about to start learning about UI/UX. What is the name of the application you are using?
Sorry if my question is silly.
btw your design so cool
Hey, I think it's figma ;)
FIGMA
This one is made in Figma
Amazing work I'm also a TH-camr..... I like your work ❤❤❤❤❤❤
THANKS ❤️
Can you also show how to add links to the boxes and buttons we added? thanks
This is only the design.
Awesome please Make a Video with their Pressed buttons or Shortcut
Ok
It would be more convenient if you added the styles instead of eyedropping every color.
Hello, I sent in a request to join you Facebook page so I can send in my daily designs. My request is still pending 😢
Sorry I will check it soon.
Bro tell me just one thing which software should i learn First Adobe xd or figma?? 🙏🙏🙏🙏
Both software s are great and would do the job perfectly. But Figma is free so you might want to try that out first.
Both software are best and almost the same, adobe xd and figma both are free. You can learn any of it.
@@DesignSense thanks man ❤❤
@@frujunior67 thanks man ❤❤❤
You can also run Figma in browser. You don't need to install anything
What is the name of this editor
Figma
How i can turn this to a code ? Is there any way you know about it ??
I don't know much about coding 🤐
No offense but what is the point of font-end development then?
What di you mean?
Experience Transformation: Discover UX UI Pros, Your Pathway to Revolutionizing User Testing and Design Decision Confidence.
Sir how can i download this logo, cannot find in bzzzt folder from ls graphic
We should recreate this as it is as a challenge ??
Yes, but if you have your own idea, you can go with it. Then Share it in the DesignSense Facebook group or insta.
I am building a desktop software [ By Python ] how can I implement the design that I made in figma ??
Bro this is very good but how it can have links to Google and Facebook there.
Here we can't connect Google or Facebook, this is just the design. For real responsive page you need to code it.
@@DesignSense thx
Hii Sir, pls admit me in Group Facebook private.Thank youso much.
Sure
it will be better if music stopped and detailed explanation is replaced
Can I follow the same steps in XD
Yes.
How did u remove the pic background..?
Thanks for the video.
When you dowloaded the design image, what file did you copy into figma? As JPGs do not have the option to ungroup and figma does not support svgs
Thanks for your feedback
I used SVG formate and Figma does.
What are the prerequisite of this ?
Means where to start these setup and all things
I will make a video on this topic.
@@DesignSense yes please roadmap its very nice you are doing i also want to learn these things ❤️
I started practice design from this challenge from now. Thanks pretty much for your effort and videos. It's so helpful for my UX/UI designer journey. I'm lucky for got this video.
Glad to hear that! Keep it up :)
I'd appreciate it if you put a step by step caption if you're not going to talk, it's not really beginner friendly.
Thanks for the suggestion!
Can you give training for Figma?
please train me for Figma UX/UI desogn
Yes watch our daily videos regularly. If you face any difficulty. You can ask on our Facebook group 👍.
I didn't find the logo in the resources, how do I get the logo?
Let's code it
very very nice😍😍😍😍😍🥰🥰🥰🥰😘😘😘😘🤩🤩🤩🤩
Thank you so much 😀
Hello DesignSense, the videos you make are really detailed and helpful for beginners like me, but I have a question: why can't I find the sources of the images or logos you use in the videos? I clicked on the links in the description, but I couldn’t find anything.
Hey, the source file is working please try again.
Note: I didn’t include most of the source files in this series for two main reasons. First, some elements are paid, and I can't share them directly. However, you can find free alternatives on several websites. Second, I’ve shown in each video how to download those specific items, as I want to encourage you to practice finding them yourself.
Hahaha I can’t afford Adobe products or figma…
These are free, 😒
@@DesignSense how are they free?
Figma and Adobe xd is free just download it from there sites you don't need to pay for these.
@@DesignSense ahh i see thanks man
Great design. Love the background music
Thank you 😊
Started to learn design learning 2 days back and was going through tons of videos in youtube but none of it were unsatisfied because as a beginner I m not sure what are apps I need to download to proceed learning also I got to know Adobe softwares are paid...will love to know a proper tutorial from scratch and also about the softwares
Sure we will try to make a video about these topics. But you can take a course for UI UX from Udemy, Coursera, Udacity etc. But you can learn from TH-cam too for free.
I always had this doubt, now we have recreated it but how can we implement it? like have to code using it as reference? or like how to bring it to life in a website?
This is high fidelity wireframe. For real responsive design you need to code for it.
Nice work! However I'd work on accessibility more, for instance the contrast of text to background in the Logo subtitle, Language selector and Log In link at the bottom are very low contrast and would be difficult to read to someone with sight impairment. Also I don't think it's accessible to put explanatory text like Full Name, emial and password inside the text boxes, as once the user clicks there, the text hints are gone. This is considering people with cognitive impairment, who need the hints even while typing inside the text field. Hope these comments are useful. Keep up.thr good work👍
Thanks for the suggestions. 😊
Hello, where i can find that blue picture?
Hey do we have replicate same as shown in the inspiration we took or could change some thing. like Font size , style , Backgroung color
Come up with your own unique concept. Thanks
Link to download the files please
The link is given in the description
Nice clean design! I think you should pull the pink colour from the 3D image and try it as your button colour
Thank you for the suggestions😊.
Which platform you use to design this attractive looking sign up page
Adobe XD, Photoshop and illustrator
Hii guys i need some help of uh guys can any one guide me please
What's the name of graphic? the picture you used? It's so beautiful
The link is given in the description.
Bro, how do you take these type of 3D attractive and eye catching images. Tell website or figma plugins name.
You can find this image on ls.graphics. just download from there. Or download the source file. The link is in the description
Hi bro I have a request I am also a TH-camr can I convert this design to react js code so can u give permissions? And can u share the figma file with me??
Sorry i don't have that file now. But for development this page you just need that 3d illustration which is i have given the link in the description. And yes you can, just need to give credit to us and put the link to the original video in your description.
@@DesignSense Yash sure I will mention this in my video also
Which app?
Great one! But the letter "Already" is spelled with one "L")))
Which letter?
I can't believe you made that in 10 minutes..
😉
How to add this beautiful page in wordpress website?
I didn't use WordPress, I have no idea.
How can I remove the background of the icon if it is in png?
Adobe Photoshop
Which software is used?
Figma
i need help after i do the designing how should i present it or sell it i know the designing but i don't know the export or produce
You have to code it to make it functional...
@@DesignSense how that is the problem
where us can find 3D element like this ?
what application u used ?pls >??
Figma
@@DesignSense omg thanx for replying i found it yesterday and i created one with help of ur video very informative and THANKS ALOT :) i m so happy i did smth on my own
thank you soooo much. You helped me alot with figma and today i'm no longer a beginer ! great work!
Most welcome. Glad to hear that. Stay tuned
What should I do if the icon file in the folder files download is not supported by Chrome?
Download in png or svg format
@@DesignSense I did but then it's not shown in Figma..
I have done my first task. Let's see what happens!.
Good job 👍
I have a qustion, how did you make the ruler next to you?
Ctr+R
Sir plzz show down word option
Which word option?
Amazing, this can be exported to HTML / CSS directly from FIGMA ?
Not directly, but there are some plugins for it.....like Anima etc
bro can you please share all the images used in this design. please
The link is given in thr description
Why don't you include these icons and logo in a link?
The source links is given in the description
Is this it all what a UI designer does ? 🤔
???
@@DesignSense i mean if you get a job as a ui designer you just have to do this kinda thing?
@@LoneWolf-yr7zp yes
which software do you use
Figma
so you r a UI/UX designer , what u do exacltly.
UI/UX designer: i chalange front end developer.
🤔🤔?
which software is used here?
Figma
Please can you upload Icon/Logo was missing in the files folder , thanks.
I will recheck.
@@DesignSense Thank you for your reply.
@@DesignSense Can you, please?
Will you be doing this daily or weekly?
Daily 😊
is the design open source?
No
Which website editor is this?
Adobe XD
Hello everyone ....
I have windows 10 - 64 bits system...
I am installing Adobe xd latest version but after successfully installed it it can't run ..just white screen seen ...
How I will solve these problem???help me...thank you....
Amazing work I m new in your channel
I'm little confused can u please tell me that is it graphics design ??
This is UI design.
This is UI design.
@@DesignSense so If you get a job of ui designer this is all what i have you have to do?
Nice!
Did you provide the files used on here?
How did you remove the background of 3d shape object in just one click?😮
That is in SVG formate not in JPG. We can easily edit SVG's.
Can you please give us the link from where you got that vector image? We could not get it.
The link is given in the description.
@@DesignSense oh thank you so much🙂
I am having difficulty in downloading source file can you provide some other link for it plzz
It is not converting to SVG.. what the further step I should take?? Please tell me
What is not converting to SVG?
How did you remove the background of 3d image in figma?
It's in SVG format. So he easily remove background by clicking delete key
It is in svg format. We can easily edit svgs.
Hi there, How can I present my work as a professional to upload on Behance?
I mean one or two screens, not all projects. I really appreciate any help you can provide. :)
Can't find the logo file
You can use your own cutome made logo.
figma link for a front end developer to try to develop this beautiful screen to study ? 👉👈🥺
The source file is uploaded, Search the link in the description.
Can you suggest me online UI/UX design course is valuable in India or not
Yes it is.
@@DesignSense bro can you suggest me online course of UI design from where I can learn with certificate
@@ashishsharma3912 search in Udemy, Coursera, Udacity etc if you need certificat other wise you can learn from TH-cam also
in my laptop, ungroup option is not available. Shortcut key is also not working
What you want to ingroup?
Cool 👍👍
Challenge accepted 🎉
Welcome to the daily UI Challenge Series.