UI/UX
IIED Website Design
A thoughtfully designed landing page for IIED that communicates its mission, club-based learning approach, and holistic education vision through clear hierarchy, structured layout, and a modern visual language.
Year:
2025
Sector:
Education
Organization:
IIED
Project Duration :
3 Weeks
Project Overview
IIED (Institute of Integrated Excellence Discovery) is an education platform focused on nurturing future-ready youth through skill-based learning, leadership development, and holistic growth beyond traditional classrooms.
This project explores the design direction of IIED’s website through a dedicated landing page, with the goal of establishing a clear, credible, and modern digital presence for the institution.
Context & Challenge
IIED’s vision, philosophy, and club-based learning approach were not clearly communicated through a single digital platform.
From a user perspective:
The mission and purpose were difficult to grasp at first glance
The structure of programs and initiatives lacked clarity
Navigation did not guide visitors smoothly through the content
The challenge was to translate IIED’s multidimensional educational model into a structured, approachable, and trustworthy web experience.
Design Intent
As my first UI design project, the focus was on clarity rather than complexity.
Instead of following a rigid UX process, I concentrated on:
Creating a strong visual hierarchy for educational content
Presenting IIED’s philosophy in a calm, confident, and modern tone
Structuring the landing page to guide users from understanding to exploration
The intent was to design a foundation that communicates purpose clearly while remaining scalable for future growth.
Goals
The primary goals for the landing page were:
Clearly communicate IIED’s mission within the first scroll
Present the club-based learning model in a structured manner
Establish credibility and trust through clean visual design
Ensure readability and ease of navigation for diverse audiences
These goals informed layout decisions, typography usage, and content flow.
Visual Direction & Design Approach
Typography
The interface uses DM Sans (Medium, Semibold) for Headings and Krub (Regular) for Body texts to maintain clarity, neutrality, and modernity, qualities well-suited for an academic and institutional platform.
Weight variation was used to establish hierarchy without introducing visual noise.
Color Strategy
Rather than limiting the design to a minimal palette, multiple colors were used intentionally to:
Differentiate content sections
Create visual rhythm across the landing page
Support content grouping and scanning
Care was taken to maintain balance and avoid overwhelming the user.
Layout
The layout follows a top-down narrative flow, guiding users through:
Introduction and positioning
Mission and values
Programs and initiatives
Supporting information and calls to action
Spacing and alignment were prioritized to improve readability and reduce cognitive load.
Key Design Decisions
Adopted a grid-based layout to reflect structure and discipline
Emphasized heading hierarchy for scan-friendly reading
Used color as a structural tool rather than decoration
Kept UI elements minimal to maintain focus on content and meaning
These decisions were made with students, parents, and educators in mind, users with varying levels of digital familiarity.
Outcome
The final landing page presents IIED as a credible, purpose-driven, and forward-thinking educational platform.
It successfully:
Communicates IIED’s mission and philosophy clearly
Organizes information into an understandable structure
Establishes a strong foundation for future pages and expansion
This case study represents an early but intentional step into UI design, focused on clarity, purpose, and thoughtful visual structure. It reflects both where I started and the foundation on which I continue to grow as a designer.
Feel free to visit the website at https://iied.framer.website/.
More Projects
UI/UX
IIED Website Design
A thoughtfully designed landing page for IIED that communicates its mission, club-based learning approach, and holistic education vision through clear hierarchy, structured layout, and a modern visual language.
Year:
2025
Sector:
Education
Organization:
IIED
Project Duration :
3 Weeks
Project Overview
IIED (Institute of Integrated Excellence Discovery) is an education platform focused on nurturing future-ready youth through skill-based learning, leadership development, and holistic growth beyond traditional classrooms.
This project explores the design direction of IIED’s website through a dedicated landing page, with the goal of establishing a clear, credible, and modern digital presence for the institution.
Context & Challenge
IIED’s vision, philosophy, and club-based learning approach were not clearly communicated through a single digital platform.
From a user perspective:
The mission and purpose were difficult to grasp at first glance
The structure of programs and initiatives lacked clarity
Navigation did not guide visitors smoothly through the content
The challenge was to translate IIED’s multidimensional educational model into a structured, approachable, and trustworthy web experience.
Design Intent
As my first UI design project, the focus was on clarity rather than complexity.
Instead of following a rigid UX process, I concentrated on:
Creating a strong visual hierarchy for educational content
Presenting IIED’s philosophy in a calm, confident, and modern tone
Structuring the landing page to guide users from understanding to exploration
The intent was to design a foundation that communicates purpose clearly while remaining scalable for future growth.
Goals
The primary goals for the landing page were:
Clearly communicate IIED’s mission within the first scroll
Present the club-based learning model in a structured manner
Establish credibility and trust through clean visual design
Ensure readability and ease of navigation for diverse audiences
These goals informed layout decisions, typography usage, and content flow.
Visual Direction & Design Approach
Typography
The interface uses DM Sans (Medium, Semibold) for Headings and Krub (Regular) for Body texts to maintain clarity, neutrality, and modernity, qualities well-suited for an academic and institutional platform.
Weight variation was used to establish hierarchy without introducing visual noise.
Color Strategy
Rather than limiting the design to a minimal palette, multiple colors were used intentionally to:
Differentiate content sections
Create visual rhythm across the landing page
Support content grouping and scanning
Care was taken to maintain balance and avoid overwhelming the user.
Layout
The layout follows a top-down narrative flow, guiding users through:
Introduction and positioning
Mission and values
Programs and initiatives
Supporting information and calls to action
Spacing and alignment were prioritized to improve readability and reduce cognitive load.
Key Design Decisions
Adopted a grid-based layout to reflect structure and discipline
Emphasized heading hierarchy for scan-friendly reading
Used color as a structural tool rather than decoration
Kept UI elements minimal to maintain focus on content and meaning
These decisions were made with students, parents, and educators in mind, users with varying levels of digital familiarity.
Outcome
The final landing page presents IIED as a credible, purpose-driven, and forward-thinking educational platform.
It successfully:
Communicates IIED’s mission and philosophy clearly
Organizes information into an understandable structure
Establishes a strong foundation for future pages and expansion
This case study represents an early but intentional step into UI design, focused on clarity, purpose, and thoughtful visual structure. It reflects both where I started and the foundation on which I continue to grow as a designer.
Feel free to visit the website at https://iied.framer.website/.
More Projects
UI/UX
IIED Website Design
A thoughtfully designed landing page for IIED that communicates its mission, club-based learning approach, and holistic education vision through clear hierarchy, structured layout, and a modern visual language.
Year:
2025
Sector:
Education
Organization:
IIED
Project Duration :
3 Weeks
Project Overview
IIED (Institute of Integrated Excellence Discovery) is an education platform focused on nurturing future-ready youth through skill-based learning, leadership development, and holistic growth beyond traditional classrooms.
This project explores the design direction of IIED’s website through a dedicated landing page, with the goal of establishing a clear, credible, and modern digital presence for the institution.
Context & Challenge
IIED’s vision, philosophy, and club-based learning approach were not clearly communicated through a single digital platform.
From a user perspective:
The mission and purpose were difficult to grasp at first glance
The structure of programs and initiatives lacked clarity
Navigation did not guide visitors smoothly through the content
The challenge was to translate IIED’s multidimensional educational model into a structured, approachable, and trustworthy web experience.
Design Intent
As my first UI design project, the focus was on clarity rather than complexity.
Instead of following a rigid UX process, I concentrated on:
Creating a strong visual hierarchy for educational content
Presenting IIED’s philosophy in a calm, confident, and modern tone
Structuring the landing page to guide users from understanding to exploration
The intent was to design a foundation that communicates purpose clearly while remaining scalable for future growth.
Goals
The primary goals for the landing page were:
Clearly communicate IIED’s mission within the first scroll
Present the club-based learning model in a structured manner
Establish credibility and trust through clean visual design
Ensure readability and ease of navigation for diverse audiences
These goals informed layout decisions, typography usage, and content flow.
Visual Direction & Design Approach
Typography
The interface uses DM Sans (Medium, Semibold) for Headings and Krub (Regular) for Body texts to maintain clarity, neutrality, and modernity, qualities well-suited for an academic and institutional platform.
Weight variation was used to establish hierarchy without introducing visual noise.
Color Strategy
Rather than limiting the design to a minimal palette, multiple colors were used intentionally to:
Differentiate content sections
Create visual rhythm across the landing page
Support content grouping and scanning
Care was taken to maintain balance and avoid overwhelming the user.
Layout
The layout follows a top-down narrative flow, guiding users through:
Introduction and positioning
Mission and values
Programs and initiatives
Supporting information and calls to action
Spacing and alignment were prioritized to improve readability and reduce cognitive load.
Key Design Decisions
Adopted a grid-based layout to reflect structure and discipline
Emphasized heading hierarchy for scan-friendly reading
Used color as a structural tool rather than decoration
Kept UI elements minimal to maintain focus on content and meaning
These decisions were made with students, parents, and educators in mind, users with varying levels of digital familiarity.
Outcome
The final landing page presents IIED as a credible, purpose-driven, and forward-thinking educational platform.
It successfully:
Communicates IIED’s mission and philosophy clearly
Organizes information into an understandable structure
Establishes a strong foundation for future pages and expansion
This case study represents an early but intentional step into UI design, focused on clarity, purpose, and thoughtful visual structure. It reflects both where I started and the foundation on which I continue to grow as a designer.
Feel free to visit the website at https://iied.framer.website/.