Design A Website In Under 1 Hour With Figma

Поделиться
HTML-код
  • Опубликовано: 18 сен 2024

Комментарии • 602

  • @WebDevSimplified
    @WebDevSimplified 5 лет назад +404

    Making this site was a ton of fun. Thanks so much Ed for creating this amazing design! It was really fun to work through the difficult parts of programming this site.
    After you are done watching this amazing video, make sure to come checkout part two on my channel where we program the entire site in under an hour! ruclips.net/video/RZ-Oe4_Ew7g/видео.html

    • @AnnieTaylorChen
      @AnnieTaylorChen 5 лет назад +6

      that's so cool! I do both and I can learn this process from both videos! :D

    • @XAudreyS
      @XAudreyS 5 лет назад +1

      I'm excited to do this! Thank you for doing this!! Subbed to both of your channels!!

    • @ishtiakahmed6336
      @ishtiakahmed6336 4 года назад

      ok mate

    • @mosesose6426
      @mosesose6426 4 года назад

      Cool

    • @isatangel
      @isatangel 3 года назад +2

      Hey, where and how do you import those icons for facebook and twitter?

  • @lguadez
    @lguadez 5 лет назад +48

    I watch it from the start. I'm beginning to enjoy figma. Thank you for this tutorial, it will be very helpful in my choice of a new career as a web developer after 20 years in customer service.

  • @developedbyed
    @developedbyed  5 лет назад +135

    Thanks to Web Dev Simplified for all the help! Hope you guys enjoy this one, took a while to make :)

    • @a.n.7338
      @a.n.7338 5 лет назад

      Hi i am kinda new to this whole thing but can you tell me how i can deliver this site to my client?? And is this free ? If not can you tell me some free software for ui/ux design?

    • @imaginetattoossurat
      @imaginetattoossurat 4 года назад +1

      @@a.n.7338 this is figma and its free

    • @astrolabe1976
      @astrolabe1976 4 года назад +1

      where are the files for this exactly?

    • @eldwinc9884
      @eldwinc9884 3 года назад +1

      @@astrolabe1976 github. with your paper hands, click into the actual files by clicking the filenames, then youll find an option to dl. u gotta do it one-by-one. just focus on dl'ing 'cover' and 'landing-page-girl' -- the others u wont be able to dl lol.
      if u have diamond hands, then u create a github acct. go to that page. top left corner press 'fork'. then on the new page click 'code', then 'download zip'

  • @Seaskunk
    @Seaskunk 4 года назад +21

    This was extremely helpful for me. Just enough instruction, good pace, personable, good tips. I learned a lot about Figma as well as some graphic design principles. Thanks for providing the file of pieces and for walking us through this!

  • @aadeshchandra
    @aadeshchandra 5 лет назад +175

    How do you always have the perfect colours!! Do a tutorial on colour palettes, please.

    • @siam7094
      @siam7094 4 года назад +10

      learn about colour theory and for good colour pallets you can use colorhunt.co

    • @shivarajbale
      @shivarajbale 3 года назад

      @@MohamedSaberSabryElSayed could you plz refer any channels.

  • @fawazreh1790
    @fawazreh1790 5 лет назад +13

    several times you said that the video is loger then you thought but i think the video is so useful and helpful for me and others.
    every second is in detailed.
    plz make more videos like that.

  • @floatingcolors5964
    @floatingcolors5964 5 лет назад +81

    You did not symmetrize the soundwaves in the logo. It malted my perfectionist eye.

    • @simone9105
      @simone9105 4 года назад +7

      (11 months later) The last line...noooo

  • @krishary8775
    @krishary8775 4 года назад +11

    This is a little like watching Bob Ross paint (which could be one of the best compliments you will ever receive :) ) seems so simple and effortless. Great job.

  • @stephenzhao9773
    @stephenzhao9773 5 лет назад +30

    27:30 I can do this forever, you find yourself repositioning everything for 10 hours.
    28:03 I can work on this for 10 hours.

  • @andreadoa
    @andreadoa 4 года назад +8

    This is the first time that I enjoyed a tutorial. You are amazing! So talented!

  • @Phoca_Vitulina
    @Phoca_Vitulina 5 лет назад +6

    Wow thank you so much for making this and doing a collab. I've been thinking of switching careers into UX/UI and I learn best by doing, so being able to make this design with you was really fun and helped me get a feel of Figma and what work goes into a simple project. Just subscribed, thanks so much again! Will watch the other channel's follow up video to see how to code the design later.

  • @NannyNoya
    @NannyNoya 5 лет назад +35

    In the Netherlands the Colon is called: Dubbele punt - Double point / Double Dots 😁👍

  • @WillMarcouiller
    @WillMarcouiller 4 года назад +2

    @DevEd, You're making me enjoy web development, me! a old-dog back-end developer who mostly worked in Windows Forms and WebAPI. I'd define myself more like a software architect now.
    I can feel all the joy you put in your videos and this makes me want to follow you. Thx for your tremendous personality, mate. :)

  • @Adurability
    @Adurability 4 года назад +2

    I have been following your videos and designing figma websites . Thanks for the videos. Regards from Nigeria

  • @nancybhati6387
    @nancybhati6387 3 года назад +6

    This is the first time i am watching your tutorial, and i felt so good and motivated because many of the design decisions like font style, the color scheme i made matches yours..so i am feeling good that maybe i am on right path 😊

  • @minimalistdeveloper
    @minimalistdeveloper 2 года назад +1

    As a developer I was lost when I opened Figma. Thanks for going through most things I wanted to understand as a beginner.

  • @rav_666_
    @rav_666_ 2 года назад +4

    This was so fun and helpful to watch! Thank you so much for making such an easy tutorial to follow. You make it look so effortlessly done 😊

  • @msmerigrah
    @msmerigrah 3 года назад +4

    This tutorial was so helpful! I hope you do more figma follow alongs like this. Thanks!

    • @LowFrequency
      @LowFrequency 3 года назад

      where did he get the icons tho, is it okay if you dont make them yourself ?

  • @eldwinc9884
    @eldwinc9884 3 года назад +8

    22:50 how did u import the cover image that could be separated into 4 images? the jpg i downloaded from github was fused as 1 and was not able to be separated

  • @deshawnminnis8540
    @deshawnminnis8540 5 лет назад +4

    Thanks so much for this amazing video. I recently dove into the design world and learned about figma as well (amazing design tool). Your video has been a great source of inspiration as well as a great tutorial on figma.

  • @skeche
    @skeche 3 года назад +1

    thats an interesting way of centering text on a rectangle. makes way more sense

  • @dtwelve89
    @dtwelve89 5 лет назад +12

    Awesome video Ed! Thank you so much. I've started incorporating web design into my web development and it's really brought my work to life. Thank you!

  • @BeginnersAcademy
    @BeginnersAcademy 9 месяцев назад

    My web dev journey started here almost 3 years ago, thanks for getting me started. At uni doing CS now in my second year .

  • @BeTheStar08
    @BeTheStar08 2 года назад

    very less people i come across and youtube with a smile and charm like yours...sweet

  • @swekshagraphicsvideoeditor6038
    @swekshagraphicsvideoeditor6038 5 лет назад +3

    That Grid View Gave Me A Cool Background Idea 😍

  • @kellogbonna942
    @kellogbonna942 5 лет назад +2

    Yess OMG thank you soo much, I've been looking for a fun and interactive figma tutorial. Please do more figma, svg and animation. thanks so much

  • @sokunvathnase2241
    @sokunvathnase2241 3 года назад +1

    That's very nice that you are good at simplified things out. I actually really enjoy your creativity and perfectionism until you misspelling "About Us" haha.

    • @regaI
      @regaI 3 года назад

      yeah and he went through resizing and all without realizing it, it's hard to watch :( great tutor nonetheless

  • @shuukeyare8388
    @shuukeyare8388 5 лет назад +1

    You don't have too much content in your channel. but still it's one of the best channels i refer to.

  • @Fowrli
    @Fowrli 3 года назад

    Hey ed, Your are seriously a super energized GUY. That why you are the only person who convinced to hit the bell icon. by the way in my native language we say double dot instead of semicolon!

  • @orlakasali9755
    @orlakasali9755 Год назад

    Just finished a website by watching this video. You're a ROCK STAR!

  • @just_kidding_kid
    @just_kidding_kid 5 лет назад +2

    One of the best tutorials i ever seen

  • @neutrallane
    @neutrallane Год назад

    Just refreshed my figma skills using this... it was so smooth. Thank you!

  • @ManishKarki
    @ManishKarki 5 лет назад +1

    Came as soon as i got the notification. Really, thanks for the figma tutorial. Needed this.

    • @developedbyed
      @developedbyed  5 лет назад

      You are awesome!

    • @ManishKarki
      @ManishKarki 5 лет назад

      @@developedbyed No, no. You are awesome. I found out your channel couple days ago and I've browsed through every one of your videos and they were really helpful. Thanks to u, i found webdev simplified now.

  • @kalaiarasanayyanar20
    @kalaiarasanayyanar20 4 года назад

    I haven't watched any videos on Figma other than this one but, I have a strong feeling that this is the must watch for every beginner. Thanks to Dev Ed for this.

  • @boonyaritritdet6364
    @boonyaritritdet6364 5 лет назад +5

    Thank you for teaching me💙

  • @abdulhaffizumar4564
    @abdulhaffizumar4564 4 года назад

    You're such an excellent illustrator, the best video guide I've watched on youtube

  • @williamdefolt7034
    @williamdefolt7034 5 лет назад +3

    Man, that's so good lessons. Thank you, and keep going please ♥

  • @yjkoitie
    @yjkoitie 4 года назад +1

    so cool. I enjoyed the tutorial. My love for Figma just grew ten folds.

  • @wilsonfaustino
    @wilsonfaustino 5 лет назад +1

    Awesome. I love your tutorials. I finally decided to learn Figma. Ps. Please partner up with web Dev Simplified again. You two are awesome.

  • @aurelien76800
    @aurelien76800 4 года назад

    Just discovering that you not only makes videos about web dev, and even for artistics stuffs, you are so good :) Thank you for sharing your talent

  • @rbbrmlk
    @rbbrmlk 2 года назад

    Thanks Ed! This is easy and fast for a Adobe user like me to understand Figma in less than a day!

  • @WORDGASM
    @WORDGASM 4 года назад

    You've been working from day till the sun goes down. Great passion! That's the hidden real lesson👍

  • @fidansuleymanova5436
    @fidansuleymanova5436 4 года назад +2

    i love your works and your energy!

    • @miraliakbarov4887
      @miraliakbarov4887 3 года назад

      biraz özün yüngül aparsada işi yaxşıdır)

  • @ono.o.k
    @ono.o.k 3 года назад

    Oh my goodness I'm only 10seconds in and Ed's sincere enthusiasm is so energizing - so glad I found this channel!

  • @thismarthaaa
    @thismarthaaa 2 года назад

    Whoa! 🎉 Just finished working on my very first Figma exercise using this video. Feels exciting 😅Thank youuuuuu 🤭🤭🤭🥰🥰🥰🥰

  • @oldtimesong
    @oldtimesong 2 года назад

    Sometimes I think that being a Graphic Designer is no other thing than getting paid for developing and exacerbating your OCD.
    That was SO helpful! thank you so much!

  • @sachinrane4716
    @sachinrane4716 4 года назад

    That T tool Joke was relly GOOD. Especially "Unfortunately I hope they fix that in future updates" part

  • @diogosoares1309
    @diogosoares1309 4 года назад

    Awesome video Ed!! You just made the less creative person in the room install Figma and pull the sleeves up! I really like your content. Keep the great work brother

  • @princessjoyavengoza6971
    @princessjoyavengoza6971 3 года назад

    Just watching for idea, for our project. got pressured but watching this tutorial is really fun. I enjoyed it, learned a lot, for a beginner like me. Thanks!

  • @ramonfeliz8359
    @ramonfeliz8359 4 года назад

    thax so much I was able to make the full site....now the code...

  • @denzel420
    @denzel420 Год назад

    Niiiice good co-op with Kyle!

  • @caesar419
    @caesar419 4 года назад +1

    Thank you very much for the tutorial!

  • @jayjo7073
    @jayjo7073 5 лет назад +2

    Great vid, you and web dev simplified should work together more often

  • @ayanbanerjee5508
    @ayanbanerjee5508 2 года назад

    great video massive learning keep making tutorials like this on figma design

  • @SabuhiPashaarchitect
    @SabuhiPashaarchitect 4 года назад +1

    That was really helpful tutorial video. I liked it Ed! keep it up :)

    • @mateopalacios907
      @mateopalacios907 4 года назад

      How do you create the subtitle? He doesnt explain how to create the Stream over... text

  • @PMGangsta
    @PMGangsta 2 года назад

    Loved it! I just started using Figma!

  • @olski8054
    @olski8054 5 лет назад +1

    i really like your energy dude. keep it up!

  • @jinkazama2555
    @jinkazama2555 2 года назад

    Thank you so much for giving us the pics! truely appreciated! subbed!

  • @alexkim8965
    @alexkim8965 2 года назад

    Great Tutorial! Now I can work on my project!

  • @shaziapathan5563
    @shaziapathan5563 2 года назад

    This video was very helpful for me. Thank you so much for sharing this video which covered every thing in one shot. Amazing !!!!!!

  • @buddybob5502
    @buddybob5502 4 года назад

    Why do I like your channel so much, you are my goto for web dev and code

  • @dev__adi
    @dev__adi 4 года назад +2

    Next time you can use the Components feature in Figma for the Cards so that when you resize one card all other gets aligned as well

  • @mahamatsaleh5009
    @mahamatsaleh5009 2 года назад

    Thank you for making it too easy for us to understand

  • @CynthiaRomero
    @CynthiaRomero 3 года назад

    Wow, it´s been a year. This tutorial was my first approach to web development. Thank you.

  • @devendraingale2870
    @devendraingale2870 3 года назад

    Thankyou buddy. It helped me a lot during the designing phase of my Agile project.

  • @richardottley4611
    @richardottley4611 4 года назад +2

    Awesome tutorial of designing a website in Figma.. I'm now learning how to use Figma.. I was thinking the word fun could be in the same gradient pattern that you used for the logo, and maybe add another image on the signup page. Overall great job

  • @conaxlearn8566
    @conaxlearn8566 4 года назад

    Great to see the professional in action!

  • @tninelives
    @tninelives 4 года назад

    Dev Ed, Thank you! I've been watching your videos to improve my ui skills, because I'm a developer. You've helped me a lot.

  • @Sadaqatvlogs603
    @Sadaqatvlogs603 2 года назад

    wow, I am a beginner and I really enjoyed this tutorial.

  • @AngaarUriakhil
    @AngaarUriakhil 3 года назад

    Figma is such an incredible tool. I cannot believe it is free.

  • @ripplesr5655
    @ripplesr5655 4 года назад +1

    u r super amazing dude!!U just saved me from a huge chunk of extra works!

  • @aadyagyanm-knowledge9673
    @aadyagyanm-knowledge9673 Год назад

    its really good, I learned a lot. thanks and keep making these type of videos.

  • @freeindeed176
    @freeindeed176 4 года назад +1

    This was pretty fun and I learned a lot!

  • @michaeljohnson1576
    @michaeljohnson1576 Год назад

    Lol I learned from this so much that I went to sub to you before I thought about the fact that I was already subbed haha.

  • @barataapsii2466
    @barataapsii2466 Год назад

    you are so fun and amazing with your great tutorial. Thanks much

  • @McM3rry
    @McM3rry 4 года назад

    Very calmy explained and straight forward. Good job!

  • @holandre
    @holandre 5 лет назад +1

    What an energy!! love this video helped a lot for my work !!

  • @mduduzisibanda1159
    @mduduzisibanda1159 4 года назад

    nice...a good way to use time wisely and have fun while at it

  • @niteshswarnakar
    @niteshswarnakar 3 года назад

    great tutorial brother. I learnt a lot more things about graphics design

  • @nscaledelights
    @nscaledelights 3 года назад

    Wow I didnt know that you could make a website with Figma, Thanks for all of the tips and tricks you showed us.

  • @jmcclinton8
    @jmcclinton8 Год назад

    Thank you for this course. I really learned a lot and enjoyed it. Amazing!

  • @carmenrlopez1686
    @carmenrlopez1686 2 года назад

    Great video! I was a little afraid going into Figma because is a new program for me, but with this I can get the confidence to start my new project. Thank you so much for making it look so easy.

  • @kpereobongibanga1087
    @kpereobongibanga1087 2 года назад

    I enjoyed every bit of the video. Thanks so much

  • @emanuelrouse7076
    @emanuelrouse7076 3 года назад

    Fantastic!! I’m a figma noobie. This site looks so sick!

  • @juanmamani2110
    @juanmamani2110 4 года назад

    Thanks for sharing. Exactly what I was looking for!

  • @acit278
    @acit278 Год назад

    really really helpful! thank you very much for sharing!

  • @MinalB1539
    @MinalB1539 2 года назад

    Thank you very much, very nice video. You have simplified the process and explained it nicely. Looking forward for more such videos.

  • @JasonKingery
    @JasonKingery 5 лет назад +1

    I hadn't heard of figma. Great video as always.

  • @SantoshSavanur
    @SantoshSavanur 3 года назад

    The color scheme is amazing. \m/

  • @sangeetayadav7547
    @sangeetayadav7547 Год назад

    Thanks a million. This is really very nice beginners .

  • @maaacrrr6979
    @maaacrrr6979 Год назад

    Thank you very much! you have helped and I have learned a lot!

  • @teminoah2960
    @teminoah2960 4 года назад

    You're such an inspiration,thats exactly what i need n always wanted ,a design tool in bringing the idea to sight.That smile makes it seem simple and interesting. Well done👏✌🙌🍻

  • @Awakenbeing
    @Awakenbeing 2 года назад

    Really very helpful for anyone one who is starting Figma to design first time.

  • @karyazin85
    @karyazin85 2 года назад

    Thank you! Awesome tutorial. The best for the Figma newcomers)

  • @sherlockholmes-wx5nw
    @sherlockholmes-wx5nw 2 года назад

    thank you this tutorial. It was really helpful

  • @ronaldnepomuceno2970
    @ronaldnepomuceno2970 3 года назад

    Thanks for bringing us to the process, really helps!

  • @muhammadbinsaleem8565
    @muhammadbinsaleem8565 2 года назад

    Amazing man! good job

  • @ov3rheat.gamestreams
    @ov3rheat.gamestreams 3 года назад

    Super Nice Design dude!

  • @malouette3991
    @malouette3991 2 года назад

    Very good tutorial. Many thanks!!

  • @Mahi-hj4en
    @Mahi-hj4en 2 года назад

    This video is amazing.. I really enjoyed watching. Thank you so much.