VILLAGE OF GLASS INTERACTIVE WEBSITE DEMO REEL
Adobe After Effects
COMPLETED SCREENS
Adobe Illustrator & Photoshop
MAIN / LANDING SCREEN
As a group we wanted to create a design that would be user friendly and easy for people who may not be too web savvy. We made the decision to use bright earth-toned colors, a fun and easy to read san-serif font, and consistency with an overall "circle" shape theme.
Across the top is the header that consists of five buttons that lead to each specific screen. There is also a small button for individual settings, and a link to log-in via Facebook.
As a group we wanted to create a design that would be user friendly and easy for people who may not be too web savvy. We made the decision to use bright earth-toned colors, a fun and easy to read san-serif font, and consistency with an overall "circle" shape theme.
Across the top is the header that consists of five buttons that lead to each specific screen. There is also a small button for individual settings, and a link to log-in via Facebook.
CATEGORY SELECT SCREEN
Here is where the user is able to select from which type of charitable project they would like to contribute to. We wanted our organization to allow each user to really be in control of where their charitable donation ends up. The four categories are: Construction, Agriculture, Energy, and Water.
Here is where the user is able to select from which type of charitable project they would like to contribute to. We wanted our organization to allow each user to really be in control of where their charitable donation ends up. The four categories are: Construction, Agriculture, Energy, and Water.
PROJECT DETAIL SCREENS (2)
This screen design illustrates what the details of specific project will look like when the user views a current project that they are working on. The blue line filling in the border around the school icon represents the overall progress of the project. Each small circle on the left of the screen illustrates what supplies, or tasks, are needed for this specific project(a blue line also fills in the borders here, displaying the current progress of each individual task).
The Facebook users who you have recruited to contribute to this project are displayed at the bottom. There is also a button to immediately make a monetary donation, and another button to add more Facebook "friends" to this project.
This screen design illustrates what the details of specific project will look like when the user views a current project that they are working on. The blue line filling in the border around the school icon represents the overall progress of the project. Each small circle on the left of the screen illustrates what supplies, or tasks, are needed for this specific project(a blue line also fills in the borders here, displaying the current progress of each individual task).
The Facebook users who you have recruited to contribute to this project are displayed at the bottom. There is also a button to immediately make a monetary donation, and another button to add more Facebook "friends" to this project.
MY REWARDS SCREEN
This screen allows users to visualize in real time, and track the progress of their rewards. Users will be awarded certain prizes for each project they complete, allowing an incentive to continue to give!
This screen allows users to visualize in real time, and track the progress of their rewards. Users will be awarded certain prizes for each project they complete, allowing an incentive to continue to give!
PROGRESS WORK
PAGES FROM DESIGN DOCUMENT DESCRIBING PROJECT
Adobe Illustrator
