
Web Design: Architecture Portfolio
Web Design: Architecture Portfolio
The website highlights I.M. Pei’s life and works, inspiring a love for architectural art.
Role
UI design, Developer
UI design, Developer
UI design, Developer
UI design, Developer
Tool
HTML/SCC/Javascript
HTML/SCC/Javascript
HTML/SCC/Javascript
HTML/SCC/Javascript
Time
March - April 2023
March - April 2023
March - April 2023
March - April 2023
Team
Time
Individual
Individual
Individual
Individual
March - April 2023
Team
Individual
Overview
Context
This website provides an in-depth introduction to the life and iconic architectural works of I.M. Pei, a renowned Chinese architect celebrated for his innovative designs blending Chinese and Western elements. His famous works, such as the Louvre Pyramid in France, the Hong Kong Convention and Exhibition Centre, and the National Gallery of Art in the United States, showcase his unique creativity and cultural fusion. I chose to focus on I.M. Pei not only because of his architectural genius but also because of his resilience in overcoming racial discrimination, making him a source of pride for the Chinese architectural community.
In creating this website, I extensively researched I.M. Pei’s design concepts, innovative spirit, and architectural impact. This process not only deepened my appreciation for his contributions but also significantly enhanced my technical skills in web design. I used HTML and CSS to build the structure, layout, and styling, while JavaScript added interactive elements to make the site engaging. These skills will be invaluable in my future projects and career.
Ultimately, this website aims to showcase I.M. Pei’s rich architectural legacy, encouraging more people to explore and appreciate the world of architecture. Through this project, I improved my design abilities and gained a deeper understanding of the artistic and cultural significance of his work, hoping to inspire others in their pursuit of architectural art.
This website provides an in-depth introduction to the life and iconic architectural works of I.M. Pei, a renowned Chinese architect celebrated for his innovative designs blending Chinese and Western elements. His famous works, such as the Louvre Pyramid in France, the Hong Kong Convention and Exhibition Centre, and the National Gallery of Art in the United States, showcase his unique creativity and cultural fusion. I chose to focus on I.M. Pei not only because of his architectural genius but also because of his resilience in overcoming racial discrimination, making him a source of pride for the Chinese architectural community.
In creating this website, I extensively researched I.M. Pei’s design concepts, innovative spirit, and architectural impact. This process not only deepened my appreciation for his contributions but also significantly enhanced my technical skills in web design. I used HTML and CSS to build the structure, layout, and styling, while JavaScript added interactive elements to make the site engaging. These skills will be invaluable in my future projects and career.
Ultimately, this website aims to showcase I.M. Pei’s rich architectural legacy, encouraging more people to explore and appreciate the world of architecture. Through this project, I improved my design abilities and gained a deeper understanding of the artistic and cultural significance of his work, hoping to inspire others in their pursuit of architectural art.
This website provides an in-depth introduction to the life and iconic architectural works of I.M. Pei, a renowned Chinese architect celebrated for his innovative designs blending Chinese and Western elements. His famous works, such as the Louvre Pyramid in France, the Hong Kong Convention and Exhibition Centre, and the National Gallery of Art in the United States, showcase his unique creativity and cultural fusion. I chose to focus on I.M. Pei not only because of his architectural genius but also because of his resilience in overcoming racial discrimination, making him a source of pride for the Chinese architectural community.
In creating this website, I extensively researched I.M. Pei’s design concepts, innovative spirit, and architectural impact. This process not only deepened my appreciation for his contributions but also significantly enhanced my technical skills in web design. I used HTML and CSS to build the structure, layout, and styling, while JavaScript added interactive elements to make the site engaging. These skills will be invaluable in my future projects and career.
Ultimately, this website aims to showcase I.M. Pei’s rich architectural legacy, encouraging more people to explore and appreciate the world of architecture. Through this project, I improved my design abilities and gained a deeper understanding of the artistic and cultural significance of his work, hoping to inspire others in their pursuit of architectural art.
This website provides an in-depth introduction to the life and iconic architectural works of I.M. Pei, a renowned Chinese architect celebrated for his innovative designs blending Chinese and Western elements. His famous works, such as the Louvre Pyramid in France, the Hong Kong Convention and Exhibition Centre, and the National Gallery of Art in the United States, showcase his unique creativity and cultural fusion. I chose to focus on I.M. Pei not only because of his architectural genius but also because of his resilience in overcoming racial discrimination, making him a source of pride for the Chinese architectural community.
In creating this website, I extensively researched I.M. Pei’s design concepts, innovative spirit, and architectural impact. This process not only deepened my appreciation for his contributions but also significantly enhanced my technical skills in web design. I used HTML and CSS to build the structure, layout, and styling, while JavaScript added interactive elements to make the site engaging. These skills will be invaluable in my future projects and career.
Ultimately, this website aims to showcase I.M. Pei’s rich architectural legacy, encouraging more people to explore and appreciate the world of architecture. Through this project, I improved my design abilities and gained a deeper understanding of the artistic and cultural significance of his work, hoping to inspire others in their pursuit of architectural art.
This website provides an in-depth introduction to the life and iconic architectural works of I.M. Pei, a renowned Chinese architect celebrated for his innovative designs blending Chinese and Western elements. His famous works, such as the Louvre Pyramid in France, the Hong Kong Convention and Exhibition Centre, and the National Gallery of Art in the United States, showcase his unique creativity and cultural fusion. I chose to focus on I.M. Pei not only because of his architectural genius but also because of his resilience in overcoming racial discrimination, making him a source of pride for the Chinese architectural community.
In creating this website, I extensively researched I.M. Pei’s design concepts, innovative spirit, and architectural impact. This process not only deepened my appreciation for his contributions but also significantly enhanced my technical skills in web design. I used HTML and CSS to build the structure, layout, and styling, while JavaScript added interactive elements to make the site engaging. These skills will be invaluable in my future projects and career.
Ultimately, this website aims to showcase I.M. Pei’s rich architectural legacy, encouraging more people to explore and appreciate the world of architecture. Through this project, I improved my design abilities and gained a deeper understanding of the artistic and cultural significance of his work, hoping to inspire others in their pursuit of architectural art.
This website provides an in-depth introduction to the life and iconic architectural works of I.M. Pei, a renowned Chinese architect celebrated for his innovative designs blending Chinese and Western elements. His famous works, such as the Louvre Pyramid in France, the Hong Kong Convention and Exhibition Centre, and the National Gallery of Art in the United States, showcase his unique creativity and cultural fusion. I chose to focus on I.M. Pei not only because of his architectural genius but also because of his resilience in overcoming racial discrimination, making him a source of pride for the Chinese architectural community.
In creating this website, I extensively researched I.M. Pei’s design concepts, innovative spirit, and architectural impact. This process not only deepened my appreciation for his contributions but also significantly enhanced my technical skills in web design. I used HTML and CSS to build the structure, layout, and styling, while JavaScript added interactive elements to make the site engaging. These skills will be invaluable in my future projects and career.
Ultimately, this website aims to showcase I.M. Pei’s rich architectural legacy, encouraging more people to explore and appreciate the world of architecture. Through this project, I improved my design abilities and gained a deeper understanding of the artistic and cultural significance of his work, hoping to inspire others in their pursuit of architectural art.






Background
Architect: Leoh Ming Pei
Architect: Leoh Ming Pei
Ieoh Ming Pei, also known as I.M. Pei, was one of the twentieth century's most important builders. Pei was born in 1917 in Guangzhou, China, and immigrated to the United States in 1935 to study design at the Massachusetts Institute of Technology (MIT) and subsequently at Harvard University. In 1955, he founded I.M. Pei & Partners and went on to create some of the world's most famous structures, including the Louvre Pyramid in Paris, the East Building of the National Gallery of Art in Washington, D.C., and the Bank of China Tower in Hong Kong. Pei's distinctive and inventive designs merged modernism principles with traditional architectural elements, and his contributions to building have had a deep and long-lasting influence on the physical environment. Pei died in 2019 at the age of 102, leaving a heritage of innovative building design.





Overview
Project Goals
To create a website that allows architects and architecture enthusiasts to easily explore I.M. Pei's architectural works, while providing an in-depth understanding of his design philosophy and showcasing his unique architectural language.
To create a website that allows architects and architecture enthusiasts to easily explore I.M. Pei's architectural works, while providing an in-depth understanding of his design philosophy and showcasing his unique architectural language.
Target Audience
Architects
Architecture students
Design enthusiasts






Visual Language
Mood Board
Mood Board
Pei's visual language is a synthesis of modernist principles and traditional building components. Pei's plans exhibited the clean lines, geometric outlines, and basic forms associated with Modernist architecture. Pei, on the other hand, used conventional components in his designs, such as stone, to create a feeling of timelessness and immortality.
Pei's visual language is a synthesis of modernist principles and traditional building components. Pei's plans exhibited the clean lines, geometric outlines, and basic forms associated with Modernist architecture. Pei, on the other hand, used conventional components in his designs, such as stone, to create a feeling of timelessness and immortality.
information architecture
Sitemap
Sitemap
The information architecture of this website is relatively simple and straightforward.
They are Landing page, project page, about page. Then click on the detailed project on the project page to enter the detail page.
The information architecture of this website is relatively simple and straightforward.
They are Landing page, project page, about page. Then click on the detailed project on the project page to enter the detail page.




design process
Wireframe
Wireframe




design process
Final Design



Projects Page
Through a clean, streamlined layout, the website integrates interactive galleries and detailed project descriptions, enabling users to quickly explore and appreciate I.M. Pei’s iconic architectural works and design philosophy.
Projects Page
Through a clean, streamlined layout, the website integrates interactive galleries and detailed project descriptions, enabling users to quickly explore and appreciate I.M. Pei’s iconic architectural works and design philosophy.
Filter Function
The website includes a filtering feature that categorizes Pei’s projects by region and building type. This allows users to quickly explore his architectural masterpieces based on their interests.
Filter Function
The website includes a filtering feature that categorizes Pei’s projects by region and building type. This allows users to quickly explore his architectural masterpieces based on their interests.



Project Details Page
The details page showcases each work with photos, location, design timeline, and detailed descriptions, providing a concise yet immersive exploration of Pei's architecture.
The details page showcases each work with photos, location, design timeline, and detailed descriptions, providing a concise yet immersive exploration of Pei's architecture.
























How to search plants?
The Project Details Page showcases each work with photos, location, design timeline, and detailed descriptions, providing a concise yet immersive exploration of Pei's architecture.










About Page
The About Page offers a brief look into I.M. Pei’s journey from his early life in China to becoming a globally renowned architect.
The About Page offers a brief look into I.M. Pei’s journey from his early life in China to becoming a globally renowned architect.




About Page
The details page showcases each work with photos, location, design timeline, and detailed descriptions, providing a concise yet immersive exploration of Pei's architecture.

