One of the biggest challenges I always had as a Web/UI/UX designer is how exactly can you showcase a ~5000px-one page website on a 4-5" mobile screen(short answer: you can’t…properly at least).
With that in mind, I started to build it from a mobile view upwards. “Elevator 7-seconds-pitch” was the primary goal.
Webflow was perfect for this approach giving me the freedom to build two websites and display them based on the device:
Mobile visitor → Mobile projects
A trend ( guilty as charged) among designers was to showcase our designs inside devices based on type. But what happens when you visit a site on a mobile, and you want to showcase mobile projects? Phone-ception! 375px of screen real-estate and that shiny phone mockup takes up at least 20-50px to show you, the user, that this project is a mobile project…while you look at it on a mobile. Why not just display the mobile view and be done with it? That’s precisely what I did. *Most of the time. Pros: You actually understand what the image is all about. Cons: Some projects might not have a mobile version(ex: web app)
Another issue that seems to be more and more relevant is the 18-19:9 super-ultra-tall phone screen — making it entirely unfeasible for showcasing large one-page designs due to how narrow the viewport is (once you take into account the browser-bar and other elements). My solution? Place a “view not supported banner and asking the user to switch to portrait.”
Desktop/tablet visitor → Desktop&Mobile projects
More screen real-estate? More pixels! Full project mockups and maybe some device mockups.
This site is going in my inspiration folder right away. Outstanding quality, fine tuned to the smallest details, unique layout, suprises there and there, reading path so obvious that you’re well guided into discovering your work — which by the way is great too.
And the elegance of the black and white profile pic, the “90’s but timeless” feeling from the combination of red, white and black in the menu… there’s work on this, and the outcome is ace, kudos.
Hi Vincent, wow, thank you for the kind words. I’ve been getting mixed responses on the huge hero shots (in other places I’ve posted the link). People seem to be put off by them or think they are “ironical/self-deprecating.”
The idea behind those images was to deliberately position me as an actual human being, and consultant, rather than a collection of pixels from projects + an about page.
I wholeheartedly believe this approach helps overcome the “screwdriver-syndrome,” where if you sell yourself as a freelance-designer sometimes you will be treated as a pixel-screwdriver, and your opinions are irrelevant.
Nothing tells more that “I’m a solo designer” than a solo picture, actually. And whatever if your serious/confident picture is seen as ironicaln there’s work in the attitude, apparence and capture, and that’s what matters. “Self-deprecating”, apart from not being true, is really a harsh comment.
Portfolio is an exercise, a field of exploration, an occasion to use and break trends. It’s very easy to make a 100% effective portfolio, by keeping things simple, like a series of sections with full viewport images. Nothing can beat that, but it’s not impressive. Adding soul and complexifying it isn’t the easiest task, but here it’s done greatly. And I liked the stance on the mobile because even if we have Webflow, which gives us no excuse to craft brilliant mobile versions of our sites, designers still don’t put enough work on mobile views. It’s often just a mini version of desktop, with no reflexion on what’s the mobile UX will be.
Vincent, thank you again for the kind words! They are greatly appreciated.
I’ve got some great feedback and will go back to the drawing board on a couple of things. Will post again once the updated version is done.
guilty as charged) among designers was to showcase our designs inside devices based on type. But what happens when you visit a site on a mobile, and you want to showcase mobile projects? Phone-ception! 375px of screen real-estate and that shiny phone mockup takes up at least 20-50px to show you, the user, that this project is a mobile project…while you look at it on a mobile. Why not just display the mobile view and be done with it? That’s precisely what I did. *Most of the time. Pros: You actually understand what the image is all about. Cons: Some projects might not have a mobile version(ex: web app)