7 Design Portfolios that I MIGHT Rate a 10!

[Music] what's up everybody so a lot of times on my live stream ui ux reviews which i do usually every friday or saturday a lot of people say have you ever rated anybody a 10 because i do a scale rating of you know one being the worst portfolio i've ever seen and then 10 being you know the best i've ever seen um and i've never given a 10 so i thought a great idea for a topic for today's video would be seven awesome design portfolios that i think are great and actually might be tens all right so that's we're gonna do today make sure to subscribe if you haven't yet and let's get started one second before we begin the sponsor of this video is scrimba now in case you've been living underweb rock scrimba.com is an interactive learning platform for coders they've recently launched their front-end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so check out the first link in the description below to get 50 off all right so for the very first portfolio we have paper pillar all right so the one thing that i really like about you know this initial design that we see here is this illustration it is perfectly seamless i you could tell that instead of just using like a stock sort of illustration library which you see many of those you know a lot of work has gone into this to create a nice custom really color vibrant eye visual i i like everything about this top section it is in my opinion nearly perfect um let's scroll down to see what else happens and then notice this small things like this they really help they go a long way i if if we're talking about a potential client or an employer checking this out notice what happens to the let's talk call to action here when you scroll down so it's really cool that they give you an animation a visual reference that that is occurring uh so i think that is really awesome um next up of course all the ui design fundamentals are here really good topography good color and contrast good white space good visual higher visual hierarchy that is everything's really solid they found a unique way to show clients right here a lot of people just put things in rows which is okay but you know to come up with something unique really helps go the extra mile with clients latest works here so they have card designs and they're flipping them reversing them all the like i said all the design funnels are here they're really well designed good white space i really vibrant interested to work with us let's talk call to action button so i really don't see anything wrong with this one this is out of the other six examples uh this is probably the more simplest one in terms of not having a lot of animation but i you know if i had to rate this one i would probably give it you know like a 9.5 or so very solid next up is going to be sibo studio all right so let's let this load so we have a nice very quick loading animation there when i look at this i think really simple very clean great colors i as you can see there's not a lot happening here i like the navigation how it's separated here with the logo a lot of people sometimes will make these too large and then you lose that visual hierarchy but there's a good separation between the logo this navigation and then the call to action let's talk um what font is that that's sb enia 01 okay i actually like that font a lot i so outside of this if we scroll down here we have some animations that take place now what's really cool is when you hover over these you can see that they're independently some of the items like this little cell phone graphic or whatever it is or smartphone i is animating in a little bit differently so they're not just taking this whole container and applying this transform animation on it they're doing some other things that are a little bit more unique to just make it more of a unique interesting animation so it's designed very well and also the interactivity is there as well you can see the same sort of thing happening here and here so i really like this one i really love the colors here uh the separation between this purplish bluish color um and then this this darker right here works very well the animations are all very subtle as they come in um they're using borders here but they're doing the the borders between these elements in such a way that's very that's like an afterthought uh so you can barely see them so i i really like it that's a good usage of using borders in a modern way so good call to action sticks out you know again all the design fundamentals are here there's nothing wrong with what i see in any of this so again this is going to be higher up there like a 9.5 or so even though this is well there's not a lot of crazy interesting animations or anything like that happening next up is going to be obs obys.agency so let's check this one out all right so now we have a loading graphic and this is one of these uh really modern contemporary styles and so you see this sort of style quite a bit um we've hijacked the the cursor that's something that we see often we design unique web graphic experience all right so that's a good headline i because a lot of people for their portfolios or their agencies you know website they'll just put like the web they'll just put something boring but this is um this is pretty good pretty solid this is another one of those things that you would see as well when you hover over a certain type uh typography you'll see like a photograph that's overlaid on top of them again this is definitely a much more contemporary style of design also a nice smooth scroll happens when you use your mouse screw wheel very nice they have little micro uh interactions happening here so the right now in this area i of this little overlay right here if you click it just notice what happens to the play icon so very nice use of javascript there and design i again this is one of those i forget which library allows you to do this these types of effects i need to cover this actually you see this a lot in these type of designs like in cod drops i think it's called co drops um i think like 3js can do this stuff correct me if i'm wrong so i definitely want to cover this i really like this it's a very interesting effect and notice the layout is it's not like your typical layout uh they're they're doing things very uniquely in terms of how they decided to situate the columns here and the photographs and all of that so you don't always have to do the cookie cutter thing so all in all everything's smooth nice smooth animations that come in based on the scroll no issues with ui design fundamentals i mean the the color contrast obviously is there because it's pretty much black on white good white space everywhere overall very very cool next up and if i had to rate this one you know this might be very close to a 10. halo lab all right so design driven development of your web product for years all right so coming down here if we scroll good notice nice white space between uh these sections notice the nice visual hierarchy from this type based on the left column and the description over here on the right recent works you know this is another one of those ways you can feed a unique way you could feature your products so i it's it animates slightly on scroll notice the overlapping effect here of the type that's on top of this element and notice the nice micro interactions that we have with the hover this all works very well same thing here so it's like basically going back and forth from a right to left sort of orientation for each of the projects again all the design fundamentals are here notice a lot of these have really interesting animations that are tied to scroll as well as the mouse so not only do they just have well designed and uniquely designed by portfolios and agency portfolios but there's also a lot of interactivity in movement as well next up so if i had to rate this one i would probably give this one like i'm saying like i a good a good 9.5 9.6 i probably don't like this top part the most but everything else is very solid all right so here's an awesome example of a interactive animated sort of illustration with a lot of detail in it that i that i like um let's refresh this because we do have animation where it initially loads i really like how all this text comes in and this is also animating on cursor movement i don't really like this though the menu because we could completely just put those out here but outside of that notice all the subtle animations that are coming in as these cards flow in i see a lot of people will do this on my live ui ux review but sometimes they make you wait too long for the animation to come in but these come in exactly right when they're in the viewport and it's just a nice way kind of like having these cars that are based on the color scheme that works well for the particular project so those are really nice i like that a lot so this one again it's going to be very close to a 10. next up coupon.space now this one had a lot of attention this is like an older portfolio that i've seen but if we scroll down look at the animations that take place so it will automatically kind of shift you into this section based on the scroll movement so you all have to do is just touch it and then automatically it comes in and all the animations are just really smooth look at that it is just so nice i encourage everybody to go to this site and just look at how the animations occur also if i click this it comes in i so i'm not sure which technology stack they're using for this but i it seamlessly transitions to each page in a very nice manner so you can learn more about all of those particular projects or those pages very very very nice next up last but not least is going to be alex coven.com all right so really simple large headline here now if i scroll down same sort of thing happens where it will automatically filter things in and he's found a unique way to kind of feature and showcase each of the projects and if we click this little play icon right here or this little right arrow it'll take us again seamlessly transition into yet another page where it gives you all the information about that particular page or product or service we'll check out another one click play nice animation micro interactions here everything's designed well on the subsequent pages all in all very very nice all right so that is it just a quick video today on my personal opinion of designs that are if not tens very close to tens and now you have my personal opinion on what constitutes really great portfolios and designs so i think the key takeaway here is going to be designs that obviously have all of the ui design fundamentals going for them which is color and contrast topography white space alignment visual hierarchy but also taking it another step beyond that and introducing unique layouts also micro interactions and animations alright so hopefully you enjoyed that if you did make sure to subscribe and i'll see you all soon goodbye

Channel: DesignCourse

Views: 574,983

Rating: 4.9229178 out of 5

Keywords: design portfolio, ui design portfolio, web design portfolios, design portfolio 2020, design agency, design agency website, graphic design portfolio, gary simon, designcourse

Id: m0VHFrhceik

Length: 14min 3sec (843 seconds)

Published: Thu Nov 05 2020