Portfolio idea

https://www.figma.com/file/6yXavsPf5VVw5xiehZJoDK/Portfolio-Idea?type=design&node-id=0%3A1&t=rzsR8usw44uWtNiY-1 I'm toying around with some portfolio designs and came across this hero section (thanks Misha!). I was thinking about making my portfolio just this frame that's in figma, as I think it would be nice if a recruiter doesn't have to scroll down at all and can view everything really quickly. However, I feel like there's too much there, and it's too much cognitive load. What do you guys think? Should I stick with something more traditional?
Figma
Portfolio Idea
Created with Figma
34 Replies
ghostmonkey
ghostmonkeyβ€’2y ago
I think it's a pretty cool layout and would translate easily to various screen sizes just from collapsing the columns
vince
vinceβ€’2y ago
Yup that's what I was thinking too. I'm just worried a recruiter might not know where to look and immediately close out of it. But then if I have a traditional layout then I have to worry about whether a recruiter will actually scroll through the content I have πŸ˜‚
ghostmonkey
ghostmonkeyβ€’2y ago
as long as the 3 images are engaging enough to look at, they will attract the eye and they will see the descriptions etc and having the CTA button be the only really bright object makes it impossible to miss on this but you could also consider making the sections accordion style where the details are hidden and then focus on making the headline interesting enough that they would click them I"m updating my portfolio right now, and i went in that direction *(using an accordion drop down for each section instead of scrolling the page)
vince
vinceβ€’2y ago
Ohhh that's an interesting idea and it eases what people have to initially process. Nice! Thanks πŸ™‚
Misha Sosnin
Misha Sosninβ€’2y ago
Vince πŸ‘‹ What if:
Misha Sosnin
Misha Sosninβ€’2y ago
vince
vinceβ€’2y ago
wow this looks fantastic 🀯 Thank you so much! How do you come up with this stuff? πŸ˜‚
Misha Sosnin
Misha Sosninβ€’2y ago
I missed the part where you didn’t want to make it scrollable)) But the idea was that they move on their own)) And testimonials on the left was a bit too heavy on the hierarchy, so they can move with the projects)) Another idea is to make it all testimonials, and flip the card on hover, with image and stuff) It’s just one fix from what you did) Testimonials were really breaking things on the left))
vince
vinceβ€’2y ago
Yup I agree it's just crazy that you're able to come up with designs like this that seem so easy to come up with but I never even thought about doing it like that πŸ˜‚ Comes with experience I'm sure haha I'm curious about your spacing for the hero text, I spaced mine evenly (24px between the title, description, and button) but it seems like you spaced the title and description together and made the button have more breathing room. Is that a generally better pattern than grouping everything separately?
Misha Sosnin
Misha Sosninβ€’2y ago
I wouldn’t say it’s better) For the people who will see them it will make a microscopic difference) It’s just how I see it more dynamic in this cases: 1, 1, 2 (24,24,48)
vince
vinceβ€’2y ago
Thank you πŸ™‚ always wondered about that haha
vince
vinceβ€’2y ago
Here's what I think I'm going to go with:
vince
vinceβ€’2y ago
spaced out the button a bit to make it feel a bit more balanced
Misha Sosnin
Misha Sosninβ€’2y ago
As an iteration:
Misha Sosnin
Misha Sosninβ€’2y ago
vince
vinceβ€’2y ago
dang this is good!!!
Unknown User
Unknown Userβ€’2y ago
Message Not Public
Sign In & Join Server To View
vince
vinceβ€’2y ago
Thank you so much for making a really detailed breakdown πŸ™‚ I think you have a really solid point about making my resume the primary CTA, this is for jobs rather than freelance, so I'll definitely do that, as it makes a lot more sense. With the italics I also agree with you, I ended up changing that when making the website. I'll experiment with the button and see if I can make it look a bit better. Also, what do you mean by "not cantering the text"? I've never seen that term before πŸ˜‚ Also you make a really good point about the spacing, I always follow the 8 point rule but you're right as long as it's consistent it doesn't matter. Thank you so much again!
Unknown User
Unknown Userβ€’2y ago
Message Not Public
Sign In & Join Server To View
vince
vinceβ€’2y ago
Ah got it thank you! I couldn't have gotten this far without everyone's help
vince
vinceβ€’17mo ago
So this is what I have now: as you can see, the images are really out of place... not sure what to really do with the images, do you guys have some suggestions?
vince
vinceβ€’17mo ago
https://www.vincewebdesigns.com/employers Here's the live site I ended up removing the images temporarily
Looking for a frontend developer?
I'm an experienced frontend developer who specializes in designing, developing, and optimizing websites for a broad range of clients. Let's get in touch.
vince
vinceβ€’17mo ago
I need some way to make the images fill up I think, but I haven't really found a site that let's me make mockups like those you see on dribbble πŸ€” I also wanted to make the images cover the full card like I had in the mockup but couldn't find a good way to do that for contrast reasons Hm I have an idea, make it cover the whole card and just display the project title, and have an arrow indicating it can be expanded, and on expansion show the details, kind of like how ghostmonkey and Misha said
Misha Sosnin
Misha Sosninβ€’17mo ago
Maybe something like:
Misha Sosnin
Misha Sosninβ€’17mo ago
Misha Sosnin
Misha Sosninβ€’17mo ago
vince
vinceβ€’17mo ago
Once again very clean thank you! Looks great πŸ™‚ How did you make those images? Just with some tinkering in Figma? Just saw the logo at the top too! How did you do that? It looks awesome
Misha Sosnin
Misha Sosninβ€’17mo ago
Images are just your screenshot inside the frame with an outside border, with matching to bg colors)
vince
vinceβ€’17mo ago
Got it! Thank you
Misha Sosnin
Misha Sosninβ€’17mo ago
vince
vinceβ€’17mo ago
Ohh nice! Great way to liven up the page and draw attention to the interactive aspect
Misha Sosnin
Misha Sosninβ€’17mo ago
Yep) And here's a use of these angled images)
vince
vinceβ€’17mo ago
That would be a really fun challenge to code, looks super clean too! Thanks πŸ™‚
Misha Sosnin
Misha Sosninβ€’17mo ago
Yeah... that too))
Want results from more Discord servers?
Add your server