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

  • @alexoyebade5926
    @alexoyebade5926 Жыл бұрын

    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! 🔥

  • @safeerussalamms62
    @safeerussalamms622 жыл бұрын

    amazing, But it would be great if you colud reduce the speed so that the beginners could understand better

  • @sanjaymahato9431
    @sanjaymahato94312 жыл бұрын

    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.

  • @herrklaus
    @herrklaus2 жыл бұрын

    I love this stuff, man. Carefully planned out and executed...in 40 minutes! Well done.

  • @prashantmishra5691
    @prashantmishra5691 Жыл бұрын

    This is the quality of content that I was looking for. Please do more of these explanatory vids. Thanks!

  • @stephaniehaver4081
    @stephaniehaver40812 жыл бұрын

    You just changed my entire design game - thank you so much!!!

  • @minoum8588
    @minoum85882 жыл бұрын

    I am simultaneously in awe and horrified by your speed! (I'm a beginner, so I'm as speedy as a snail on valium)

  • @stevieeejay1029
    @stevieeejay10292 жыл бұрын

    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

    @JordanGeizer

    2 жыл бұрын

    Thanks mate! Glad you found it useful.

  • @ikhsandwisaputraa
    @ikhsandwisaputraa2 жыл бұрын

    very easy to understand for beginners. Thank you very much for making this video, hopefully, this channel will continue to grow in the future 👍👍

  • @johnkiama2788
    @johnkiama278811 ай бұрын

    Thanks a lot for sharing mate. This was really useful especially creating design systems and components

  • @mdr8263
    @mdr82632 жыл бұрын

    It was easy to repeat after you, incredible work, thanks a lot!

  • @MasterSpatula
    @MasterSpatula2 жыл бұрын

    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

    @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.

  • @velr8986
    @velr89862 жыл бұрын

    Thank u so much you created this video Jordan! I learned a lot, plus the narration is really helpful. All the best man!

  • @acelinoguilherme6837
    @acelinoguilherme6837 Жыл бұрын

    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!

  • @olowott
    @olowott2 жыл бұрын

    great stuff, very well planned and learnt alot.

  • @MARKSMANGAMINGisLIVE
    @MARKSMANGAMINGisLIVE Жыл бұрын

    Please keep posting like this. Learned a lot.

  • @Dappylolo
    @Dappylolo2 жыл бұрын

    WOW, this design is so helpful thanks so much

  • @salaudiinahmmad568
    @salaudiinahmmad56811 ай бұрын

    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

  • @ZzigZzag
    @ZzigZzag Жыл бұрын

    Fantastic!

  • @vitorribeiro2002
    @vitorribeiro2002 Жыл бұрын

    Very nice layout!

  • @favourdope
    @favourdope8 күн бұрын

    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 🙏

  • @elleestah8081
    @elleestah80812 жыл бұрын

    Great content! Keep it up Jordan :)

  • @JordanGeizer

    @JordanGeizer

    2 жыл бұрын

    Thank you Elle! :D

  • @ottomanthoughts4427
    @ottomanthoughts4427 Жыл бұрын

    Amazing!

  • @uidesignwithfigma
    @uidesignwithfigma Жыл бұрын

    Thanks for the lesson! 🔥

  • @JamilHussain110
    @JamilHussain110 Жыл бұрын

    This might helpful for average & beginners for sure, I Hope You will continue UI/UX ahead (Thanks) 🥰🙏

  • @user-xf8tk8np2h
    @user-xf8tk8np2h2 жыл бұрын

    Great content!

  • @fabianpetersen2452
    @fabianpetersen2452 Жыл бұрын

    Very well done 👍

  • @ElegantCoder
    @ElegantCoder2 жыл бұрын

    this is great my friend

  • @bobbydev_
    @bobbydev_8 ай бұрын

    i love this

  • @mahaali8598
    @mahaali8598 Жыл бұрын

    I need more from these tutorials

  • @odafeogodo-david3618
    @odafeogodo-david36182 жыл бұрын

    REMEMBER TO PLAY IN 0.75. Amazing Tutorial!

  • @agbajiochayi3411
    @agbajiochayi341113 күн бұрын

    thanks man

  • @ivyarcher9462
    @ivyarcher9462 Жыл бұрын

    You are the best

  • @ozanarslan5175
    @ozanarslan51752 жыл бұрын

    Bro Perfect 👍

  • @monsiflamharml3945
    @monsiflamharml3945 Жыл бұрын

    so thorough

  • @zainsarafi5015
    @zainsarafi50152 жыл бұрын

    You deserve million subscriptions 💜. Hope it happen soon

  • @JordanGeizer

    @JordanGeizer

    2 жыл бұрын

    Thank you so much 😀

  • @karolorak
    @karolorak Жыл бұрын

    Thanks!

  • @azizmahmud8629
    @azizmahmud86292 жыл бұрын

    Take love from Bangladesh. ❤️

  • @zainsarafi5015
    @zainsarafi50152 жыл бұрын

    Awsome dude👍👍

  • @JordanGeizer

    @JordanGeizer

    2 жыл бұрын

    Thank you!

  • @diogos7233
    @diogos7233 Жыл бұрын

    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.

  • @rdnblg
    @rdnblg2 жыл бұрын

    Thank you 😊 from 🇲🇳

  • @JordanGeizer

    @JordanGeizer

    2 жыл бұрын

    Rad! Thanks for watching! 😊

  • @xingwei5416
    @xingwei54168 ай бұрын

    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!

  • @untangle_mind
    @untangle_mind Жыл бұрын

    At 0:55 what do you mean by setting vertical rhythm? Can you explain what you did there?

  • @rak7gameing337
    @rak7gameing3377 ай бұрын

    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

  • @liamdo8719
    @liamdo8719 Жыл бұрын

    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

  • @ikennagibson3933
    @ikennagibson39332 жыл бұрын

    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

    @majoralter

    Жыл бұрын

    Reduce the speed yourself

  • @dalibor7851
    @dalibor78512 жыл бұрын

    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

    @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!

  • @feldv99
    @feldv992 жыл бұрын

    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

    @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

    @feldv99

    2 жыл бұрын

    @@JordanGeizer Oh thank you :)

  • @sofiadesigns4738
    @sofiadesigns47382 жыл бұрын

    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

    @JordanGeizer

    2 жыл бұрын

    Thanks Sofia! Appreciate the feedback, I'll work to slow them down in future.

  • @official_pupatee
    @official_pupateeАй бұрын

    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.

  • @ayoolaidris7262
    @ayoolaidris72622 жыл бұрын

    Really awesome tutorial but you were too fast for beginners to catch up. its fine if the videos is in parts.

  • @karthisurya5014
    @karthisurya50142 жыл бұрын

    Hey, you are playing the video too fast it could be a bit slower...

  • @vikster2900
    @vikster2900 Жыл бұрын

    Well Life of a noob ain't fun been on 8 mins for 2 hours

  • @meha7819
    @meha78192 жыл бұрын

    Good tutorial but, if you are a beginner, this one is not for you.

  • @toluwalopefr
    @toluwalopefr Жыл бұрын

    If you're really willing to help and not just to add resume stand outs please make it slower thank you

  • @karthisurya5014
    @karthisurya50142 жыл бұрын

    Nbcf

  • @abdulmoiz44
    @abdulmoiz442 жыл бұрын

    That's too fast to understand for beginners

  • @KP_XRP
    @KP_XRP10 ай бұрын

    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.

  • @emmanueltolani7243
    @emmanueltolani7243 Жыл бұрын

    Not beginner friendly at all.

Келесі