How I’m obsessed with Skeumorphism for better accessibility, experience, and functionality in my upcoming portfolio.
As a product designer, my portfolio is more than just a collection of projects — it’s a reflection of my ability to solve problems, create meaningful experiences, and communicate the value of design. My previous portfolio, however, fell short of showcasing the true impact of my work. It focused too much on aesthetics and not enough on the thought process, strategy, and tangible outcomes behind each design. I realized I needed a fresh approach to better represent my expertise.
“Design is not just about making things look good; it’s about making things work for everyone. True accessibility in product design ensures that no one is left behind, regardless of ability, experience, or context.”
For this new iteration, I’ve embraced skeuomorphic design philosophy, combining familiar, tactile design elements with modern functionality to create a more immersive and intuitive user experience. By bringing this tangible feel to digital spaces, I’m aiming to not only highlight the visual appeal of my designs but also the practicality and usability that drive my work. This portfolio will speak more clearly to the value I bring as a product designer.
As I progressed my experience in product design, I frequently stumble upon how the design of things around us shaped our experience on a daily basis, I started to actually take a grasp on what it meant to be a factory of great products that not only looked good but equally effective in terms of business and reach. I took months to re-read the comments made by serious professional designers across the globe, using other methods as well, such as heat mapping, eye tracking, feedback generation, and surveys. Some of the comments were made by big brands such as Microsoft (Which failed the interview as well).
But I learned a lot from it, I took the patterns and have been experimenting with new and efficient ways of showcasing the works that I’ve been up to. So I watched countless documents and YouTube videos on how the early digital products were, and something caught me. I looked back on the earliest products of Apple, especially with their iOS and other similar digital products of other companies as well.
A background of Skeumorphism
This was truly an unbelievable era, where everything had to (strictly had to) mimic the real-life reference in the screen itself. Kudos to them, we got to transition into the digital era much seamlessly. As the tech progressed, designs much leaned towards flat design with the introduction of iOS 7 at that time, and something realism was left behind. However, skeumorphism can still be seen in many products and from which I drew the inspiration, like:
I knew I had to try mimicking this approach for my next project, so I ended up with this amazing set of components on the internet for framer here. It has the components following Dieter Rams’ design principles that reflect many aspects of the real-life counter-parts such as buttons, switches, and sliders. Here are some of the key principles illustrated by Rams:
1. Good Design is Innovative
Innovation is central to effective design. For Rams, it wasn’t merely about creating something new, but about addressing genuine issues and enhancing the user experience. It’s about exploring new possibilities without compromising on practicality and ease of use.
2. Good Design Makes a Product Useful
Functionality is key. A well-designed product must perform its function efficiently and without needless complexity or decoration. Rams held that design should improve a product’s usability rather than obstruct it.
3. Good Design is Aesthetic
Beauty is an integral part of good design, not an afterthought. Rams advocated for simplicity, elegance, and enduring design. He believed that aesthetic appeal should naturally arise from a product’s functionality and its clear sense of purpose.
4. Good Design Makes a Product Understandable
Clarity and simplicity foster understanding. A well-designed product conveys its purpose and functionality intuitively, eliminating the need for extensive explanations or instructions. Rams promoted designs that are self-explanatory.
5. Good Design is as Little Design as Possible
Arguably Rams’ most renowned principle, this embodies his conviction in the power of simplicity. It involves removing the extraneous and concentrating on what truly counts, allowing the core of the design to stand out. (Drams, 2024)
My Takeaway
So taking all principles into consideration, especially principles 1,2, and 3 as addressed above, I had to try and take this challenge. But the obvious blocker was that I didn’t have much confidence working with Framer even though it was quite similar to Figma and has amazing merits to it, my take on Framer is that I believe my website has to be scaleable where the sky is the limit, whether it be with the design system, the CMS, the CRM, backend, database, and what so ever. So I did what I do best, Mirror. I mirrored some of the components in Typescript using the tokens in the components that resembled here. Here’s a quick glance on how I did it:
Irish, R. (2022, 8 23). What Apple learned from skeuomorphism and why it still matters. Retrieved from appleinsider: https://appleinsider.com/articles/22/08/23/what-apple-learned-from-skeuomorphism-and-why-it-still-matters
Drams. (2024, 3 24). Dieter Rams’ 10 Principles of Good Design. Retrieved from drams.framer.website: https://drams.framer.website/journal
