Projects

Account

Support

Profile

Project thumbnail of Architecture Machine Website

Architecture Machine

Category

Year

Design & Development

2022

Role

Individual Project

Skills

ReactJS, Framer Motion, HTML/CSS

How much do we know about the tools we use? Architecture Machine is an informational website showcasing major digital tools used in the field of Architecture. Inspired by the exhibition "The Architecture Machine", I hope to provide a go-to resource for architectural students and designers to learn about the software we use every day.

Project thumbnail of Architecture Machine Website

Architecture Machine

Category

Year

Design & Development

2022

Role

Individual Project

Skills

ReactJS, Framer Motion, HTML/CSS

How much do we know about the tools we use? Architecture Machine is an informational website showcasing major digital tools used in the field of Architecture. Inspired by the exhibition "The Architecture Machine", I hope to provide a go-to resource for architectural students and designers to learn about the software we use every day.

Project thumbnail of Architecture Machine Website

Architecture Machine

Category

Year

Design & Development

2022

Role

Individual Project

Skills

ReactJS, Framer Motion, HTML/CSS

How much do we know about the tools we use? Architecture Machine is an informational website showcasing major digital tools used in the field of Architecture. Inspired by the exhibition "The Architecture Machine", I hope to provide a go-to resource for architectural students and designers to learn about the software we use every day.

📑Background


Today, computers are the norm in architectural practices, aiding the design as well as the visualization of new projects. They have become “architecture machines.” Because of the prevalence of software, students and professionals in the field often take the digital tools they use on a daily basis for granted. Each creation or introduction of a piece of software has shaped the architecture profession throughout history. This site provides information about a selected number of major software for researchers and students to not only learn about the history of the tools architects use, but also acknowledge how they have influenced the way we design and even think about architecture.

📑Background


Today, computers are the norm in architectural practices, aiding the design as well as the visualization of new projects. They have become “architecture machines.” Because of the prevalence of software, students and professionals in the field often take the digital tools they use on a daily basis for granted. Each creation or introduction of a piece of software has shaped the architecture profession throughout history. This site provides information about a selected number of major software for researchers and students to not only learn about the history of the tools architects use, but also acknowledge how they have influenced the way we design and even think about architecture.

📑Background


Today, computers are the norm in architectural practices, aiding the design as well as the visualization of new projects. They have become “architecture machines.” Because of the prevalence of software, students and professionals in the field often take the digital tools they use on a daily basis for granted. Each creation or introduction of a piece of software has shaped the architecture profession throughout history. This site provides information about a selected number of major software for researchers and students to not only learn about the history of the tools architects use, but also acknowledge how they have influenced the way we design and even think about architecture.

🧰Low-Fi Prototype


In the low-fi prototypes I aimed to explore the overall structure of the website and decided to have three main section: homepage, timeline page, and project page. The homepage will include the title as well as an "about" window introducing the background of this project. The timeline page will showcase selected software with a brief description, and the project page will include a list of case study projects that utilized these tools.

🔎High-Fi Prototype


The high-fi prototypes explored parallel prototyping through two distinctive design options. The first option explores a spinning wheel as the timeline with a more modern graphic styles. The second option tests out an older, newspaper-like style with a vertical timeline representation.

✨Project Highlights

✏️Takeaways


The goal of this exercise was to create an engaging informational website. Therefore, I explored multiple animation effects and used React Framer to implement many of them. Another objective I achieved was using a design system library, and I was able to successfully incorporate the Grommet library.

© Elise (Xinyi) Wang 2022

© Elise (Xinyi) Wang 2022