Design A Website In Under 1 Hour With Figma

Поділитися
Вставка
  • Опубліковано 27 лис 2024

КОМЕНТАРІ •

  • @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! ua-cam.com/video/RZ-Oe4_Ew7g/v-deo.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 5 років тому

      ok mate

    • @mosesose6426
      @mosesose6426 4 роки тому

      Cool

    • @isatangel
      @isatangel 4 роки тому +2

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

  • @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'

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

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

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

  • @BeginnersAcademy
    @BeginnersAcademy 11 місяців тому

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

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

  • @fawazreh1790
    @fawazreh1790 5 років тому +14

    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.

  • @aadeshchandra
    @aadeshchandra 5 років тому +176

    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.

  • @orlakasali9755
    @orlakasali9755 Рік тому

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

  • @floatingcolors5964
    @floatingcolors5964 5 років тому +80

    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

  • @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. :)

  • @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 😁👍

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

  • @Adurability
    @Adurability 4 роки тому +2

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

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

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

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

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

  • @neutrallane
    @neutrallane Рік тому

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

  • @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 😊

  • @skeche
    @skeche 4 роки тому +1

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

  • @abdulhaffizumar4564
    @abdulhaffizumar4564 4 роки тому

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

  • @just_kidding_kid
    @just_kidding_kid 5 років тому +2

    One of the best tutorials i ever seen

  • @rbbrmlk
    @rbbrmlk 2 роки тому

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

  • @CynthiaRomero
    @CynthiaRomero 4 роки тому

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

  • @boydndonga9148
    @boydndonga9148 4 роки тому

    great job on giving the other guy some creds at the start, that's true content creation

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

  • @sachinrane4716
    @sachinrane4716 4 роки тому

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

  • @yjkoitie
    @yjkoitie 4 роки тому +1

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

  • @msmerigrah
    @msmerigrah 4 роки тому +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 ?

  • @BeTheStar08
    @BeTheStar08 3 роки тому

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

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

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

  • @thismarthaaa
    @thismarthaaa 2 роки тому

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

  • @conaxlearn8566
    @conaxlearn8566 4 роки тому

    Great to see the professional in action!

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

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

  • @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 😊

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

  • @WORDGASM
    @WORDGASM 4 роки тому

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

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

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

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

  • @jayjo7073
    @jayjo7073 5 років тому +2

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

  • @dev__adi
    @dev__adi 5 років тому +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

  • @wwechamp888
    @wwechamp888 4 роки тому

    Oh boy I am so gonna use this to take my web portfolio from 144p to 1080p!

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

  • @buddybob5502
    @buddybob5502 4 роки тому

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

  • @swekshagraphicsvideoeditor6038
    @swekshagraphicsvideoeditor6038 5 років тому +3

    That Grid View Gave Me A Cool Background Idea 😍

  • @ozanmuldur4565
    @ozanmuldur4565 4 роки тому

    wow this guy's design skills are outstanding yow

  • @Mr_Kenneth
    @Mr_Kenneth 2 роки тому

    That was great. I'm brand new to Figma, but you really helped remove some of the fear. 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.

  • @SantoshSavanur
    @SantoshSavanur 3 роки тому

    The color scheme is amazing. \m/

  • @devendraingale2870
    @devendraingale2870 4 роки тому

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

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

  • @AngaarUriakhil
    @AngaarUriakhil 3 роки тому

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

  • @denzel420
    @denzel420 2 роки тому

    Niiiice good co-op with Kyle!

  • @jinkazama2555
    @jinkazama2555 2 роки тому

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

  • @jmcclinton8
    @jmcclinton8 2 роки тому

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

  • @kylianlenoir5719
    @kylianlenoir5719 4 роки тому

    Am I the only one seeing the typo of about where he typed 'abous'??🙈 but it is a very nice looking website design, keep up the great work, I love what you're doing😁

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

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

  • @Sadaqatvlogs603
    @Sadaqatvlogs603 3 роки тому

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

  • @PMGangsta
    @PMGangsta 3 роки тому

    Loved it! I just started using Figma!

  • @olski8054
    @olski8054 5 років тому +1

    i really like your energy dude. keep it up!

  • @karyazin85
    @karyazin85 2 роки тому

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

  • @ripplesr5655
    @ripplesr5655 4 роки тому +1

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

  • @glorydigital
    @glorydigital 3 роки тому

    Great tutorial ..... Good way of teaching ..... Not so fast ...... I can easily understand all the things told and displayed ....... Really thankful to you because as a beginner this is the first meaningful tutorial I found.

  • @ayanbanerjee5508
    @ayanbanerjee5508 2 роки тому

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

  • @emanuelrouse7076
    @emanuelrouse7076 3 роки тому

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

  • @petermuturi4402
    @petermuturi4402 5 років тому

    had fun doing this

  • @jomaldonado
    @jomaldonado 4 роки тому

    loved this to learn figma i feel like I had an intensive class

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

  • @tobyadebisi4052
    @tobyadebisi4052 5 років тому

    wow i love this guy. youre the most amazing. your teaching style is just WOW!!! i hope you make more videos. youre the best.

  • @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👏✌🙌🍻

  • @williamdefolt7034
    @williamdefolt7034 5 років тому +3

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

  • @boonyaritritdet6364
    @boonyaritritdet6364 5 років тому +5

    Thank you for teaching me💙

  • @Riches-Honor
    @Riches-Honor 4 роки тому +1

    This was pretty fun and I learned a lot!

  • @ramprakashgovindaraj5343
    @ramprakashgovindaraj5343 2 роки тому

    this is very helpful.. for beginners like me.. thanks man! very much appreciate your work👏

  • @albieepapu
    @albieepapu 4 роки тому

    First time to your channel, learnt few skills and filled with positivity... Thanks for the video bro... Will follow-up more!

  • @Awakenbeing
    @Awakenbeing 2 роки тому

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

  • @McM3rry
    @McM3rry 4 роки тому

    Very calmy explained and straight forward. Good job!

  • @michaelvigato3228
    @michaelvigato3228 4 роки тому

    Can't wait to finish my work day to watch this :) I just started fiddling with Figma and I must say I'm having a blast.

  • @user-xp3yk6do2r
    @user-xp3yk6do2r 2 роки тому

    1st tutorial that I finished because it is easy and I learned a lot. Thank you po

  • @andreasmou6539
    @andreasmou6539 5 років тому +5

    Man i waste my days of in work watching your videos ! Hah ! I would love more JS for beginner's and keep going with the good stuff ! :)

    • @FitnessSweets
      @FitnessSweets 5 років тому

      It's not a waste if you're learning! :)

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

  • @aadyagyanm-knowledge9673
    @aadyagyanm-knowledge9673 Рік тому

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

  • @alexkim8965
    @alexkim8965 3 роки тому

    Great Tutorial! Now I can work on my project!

  • @DUO_QUEST
    @DUO_QUEST 4 роки тому

    Just finished this project and it took me around 2 hours 😅 but I am happy now 😁

  • @dinanandi5216
    @dinanandi5216 4 роки тому

    thank yu so much for this, i was able to understand most of figma because of your video

  • @PranayAnkit
    @PranayAnkit 4 роки тому

    Best video, I learned a lot about Figma. It's very easy to use it.

  • @marina_the_belly
    @marina_the_belly 4 роки тому

    Amazing ideas! I really enjoyed your enthusiasm and after watching these I feel ready doing something on my own

  • @BrunoidGames
    @BrunoidGames 3 роки тому

    Beautiful site, beautiful model and amazing class!
    Thank you for share your knowledge.

  • @ronaldnepomuceno2970
    @ronaldnepomuceno2970 3 роки тому

    Thanks for bringing us to the process, really helps!

  • @HereWithBrooke
    @HereWithBrooke 2 роки тому

    Very very helpful. I successfully replicated your design. thanks for putting out this video.

  • @TheChromePoet
    @TheChromePoet 4 роки тому

    So much easier than wordpress, I haven't used wordpress but I've seen tutorials, it looks very complicated.

  • @blissweb
    @blissweb 3 роки тому

    Good job dude. Nice simple design and a good basic overview of Figma.