Landing Page Design Tutorial | Web Design in Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ต.ค. 2024
  • 💎Design from the video here:
    ko-fi.com/s/38...
    🔥Free Design Resources:
    t.me/designrclub
    In this video, we will create a landing page for a web product in Figma.
    You can follow my steps and improve your UI/UX design skills.
    💜SUBSCRIBE to design community:
    / @designr
    ☕Buy a Coffee:
    ko-fi.com/designr
    3D Illustration Pack:
    figma.fun/S4hpNr

ความคิดเห็น • 127

  • @michaelharris8040
    @michaelharris8040 ปีที่แล้ว +20

    Thank you for a excellent video. 0 dialogue and fast passed web design in 20 minutes. This is a gem and I cant wait for more.

  • @vrushaliwaghmare7769
    @vrushaliwaghmare7769 ปีที่แล้ว +1

    This is very good design of landing page using Figma well done👏

  • @cristiangabor5636
    @cristiangabor5636 2 ปีที่แล้ว +42

    Use components kids,don't hate your lives :))

    • @saraswathia841
      @saraswathia841 2 ปีที่แล้ว +4

      What components?

    • @Georgelikestodesign
      @Georgelikestodesign ปีที่แล้ว +4

      Lmao and autolayout. This design is fire though

    • @Avinash.i1Brand
      @Avinash.i1Brand ปีที่แล้ว +2

      If he use components straight away then what's the point of this video tutorial? No-one will understand

  • @AliRaza-rb5pw
    @AliRaza-rb5pw 2 ปีที่แล้ว +1

    Really satisfying

  • @ehimenrapheal2156
    @ehimenrapheal2156 2 ปีที่แล้ว +7

    Please which website or plugin did you use go get those SVG images. Thank you

  • @wtfsnixy
    @wtfsnixy ปีที่แล้ว +10

    From where do u get great vectors for every page? I really cant find good one.
    Can you please suggest.
    Awesome work

  • @Tsonbeats
    @Tsonbeats 2 ปีที่แล้ว +1

    Awesome desing bro! but bad practices, button-cta use autolayout...

  • @sabrinavirelala9491
    @sabrinavirelala9491 2 ปีที่แล้ว +3

    Wow man I love it so much . Where are u getting inspiration from ?😮😯 I don't know what else to say just big wow and so niccce❤❤❤

    • @MuhammadJunaid-yk4dh
      @MuhammadJunaid-yk4dh 2 ปีที่แล้ว +3

      You can inspiration from google, spying other websites, competitor websites, etc.
      There are alot of methods to get inspiration, if you still have any question or confusion do let me know :)

    • @farzanaafrose423
      @farzanaafrose423 2 ปีที่แล้ว +2

      @@MuhammadJunaid-yk4dh please make another video that how you spying other websites and google and how you create the concept.

  • @quantranduc1793
    @quantranduc1793 2 ปีที่แล้ว +1

    Thank you 4 lesson. This awesome

  • @MAKTV_
    @MAKTV_ ปีที่แล้ว +5

    Where are the 3D vector animations from?

  • @quatrefoil4
    @quatrefoil4 ปีที่แล้ว +1

    Thanks!...
    where can find logo?..

  • @designr
    @designr  3 ปีที่แล้ว +113

    Learn & improve UX design skills uxcel.com/?ref=designr in 5 minutes per day!

  • @a1tn14
    @a1tn14 2 ปีที่แล้ว +5

    Подружитесь с компонентами и автолейаутами, жить будет значительно проще))

  • @SketchbookStudioo
    @SketchbookStudioo 2 ปีที่แล้ว +1

    Killed it!

  • @MACH_SDQ
    @MACH_SDQ ปีที่แล้ว +1

    Goooooooood

  • @西边皆通
    @西边皆通 2 ปีที่แล้ว +1

    Good job ,man.tks

  • @deepgamer3261
    @deepgamer3261 2 ปีที่แล้ว +1

    where you find this kind of cartoon images that really enhance your work/project...
    I also want can you help me to find this kind of image

  • @tothemaxguy
    @tothemaxguy 2 ปีที่แล้ว +1

    Where do you get those illustrations. They are super awesome,

  • @csabasztoika4020
    @csabasztoika4020 2 ปีที่แล้ว +1

    Good job

  • @RobAndersonMagic
    @RobAndersonMagic ปีที่แล้ว

    How is this a tutorial?

  • @Smahee
    @Smahee 7 หลายเดือนก่อน +1

    where to get these emoji, pictures or element you use in your page?

  • @mhilalalhamdy8975
    @mhilalalhamdy8975 2 ปีที่แล้ว +2

    where you got an illustrator picture?

  • @zikokat
    @zikokat ปีที่แล้ว +5

    Hello, I have one question here, can the website be any length we want or is there a specific length for a one-page design? I am new here and trying to figure it out. Thanks for the tutorial very helpful.

    • @sriganesh5590
      @sriganesh5590 ปีที่แล้ว +1

      It can be of any length and its all depends on what you really want to showcase in a Webpage. If the content requires a longer webpage, it can be longer. There isn't a specific height.

    • @raifmohamed8401
      @raifmohamed8401 ปีที่แล้ว

      % Viewport Height

  • @mayarusmaya3943
    @mayarusmaya3943 2 ปีที่แล้ว

    3D element in there so cute! where can i get it ?

  • @MAeL756
    @MAeL756 ปีที่แล้ว +1

    How will you upload this as a website? Can it be used for other email marketing platform, like the landing page for mailchimp, omnisend, etc.

  • @kayteharrison5719
    @kayteharrison5719 2 ปีที่แล้ว +3

    you designs are great. please for the SVG images, where resource did u get it from

  • @chiamakaclifford
    @chiamakaclifford 2 ปีที่แล้ว +10

    so beautiful and detailed i love it

  • @justingrasio3967
    @justingrasio3967 3 หลายเดือนก่อน

    thanksss

  • @nikhilsharma2421
    @nikhilsharma2421 ปีที่แล้ว +1

    Where can I get the images used in here.

  • @tothemaxguy
    @tothemaxguy 2 ปีที่แล้ว +1

    I like your design but your tutorial is way fast than my eyes. Can't follow you dude.

  • @kavyasri-n1c
    @kavyasri-n1c 8 หลายเดือนก่อน +1

    from where did u get those wonderful 3D images , could u let us know . which would help even us

  • @mixedhand2997
    @mixedhand2997 ปีที่แล้ว +1

    what was the name of the site

  • @jagamod
    @jagamod 3 ปีที่แล้ว

    great!

  • @braveltd
    @braveltd 2 ปีที่แล้ว +3

    3:43 спалился что русский)

  • @Graciousalicando
    @Graciousalicando 2 ปีที่แล้ว +2

    What is thw difference of coding and the ux designing? Is have the same purpose?

    • @MuhammadJunaid-yk4dh
      @MuhammadJunaid-yk4dh 2 ปีที่แล้ว +2

      UX is user experience and coding is different field.
      1st we do UX designing to get better understanding of user's experience. Then we do UI (user interface as you can see in the video)
      After UI, developer will get source files and convert design into product through coding

    • @Graciousalicando
      @Graciousalicando 2 ปีที่แล้ว +1

      Wow... Cool. That's very well explination. thank you so much.

  • @shumailakidwai18
    @shumailakidwai18 ปีที่แล้ว +1

    How did you do the border around the sign up? Speed is too fast

  • @yasseralhassan4188
    @yasseralhassan4188 2 ปีที่แล้ว +1

    how can I get this photos that you used while designing?

  • @Asif983
    @Asif983 ปีที่แล้ว

    Do I have to make option Inside of home, about , blogs too?

  • @happytakeoff9997
    @happytakeoff9997 2 ปีที่แล้ว +3

    thank u for not talking and the awesome tunes!

  • @tanvirhosan9545
    @tanvirhosan9545 11 หลายเดือนก่อน

    Nice

  • @oluebubeaguh6617
    @oluebubeaguh6617 2 ปีที่แล้ว +5

    Awesome Video! Thanks so much. please could you drop the hex codes of the colors used in the design?

    • @sunuvugun
      @sunuvugun ปีที่แล้ว

      Just write it from the video, lol

    • @pablovaldes2397
      @pablovaldes2397 ปีที่แล้ว +3

      bro if you see the color then you can get it, trust me, if not then git gud noob

    • @dxshawn532
      @dxshawn532 ปีที่แล้ว

      @@pablovaldes2397 Write? Sp dam rite. Boomers try building of thejr own websites. But boomers dnt hva rthe nowledge to build off their websites for their own nkn

  • @bobbilimadhuri9207
    @bobbilimadhuri9207 2 ปีที่แล้ว +1

    Pics how to download

  • @Lanco_M
    @Lanco_M 2 ปีที่แล้ว +7

    Awesome design 💙

  • @iggykalifa
    @iggykalifa ปีที่แล้ว +1

    This music makes it even more enjoyable to watch... thank you

  • @uxuidesignersakib
    @uxuidesignersakib หลายเดือนก่อน

    Give me this project link. please

  • @asifhossain2088
    @asifhossain2088 ปีที่แล้ว +1

    beautiful

  • @isumitd9586
    @isumitd9586 2 ปีที่แล้ว +1

    Are the content writing provided by client generally. Hello brother

  • @ShanmukhaPulavarthy
    @ShanmukhaPulavarthy ปีที่แล้ว +1

    Its called perfection.😀😀

  • @puch9830
    @puch9830 ปีที่แล้ว

    What is this negative text below headings.. plus subheadings make company come across as arrogant, and what can be achieved without diligence? it promotes the idea of achieving success without putting in effort, I recommend changing text so it suits the business page represents

  • @mdbiplophossain1180
    @mdbiplophossain1180 2 ปีที่แล้ว +1

    can I get Figma file?

  • @seandonghyunpark8042
    @seandonghyunpark8042 2 ปีที่แล้ว +3

    Thanks for helpful video from Korea. I would like to ask where do you get the image files?

    • @designr
      @designr  2 ปีที่แล้ว +2

      Thank you very much, the link to the illustrations is in the description

  • @boww_codm
    @boww_codm 3 ปีที่แล้ว +4

    Good job man))🔥🔥

    • @designr
      @designr  3 ปีที่แล้ว

      thanks a lot!

  • @funnies8772
    @funnies8772 2 ปีที่แล้ว +1

    How do I make a mock-up of my web design

  • @danieloh4511
    @danieloh4511 2 ปีที่แล้ว +1

    why is width, 1600??

  • @punkboy3320
    @punkboy3320 ปีที่แล้ว +1

    Holy cow! I'll start to use figma tomorrow!

  • @vamshichoula5871
    @vamshichoula5871 2 ปีที่แล้ว +1

    Figma, ui design, header , footer middle according to client requirement.

  • @emmanuelfleurine121
    @emmanuelfleurine121 2 ปีที่แล้ว +1

    thank you for the walk

  • @jaythebestyaaa
    @jaythebestyaaa ปีที่แล้ว

    wth is the plugin... GIVE ME THE NAME

  • @offthepathworks9171
    @offthepathworks9171 ปีที่แล้ว +1

    Had fun, thanks!

  • @realmeee
    @realmeee 2 ปีที่แล้ว +1

    Do you use current auto layout in your dms ?

  • @rezvanibeastx3452
    @rezvanibeastx3452 ปีที่แล้ว +1

    hmm I like you design but plz make this slow!!!!

  • @saqib-codes
    @saqib-codes ปีที่แล้ว +2

    Soo beautiful ❣️

  • @isurusandaruwan4769
    @isurusandaruwan4769 ปีที่แล้ว

    Bro please remove the cringi background music

  • @jiyathhiba
    @jiyathhiba 2 ปีที่แล้ว +2

    Great work I subscribed 💝

  • @mr.komp1004
    @mr.komp1004 2 ปีที่แล้ว

    th-cam.com/video/V_cioLTaDvQ/w-d-xo.html What is this redline, why we need it?

  • @mhdi007
    @mhdi007 10 วันที่ผ่านมา

    😍

  • @susanchi9284
    @susanchi9284 2 ปีที่แล้ว +5

    Thanks for this awesome lesson, just finished designing this webpage, and had difficulty using the image on the hero section, can I send you a copy to see?

  • @НеймарБахчаев
    @НеймарБахчаев 3 ปีที่แล้ว +1

    Thanks for the landing

  • @ugurboz418
    @ugurboz418 2 ปีที่แล้ว +1

    Great!

  • @stasiasstories5613
    @stasiasstories5613 2 ปีที่แล้ว +1

    Сколько в реальном времени заняло?

  • @nikhilsharma2421
    @nikhilsharma2421 ปีที่แล้ว

    Where can I get the images used in here.

  • @gtxstudio
    @gtxstudio ปีที่แล้ว

    Awesome design 💙

  • @dayronalfaro9461
    @dayronalfaro9461 ปีที่แล้ว +1

    Beautiful Design

  • @funandmental9914
    @funandmental9914 2 ปีที่แล้ว +1

    awww

  • @diensilmimaulidyah7161
    @diensilmimaulidyah7161 2 ปีที่แล้ว

    hey.. can i get link figma? thanks..

  • @czarscrib3680
    @czarscrib3680 2 ปีที่แล้ว

    No resources. Not even on your telegram channel

  • @mohammadfazelsadeghfard6154
    @mohammadfazelsadeghfard6154 2 ปีที่แล้ว +1

    great job👍

  • @lszvelace
    @lszvelace 2 ปีที่แล้ว

    song?

  • @bubudron
    @bubudron ปีที่แล้ว

    Нгрмальненько

  • @WaffenVerband
    @WaffenVerband 2 ปีที่แล้ว +1

    Perfect

  • @trueblogging7468
    @trueblogging7468 ปีที่แล้ว

    bro how we can set this design on our webiste

    • @designr
      @designr  ปีที่แล้ว

      🔥Design from the video here:
      ko-fi.com/s/3888c0b240

  • @ridepoint.id1068
    @ridepoint.id1068 2 ปีที่แล้ว

    kurang cepat

  • @abdirahmanabdirashid9084
    @abdirahmanabdirashid9084 2 ปีที่แล้ว

    How can i get images you are using

  • @try-b2k
    @try-b2k ปีที่แล้ว

    its too good

  • @kiiim_pooo
    @kiiim_pooo 2 ปีที่แล้ว

    у тебя есть беханс?

  • @ReDario
    @ReDario 2 ปีที่แล้ว +8

    A short question: have you checkt your design for accessibility?

  • @rabbythesr
    @rabbythesr 3 ปีที่แล้ว +1

    Please add resourse

    • @designr
      @designr  3 ปีที่แล้ว

      Added in the description

  • @freelancerfaysal1882
    @freelancerfaysal1882 2 ปีที่แล้ว

    how did you find this cartoon images

  • @TahsinAhmed-yj9ns
    @TahsinAhmed-yj9ns 3 ปีที่แล้ว

    how do u just stretch the artboard height and it gets adjusted?
    whenever i stretch the artbaord height every other shapes and texts above it get ruined(streched vertically) for me.
    please help.

    • @TahsinAhmed-yj9ns
      @TahsinAhmed-yj9ns 3 ปีที่แล้ว

      @TikTak Show then everything is rescaled but i cant get new space to work on in the lower part

  • @nicolebishop-adigwe4674
    @nicolebishop-adigwe4674 2 ปีที่แล้ว

    Where did you get the logo from?

    • @bayrock1337
      @bayrock1337 2 ปีที่แล้ว

      It's just some font and a icon.

  • @macoreilly
    @macoreilly 2 ปีที่แล้ว

    A musical tutorial... hmmmm.... not a tutorial, it's a Timelapse.

  • @DMY-1
    @DMY-1 ปีที่แล้ว

    агааа, русская раскладка!

  • @pariadventures
    @pariadventures 2 ปีที่แล้ว

    Tooo fast

  • @ahmedkoylu8523
    @ahmedkoylu8523 ปีที่แล้ว +1

    Don't get me wrong but THE THINGs I see in this video is basically
    how he drops the rectangles
    add some curves to rectangles, strikes out edges, add some shadows
    adds some text
    DROPPING ON PLAIN PAPER!!!!
    IT IS NOT A TUTORIAL!!!!!!!!!!!