Design A Landing Page in Figma
Тәжірибелік нұсқаулар және стиль
Design a simple, dark landing page in Figma.
Quick links:
0:00 - Introduction
0:30 - Text Styles
3:43 - Colour Styles
5:08 - Grid Style
10:58 - Designing the Hero
16:40 - Icon Feature Section
21:50 - Media Feature Section
32:40 - Footer Section
40:35 - Conclusion
Stay in touch
/ jgeizerux
dribbble.com/jordangeizer/
jordangeizer.com/
Music from Uppbeat:
uppbeat.io/t/infraction/ultra...
License code: 8S1S14ZKPV1A272M
Пікірлер: 70
The proof that I'm no more a beginner is that I watched it in 1.5 playback speed and still understood everything! Jordan! This is such a top quality content! Woooahhh! 🔥
amazing, But it would be great if you colud reduce the speed so that the beginners could understand better
Great tutorial!! Some people are complaining about being advanced, not for beginners. But it's exactly what I need. There are no tutorials In youtube for advance users. They are all beginner-level.
I love this stuff, man. Carefully planned out and executed...in 40 minutes! Well done.
This is the quality of content that I was looking for. Please do more of these explanatory vids. Thanks!
You just changed my entire design game - thank you so much!!!
I am simultaneously in awe and horrified by your speed! (I'm a beginner, so I'm as speedy as a snail on valium)
Learned a lot from this. Starting with a Type System the way you have, and including a Vertical Rythem, will help the overall feel of the design. Really appreciate your approach to designing.
@JordanGeizer
2 жыл бұрын
Thanks mate! Glad you found it useful.
very easy to understand for beginners. Thank you very much for making this video, hopefully, this channel will continue to grow in the future 👍👍
Thanks a lot for sharing mate. This was really useful especially creating design systems and components
It was easy to repeat after you, incredible work, thanks a lot!
Hi. loved your video. you mentioned alot about prepping the work "for a developer"... As I am principally a designer, I'd love for you to do a video on how to prep work for a developer and what should be the "skill" boundaries in the web building process for both the designer and the developer... thank you again for your video. Also to those who think he may have gone too fast, I would suggest that you: view video, pause video, execute technique, rewind/review, REPEAT! This is a 40 minute video and I got through it in about 90 minutes. Jordan is a well-versed instructor, which cannot be said about some of the tutorial content on KZread. The thing is, it's not about "getting through it fast", it's about retaining and applying the information confidently. The more you do this, the faster you will get, but more importantly you will retain the knowledge and build your skillset... Thanks again Jordan!
@JordanGeizer
2 жыл бұрын
Thank you for your support Maxx. Means a lot mate! Stoked you're interested in this topic. I've been working on a video that summarises things I've learnt about design/developer collaboration. Hopefully have something to share in the new year.
Thank u so much you created this video Jordan! I learned a lot, plus the narration is really helpful. All the best man!
I'm from Brazil! Thank you very much, from my heart! Thanks to your teachings, I improved in figma and even built my first Landing Page, haha!
great stuff, very well planned and learnt alot.
Please keep posting like this. Learned a lot.
WOW, this design is so helpful thanks so much
wow, bro, you are an excellent mentor, I watched this tutorial in 40 minutes, and now I will start again for practice, thanks bro. We want more Figma tutorials please please, please
Fantastic!
Very nice layout!
I learned a lot from this video. thank you so much🙏🙏 it was too fast for me because i am a beginner please do more 🙏
Great content! Keep it up Jordan :)
@JordanGeizer
2 жыл бұрын
Thank you Elle! :D
Amazing!
Thanks for the lesson! 🔥
This might helpful for average & beginners for sure, I Hope You will continue UI/UX ahead (Thanks) 🥰🙏
Great content!
Very well done 👍
this is great my friend
i love this
I need more from these tutorials
REMEMBER TO PLAY IN 0.75. Amazing Tutorial!
thanks man
You are the best
Bro Perfect 👍
so thorough
You deserve million subscriptions 💜. Hope it happen soon
@JordanGeizer
2 жыл бұрын
Thank you so much 😀
Thanks!
Take love from Bangladesh. ❤️
Awsome dude👍👍
@JordanGeizer
2 жыл бұрын
Thank you!
Very thorough tutorial. Thank you. Can you share the figma file, for both the desktop and mobile version? I'd like to study the file. I've followed the video but still have some things to figure out.
Thank you 😊 from 🇲🇳
@JordanGeizer
2 жыл бұрын
Rad! Thanks for watching! 😊
thank you so much for the tutorial Jordan, super helpful. Question, how did you know the spec of each section on the website. For example, how did you know the height of the header, the section for the icon features, the section for the media feature, and etc. is there a guide for that, or thats more like a visual decision? Thank you!
At 0:55 what do you mean by setting vertical rhythm? Can you explain what you did there?
Very thorough tutorial. Thank you. Can you share the figma file, for both the desktop and mobile version? I'd like to study the file. I've followed the video but still have some things to figure out.I watch your every video from Bangladesh
I was having problem with the fill container and scaling object like text and button but I just realize that figma have a tool called scaling tool which fixed the problem for me
Hey buddy. I enjoyed this tutorial, however it was a little bit fast could u please drop the figma file link so beginners could use this file to know how you designed every element. Thanks mate
@majoralter
Жыл бұрын
Reduce the speed yourself
Great tutorial mate, thank you! Is there a reason why I wouldn't see the footer section once I clicked play to view the prototype? Everything is showing up, apart from the footer. I guess it's the only section that isn't a frame?! Cheers!
@JordanGeizer
2 жыл бұрын
Cheers Dali! Sorry I only just saw this. Yea, there's a couple of reasons why that would be happening. You're right, first I'd check that the group is within a frame. If it's not within the "Landing Page" frame, it won't show. Or, if the group is within the "Footer" frame, it's possible that the parent "Landing Page" frame height has flipped to fixed height (should be set to hug contents) and is clipping off the bottom of the footer. Hope that helps!
Hi-quality content man! Thanks a lot! Sorry about some foolish question..) if you add a new element to a canvas, it's always going to a new layer on the top of all existing layers.. I add a footer frame for example, and if I put it into the general auto layout frame (landing), I have to put it as the last one on the bottom of all layers..but I noticed its different in your layers panel and a new footer frame is on the top.. I can't change that, if I move up this layer on the top, it's move that frame on the top too.. What's wrong with that?
@JordanGeizer
2 жыл бұрын
My pleasure mate! Thank you. And not a foolish question at all. Figma changed how autolayout works a couple of months back, the layer order is now flipped. :)
@feldv99
2 жыл бұрын
@@JordanGeizer Oh thank you :)
Great tutorial and I am following it. But as I am beginner so its little too fast for me. Otherwise it is a great tutorial
@JordanGeizer
2 жыл бұрын
Thanks Sofia! Appreciate the feedback, I'll work to slow them down in future.
Thank you but your speed is too fast for a beginner and you skip to explain some crucial steps. For example how did you reattach instance after adding up texts to h2copy. I have been on your video for the whole week going back and forth to understand where you moved from and where you moved to.
Really awesome tutorial but you were too fast for beginners to catch up. its fine if the videos is in parts.
Hey, you are playing the video too fast it could be a bit slower...
Well Life of a noob ain't fun been on 8 mins for 2 hours
Good tutorial but, if you are a beginner, this one is not for you.
If you're really willing to help and not just to add resume stand outs please make it slower thank you
Nbcf
That's too fast to understand for beginners
Why not go faster just to make it impossible to keep up. And don't explain anything at all while youre going through the use case of Figma. We're not interested how to do it ourselves.
Not beginner friendly at all.