Thanks, Gary, it was great seeing some of the good ones. Just thought I would share with you: I had an interview today for a full-stack developer and they "loved" my designs. I gotta thank you for all the years of guidance and insight into web design.
What's the name of the extension that lets you see the name of the font at 4:02 ? Edit: nevermind, i found it. It's called WhatFont if anyone is interested.
My two favorites are start contrasts to each other: 1) The first one: why? It's simple, it's clean, minimalist design which I like. 2) The sixth one, kuon yagi: I can't imagine the time nor the effort put into this, it's simply stunning. The site is dark themed, to which I'm biased towards, adds an anime feel with it with the moon shrouded with clouds. And the touch scroll. Man the scrolling was so fun and clean and smooth and fast, like cheese dripping from pizza. I was captivated the second I saw it, although I don't have the level of creativity the person, it did blew my mind off. Based on what I wrote you probably know which I liked the most, 😝.
@@komekko373 ummm that was ridiculous!! lol it was basically an animation! No interaction! Was it even a website? No contact info or any idea what the website is for!!! I mean very talented and interesting but.......
Its nice but when you visit it doesn't have enough content for me to convince someone to hire him. From design aspect it is very beautiful but from business aspect Id say he def needs more examples of his work. For all we know it took him 5 years to create this website and only one other website that he has completed in his portfolio? beautiful yes.
There is a channel called "Online Tutorials" that he give tutorial how to design a website like this using html, css, and js. I learned a lot from him 👍
@@jusatin If you code them using vanilla javascript and optimized web elements like JPGs and SVGs, there shouldn't be any lag. Optimize, optimize, optimize.
The sites with overwhelming amounts of animation make for an awful user experience in my opinion. Not accessible either. The "smooth" scroll is the worst. Text that transforms on hover is also something to stay away from. I like the first portfolio the most. If you are going for a wow-factor on some new product website I get it, however, for sites that are supposed to be informative and useful, I would stay away.
These look great! But to be fair these are not really portfolios, more like "landing pages", since we don't get to see how the actual work is presented. I think that for a portfolio the actual content is extremely important and we are not getting into that in any of these examples.
I feel like this review goes only so far as to rate the decorative aspects of these portfolios, which all of them are stunning of course. But I think he’s missing on very important aspects of what makes a good portfolio and that is how designers present their work and how they came up with their solutions. I didn’t see him going into any of the project to rate how they do that. So yeah these are a 10 from a UI/animation/aesthetics point of view
@@sycrox2 Can you please elaborate what exactly you are talking about. Dear, I'm Pro React developer but not pro in designs, just to be clear on side. But if i can have a Ui/Ux design. I can show you from step 1 tom last step of how to make a completely responsive website , Not media queries. Using React Js and That Ui/Ux design
@@rafaycodes1050 Yes i was talking about create a website like kuon's Portfolio, it is amazing, so @bearded coder said he has done things like that, i was refering to it
Hey Gary Could you make a tutorial on the effect that the last 2 sites use which is the slight scroll to have smooth animations and interactions to and from sections
Idk if ur gonna see this but u should make a video on, finding websites and putting ur inputs on how they can become 10’s, what’s missing to make it better
Hi, Gary. First allow me to thank you for the amazing content you publish. I've learned a LOT by watching your videos. I also thoroughly enjoy The Negative Space ("TNS") and I make a point to watch every episode, which is always packed with great advice. Now, in that series (TNS), understanding why you gave a certain site a certain rate is a 'no brainer'. But here, where pages analysed were all so close to a 10, it would have been great to know what prevented you from giving them an actual 10. For example, you said you "saw nothing wrong with" the first site and you praised its design, typography, white space, illustration and choice of subtle animations but it was still awarded a 9.5. I was left wondering: what was missing? What could have pushed that 9.5 to a real 10? What would you have fixed or somehow improved? In reviewing Halo Lab, which got a 9.6 rating, you said "I don't like this top part the most"; that gives us a clue to what could be better but, still, sounds a bit vague as it does not pinpoint why you disliked it. Perhaps it was font spacing? Or maybe something else? Without the benefit of experienced eyes like yours, we are left wondering. About Kuon Yagi's page, from your comments I'd imagine you really liked the animation but since you forgot to rate the site, we sort of have to imagine whether placing it (almost) at the end of the video was random or a way to show your preference. Alex Coven's portfolio was my least favourite. It doesn't quite appeal to me, load times were dismal, I failed to see coherence between different pages of the site and it didn't work as smoothly on my mobile device as it does on the desktop. But again, because there was no rating assigned, we do not know if in your opinion it was closer to perfection or if was just randomly placed at the end. It was (yet another) great video, of course, and I am not complaining or anything - heck, that'd be preposterous - but you always say you value feedback so I thought I should mention it. Perhaps, if you ever post another video like this (that'd be awesome!) you could tell us what you'd do to make the sites better or simply just why they did not get a 10. Thank you for all the amazing free content published and regards from Brazil.
It would ne great if you could a Tutorial on some of this animation especially the first one and how to create the lets talk button that goes down with the site, this would be great to know how to make them or which Frameworks and libraries to use
I know people joke like this sometimes, but some actually think that and it's always surprised me. Great portfolios (or whatever project) inspire me, if anything, and remind me just how much better I can still get.
My suggestion is you start by making it completely without animations, because you will need the fundamentals of the web site to be extremely fast, when you also want to use animations. So do performance test without animations first. Response time should be less than 0.2 seconds, else the user will feel it is lagging
While I like all of these and they are carefully and well designed, however I think they feel "empty" or sometimes a bit boring. Just by looking at the site, the amount of useful information per screen space is so minimal that I can't find them really suitable for real life scenarios. As a portfolio they are super nice, but many of them are designed to be as a company website etc. I think I'd call it a bit of cheating to go with less information rather than to make it work with more information. In the end I certainly agree on that they are very well designed and are following good practices. And some of them have very nice little details and touch-ups.
it might feel this way because he has a high resolution. if you visit the websites yourself and set them to a traditional 1920x1080 everything fills the space nicely
Can't really judge based on what's being shown here. For all you know 90% of their visitors could be on mobile and the websites showcased look more than fine (less empty) on mobile.
So, the rule of thumb is this: 1) Content is king 2) Always start with the content 3) Fill it in the HTML 4) Then add the static design CSS 5) THEN add functionality like animations And between 4) and 5) do performance test, so you know which animations you can use. Also JS should be used mainly to do AJAX calls to make parts of the page faster
I have some questions about some of the designs (I'll time stamp) Could someone justify them to me? At 4:15 the text next to "Our Projects" isn't that way to light? I get the it's the less important text but I can barly read it with my glasses on. why not leave it condensed black. At 5:15 The small gap on the right of the footer draws your intention imediatly That isn't the job of a footer right she why did they do it? (Anything else then design choice.) The one 6:00 I get is a contemporary website which is fine but as a buisness I wouldn't reccomend doing this since most older people won't understand it. It's cool just not a good buisness website as a personal porfolio sure but not for a buisness. At 8:46 I don't think those cards should move (Unless there is more content) It feels like there should be more shown but there is nothing more there it confuses me.
I totally agree with you!! The gap at 5:15 especially bothered me, with 6:00 and 8:46 on a shared 2nd place. I didn't really notice 4:15, because I'm not wearing glasses so I assumed the problem was with me.
I love how all of these sites are rated 10 UX wise but accesibility wasn't even touched on... How do these sites react to reduced motion settings? High contrast? Screen readers? Keyboard navigation? No javascript? Do they adapt to user theme?
Maybe this is a dumb question, but if you make a solid design with custom elements and clients ask for similar or exact designs is it normal to re-use your own designs? Like text animations, or slides, mouse elements etc. or even large portions of the basic design?
Great video, only wish you'd view them as they were created I guess? On your screen everything looks so empty (it's 4k I guess) but it makes everything much smaller.. Just a thought
I'm thinking a good series of videos on how to fully code websites like these in the various frontend technologies (vanilla HTML/CSS, bootstrap, materialize, etc) would be awesome. Any chance of doing that? Designing is one thing and seems quite easy to master once you learn the fundamentals and the tools, but actually turning complex designs into working code is something I think a lot of folks struggle with when trying to be a good frontend developer. Would still also love to see videos on coding unique navbars, such as navbars that have logos that go outside of the standard rectangle of the navbar (circular, triangular, etc).
Sebo hover animations are so goood! Having said that, design company portfolios better be great! I'll check out the case studies for sure. Thanks for the video :)
They all look amazing, but most are agencies or people with a lot of money to spend. Although impressive, it isn’t a realistic view on a what an individual designer should aim for, especially because we tend to update our portfolio every couple of years. Take his POV with a grain of salt. Designers, just make sure your work is solid and highlight the projects that emphasize your range and quality. Us, Creative Directors and Product Design Managers focus on fundamentals and how much we’ll have to coach you up on, along with your design eye and understanding of best practices. This isn’t a realistic expectation, and you shouldn’t feel discouraged because of it. 💯✌️ For someone critiquing portfolios on TH-cam, I’d love to review his. The saying goes, “ those that can, do. Those that can’t preach.” 💯
really i like the first two (the white space on the second seemed to be a bit much but i still like it) ... the others seemed like "let me include ALLTHEJS libraries" -ish ... especially that black background one .... i try to design stuff that looks good on desktop AND mobile, but actually has CONTENT to it as well vs just "flash" and animation for the heck of it ... but gives users info and a reason to want to come back
Landing pages are so easy because they require so little in functionality that you can cram it with aesthetic. I'd like to see sites that are more prestigious in the UX department than in the cosmetic department.
Always learn Raw CSS before SASS and SASS before CSS libraries and always learn JS before JS libraries Because some times you need only few of the effects of a library and then you will download needless kbs of code for the library when you could have used a few lines of raw code instead
Very late but UI is just one portion of "front end". Frontend is anything you interact with, which would include UI and UX. But also it's considered the programming languages and technology used to create that webpage that has that UI/UC
I don't think I like modern design, most of these sites look "okay" to me, some have interesting elements. I like the idea of a separate hover transform on the image of an article. The last two examples have some details I really like, but definitely suffer from the "everything is large" syndrome that I personally would rather avoid (large text is great on phones, but not needed on desktop) in 99% of cases.
Responsiveness should be less than 0.2 seconds, tested in for example Lighthouse. If you can keep responsiveness below 0.2 seconds, they will feel like they respond imediately and users really like that.
It looks so awesome, I want to become a professional front end dev! But at the same time, I can't be bothered with the level of details and obsession, I will just be a back end dev :p
Takeaways: Fundamentals: - High contrast background and text (white or black background) - Lots of whitespace - Good alignment Extras: - Animations (subtle, less is more, visual feedback)
Are there any alternatives to learning all of the different coding languages to create and install these designs onto a website? I'm currently learning and it's a steep curve going from scratch. Are there any recommended premium wordpress themes or similar that would allow animations and better UX design to be integrated into the theme without custom code?
OBYS was the only one that stood out to me. I like the mix of Brutalist style with an elegant feel to it. I’m really over the “web 2.0” look that most of the other websites had. It’s 10 years old.
5:54 Probably the kind I hate the most. Lots of animation but no real usage of it. It's just there to be there. You could take them away and nothing would really change. Also I find it very hard to read
I agree, once you're in a mobile territory, almost all of the "amazing stuff" goes away and you end up with very simple layouts with the fundamentals of design, I wish developers spend more time designing interesting layouts for mobile, it's an interesting topic.
@@FranciscoMorales-qk4ux That kuon.space/ website is completely the same on mobile, insane design. If all the other designs are close to 10, I'd give this one like 20
90% of these portfolios are made in Webflow, cool platform. Everything looks nice on large screens but you should show the mobile version too 😊. However cool content and nice work.
Its So SImple guys, you just using CSS and Javascript/Jquery for Animation. You can use addClass or removeClass in Jquery for floating button from top to buttom. It just like manipulation the button (Hide text, and show the icon message). The final step, is change the Lets Talk Button to Message Button with different color
Hello I love your videos but you say that on the first portfolio the animation of "lets talk" that turns into a letter on the side is a good idea but before you said that nobody will want to contact you before you introduce yourself (like here at the beginning of the portfolio) I just wanted to know your answer to this. Otherwise great video as usual :)
I still stand by that. But it's a really tiny factor. If you can still impressive them when the page first loads, you can intrigue them enough to scroll down / navigate to learn more on their own. Ideally, they would have another CTA that directs them to their work.
@designCourse Could you please share the name/type of animation that happens with "lets talk" . Not necessarily step by step , but a hint how I could find it by googling. Thank you in advance :)
![[LIVE] : ONE ลุมพินี 91 | คู่เอก "คมอาวุธ vs อเล็กเซย์"](http://i.ytimg.com/vi/V0RkEfYFsgM/mqdefault.jpg)
I know I left out a LOT of other great portfolios. Who else rocks?
Thanks, Gary, it was great seeing some of the good ones. Just thought I would share with you: I had an interview today for a full-stack developer and they "loved" my designs. I gotta thank you for all the years of guidance and insight into web design.
I have to add though, my designs are nothing like some of the ones you showed here. Wow, those are amazing!
primate-culture.com/ ;)
hirenotme.com portfolio ?
The one which really inspired me : brittanychiang.com/
How laggy do you want the site to be?
Designers: YES!
How much SEO do you want the site to have?
Designers: YES
React developers: What is laggy?
@@DeViLTh0rn React Developers: What is SEO? )))
@@phat80 Use gatsby and call it a day :))
@@adnanbadshah3425 Or next
What's the name of the extension that lets you see the name of the font at 4:02 ?
Edit: nevermind, i found it. It's called WhatFont if anyone is interested.
thanks dude i was looking for it
Thanks, i was about to ask :D
Thanks bro am about to ask the same question
I use Font Ninja
Thank you! I was going to ask the same thing 😂
My two favorites are start contrasts to each other:
1) The first one: why? It's simple, it's clean, minimalist design which I like.
2) The sixth one, kuon yagi: I can't imagine the time nor the effort put into this, it's simply stunning. The site is dark themed, to which I'm biased towards, adds an anime feel with it with the moon shrouded with clouds. And the touch scroll. Man the scrolling was so fun and clean and smooth and fast, like cheese dripping from pizza. I was captivated the second I saw it, although I don't have the level of creativity the person, it did blew my mind off.
Based on what I wrote you probably know which I liked the most, 😝.
If others are close to 10, than Kuon Yagi (11:16) must be a 12!
God damn, what a design.
Beautiful!
That was sick!
rate this one yui540.graphics
@@komekko373 6.
@@komekko373 ummm that was ridiculous!! lol it was basically an animation! No interaction! Was it even a website? No contact info or any idea what the website is for!!! I mean very talented and interesting but.......
Its nice but when you visit it doesn't have enough content for me to convince someone to hire him. From design aspect it is very beautiful but from business aspect Id say he def needs more examples of his work. For all we know it took him 5 years to create this website and only one other website that he has completed in his portfolio? beautiful yes.
During the sponsor :
Everybody : Guilt
Me : Only the Scrimba dev might be on the rock.
How to create something he likes: animate everything!
god of animation
@@komekko373 This would be a 11/10
lol damn
INSECURE SPOTTED! :(
True af haha
bro my computer sounds like a race car after entering those sites
I really hope someone will make some tutorials about: “How to create those kind of website”
There is a channel called "Online Tutorials" that he give tutorial how to design a website like this using html, css, and js. I learned a lot from him 👍
@@annakarina4599 thanh you for letting me know!^^
Considering how you really should avoid creating slow-to-load sites, that are full of animation, I hope not.
@@jusatin If you code them using vanilla javascript and optimized web elements like JPGs and SVGs, there shouldn't be any lag. Optimize, optimize, optimize.
@@jusatin honestly less of a problem than ever
The sites with overwhelming amounts of animation make for an awful user experience in my opinion. Not accessible either. The "smooth" scroll is the worst. Text that transforms on hover is also something to stay away from. I like the first portfolio the most.
If you are going for a wow-factor on some new product website I get it, however, for sites that are supposed to be informative and useful, I would stay away.
Truly said!
business who truly care for their users would never hire these folks to design "creative" websites that sucks at user experience
I was surprised to see him praising this JS flooded sites tbh
What would your top 10s be?
@@sweetmemesalabama Most of the time they are just flexing. A real project always care about ux first, in my opinion
I took your advice from last week
and I am going to redesign my portfolio, thanks Gary !
Good Job Paperpillar and Sebo Studio!
PROUD INDONESIA!!
🥺 bangga sama paperpillar
Lah gw baru tau dari indo
Keren banget ga nyangka! Passionate designers sama developers dari Yogyakarta, Indonesia.
Mantappp
Mantappp Paperpillar dan Sebo
These look great! But to be fair these are not really portfolios, more like "landing pages", since we don't get to see how the actual work is presented. I think that for a portfolio the actual content is extremely important and we are not getting into that in any of these examples.
I feel like this review goes only so far as to rate the decorative aspects of these portfolios, which all of them are stunning of course. But I think he’s missing on very important aspects of what makes a good portfolio and that is how designers present their work and how they came up with their solutions. I didn’t see him going into any of the project to rate how they do that. So yeah these are a 10 from a UI/animation/aesthetics point of view
Congrattsss PaperPillar!
Amazing designs, imagine being the developer who had to implement them, I wouldn't know where to start and how to do most of the stuff xD.
I'm a developer, Who implemented this multiple times & some times it sucks honestly, When someone else provides you a Ui/Ux design to implement it
@@beardedcoder2550 can you please do a tutorial about creating something like that, it would be great, thank you
@@sycrox2 Can you please elaborate what exactly you are talking about. Dear, I'm Pro React developer but not pro in designs, just to be clear on side. But if i can have a Ui/Ux design. I can show you from step 1 tom last step of how to make a completely responsive website , Not media queries. Using React Js and That Ui/Ux design
@@rafaycodes1050 Yes i was talking about create a website like kuon's Portfolio, it is amazing, so @bearded coder said he has done things like that, i was refering to it
@@sycrox2 Hey, i commented as @Rafay Codes Okay I'd make a tutorial in upcoming week.
Hey Gary
Could you make a tutorial on the effect that the last 2 sites use which is the slight scroll to have smooth animations and interactions to and from sections
www.cssscript.com/smooth-momentum-scrolling-butter/
@@avidusampath6427 Thanks ! I'll take a look
th-cam.com/video/o_lWNEevHJo/w-d-xo.html also provides you with a tutorial on how to perform such an effect in Webflow
Checkout fullpage.js
@@l4webdesign186 Thanks, I'll take a look.
Great to see all the things that work well, for a change. This, along with your negative space reviews, is so instructive.
Idk if ur gonna see this but u should make a video on, finding websites and putting ur inputs on how they can become 10’s, what’s missing to make it better
Hi, Gary. First allow me to thank you for the amazing content you publish. I've learned a LOT by watching your videos. I also thoroughly enjoy The Negative Space ("TNS") and I make a point to watch every episode, which is always packed with great advice.
Now, in that series (TNS), understanding why you gave a certain site a certain rate is a 'no brainer'. But here, where pages analysed were all so close to a 10, it would have been great to know what prevented you from giving them an actual 10.
For example, you said you "saw nothing wrong with" the first site and you praised its design, typography, white space, illustration and choice of subtle animations but it was still awarded a 9.5. I was left wondering: what was missing? What could have pushed that 9.5 to a real 10? What would you have fixed or somehow improved?
In reviewing Halo Lab, which got a 9.6 rating, you said "I don't like this top part the most"; that gives us a clue to what could be better but, still, sounds a bit vague as it does not pinpoint why you disliked it. Perhaps it was font spacing? Or maybe something else? Without the benefit of experienced eyes like yours, we are left wondering.
About Kuon Yagi's page, from your comments I'd imagine you really liked the animation but since you forgot to rate the site, we sort of have to imagine whether placing it (almost) at the end of the video was random or a way to show your preference.
Alex Coven's portfolio was my least favourite. It doesn't quite appeal to me, load times were dismal, I failed to see coherence between different pages of the site and it didn't work as smoothly on my mobile device as it does on the desktop. But again, because there was no rating assigned, we do not know if in your opinion it was closer to perfection or if was just randomly placed at the end.
It was (yet another) great video, of course, and I am not complaining or anything - heck, that'd be preposterous - but you always say you value feedback so I thought I should mention it. Perhaps, if you ever post another video like this (that'd be awesome!) you could tell us what you'd do to make the sites better or simply just why they did not get a 10.
Thank you for all the amazing free content published and regards from Brazil.
It would ne great if you could a Tutorial on some of this animation especially the first one and how to create the lets talk button that goes down with the site, this would be great to know how to make them or which Frameworks and libraries to use
+1 A quick peek at the code doesn't give it away
Gary, thank you for this video. Please also evaluate the responsive designs of these websites (mobile + tablet)
Seeing these makes me feel like my own portfolio sucks! I guess I should start by actually creating one...
Who's got time for that?!
I know people joke like this sometimes, but some actually think that and it's always surprised me. Great portfolios (or whatever project) inspire me, if anything, and remind me just how much better I can still get.
@@DesignCourse Not me, been years since I decided to create my own blog.
My suggestion is you start by making it completely without animations, because you will need the fundamentals of the web site to be extremely fast, when you also want to use animations. So do performance test without animations first. Response time should be less than 0.2 seconds, else the user will feel it is lagging
@@DesignCourse truer words have never been spoken
omgg paperpillar made it here! they really are awesome
While I like all of these and they are carefully and well designed, however I think they feel "empty" or sometimes a bit boring. Just by looking at the site, the amount of useful information per screen space is so minimal that I can't find them really suitable for real life scenarios. As a portfolio they are super nice, but many of them are designed to be as a company website etc. I think I'd call it a bit of cheating to go with less information rather than to make it work with more information.
In the end I certainly agree on that they are very well designed and are following good practices. And some of them have very nice little details and touch-ups.
Nah man, you want to keep your UI lean. if you start cramping meanless stuff into it, people just might get lost, or wouldnt know where to start or do
it might feel this way because he has a high resolution. if you visit the websites yourself and set them to a traditional 1920x1080 everything fills the space nicely
Can't really judge based on what's being shown here. For all you know 90% of their visitors could be on mobile and the websites showcased look more than fine (less empty) on mobile.
So, the rule of thumb is this:
1) Content is king
2) Always start with the content
3) Fill it in the HTML
4) Then add the static design CSS
5) THEN add functionality like animations
And between 4) and 5) do performance test, so you know which animations you can use. Also JS should be used mainly to do AJAX calls to make parts of the page faster
In some examples the content is so small relative to the screen size that it feels unfinished.
amazing, Papperpilar is from Yogyakarta Indonesia
1st one was really amazing!
10:02 what is the term or name or what is that sort of camera movement or angle effect called?
I am against using antidepressants, but when I saw the OBYS site, I felt the need to get some :) What a horrific design!
I have some questions about some of the designs (I'll time stamp) Could someone justify them to me?
At 4:15 the text next to "Our Projects" isn't that way to light? I get the it's the less important text but I can barly read it with my glasses on. why not leave it condensed black.
At 5:15 The small gap on the right of the footer draws your intention imediatly That isn't the job of a footer right she why did they do it? (Anything else then design choice.)
The one 6:00 I get is a contemporary website which is fine but as a buisness I wouldn't reccomend doing this since most older people won't understand it. It's cool just not a good buisness website as a personal porfolio sure but not for a buisness.
At 8:46 I don't think those cards should move (Unless there is more content) It feels like there should be more shown but there is nothing more there it confuses me.
I totally agree with you!! The gap at 5:15 especially bothered me, with 6:00 and 8:46 on a shared 2nd place. I didn't really notice 4:15, because I'm not wearing glasses so I assumed the problem was with me.
on the first Web site: you forgot click on let's talk button to see the modal window, It is really cool !!
Love these videos! I think it might be great if you could put the websites in mobile view to see how they look / perform differently.
I love how all of these sites are rated 10 UX wise but accesibility wasn't even touched on... How do these sites react to reduced motion settings? High contrast? Screen readers? Keyboard navigation? No javascript? Do they adapt to user theme?
What extension did you use to quickly view the fonts in the webpage?
I have it too. It's called WhatFont :)
Maybe this is a dumb question, but if you make a solid design with custom elements and clients ask for similar or exact designs is it normal to re-use your own designs? Like text animations, or slides, mouse elements etc. or even large portions of the basic design?
business is business, yk :D
The Halo lab one was the best. Strikes an overall Halostic balance between stasis and dynamism. Neither bland nor overly animated.
Great video, only wish you'd view them as they were created I guess? On your screen everything looks so empty (it's 4k I guess) but it makes everything much smaller..
Just a thought
If there's one thing i take from this video, it's the chrome extension whatfont! Been searching for something like that for way too long...
sebostudio was the best one in my opinion.
Whilst the scroll to fill the viewport pages are cool they feel like IKEA when used as you’re forced to navigate the website the way they want you to
I'm thinking a good series of videos on how to fully code websites like these in the various frontend technologies (vanilla HTML/CSS, bootstrap, materialize, etc) would be awesome. Any chance of doing that? Designing is one thing and seems quite easy to master once you learn the fundamentals and the tools, but actually turning complex designs into working code is something I think a lot of folks struggle with when trying to be a good frontend developer. Would still also love to see videos on coding unique navbars, such as navbars that have logos that go outside of the standard rectangle of the navbar (circular, triangular, etc).
Fundamentals, unique layouts, microinteractions, animations = 9+/10
You should really make a video on those over-the-top non typical effects and transitions, that would be great
This was so much valuable. Thanks for posting.
Bringing back the 90s in web design I see
These designs will make you touch yourself, but this is November.
Stunning portfolios. Hope ill be as good as those genius designers soon
Thank you for Sharing it with us. Keep up the good work
Thanks for sharing these!
thx for the vid... i got the energy again and i will start work on my portfolio :)
Good luck!
Sebo hover animations are so goood! Having said that, design company portfolios better be great! I'll check out the case studies for sure. Thanks for the video :)
They all look amazing, but most are agencies or people with a lot of money to spend. Although impressive, it isn’t a realistic view on a what an individual designer should aim for, especially because we tend to update our portfolio every couple of years. Take his POV with a grain of salt. Designers, just make sure your work is solid and highlight the projects that emphasize your range and quality. Us, Creative Directors and Product Design Managers focus on fundamentals and how much we’ll have to coach you up on, along with your design eye and understanding of best practices. This isn’t a realistic expectation, and you shouldn’t feel discouraged because of it. 💯✌️
For someone critiquing portfolios on TH-cam, I’d love to review his. The saying goes, “ those that can, do. Those that can’t preach.” 💯
I like the first and 2nd to last one best
What a nice content, thank you for sharing it with us!
Keep up the good work!
really i like the first two (the white space on the second seemed to be a bit much but i still like it) ... the others seemed like "let me include ALLTHEJS libraries" -ish ... especially that black background one .... i try to design stuff that looks good on desktop AND mobile, but actually has CONTENT to it as well vs just "flash" and animation for the heck of it ... but gives users info and a reason to want to come back
Excelentes diseños para inspiración de UI/UX
7:11 It would be great if you could cover that!
Landing pages are so easy because they require so little in functionality that you can cram it with aesthetic. I'd like to see sites that are more prestigious in the UX department than in the cosmetic department.
I find it very funny when you say: "Nice white space between these sections..." for the dark themed web site :)
Probably the best app from you..
Thank you for sharing, it's very interesting ! I really like special animations on photographies in Obys web site !
what chrome extension did you use to check font? 4:04
WhatFont
Personally, I use "CSS Peeper" which also tells the font-size, color as well as line-height of that paragraph or tag.
Do all these use grid? And do we need to learn Css animation or just learn different libraries?
Always learn Raw CSS before SASS and SASS before CSS libraries and always learn JS before JS libraries
Because some times you need only few of the effects of a library and then you will download needless kbs of code for the library when you could have used a few lines of raw code instead
Can you tell me the difference between UI and front end? I'm new to the tech field and this is something I'm very interested in.
Thank you 😊
Very late but UI is just one portion of "front end". Frontend is anything you interact with, which would include UI and UX. But also it's considered the programming languages and technology used to create that webpage that has that UI/UC
As you rated the second one 9.5, I though the following: "Make it better then!"
kece sih emang paperpilar, pertama lihat langsung follow dulu
Great information. Need advice on the best way to add a flooring visualizer to my stain concrete business website? Thank you.
11:18
what the name of framework the scroll smooth please
how can i learn this 🤔
After watching this video I have a pretty good idea on how to ace my protfolio
I don't think I like modern design, most of these sites look "okay" to me, some have interesting elements. I like the idea of a separate hover transform on the image of an article. The last two examples have some details I really like, but definitely suffer from the "everything is large" syndrome that I personally would rather avoid (large text is great on phones, but not needed on desktop) in 99% of cases.
Three JS does let you do those and yes you should definitely cover it
Interesting that you didn't check any of them for responsiveness, especially around the more complex animations?
Responsiveness should be less than 0.2 seconds, tested in for example Lighthouse. If you can keep responsiveness below 0.2 seconds, they will feel like they respond imediately and users really like that.
Anyone knows how to do the little animation at 4:21 ? And how is it called ?
Hi all! Anyone knows how the effect from video name - when you move cursor over picture - and it is kinda go away a bit from cursor? Like 10:37
1:13 - First Portfolio
7:05 which library???
wow. thank you for the amazing video
It looks so awesome, I want to become a professional front end dev! But at the same time, I can't be bothered with the level of details and obsession, I will just be a back end dev :p
Takeaways:
Fundamentals:
- High contrast background and text (white or black background)
- Lots of whitespace
- Good alignment
Extras:
- Animations (subtle, less is more, visual feedback)
Are there any alternatives to learning all of the different coding languages to create and install these designs onto a website? I'm currently learning and it's a steep curve going from scratch. Are there any recommended premium wordpress themes or similar that would allow animations and better UX design to be integrated into the theme without custom code?
Wow, This video was so Amazing, I liked this portfolios 😄😄
OBYS was the only one that stood out to me. I like the mix of Brutalist style with an elegant feel to it. I’m really over the “web 2.0” look that most of the other websites had. It’s 10 years old.
What is the name of the chrome plugin for detecting fonts?
Not a plugin just open up your console (F12) , in the top left corner you have a button (A little arrow in a square) to inspect elements.
@@acedervall ah yea, i forgot i can hover the element
5:54 Probably the kind I hate the most. Lots of animation but no real usage of it. It's just there to be there. You could take them away and nothing would really change.
Also I find it very hard to read
Amazimg Content as Always.
Thanks for your Great Content.
4:09 how did you check font?
I love this guy.
I would love to see those reviews on phone as well.
I agree, once you're in a mobile territory, almost all of the "amazing stuff" goes away and you end up with very simple layouts with the fundamentals of design, I wish developers spend more time designing interesting layouts for mobile, it's an interesting topic.
@@FranciscoMorales-qk4ux That kuon.space/ website is completely the same on mobile, insane design. If all the other designs are close to 10, I'd give this one like 20
90% of these portfolios are made in Webflow, cool platform. Everything looks nice on large screens but you should show the mobile version too 😊. However cool content and nice work.
Loved the video!
Can anyone tell me how to implement that animation on let's talk floating button shown in the first website..
yes pls this would be so helpful
Its So SImple guys, you just using CSS and Javascript/Jquery for Animation. You can use addClass or removeClass in Jquery for floating button from top to buttom. It just like manipulation the button (Hide text, and show the icon message). The final step, is change the Lets Talk Button to Message Button with different color
Can you please share how to design a website which is more targeted to mobile devices?
Hello I love your videos but you say that on the first portfolio the animation of "lets talk" that turns into a letter on the side is a good idea but before you said that nobody will want to contact you before you introduce yourself (like here at the beginning of the portfolio) I just wanted to know your answer to this.
Otherwise great video as usual :)
I still stand by that. But it's a really tiny factor. If you can still impressive them when the page first loads, you can intrigue them enough to scroll down / navigate to learn more on their own. Ideally, they would have another CTA that directs them to their work.
@@DesignCourse Thanks for answering so quickly, I wanted to make sure I didn't get confused between your videos :)
@designCourse Could you please share the name/type of animation that happens with "lets talk" . Not necessarily step by step , but a hint how I could find it by googling. Thank you in advance :)
how would you start in learning how to do those animations/motion graphics?
Wohoo Paperpillar 🤍
Kuon's was fantastic.
nice, bring more videos like this!!
Hey, how can we crate an animation based on scroll ? Which software ?
So i've been living under a rock for this long
What did you use to discover the font used on the second portfolio?