No video

How to wire-frame & design a landing page in Figma

  Рет қаралды 110,893

How to design

How to design

Күн бұрын

Learn how to wireframe & design a landing page for a travel company in Figma.
#figma #dribbble #landingpage #webdesign #design #wireframe
Image link
unsplash.com/p...
Image : Unsplash
music : audio library
Please Follow, Subscribe & Support our channel:
You Tube : / howtodesign21
Instagram : / how2_design
Reddit : / how2design
Facebook : / how2design-10063789920...
Our Blog : how-to-design2...
Buy me Coffee : www.buymeacoff...

Пікірлер: 111
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Visit Our channel press the bell icon for notification & click subscribe for more: kzfaq.info
@gtxstudio
@gtxstudio Жыл бұрын
The amount of value your videos provide to those of us new to the industry is insane. Thank you for all the hard work!
@Howtodesign21
@Howtodesign21 Жыл бұрын
Hey thanks 🙏 appreciation motivates.. Since i am not well last 6-7 months couldn’t get time to put more videos consistently. Subscribe and will upload more and more videos to our channel in coming days👍
@vincentmichael499
@vincentmichael499 8 ай бұрын
Great tutorial. I appreciate the effort put into making this. I have one complaint, it is too fast to follow (even at 0.5 playback speed), and with no verbal explanation to guide the viewer, it makes it a bit hard for one, especially a beginner, to follow through. I do not mind if it was 30 min long but with human verbal interaction.
@user-zw7ig7dk1q
@user-zw7ig7dk1q 2 ай бұрын
Finally I done my assignment thanks bruh❤
@davidnssien3646
@davidnssien3646 Жыл бұрын
Very soothing music👍
@sofun728
@sofun728 2 жыл бұрын
It will very helpful if you give... write process in sub title. Good design 👍👍 Love it
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Thanks 😊 addling subtitles or supers will increased (now a days people don’t watch lengthy videos) our video length and that is not good for our channel views. But will do that detailed supers/subtitle video in coming days 👍
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Visit Our channel press the bell icon for notification & smash that subscribe button for more videos: kzfaq.info/love/9j0a_lW2_qwpEq1BLolBrQ
@osolinkcanada
@osolinkcanada Жыл бұрын
Very interesting, thanks for sharing such good videos.
@Howtodesign21
@Howtodesign21 Жыл бұрын
Thank you 😊
@Howtodesign21
@Howtodesign21 Жыл бұрын
Check this full page design of real estate with bit of prototype also How to set grid & design a full landing page in Figma. kzfaq.info/get/bejne/jqyiqa2ItNaZXWg.html
@anonymous_basics
@anonymous_basics 6 ай бұрын
nice one
@gunlimited2001
@gunlimited2001 2 жыл бұрын
Good work 👍
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Thanks man
@disabled8156
@disabled8156 2 жыл бұрын
Amazing work!
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Thanks 😊
@hibaimene9684
@hibaimene9684 Жыл бұрын
This was so cool, thank you for sharing!
@Howtodesign21
@Howtodesign21 Жыл бұрын
Than you 😊
@mustafawasif1280
@mustafawasif1280 8 ай бұрын
That was amazing and simple . Nicely done. I am looking for an internship in UI/UX. Could you suggest some remote opportunities?
@AdeniyiWaheed
@AdeniyiWaheed 2 ай бұрын
Would you like to design it?
@mustafawasif1280
@mustafawasif1280 2 ай бұрын
@@AdeniyiWaheed yes
@uiuxdesigner188
@uiuxdesigner188 Жыл бұрын
Great
@Howtodesign21
@Howtodesign21 Жыл бұрын
Thanks👍
@paulgreblick
@paulgreblick 9 ай бұрын
I thank you for design is amazing, but where is the “how to” part? This title was misleading. It should have not said “how to” but “watch me design one”.
@Howtodesign21
@Howtodesign21 4 ай бұрын
sorry you felt that . its speed art video. will do a detailed code on that
@argoharutyunyan8960
@argoharutyunyan8960 2 жыл бұрын
Niceee
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Thanks
@techtrendstoday
@techtrendstoday 2 жыл бұрын
nice
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Thanks
@relaxmind31
@relaxmind31 Жыл бұрын
very nice
@Howtodesign21
@Howtodesign21 Жыл бұрын
Thanks
@AttiqueAhmad913
@AttiqueAhmad913 Жыл бұрын
Please upload latest trend designs with vocal explanation
@lizzyrufus1934
@lizzyrufus1934 Жыл бұрын
Thank you so much for this video. I am self-learning and I was able to do the design, but when I added the backgroundnpicture. It covered all that I did. I couldnt view any text again! Pls hiw can I resolve this?
@Howtodesign21
@Howtodesign21 Жыл бұрын
Thanks I think image must’ve stayed up on the text. Just go to layers panel in figma select image layer and draged down below text (all text) layers …👍
@sharparun9626
@sharparun9626 2 жыл бұрын
Super 😍
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Thanks
@muldoon67
@muldoon67 2 жыл бұрын
What is the reason (apart from price), that you would do this in Figma rather than say AI/PS? I am trying to get an understanding of the new toolsets available that are perhaps more geared towards UI
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Hey brother firstly Figma is free. Yes you can do it ai or ps no doubt but Figma is more efficient than ai technically to work for digital also the plug-ins that helped effectively for ui design to hand over to the developer. That you can’t do it easily in ai or photoshop 😊
@RD-jr8nv
@RD-jr8nv 2 жыл бұрын
Just to expand on the previous reply. Figma is purpose built for designing websites and applications. Illustrator is a vector tool used typically for creating print content, logos, posters etc. Photoshop was originally intended for photo editing. So in short, Figma caters specifically for web, app design.
@Howtodesign21
@Howtodesign21 2 жыл бұрын
100% perfect 👍
@acps78
@acps78 2 жыл бұрын
Ai and ps have different purposes. Adobe XD is more comparable to Figma. Figma and XD are softwares purely made for design
@Howtodesign21
@Howtodesign21 2 жыл бұрын
True👍
@yashikaverma6048
@yashikaverma6048 Жыл бұрын
Please guide about the spacing and margins you choose in beggning.
@Howtodesign21
@Howtodesign21 Жыл бұрын
Soon Will puting a separate video on grid margin setting where you can get a idea on which artboard like desktop, iPhone iPad or random display 👍 which grid and margins you can set.
@amarsharri1472
@amarsharri1472 2 жыл бұрын
I am a front-end developer. I want to design mobile apps and websites, how long does it take to learn UX/UI design? And how long did it take you to learn UX/UI design?
@Howtodesign21
@Howtodesign21 2 жыл бұрын
well learning ux or ui design takes time. when you do some online course minimum it 4-6 months. but actual learning started when you start working on real projects. I do graphic design since 7-8 years. also self taught online learner. Learning ui design took me less time than usual time but ux design is bigger part than ui design still I am exploring learning. check. these link www.interaction-design.org/literature/topics/ux-design app.uxcel.com/courses you are front end developer then ux design is easier for you.
@amarsharri1472
@amarsharri1472 2 жыл бұрын
@@Howtodesign21 thank you man. It was really helpful.
@aniketshukla2426
@aniketshukla2426 Жыл бұрын
This is amazing, but I'm confused, Isn't this a hi-fi or a high fidelity mockup something, I'm very new to UI/UX, Figma and everything, and I've read wireframes, are those simple, layouts with boxes and lorem ispum texts, can anyone explain please??
@SnoopDhaliwal
@SnoopDhaliwal Жыл бұрын
Yes wireframes are exactly that, just grey scale boxes with lines and dummy text. However it says in the title of the video "wire-frame AND design" aka user interface design (color, imagery, etc.) This video shows both UX and UI design all in one video. Keep in mind this is not the full process of UX and UI studies but just the end product of it.
@julianudumma5955
@julianudumma5955 Жыл бұрын
Where can I get some of the icons I'm new to UI design it's so difficult for me,and I'm self learning so it's almost like I don't know my way around it. I don't even know how to drag a file from my Google drive to figma in my Hp PC. Please do you have a video on this?
@Howtodesign21
@Howtodesign21 Жыл бұрын
Hey it’s totally fine you don’t know the things it’s. Start using figma app. In figma there there is section called plug-ins where get pre-made icon’s which you can use it for free for your design.
@aroonaabid7735
@aroonaabid7735 23 күн бұрын
kindly share image used in this
@Howtodesign21
@Howtodesign21 23 күн бұрын
Link is there in video description
@Arthur-mf8lk
@Arthur-mf8lk Жыл бұрын
Great Video. What's the font? Is it poppins or what?
@Howtodesign21
@Howtodesign21 Жыл бұрын
Thanks …. Yes its is 👍
@bilalkhalil6067
@bilalkhalil6067 2 жыл бұрын
WHERE IS YOUR TEXT PANEL IN THE DESIGN
@Howtodesign21
@Howtodesign21 2 жыл бұрын
Hey bro , text panel is there , but have already made text styles to use it while designing. It’s easy. It’s useful when you have brand guidelines of your client👍
@motivation_foryourday
@motivation_foryourday 2 жыл бұрын
hello, how do you display a border that you can drag and drop
@AdeniyiWaheed
@AdeniyiWaheed 2 ай бұрын
I can help you with it
@realfactsmedia7
@realfactsmedia7 2 жыл бұрын
Sir how you add images in clipping mask from plugin. . . When I try, figma force me to chose image from laptop gallery,
@Howtodesign21
@Howtodesign21 2 жыл бұрын
When you draw a box frame in inspector panel where you see fill image option there you get image replace option..
@vladimirbernard6959
@vladimirbernard6959 Жыл бұрын
how do i add the image inside the wireframe showing the buttons
@Howtodesign21
@Howtodesign21 Жыл бұрын
For placing image you just need to import image or drag the image in the artbord.
@ninnagomarteli
@ninnagomarteli Жыл бұрын
This is exactly the video I needed, but its so fast😢
@Howtodesign21
@Howtodesign21 Жыл бұрын
Thanks 🙏 We apologise for the speed of video. It’s purposely kept fast because no one clicks on longer video now a day’s. But still you still watch it. Change the playback speed of video in KZfaq to from normal to 0.25x. Video will look normal to you.👍
@ninnagomarteli
@ninnagomarteli Жыл бұрын
@@Howtodesign21 That's how I watched it. It would be very helpful if it had some captions or explanations. Great job though
@Howtodesign21
@Howtodesign21 Жыл бұрын
Appreciated.. will think over your suggestion and used it to our next videos👍
@AttiqueAhmad913
@AttiqueAhmad913 Жыл бұрын
Watched your video first time and inspired too you deserve like comment and subscribe channel
@Howtodesign21
@Howtodesign21 Жыл бұрын
Thanks man 👍
@vegatables3457
@vegatables3457 11 ай бұрын
why everybody shows how to design simple landings, but no one shows full projects with prototyping all pages to get clear understanding
@Howtodesign21
@Howtodesign21 11 ай бұрын
Well full landing page design and prototype… check our this video kzfaq.info/get/bejne/jqyiqa2ItNaZXWg.htmlsi=X9YgM26lSH8rIiv4 For more detailed video of all websites pages it will be tooo long video for viewers, but in coming days will be doing a part part video of full website design and prototype…
@user-ln5gn1zr8y
@user-ln5gn1zr8y 5 ай бұрын
i need this Image
@Howtodesign21
@Howtodesign21 5 ай бұрын
It’s on unsplash
@aroonaabid7735
@aroonaabid7735 23 күн бұрын
image share kr den jo use ki h is design m
@Howtodesign21
@Howtodesign21 23 күн бұрын
Link unsplash.com/photos/man-taking-photo-of-hot-air-balloons-eOcyhe5-9sQ
@aroonaabid7735
@aroonaabid7735 22 күн бұрын
@@Howtodesign21 thank u❤
@vgbeats2105
@vgbeats2105 Жыл бұрын
i dont know they dont give the images need to make the websites
@Howtodesign21
@Howtodesign21 Жыл бұрын
You talking about unsplash???
@TimandLauren
@TimandLauren Жыл бұрын
How do you know where things get placed, what size the shape/textt should be?
@Howtodesign21
@Howtodesign21 Жыл бұрын
Well that’s your design aesthetic sense, years of design learning and work experience.
@TimandLauren
@TimandLauren Жыл бұрын
@@Howtodesign21 gotcha Is there a technical rule to follow or do you just go by eye? Read some Ui Design books where like shapes/text have to be a certain pixel apart, etc.
@Howtodesign21
@Howtodesign21 Жыл бұрын
Yes rules comes under design learning part as i said. Then there is experience cones rule i follow is 4x4
@t.sujithreddy6750
@t.sujithreddy6750 2 жыл бұрын
Where can I get that background img
@Howtodesign21
@Howtodesign21 2 жыл бұрын
its mentioned in details bro.. its from unsplash a free image gallery👍
@AdeniyiWaheed
@AdeniyiWaheed 2 ай бұрын
@@Howtodesign21 I can help you
@daniellegathings7651
@daniellegathings7651 Жыл бұрын
How do I get the ruler ?
@Howtodesign21
@Howtodesign21 Жыл бұрын
Go to figma menu select view select ruler 📏 or use shift R
@daniellegathings7651
@daniellegathings7651 Жыл бұрын
@@Howtodesign21 okay thank you
@edw_o9739
@edw_o9739 Жыл бұрын
And after this? How i can export this landing in a real website
@Howtodesign21
@Howtodesign21 Жыл бұрын
Well after this you can give this file to developer and he will covert to HTML and upload it to web. Or if you have webflow, hostinger, xpert app, or framer app etc if you know all these apps you can do it your own👍☀️
@AdeniyiWaheed
@AdeniyiWaheed 2 ай бұрын
Are you get it?
@mariunni3174
@mariunni3174 Жыл бұрын
Someone help me to find the picture i need it now 😢
@Howtodesign21
@Howtodesign21 Жыл бұрын
You will get it websites like unsplash, pxels, and so on.. also you creat anything in mid journey
@Decademia
@Decademia 7 ай бұрын
Hate that I always find musical videos... Why don't you talk and explain?
@Howtodesign21
@Howtodesign21 7 ай бұрын
Hey, we apologise for inconvenience.. this one is speed art video not talking and if we add talking (vo). then this video became so big that no one would watch this, or even click. Because of this new world shorts and reels content. And for a small channel this you tube algorithm go’s against the channel. Soon Will be uploading talking video on different topic..👍
@Decademia
@Decademia 7 ай бұрын
@@Howtodesign21 you should foresee the benefits of doing longer and explained videos. I can asure you it works.
@Howtodesign21
@Howtodesign21 7 ай бұрын
@Decademia yes sure will try step by step increase length of videos soon, thanks again. Appreciated 😎 bro
@Decademia
@Decademia 7 ай бұрын
@@Howtodesign21 I’m sure It’ll work for you. And keep working!
@aroonaabid7735
@aroonaabid7735 23 күн бұрын
share image
@Howtodesign21
@Howtodesign21 23 күн бұрын
It’s there on below video description 👍
@TheBoysMemes123
@TheBoysMemes123 Жыл бұрын
I want the design pls can you send it
@Howtodesign21
@Howtodesign21 Жыл бұрын
Yes give us time will give you link
@matthewpham2359
@matthewpham2359 2 жыл бұрын
Ok but how do you make it on an actual website. That’s where I’m stuck rn.
@rockcosta6471
@rockcosta6471 2 жыл бұрын
Learn webflow its highly effective to create websites in webflow & designig in figma
@sanjay6242
@sanjay6242 Жыл бұрын
Convert it into html and css code
@fabiookonolanguages
@fabiookonolanguages Жыл бұрын
@@sanjay6242 any tutorial?
@baskerb7408
@baskerb7408 Жыл бұрын
ok, but very fast, first you explain, then you do the design
@Howtodesign21
@Howtodesign21 Жыл бұрын
Yes. Apology for that…this video is speed art but tried to explain the important steps from process which we are doing after the slide text slide. Now days people attention time has changed. No one wait for long videos. If you want proper 20 minutes detailed video link reply me here… Support page👍 www.buymeacoffee.com/How2design
@Businessbts9
@Businessbts9 Жыл бұрын
This is not a landing page
@Howtodesign21
@Howtodesign21 Жыл бұрын
Yes… true landing page can many different way… this just a demo little part you can se.. landing page have your best feature and call to action also other more detailed things depending on your brand.👍 if you want we will upload a new video which has a particle demo of one of my clients landing page✌️
Figma Tutorial For Beginners 2024 | Web Design of Landing Page
17:46
How to wireframe & design a full landing page in Figma.
9:01
How to design
Рет қаралды 18 М.
Кадр сыртындағы қызықтар | Келінжан
00:16
🩷🩵VS👿
00:38
ISSEI / いっせい
Рет қаралды 13 МЛН
Ouch.. 🤕
00:30
Celine & Michiel
Рет қаралды 43 МЛН
Perfect Landing Page Design Explained (in 5 minutes)
8:00
Flux Academy
Рет қаралды 368 М.
From Figma to a 3D Web Page with Dora Plugin - No code Tutorial
12:16
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 782 М.
Design A Landing Page in Figma
40:51
Jordan Geizer
Рет қаралды 66 М.
Design The Perfect Hero Section (With Example)
12:24
Flux Academy
Рет қаралды 296 М.
Amateur vs Pro UI Design | with examples
20:46
Jesse Showalter
Рет қаралды 77 М.
The CORRECT (and lazy) way to prototype | Figma Tutorial
5:00
Web Design in Figma | Travel Website Figma Tutorial
16:15
DESIGNR
Рет қаралды 56 М.
Landing Page Design Tutorial | Web Design in Figma
19:32
DESIGNR
Рет қаралды 384 М.
Кадр сыртындағы қызықтар | Келінжан
00:16