Framer Portfolio Website for Omar Raafat – Industrial Designer🚀

Mahmoud Barbary

Web Designer
UX Designer
Framer Developer
Figma
Framer

Project Title:

Framer Portfolio Website for a Top Rated Plus Industrial Designer
Omar raafat portfolio website
Omar raafat portfolio website

Project Overview:

Omar Raafat is a highly experienced Industrial and Product Designer who is passionate about turning ideas into real-world products. With over five years of experience and a Top Rated Plus designation, Omar guides clients from the initial concept through to full product development, ensuring every design detail aligns with their vision. The goal of this project was to create a portfolio website that reflects Omar’s expertise and personality while also increasing client engagement and inquiries.

My Role:

I was responsible for the complete design and development of Omar’s portfolio website using Framer. This involved conducting client onboarding, gathering design requirements, and creating an intuitive and visually appealing portfolio that showcases Omar’s skill set and previous work.

Project Details:

The website was designed to not only showcase Omar's expertise but to also connect with potential clients on a personal level, providing a sense of his professionalism and attention to detail. The process included:
Onboarding with the Client: During the onboarding session with Omar, I gathered detailed information about his career journey, design philosophy, and goals for the website. We discussed the importance of showcasing both his technical expertise and his personable approach to product design. This conversation helped us create a clear roadmap for the design, ensuring that the final product would meet Omar’s expectations and attract more clients.
Onboarding with the Client
Onboarding with the Client
Competitor Research & Moodboard: I analyzed portfolio websites of other top-rated industrial designers to understand what works in the market. The goal was to differentiate Omar's portfolio by incorporating unique elements that emphasized his personality, while still maintaining a professional and polished look. The moodboard featured sleek, modern typography and bold colors that highlight his credibility and expertise.
Competitor Research & Moodboard
Competitor Research & Moodboard
Wireframes & Information Architecture: I structured the site to ensure smooth navigation, making it easy for potential clients to explore Omar’s services, testimonials, and past projects. Wireframes were developed to balance visual impact with functional ease-of-use, guiding visitors through the story of his design process.
Wireframes & Information Architecture
Wireframes & Information Architecture
Setting Fonts, Icons, and Colors: Carefully selected the Satoshi font for its clean, modern look, along with a color palette that balances professionalism and creativity. Icons were chosen to enhance clarity and engagement throughout the website.
UI/UX Design in Framer: The final design in Framer integrated Omar’s branding with a clean, minimalist aesthetic. Key sections of the website included:
Introduction: A personal introduction, immediately giving visitors a sense of Omar’s approachable yet professional demeanor.
Service Overview: A clear breakdown of his services, from concept development to 3D modeling and prototyping.
Client Testimonials: A dedicated section for testimonials, adding credibility by showing client satisfaction and results.
Featured Projects: Highlighting his most impressive work, showcasing the impact and creativity of his designs.
UI/UX Design in Framer
UI/UX Design in Framer

Challenges & Solutions:

One of the main challenges was integrating a high level of technical information without overwhelming potential clients. By structuring the content in a visually digestible manner and breaking down services with icons and short descriptions, we were able to maintain clarity while ensuring that the website remained engaging.

Technologies Used:

Figma (for documentation, data collecting and wireframes)
Framer (for design and development)
Custom graphics and photography

Outcome / Results:

The completed portfolio website successfully represents Omar Raafat’s expertise as an industrial designer. The clean and professional design allows potential clients to easily understand his services, and the user-friendly interface encourages them to reach out. Since the website launch, Omar has seen an increase in inquiries, with many clients appreciating the clear presentation of his work and personality. This project solidified Omar’s position as a top-rated designer in his field, driving both awareness and conversions.

Client Testimonial :

"I had the absolute pleasure of working with Mahmoud on designing and building my portfolio website, and I couldn’t be happier with the results. From the very beginning, Mahmoud demonstrated exceptional patience and attention to detail, guiding me through the entire process with the utmost professionalism.
He has an incredible eye for design and a deep understanding of user experience, which translated into a website that not only looks stunning but also functions flawlessly. His dedication to perfection and commitment to delivering high-quality work were truly impressive. Higly recommended!"
— Omar Raafat, Industrial Designer.
Project Link:
Partner With Mahmoud
View Services

More Projects by Mahmoud