ESSENTIAL Design Portfolio Strategies Revealed by an Industry Expert

We are diving into another portfolio in this video. This one is Abdulquadri. I hope I'm not butchering that name too badly. This is his portfolio. He filled out my form. So we're going to take a look at it and see what there is to see. So I've pulled this up, I've checked out a little bit. I'm just going to scroll through to give a little look at everything here. All in all, I think this is pretty fun. It's got like some color changing going on. Things are popping in, flying around, a little fun scrolling thing. Like, I think in general the website is fun and you can tell there's been a lot that's been put into it, a lot of effort and I definitely applaud that. This is pretty fun. Little touch local time. All right, my first critique here is that there is a lot of competition for what is calling for my attention. We've got the avatar and the name. We've got a really big navigation, big hire me button, another hire me button, book a chat button. We've got a LinkedIn button, we've got, got a three line headline, a three line subtext, and then this little five star feedback thing from friends and these little, I guess these are like testimonial cards. So all in all, I think there's a little bit too much going on on this page right here. And if I'm scrolling down for whatever reason, this hire me button getting animated in, I don't, I'm not necessarily opposed to that, but the animation feels a little bit like it's either lagging or some kind of something doesn't feel quite something about the way it's popping in. It just feels a little bit rough. And that's the thing with animation on the web. If you can pull it off really well, it can be like, wow, that was awesome. But if one tiny thing is like missing or it's breaking a little bit, then it's almost not even worth it to put it in because then it becomes a distraction. And as I was scrolling through this website, I realized if I click Experience, it's only taking me like a very small scroll down the page and then if I click testimonial is in a way that's like what someone said about you, but this one is actually linking to more like about you. So this should either say about me or maybe there, there's a testimonial that you meant to link to. But right now there's a disconnect between testimonial and where it's linking to, which is more an about me section here. And then. So each one of these first three buttons is scrolling me through the page, whereas resume is linking me to the Google Drive of your page. So these three links right here are internal to this page and this one is external to another page. And then to top it off, the hire me button is a mail to anchor link. You can see it down there in the bottom left. You can see it says mail to and it's got your email in there. So I personally have all mailbox applications disabled on my computer. I only use Gmail in the web interface and because of that, when I click this button, nothing, nothing happens. So when I click this button, nothing happens. And the mail to link is not going to open that for me. So I'm always more of a fan of putting my email out. That way people can copy and paste it. Or if you go to hire me or contact me, maybe there's like a contact page and you. And so because of this navigation, because of the animation, and because of these three being internal links and one of them being not quite linking to what I thought it was going to link to, and this being a mail to link, I would honestly possibly consider just not having this on here. Hire me could go to another page. Like theoretically you could leave that there, but I definitely don't think you need two calls to action here. I don't know if it should be hire me or if it should be book a chat. I actually don't mind book a chat, but then maybe we just do book a chat. Just one call to action. Book a chat with me. And this rollover thing is fun, I don't hate it, but it also feels a little bit distracting on this like main headline page. And I don't know about clicking this main headline link and going immediately to your LinkedIn. I think you, you don't necessarily want people to leave your main headline on the very first part of your page and then immediately kick them off to your LinkedIn. I think like your LinkedIn and like your contact information if it's down here in the footer. So you do have LinkedIn here. You've got some social media stuff. Honestly, I think that's enough. You could potentially like list out in Text form your LinkedIn, but I don't know if I would link it in your main headline. Even though I do actually love that photograph of you. I think that's super cool photography and maybe there's a way to work that in with a design. But as it is. I don't know if I would do that just simply because it creates another place for me to look and a slightly distracting way to view the very first part of your portfolio. I do like the experimentation with this little thing over here, but again, I think I might get rid of that because it's just, it's taking my eye off of everything else. I also wonder. So I, I noticed on a couple different sections within the website, it feels like the headline line height could be just a touch large and the subtext line height could be a touch large as well. It almost feels like there's. It's interesting because it feels like an even amount of space, like here and here. It's very rhythmic and very like a pattern, almost like the same beat over and over and over. Whereas what you really want is like a punch, like a kick drum and a snare at the same time on the headline and then a straight beat on the text. Right now it just feels like a little bit of a straight beat everywhere. If that even makes sense. I don't know if that makes sense. And look at what is going on here. We've got. GSAP is going crazy on this website. This shows me that you have some sort of, some sort of code that is just firing non stop over and over. And that could be what's happening with the, with that animation. Even while I'm scrolling right here, you can see how it's flickering in that background change. And then some of these other, for example, these things, if I can point like right there as they come in, they're a little bit. It just feels like it's not quite as smooth as it should be. Like you could almost reduce the Y axis by half and just have them barely fade in. Like a very subtle, like quick fade in. But something's definitely going on where you, your animation triggers are firing over and over, which is no doubt making your site feel a little bit rigid and shaky instead of as smooth as it possibly could. You really only want those triggers to fire like on your scroll. So that's a whole different can of worms. I'm not going to go too much further into that, but that could be a little bit of what's going on. Even this, like this fade right here. I don't dislike it, but the fact that it's almost tied to my scroll position and, and therefore if I'm scrolling really slowly, it feels a little bit odd. So if I was, if you were going to keep it in there, what I would do is find a scroll trigger Point, like, possibly, like, right here. And then as soon as you trip that scroll, trigger point, go ahead and animate from 0 to 100 or whatever the animation is that you're doing. That way, if I go up, it's going to fade regardless of how fast or slow I go. But it's also, like, it's not 100% necessary to have these fancy fades while you're scrolling through. It's definitely a nice to have if you can pull it off. But I would focus possibly a little bit more on some of the things that are distracting before I go too much further in the tinkering with the animation and things like that. So on the line height here, I would. So we've got that at 2. 2 is a pretty big line height for. For, like, subtext. Typically, like 150 or 160 would be as big as I would want to go. And then this. See, could you. I'm just. I like to put it at a hundred and see what it looks like and then go up from there. So you might have had that in a good spot. I think maybe you want maybe just a little bit of a margin right there. This, and this also might be too, too tight. I'm not sure. Like, this is just a very quick, little quick demo. So let's just keep this one and this one here. Yeah. So this is probably actually too tight. You could potentially simplify this headline a bit. For example, you could possibly get rid of a designer's journey. Something about this, the width possibly, is also bothering me a little tiny bit. I almost want to see that on four lines instead of three. And when I'm doing stuff like this, it's definitely not prescriptive. It's just me thinking, I wonder what happens if we do that. And I wonder what happens if we do that. So a lot of it is just me satisfying my own curiosity. I also don't know if for over seven years really matters to people. I think what you're trying to do is possibly, like, just say, I've got. Look, I've got seven years of experience, and I think that's good to say, but I don't know if it deserves to be in your headline. So I'm just wondering, what if we simplified this a little bit more down to its, like, essence? I'm not saying that is, like, 100% better. I'm just trying to boil everything down into, like, its absolute. I don't even know what I'm trying to say. I want it to be simple and straightforward, and I Like the idea of bridging design and data. And again, I'm not sure if I would put these things in the main section. I think this almost deserves to be its own little section, these rollovers. I think that might be doing you a little bit of a disservice in this main area. I do like your fault, your photo. I do like your photo showing up like that. I think that's fun. I also think that if you're going to use this EM dash, most of the time an EM doesn't have a space between the two words, so you might want to close the gap on that. And I think there's probably a little bit more we could do to work this out. Like, I like this line that you have right here. You could potentially, I don't know, bring the lines in here, or maybe this could go over here and you could bring your book a chat button up here. I'm not sure exactly what needs to happen, but I would consider playing around with that a little bit more. I also wonder, should we push this away? I also. You might consider removing the underline. I wonder if you just had everything. I'm not sure what is happening on rolling over the data. Maybe something I did messes that up. Something I did must have messed that up. But just with all of these rollovers, I think in general, it's just a bit much is going on. So I would try to simplify it some. And so I'm not saying this is 10 times better or anything, but it just. It's a little more clear where it's okay, this is me. I bridge design and data. Let's book a chat. Okay, got it. Whereas this one, it's like home experience Testimonial Designer Journey, LinkedIn. Book a chat. Hire me. It's a lot to consume when I just first hit your page. So I think simplifying it down to not necessarily this, but something where it's like a very clear direct path where there's one call to action. And if I'm not ready to book a chat, no problem, I'm gonna keep on scrolling. I do think that the way that you have it here, where this is showing on the bottom and you're teasing that bottom content, I think that's perfect. The way I did it here, where I just added a bunch of space, is not as great. I think having that there is a nice way to show that there's more content. And this right here, there's something going on where you need more padding on this side. You definitely Want the same amount of padding on each side here. At the very least. At the very least amount. I also think that you could definitely bring this to maybe 1.5. I'm not sure. You could probably go a little lighter with the font weight, if possible. Looks like it's not going to let me, because you might have a specific. But let's just. For example, if we change this to a different font, we could play around with the weights a little bit more. So if I went with 400, then you could see that it just has a slightly different texture when it's a little bit lighter of a weight. Whereas on this one, when it's like a kind of a heavy weight and a lot of line spacing, it has a little bit of an odd text feel. Again, I'm not saying that what I've done is like a million times better, but it's just something for you to consider. Reducing the weight a little and reducing the line height a little would make that feel a little bit more like a proper block of text. And another thing that I will point out is I don't mind what you've done here. I think you've designed a nice tile, a nice kind of card. But ultimately, I feel like the cards are almost overpowering your actual design work. What I really want to see is I want to see your designs. I want to see. I want to see this thing I to want. I want to see a big version of this design and any other designs that go along with it. I want to see big designs. I don't necessarily. I do like that you've put, like. I'm a solo designer, collaborated with engineers. This is a perfect line of text here that goes along with the project. And like I said, I'm not necessarily even saying that you don't need all this information, but what I do want to see is more design. I want to see. I want to see your actual work. I want to see, like, three pages. Three. Three to six versions of whatever you worked on. If you were doing, like, captivating animations, where are the animations? And I see that there's, like, a little call out, but that's linking to something that's been shut down. So I would just record the animation, put it right here, and have the ability to see it, like, front and center. And these are, like, getting there. But what I'd really like to see is just. I want to see. Maybe take one of these and then blow it up, like, really big and play around with making the UI huge and. And Then maybe some like smaller screens so I can really just check out the actual design work versus trying to read a bunch of things. Same thing here. This is a nice looking UI screen, but I want to see it larger. I want to see like as big as you put this. I want to see this. I want to see that screen like as wide as this entire section right here. So that can really dive in and see. Okay, let me see this like border that he put on here. I want to see the space that he put around the icon and oh, I really like the way he left aligned all of this information right in here. And, and I like the way this is left aligned here. But it's actually hard for me to see that because it's such a small image in regards to the entire headline. Four case study in notion. Don't necessarily want to open this in notion, but see, I was hoping to see like a ton of like design work. But even the actual design, even this screen right here, I wanted to see that screen. I want to see a larger version of that screen and I don't see it here. So ultimately I really want to just see those designs. I think a lot of this stuff is good to keep track of, but. And maybe I'll go back and read this after I've been intrigued by the designs. Same feedback on this one video preview link into the app store. I don't know where that video preview is, so I would just put that video right here so you're not linking people out while they're viewing your work. Pretty fun little timeline. These are like really tiny. I'm not sure if these. I, I like the idea of call out here, but you may want to consider doing these as like their own individual things instead of a tiny little card. This section is probably my favorite, honestly, because a lot of this looks nice and I can actually see the work. Like I want to see these much, much larger. I want to see bigger versions of these. But I, I do, I like this grid of work. I will say be careful with this. Like, these two designs look really similar and like you're, it's apparent that you're, you've got a style. But this one with the little hearts and the same kind of basic layout as your portfolio, I'm gonna see that and think, okay, now he's using the same design for two different projects, which I can tell there's some differences and there, there is a different amount of things going on. But just be careful with that. I do book a chat as like a. I would say, possibly, like, ready to discuss your next project? Book a chat. That might be a better phrasing than have a design scope and want me to work on it, because a lot of people aren't really willing to make a decision. I want you to work with me right now. I've got to hire you right now. A lot of times people are like, I just want to have a conversation right now. So thinking about how you can message that potential client or employer and how you can stand out with your design work is going to be a great way to approach this. So hopefully that is some valuable information, and I think you've got some great work. I just want to see it in bigger display and see it in better detail. So if you like this video and you want to see more, then just hit that subscribe button and I'll see you in the next one.