A focused redesign of the National Geographic website, concentrating on the homepage, topic navigation, and stories access. This project showcases a fresh, clean, and user-friendly interface inspired by National Geographic’s visual storytelling, with a modern design that enhances user experience and accessibility.
This project reimagines the National Geographic website, applying modern UI/UX design principles to create a more engaging and accessible user experience. The goal is to highlight visual storytelling through bold typography, immersive images, and an intuitive interface that allows users to easily explore articles, photography, and videos related to different topics.
This project also demonstrates skills in responsive design, accessibility standards, and web performance optimizations.
- Enhanced Navigation: Simplified and intuitive navigation for improved user experience.
- Visual Content Focus: Large, immersive images inspired by National Geographic’s visual storytelling.
- Accessibility: Built with accessible elements, color contrast, and screen reader-friendly markup.
- Smooth Animations: Subtle animations powered by GSAP and other libraries for a modern look and feel.
- Interactive Image & Content Sliders: Custom sliders using Slick and Swiper for interactive and dynamic content.
- Frontend:
- HTML5, CSS3 (SCSS)
- Bootstrap for responsive design / icons
- jQuery for DOM manipulation and events
- GSAP for smooth animations
- Slick & Swiper for interactive content sliders
- SmoothScroll for seamless scrolling experience
To get a local copy up and running, follow these steps:
- Clone the repository:
git clone https://github.com/tahrijouteyamer/natgeo-redesign.git
- Navigate to the project folder:
cd natgeo-redesign - Open
index.htmlin your browser or set up a local server if needed.
Live Version: Check out the live version of the project here.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you would like to contribute.
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or suggestions, feel free to reach out!