DeshTrip Landing Page UI
A clean, vibrant landing page design created to help a friend learn web development while expanding my UI and Figma skills.
This project is a landing page design for "DeshTrip" created as a collaborative learning experience. The primary goal was to provide a solid, structured design foundation for a friend learning how to build websites. In turn, it provided me with an excellent opportunity to dive deeper into Figma, explore design layouts, and refine my UI skills.
Learning & Structuring
The core objective was to create a practical, structured, and visually appealing layout that a beginner web developer could easily understand and translate into code.
Designing for
Development
When designing for someone learning web development, the layout needs to follow clear grid systems and logical structures. Complex, overlapping designs can be daunting, so the challenge was keeping it beautiful yet developer-friendly.
Clean, Structured
Layouts
I implemented a clear box-model approach in the design, clearly separating headers, hero sections, features, and footers. This made the design easy to interpret and provided me with a structured way to practice auto-layout and components in Figma.
Exploration Process
Colors & Typography
Selected an engaging and vibrant color palette appropriate for a travel/trip theme. Established a clear typography hierarchy using modern fonts.
Components
Designed foundational UI elements such as buttons, cards, and input fields. Ensuring they had consistent padding and margins for easy CSS translation.
Content Mapping
Organized the actual content and imagery needed for the landing page to ensure the design accommodated real-world data effectively.
Full Page Assembly
Assembled the components and content into a cohesive, scrolling landing page layout, maintaining a consistent grid and visual rhythm.
Design Elements & Mockups
The Result
This collaborative exercise was a win-win. My friend received a structured, high-quality design to practice translating into code, while I deepened my understanding of Figma, auto-layout constraints, and practical UI design principles.