1. Project Overview
Objective
Design an immersive, visually stunning Interstellar website concept using Figma to captivate users with an engaging, space-themed user experience.
Target Audience
Space enthusiasts, science fiction fans, and people interested in learning more about outer space, galaxies, and celestial phenomena.
2. Research
User Research
Audience Personas: Defined key personas based on user demographics (enthusiasts, students, casual visitors) to guide design decisions.
Competitive Analysis: Studied popular science and space-related websites to analyze how they present complex information in engaging formats.
Key Insights
Users were interested in:
Visually captivating graphics and interactive elements.
Easy navigation through vast content.
Bite-sized, digestible information about complex scientific concepts.
3. Design Concept
Visual Style
Color Palette: A dark, space-inspired palette with purples, blacks, and whites for a cosmic feel, along with bright accent colors to highlight information.
Typography: Used a futuristic font for headings to enhance the sci-fi theme and a sans-serif font for body text to maintain readability.
Imagery: High-resolution images of stars, planets, and nebulae, combined with vector graphics to simulate a journey through space.
Wireframing & Prototyping
Created wireframes and interactive prototypes in Figma to outline:
Homepage: Serving as the “mission control,” with quick links to various sections (e.g., Planets, Galaxies, Missions).
Planetary Exploration Pages: Interactive pages for each planet, with facts, images, and unique exploration routes.
Galaxy Exploration Section: A zoomable map of the galaxy, allowing users to click on specific galaxies to learn more.
Missions and History Timeline: Showcasing major space missions with an interactive timeline feature.
4. User Experience (UX) Strategy
Navigation
Simplified navigation to allow for seamless movement between sections, with a sticky header to keep core pages within easy reach. Implemented a breadcrumb trail on inner pages for enhanced orientation.
Interactive Elements
Animations: Micro-animations for buttons, loading effects resembling star travel, and hover effects to provide feedback and keep users engaged.
3D Models: Integrated rotating 3D models of planets to give users a realistic sense of planetary appearance and dimensions.
5. Testing & Iterations
Usability Testing
Conducted testing sessions with a sample of users from the target audience:
Collected feedback on the ease of navigation, engagement with content, and appeal of visuals.
Adjustments: Based on feedback, modified the color contrast for readability and reduced animation speed for smoother transitions.
6. Final Design
The final design successfully incorporated an immersive, educational, and visually engaging experience with intuitive navigation and interactive, space-themed elements.
7. Tools & Techniques Used
Figma: For wireframing, prototyping, and final design creation.
Illustrator: For creating custom vector graphics and icons.
Blender: Used in initial 3D model experimentation for planets, before implementing simpler 2D effects for optimization.
8. Conclusion & Learnings
Reflecting on the process, I learned:
The importance of balancing creativity with usability.
Effective ways to simplify complex information for an engaging user experience.
Gained hands-on experience designing for niche audiences with specific visual and interactive needs.
