I’ve been h̶a̶r̶d̶ ̶a̶t̶ ̶w̶o̶r̶k̶ (procrastinating actually) on a more mature portfolio for the past couple of months. I’m finally comfortable with the current version and made it public/uploaded it on my site: www.mihaivladan.com. Or you can look under the hood in Webflow here https://webflow.com/website/Mihai-Vladan-product-and-design-consultant
Would love to get some impressions about it.
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.
Thank you for your time!