Nice work! I like the scroll effect into the mobile phone frame. Clever use of scrolling to achieve that.
It took me a while to finish the scrolling part lol not really good with ScrollMagic but I am glad it's done. Thank you!
^ What Jonathan said. That was an impressive, pleasant little surprise. Beautiful portfolio.
Why use this effect? It doesn't seem to add or enhance Vici's work — it doesn't give it any extra depth or meaning — I'm not sure it's needed.
Perhaps the best-known use of this technique was on Apple's first promo page for the 5K Retina iMac — the effect was arguably a success, in that it was used to help the user comprehend the amount of pixel resolution on a 5K monitor — a screen that was 99% likely to have higher resolution than the screen they were viewing the site on.
That use case is not necessarily the only use case for this animation; Apple is not necessarily always a standard-bearer for excellent design. But this particular case does not fail the why question.
I tend to disagree. It subtly creates delight and it visually illustrates the fact that she designs for multiple devices. I think it accomplishes that purpose quite well actually.
Thanks for your feedback, Jonathan. I really appreciate it.
I can't see where you're coming from, however. There's nothing subtle about using the scroll wheel to pinch a large image into a box (or vice-versa) — especially on a large monitor. It's not native web behavior, so if you're going to use that effect, that effect should map 1:1 to your message. There should be a purpose to frame 1, a purpose to the final frame, and a purpose to what happens in between.
Vici's implementation is not subtle. The image itself is a photo of three devices lined up, each displaying the web site — that's fairly explicit, actually. We see that Vici designs for desktop, tablet, smartphone (not to mention the text in the top right: "I DESIGN FOR MULTIPLE DEVICES"). Why scale it all down into a phone?
"Delight". This is a pretty objective description. Personally, I found the effect jarring. Confusing. Were we zoomed in super close to a phone for a reason? Why a phone and not a desktop or tablet?
My core critique here is that this is really animation for the sake of animation (I should disclaim, my personal track record is guilty, guilty, guilty...). We've all been there & done that when it comes to finding new tools & techniques. The key is in practicing restraint. As this has been a long hard lesson to learn as a designer, I find it my responsibility to share what I have learned.
I only jump in here to respectfully disagree with you for this reason. It's not some broken-law, design-sin issue — but I believe it's at least a debatable issue. This particular piece of Vici's wonderful portfolio site is not its strongest from where I stand. That said, I like lots of Vici's work and if I were hiring I'd be inquiring!
Thanks again for your thoughts Jonathan, and thanks Vici for sharing your portfolio!
Thanks for your feedback Kyle! You gave me a different perspective to see my website. I am still learning so this is the first website that I coded. Just wanted to learn ScrollMagic actually and I was trying to see if I could use it to tell my story. :)
I just signed up to say how awesome your site is! I watched one of the videos too and it looked cool.
You've reminded me how amazingly talented other people are and how untalented I am myself!
Thanks Stephen! It's a nice of you to say this.. But I am sure you're talented as well.. Keep up the good work!
love the portfolio excellent work.
One thing i noticed is that (on latest firefox/macbookpro) the 'skills' area disappears...can't see it....just a big blank grey/white section...might want to check that out..
i enjoyed the whole site very much...although it takes a while to scroll through it...it's telling a compelling story, but i thought it took a little too long to get to the main content (for me, that'd be your portfolio).... If i'm looking for someone to hire, that's the main thing I'm going to see...
aside from that, i quite liked it.... really liked your work..... very clean and modern!
Nice catch on the firefox issue! I use Chrome and Safari all the time so never realized that something went wrong with another browser.
I was thinking to make the scrolling shorter but it wouldn't be a complete story if I did it so I decided to have a navigation bar as a shortcut. Thanks for your feedback!
Really like the "what i can help you with" section; easy for clients.
Maybe add/move your title "I AM A UI/UX DESIGNER, VIDEOGRAPHER & FRONT-END DEVELOPER" at the top under "my name is vici". That way once the pages load* you see who you are and what you do instantly instead if having to scroll down. Just my two cents ;) *on mobile.
I hope you had a chance to see the desktop view. I turned off the scrolling effect on mobile so it's a little bit different between mobile and desktop.
Yes, I should probably move my title to the first page if it's on mobile view so the about page won't be as crowded as right now. Thanks for your feedback!
You had me at the scroll into zooming-out mobile thing. Good stuff.
Also I liked that from the very beginning I could feel who you are, by the art style of the very top. Too many people try to conform to the norm.
I am glad you liked the scrolling part. I've tried to tell my story by using the scrolling effect. Thank you for your nice feedback!