Это видео недоступно.
Сожалеем об этом.

How to make an Award Winning Portfolio Website - Process Breakdown

Поделиться
HTML-код
  • Опубликовано: 14 авг 2024
  • Live site: minhpham.design/
    FWA Award thefwa.com/cas...
    Awwwards: www.awwwards.c... (voting in progress)
    Hon Tran - The Developer: hontran.dev/
    Lenis Library: lenis.studiofr...
    Greensock Gsap: greensock.com/...
    ---
    0:00 Intro
    1:08 Concept / Ideation
    1:47 Wireframe Design
    2:20 Visual Design
    4:32 Project Showcase / Sizzle reel
    5:20 Motion Prototype
    5:37 Implementation

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

  • @MinhPhamDesign
    @MinhPhamDesign  Год назад +133

    UPDATE: my site won the Awwwards' Site Of The Day and Developer Award on July 20. Check it out here www.awwwards.com/sites/minh-pham-designer

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

      awsm i really want to learn how to build site like this

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

      Dude, at first I was shocked that they only gave you HM. But then they gave you SOTD, did they change their mind or are the picking SOTD from HM sites? Congrats anyway!

    • @AnasAhmed-ib1my
      @AnasAhmed-ib1my Год назад

      Congratulations buddy!

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

      Congratulations - well deserved🎉

    • @thevikingsock8527
      @thevikingsock8527 11 месяцев назад

      Need more info on the video :) trying something similar, but I dont get my background dark :o

  • @DjFinestWorldWide
    @DjFinestWorldWide Год назад +829

    Figma, After Effects, and Cinema 4d, you're more than a designer.

    • @Xettlcast
      @Xettlcast Год назад +200

      Full Stack Designer

    • @xgtwb6473
      @xgtwb6473 Год назад +24

      ​@@Xettlcast of don't code you aren't full stack

    • @seoulkimchi50
      @seoulkimchi50 Год назад +6

      how can you then put it in actual website? without coding

    • @nobody-bt7mu
      @nobody-bt7mu Год назад +23

      @@xgtwb6473 It's a joke...

    • @omarhussari7666
      @omarhussari7666 Год назад +26

      @@seoulkimchi50 hiring a coder... but I agree knowing code would make this guy a phenomenon...

  • @peternicholson26
    @peternicholson26 Год назад +132

    I definitely applaud your extra effort on making it in after effects first. That's really going the extra mile.
    Also, I was laughing at your perfectionism explanation, as it sounds like me attempting to think of my portfolio which I've done over and over in my head for years. I'm going to use your video as my motivation to get going on mine! Senior developer without a portfolio. What a fool haha

    • @grosseweitewelt
      @grosseweitewelt Год назад +13

      Building a prototype with moving elements in AE is not "going the extra mile", but rather a necessary step of communicating such a complex interactive design to the developer. Just describing it with text and static images would cause too many misunderstandings in my experience.

  • @ameet2000
    @ameet2000 Год назад +31

    Excellent work man. thx for sharing the process. Prototyping in after effects was probably one of the best dev handoffs I've seen, well done and executed.

  • @ismailfaturrohman4858
    @ismailfaturrohman4858 Год назад +14

    Damn. This is not just a design, this is an Art!

  • @UXUSANDCHILL
    @UXUSANDCHILL Год назад +37

    Incredible website, dude
    Would be great to see behind the scenes of the technical part as well - as a junior frontend dev I want to learn to do similar amazing stuff.

  • @sergio_grez
    @sergio_grez Год назад +8

    Man, totally subscribed. Your website is perfect and beautiful and the UX is spot on. Many websites abuse of animations, hover effects and over the top fancy stuff that only makes of an horribe experience for the user. You managed to keep things in balance throughout the entire page. Congrats!

  • @jadenkarim5367
    @jadenkarim5367 Год назад +12

    i gotta agree with you, the "perfectinisim" trap is real, this make me stuck on personal projects for ages, specially when so many AI tool popping, its taking over so much of the work around us, i always have fear that my work must be seen less compare to other artists around. So I've been lately busy playing catching up with all the AI tools.

  • @Poojajaja
    @Poojajaja Год назад +5

    Absolutely love your video, and in general ALL of your videos are kickass. But this one thing you said, gave me goosebumps.
    This summed up my whole life:
    "Because it's one thing that I suffer from perfectionism (yes it's a thing )
    perfectionism can trigger anxiety and depressions which will build up when you don't meet the high standard you set for yourself I believe every designer has already experienced this especially when working on your personal project, you know, projects have no batteries no deadlines no managers so that's not like a perfect world but you could be trapped in the state where you cannot move forward because you keep changing your mind to strive for the best that you can do "

  • @ReadyDesignerOne
    @ReadyDesignerOne 9 месяцев назад +1

    Love this, everything is top notch. For me, the humour and play with text makes it different from the rest and shows your personality.

  • @zgo99
    @zgo99 Год назад +6

    Absolutely fantastic website! I only recently found your channel, and I can tell you that you're work is on another level. Really inspiring.

  • @robin.journal
    @robin.journal Год назад +1

    Your design is so impressive bro, It somehow tickles me. You're truly admirable!

  • @user-js7uz6wg1r
    @user-js7uz6wg1r 7 месяцев назад +2

    Bro i am daaaaaaaaaaaam impressed about your portfolio. It's really sick

  • @imagingconcepts
    @imagingconcepts Год назад +4

    Your work is absolutely amazing, but honestly what it really expressed to me was, nobody could create this style of site, without actually being a cool person.. well done cool person..

  • @broofya3805
    @broofya3805 Год назад +8

    Thank you! I'll give you the award for the most likeable designer 😀

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

      Thank you!! You should have seen the number of Dislikes I have loll

  • @michaelabanin
    @michaelabanin 9 месяцев назад +2

    Having watched this I feel deep, honest respect to your personality, your work, your collaboration with coder and happy that the result was fairly appreciated. It’s inspiring, be sure)

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

    It had issues when I load it on my mobile device which I bought just 5 months ago. But still an impressive website to showcase your skills and creative talent. To all arguing the site is impractical, chill it is just a portfolio. I am sure this guy understood the principles of UX when dealing with client requests and other projects for commercial release.

  • @davemorgang
    @davemorgang Год назад +1

    Your website is amazing, man! I've never seen anything like this before! Congratz, it's marvelous! 🔥🔥

  • @hoshi6411
    @hoshi6411 Год назад +1

    Really like that dot transition from page to page . Good work !

  • @matteozhang7140
    @matteozhang7140 11 месяцев назад

    Just realized at 4:38 that I used one his concepts in the past; such a great designer!

  • @sskarn
    @sskarn 4 дня назад

    Very detailed breakdown. Very inspiring!

  • @braydenfriesen6654
    @braydenfriesen6654 Год назад +5

    Man this is phenomenal!!! I've been learning front end development and "trying" to get good at design. I'd be extremely interested in watching the code get made for this!

    • @Robert-um2oe
      @Robert-um2oe Год назад +4

      brother you need a good knowlege of figma and after effects to build something like this .Hope this helps.

  • @sergejs.4661
    @sergejs.4661 Год назад +1

    i would never visit a website because of that nice looking layout, impresing colors ore superfancy animations, the major goal is a userfriendly experience website what have the best value for just every company.

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

    Anh này đỉnh thật!
    Well, I have an idea about a portfolio with both serious side and joking around just like you and already developing it, but this is just a whole universe level, seeing this help me get more motivation cause I'm learning and following exactly what you do even though I've only taken the first step since 2 yrs ago. So thankful that I accidently meet this while browsing for ideas, wish you all the best!

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

    great way to show collaboration between designer and developer

  • @cavancreatives
    @cavancreatives Год назад +1

    that was so clever and creativity at it's finest! Great work sir!

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

    CRAZYYYYYY one of the best portfolios I´ve ever seen

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

    This is really awesome! You have an entire arsenal in your pocket already.

  • @nobody-bt7mu
    @nobody-bt7mu Год назад

    I'm in love with this site! Randomly stumbled on to your channel and I'm glad it happened lol.

  • @oldmanscribbe1
    @oldmanscribbe1 Год назад +1

    Fake typing scene really holds it together

  • @hamptonpete7905
    @hamptonpete7905 Год назад +4

    4:29 this cracked me up lol!

  • @sonoftroy8572
    @sonoftroy8572 Год назад +1

    I truly believe, using video to explain your design thought process is the way to go. Great work by the way!

  • @rajniranjan
    @rajniranjan 10 месяцев назад

    Super impressive and inspiring. Just started learning design. Keep us motivated!

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

    Realy Awesome Portfolio, well done!! I was informed by a viewer of me that you did a video about your portfolio, realy interesting to see what your design process was i stumbled about your side on awwards and recreated your text effect your developer did a realy good job!! keep it on

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

    Man this is top notch, a beauty to look at!!!

  • @by_huy
    @by_huy Год назад +2

    Awesome video! It's really helpful to see a professional designer's thinking process. Thanks Minh 😁

  • @willl0014
    @willl0014 7 месяцев назад

    I have seen your site before this video and was unforgettable!

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

    I love it. Thanks for sharing. Props to the developer. Would be cool if he also did a bts video.

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

    While this is a great demonstration of technical skills, I think the true content (projects) is sunk within the amount of effect and overload of animation. Thumbs up!

  • @theado3183
    @theado3183 Месяц назад

    This is crazy! (clapping hand intensely)

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

    Tự hào quá. This is amazing man, i’m inspired

  • @feltronnn
    @feltronnn Год назад +2

    Wow, impressive work!

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

    Nice video, Nice Idea, Nice design, Nice dev.. Nice.

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

    I remember seeing this on Muzli and was just in awe the whole time.

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

    Thank you, bro, for your honest and amazingly inspiring work! Idea, simplicity, amazing result! I'm sitting on my own portfolio now, struggling with and versions :) Took your advises ✍🙏

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

    You are so good!!! Really like your sense of humor =)))

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

    Cái portfolio site đẹp quá. Hy vọng có cơ hội cộng tác cùng Minh nha. Thanks for the presentation.

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

    bro you inspired to create this account. I'm gonna be doing content like you or something I have in mind for my brand..love your works.

  • @Tharushism-su2ev
    @Tharushism-su2ev Год назад

    Brooo just visited your site, that’s so damn good, I swear that’s so good. Goshhh hell I wish you could just make a tutorial or walk through tour process. I wish you would make something like that in the future. That’s so damn good.

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

    Fantastic Job u had done... impressive work ....

  • @nidhalabida869
    @nidhalabida869 Год назад +2

    You know hyperplexed is here for sure

  • @ZioSenkai
    @ZioSenkai 6 месяцев назад

    You're so amazing :3 Đỉnh lắm anh ạ

  • @stochasticthots
    @stochasticthots Год назад +1

    This is dope! Thank you for sharing

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

    Amazing work Minh, very inspiring!

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

    dope. thank oyou for sharing. love hearing your process

  • @TheDyingPlant
    @TheDyingPlant 11 месяцев назад

    Inspiring designs. Best channel find in ages new sub here!

  • @London-Outdoors
    @London-Outdoors 10 месяцев назад

    Beautiful, truly outstanding website.

  • @hanscesa5678
    @hanscesa5678 7 месяцев назад

    I really love this design so much that I had to create my own using this style and concept 🤣🤣

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

    This is amazing work pham.

  • @gamepacked
    @gamepacked 10 месяцев назад

    This is so cool! Thanks for the quality video

  • @brucekennedy5274
    @brucekennedy5274 8 месяцев назад

    Holy fuck man. Astonishingly good. So inspiring.

  • @sheriffdeenadesokan3962
    @sheriffdeenadesokan3962 Год назад +1

    make a tutorial about that circular mask in figma

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

    Love your work brother. Inspirational.

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

    Great video man! Loved seeing a bit of the behind the scenes. Congrats on the awards :)

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

    This perfectionism thing also keeping me down and triggers my anxiety. I'm trying to get it under control :)

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

    Extraordinary website, thank you for the inspiration

  • @iqbalmauludy
    @iqbalmauludy 10 месяцев назад

    I feel the same when working on personal project. 😬
    Cool site btw, thanks for sharing process.

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

    Good job sharing your process, regards from México

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

    Thanks for sharing this process! This is amazing.

  • @joshuaspruett
    @joshuaspruett Год назад +1

    Man I think stuff like this is so cool, and I feel like most employers would be impressed. However, I was told in college not to supe out my website with animations and overly stimulating distractions.. If you're applying for a web dev job this might work I guess but I work in video and apparently doing this means site speeds are too slow and it's too difficult to just quickly find examples of my work for a hiring manager. I remember thinking that was a bunch of bull because my site should be a piece of my work in itself and represent my creativity and style, and instead the board of people I presented mine too just told me to take all that out and get to the point. Just enough visual interest to easy locate my work and my resume. For the record I still think that's a load of crap.

  • @subramanian-kalyan
    @subramanian-kalyan Год назад

    @Minh you were awesome man. I loved it :)

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

    It's very inspiring me, thanks for your video

  • @michaelcxt
    @michaelcxt Год назад +50

    How much did he charge you?

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

      Hey Michael. Do you need assistance with such a project? I am capable of such stuff

    • @SashaChirico
      @SashaChirico 10 месяцев назад

      yeah how much

    • @eelmeeer
      @eelmeeer 9 месяцев назад +1

      ​@@SashaChiricoyour pp is so good

  • @aminansar5294
    @aminansar5294 Год назад +4

    Insane stuff man, you are extremely creative. I would love to learn from you if you have got a course on design and 3d stuff

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

    Awesome website Minh, thanks for sharing!

  • @Tharushism-su2ev
    @Tharushism-su2ev Год назад

    I swear your website is so damn good. Goshhhh.

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

    Great work man. Thanks for the inspiration.

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

    wow! Love how cool this looks 🔥

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

    Sir, you're so INSPIRATIONAL ! Thank you so much for sharing, may ALLAH BLESS YOU !

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

    Well done! Looks great!

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

    I have this Perfectionist personality that’s why I’m stuck over a year with my portfolio still not done yet

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

    Best design i have ever seen 🔥🔥🔥
    Please tell us guide to Pro full stack web developer 🙏🙏🙏

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

    Dude legit made me question my skills 🥲 great work bro!

  • @abhisheksharma-xo8kw
    @abhisheksharma-xo8kw Год назад

    He is really an amazing person.

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

    thank you so much for sharing the process ❤

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

    amazing job. Thanks for this video !

  • @toluwanimifavouronifade8702
    @toluwanimifavouronifade8702 Год назад +1

    Very inspiring

  • @learncode5110
    @learncode5110 Год назад +1

    Thats amazing please bring one detailed tutorial on awwwward wining website design using figma with process

  • @mumk
    @mumk Год назад +1

    spectacular work! Really inspired but as a developer with zero design background, I can't formulate such fancy-looking interface 😭

  • @saurabhhaldankar8564
    @saurabhhaldankar8564 Год назад +1

    I'm currently building my portfolio too and i am going through the same emotional experiences

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

    Perfectionism😢

  • @MrrGi
    @MrrGi 7 месяцев назад

    For me, this masterpiece is just out of the world 😍. I tried my best to find that hover circle enlarging and changing frame content within the circle effect in Figma, but I had no success🥲. I am a college student and a very beginner-level designer; I want to learn this type of effect. Can you share its Figma design version? or can you make a tutorial on it, please?❤
    Merry Christmas 🎅❄☃

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

    only I can say WOW!! sir !!

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

    You are god in design! ❤

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

    Thank you for sharing this!

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

    Beautiful, thank you for sharing 🔥

  • @yammymyhammy
    @yammymyhammy Месяц назад

    Hi @Minh Pham, nice work. all your stuff is pretty great. So my question is how do you get around the issue with bringing 3D objects into mobile without sacrificing optimization?

  •  Год назад

    Great stuff dude and just keep going.

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

    Minh.. you're amazing 👌

  • @andretansil8374
    @andretansil8374 11 месяцев назад

    Thanks for sharing! very inspiring