Figma Web Design Mockup for Interactive Design Students
Medium: Web Design, Prototyping
Tools Used: Figma
Project Type: Educational Resource (CCAC ART 170 Interactive Design)
Client: Personal Project
Tools Used: Figma
Project Type: Educational Resource (CCAC ART 170 Interactive Design)
Client: Personal Project
Overview:
As part of my ART 170 Interactive Design course at the Community College of Allegheny County (CCAC), I created a professional-grade website mockup to teach my students the essential principles of web design and prototyping using Figma. This project, titled Rollo The Pigeon, was designed to promote pigeon awareness and encourage donations to pigeon rescue efforts. The website, named after my beloved pet pigeon Rollo, combines educational content with a user-friendly donation platform aimed at helping pigeon rescue organizations.
As part of my ART 170 Interactive Design course at the Community College of Allegheny County (CCAC), I created a professional-grade website mockup to teach my students the essential principles of web design and prototyping using Figma. This project, titled Rollo The Pigeon, was designed to promote pigeon awareness and encourage donations to pigeon rescue efforts. The website, named after my beloved pet pigeon Rollo, combines educational content with a user-friendly donation platform aimed at helping pigeon rescue organizations.
The goal was to demonstrate to students how to use Figma to prototype interactive websites that are not only visually appealing but also functional enough to be handed off to developers for real-world applications.
Role & Responsibilities:
Figma Web Design & Prototyping:
Designed a fully-interactive, responsive website mockup using Figma, showcasing my ability to create both static designs and interactive prototypes. The design demonstrated the entire user journey from awareness to donation, with an emphasis on usability and intuitive navigation.
Designed a fully-interactive, responsive website mockup using Figma, showcasing my ability to create both static designs and interactive prototypes. The design demonstrated the entire user journey from awareness to donation, with an emphasis on usability and intuitive navigation.
Educational Design:
The website was created with my students in mind, guiding them through real-world design scenarios. I incorporated interactive elements, such as hover states, clickable buttons, and smooth transitions, to illustrate Figma's prototyping capabilities.
The website was created with my students in mind, guiding them through real-world design scenarios. I incorporated interactive elements, such as hover states, clickable buttons, and smooth transitions, to illustrate Figma's prototyping capabilities.
Focus on Functionality & User Experience:
Ensured that the website was not only visually striking but also functional—with clearly defined call-to-actions for donations, easy-to-understand information on pigeon rescue, and seamless mobile compatibility.
Ensured that the website was not only visually striking but also functional—with clearly defined call-to-actions for donations, easy-to-understand information on pigeon rescue, and seamless mobile compatibility.
Hands-On Learning:
Used this project as a live case study in class, where students were able to learn how to transition from low-fidelity wireframes to high-fidelity, fully-functional mockups. I also provided feedback on their prototypes and guided them through translating designs into real-world solutions.
Used this project as a live case study in class, where students were able to learn how to transition from low-fidelity wireframes to high-fidelity, fully-functional mockups. I also provided feedback on their prototypes and guided them through translating designs into real-world solutions.
Impact:
This project served as an invaluable educational tool, allowing students to see firsthand the power of Figma for web design and prototyping. It also gave them a practical understanding of how a design can move from a digital mockup to a fully-functioning website. By using Rollo The Pigeon as an example, students not only learned about the technical aspects of design but also the impact that design can have in supporting causes and communities.
This project served as an invaluable educational tool, allowing students to see firsthand the power of Figma for web design and prototyping. It also gave them a practical understanding of how a design can move from a digital mockup to a fully-functioning website. By using Rollo The Pigeon as an example, students not only learned about the technical aspects of design but also the impact that design can have in supporting causes and communities.
