FocusFrame Media is a responsive multi-page portfolio website designed for a professional photography and videography team. The website showcases their creative work, services, and brand identity with a modern editorial-style aesthetic.
This project was developed as part of the Nexus Front-End Boot Camp Project, focusing on UI/UX design and front-end development using Figma, HTML, and CSS.
The goal of this project is to simulate a real-world client scenario by:
- Designing a visually appealing portfolio in Figma
- Translating the design into a fully responsive website
- Applying UI/UX principles and design systems
- Building clean and structured code using HTML & CSS only
- Design: Figma
- Frontend: HTML5, CSS3
- Fonts: Google Fonts
- Icons: SVG format
https://focus-frame-media.vercel.app/
https://www.figma.com/design/ieB91sMVy3QIMcSr31jzlw/Untitled?node-id=0-1&m=dev&t=mg55Ny08rD63rOyr-1
https://github.com/amen-meb/FocusFrame_Media
- UI/UX design workflow from idea β wireframe β final design
- Converting Figma design into real website
- Writing clean and structured CSS
- Creating responsive layouts
- Improving visual storytelling through design
- Add JavaScript for interactivity (lightbox, sliders)
- Integrate backend for booking system
- Optimize images for performance
- Add animations with libraries (GSAP, etc.)