7 Design Portfolios that I MIGHT Rate a 10!
Вставка
- Опубліковано 4 чер 2024
- bit.ly/3kLV5Qt - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? designcourse.com
-- Today, I'm going to show you 7 examples of design portfolios that I think are EXCELLENT. Perhaps so good, that they might deserve a 10.
Let's get started!
paperpillar.com/
sebostudio.com/
obys.agency/
www.halo-lab.com/
www.orizon.co/
kuon.space/
www.alexcoven.com/
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! - Навчання та стиль
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
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, 😝.
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
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 😂
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.
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
I took your advice from last week
and I am going to redesign my portfolio, thanks Gary !
Great to see all the things that work well, for a change. This, along with your negative space reviews, is so instructive.
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
Gary, thank you for this video. Please also evaluate the responsive designs of these websites (mobile + tablet)
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.
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
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.
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 :)
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
This was so much valuable. Thanks for posting.
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
Thank you for Sharing it with us. Keep up the good work
1st one was really amazing!
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
ua-cam.com/video/o_lWNEevHJo/v-deo.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.
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
Great information. Need advice on the best way to add a flooring visualizer to my stain concrete business website? Thank you.
10:02 what is the term or name or what is that sort of camera movement or angle effect called?
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...
What a nice content, thank you for sharing it with us!
Keep up the good work!
Amazimg Content as Always.
Thanks for your Great Content.
on the first Web site: you forgot click on let's talk button to see the modal window, It is really cool !!
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).
Congrattsss PaperPillar!
How do you call that scroll transition snap thingy Kuon uses? I've been dying to implement that into my own portfolio for ages but can't seem to find what it's called!
Thanks for sharing these!
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.
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
Thanks for sharing..
I appreciate.
Please, how can I implement that animation feature at 10:02?
Thanks in advance
During the sponsor :
Everybody : Guilt
Me : Only the Scrimba dev might be on the rock.
Thank you for sharing, it's very interesting ! I really like special animations on photographies in Obys web site !
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
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
You should really make a video on those over-the-top non typical effects and transitions, that would be great
I am wondering what your thoughts are on the apple website/design guidelines compared to the material design guidelines. Any preferences?
omgg paperpillar made it here! they really are awesome
Wow, This video was so Amazing, I liked this portfolios 😄😄
Excelentes diseños para inspiración de UI/UX
Very inspiring portfolios ....can i ask whats that extension that detects the font name ?
@DesignCourse I'm having trouble finding the video where you use a tool to see exactly which assets of Bootstrap you are using
Stunning portfolios. Hope ill be as good as those genius designers soon
thx for the vid... i got the energy again and i will start work on my portfolio :)
Good luck!
Hi! Have you covered this effect somewhere in your tutorial in relation to coding?
kece sih emang paperpilar, pertama lihat langsung follow dulu
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.
What did you use to discover the font used on the second portfolio?
Loved the video!
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?
nice, bring more videos like this!!
wow. thank you for the amazing video
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
The Halo lab one was the best. Strikes an overall Halostic balance between stasis and dynamism. Neither bland nor overly animated.
how would you start in learning how to do those animations/motion graphics?
@DesignCourse
Hello Sir,
Can you please tell me the extension name you used to see the font name like an eye-dropper tool?
WhatFont
Three JS does let you do those and yes you should definitely cover it
What tool do you use that reckognises fonts?
What extension did you use to quickly view the fonts in the webpage?
I have it too. It's called WhatFont :)
What extension did you use to find the font?
What is the name of the extension you were using to see the font name?
How is made the animation of th emessage buttton in the first portfolio/CV?
which extension you use to find that fonts?
Which extension you chose for checking the font ?
Hey, how can we crate an animation based on scroll ? Which software ?
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
After watching this video I have a pretty good idea on how to ace my protfolio
Hey man, what the name of first one portfolio design style? Paper design?
sebostudio was the best one in my opinion.
I like the first and 2nd to last one best
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
What software does he use to check out the font that's been used?
how did u find out the font of tht website? is tht some sort of software
I can convert a design into static Website but by seeing the design. If I come across any idea and I want to turn that into a website then I can't design UI for that website idea.
Means I can't design UI of websites. Tell me some ways to get good at this please.
I am against using antidepressants, but when I saw the OBYS site, I felt the need to get some :) What a horrific design!
Hi. Is there a library for the scroll animation used in the 6th portofolio?
You can use gsap's scroll trigger library
Please what libraries are used to create this websites, how is responsiveness handles on this websites?
What is the best framework to amimate like that ? Please make a video ..
What extention was that help to find font
what is the name of the tool with which you can see the font?
Anyone knows how to do the little animation at 4:21 ? And how is it called ?
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
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.
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
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?
11:18
what the name of framework the scroll smooth please
how can i learn this 🤔
wow this is amazing
amazing, Papperpilar is from Yogyakarta Indonesia
whats the plugin to see what is the font?
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.
What quality bro 💟💟
I love this guy.
I like it thank you so much
Most of these have great mobile sites too which is amazing