Purpose
The website opens with a full unveil of the message behind re-view, and lets people who have been draw in by re-view leave their mark. The message is fully unveiled showing the working behind re-view and how everything has been connected. The goal is to really drive home the importance of the cause and connect with what the audience’s new realization about the impact of spaces.
The website aims to affirm their sense of wanting to improve spaces at Sheridan and gives them a way to voice their personal opinions. Users would also have access to every released aspect of RE-VIEW with the site acting as a hub.
DEVELOPMENT
Once the visual identity was established, and fonts were picked. We created different layouts, by taking inspiration from many sites that used a dark and mysterious theme. We spent a good amount of time in developing the site to deliver our message quickly and effectively. This was in the hope that we could retain user attention after opening the site. A large focus was placed on making a responsive layout because most users would be accessing the site on a mobile device. We made sure to leverage our style of mystery, glitch art and darkness to build a cohesive experience.
BUILDING IN FRAMER
Our original plan was to develop in Webflow, but it lacked a good collaborative environment so we switched to Framer. Framer would not be too difficult to learn, and would include integrations with Spline, something very important to the project.
Our navigation would lead to three main pages on the site. This nav bar appears at any time so users can easily navigate across the site from any point. The elements have exclusion blur effects to remain visible with the constantly changing backgrounds.
EMbedded In The Site
The AR AURORA scene was implemented into the site so those who missed the installation can re-watch it. The embed uses a line of code to hide the playback controls to make the component blend into the site. A YouTube link had to be provided because the video was far too large to be uploaded directly into Framer.
The spline scene containing the 3D map was also embedded into the site. Spline has strong code to allow for scenes to be easily added into a site's structure and loaded using WebGL. One drawback to using Framer over Webflow, is that the Spline scenes could not affect elements on the page using unique integrations that only Webflow has. This meant that leaving your mark would not be possible.
AN Interactive MAp Forum
The maps works to let users explore the Sheridan campus and ultimately using a connection to the website, leave behind their thoughts on how Sheridan spaces can be improved. The map also shows where the RE-VIEW installations took place. People who have followed RE-VIEW will have the chance to give input as to where future installations and improvements can be made on campus. They can also write about what spaces are their favorite. There are many possibilities as to how this map could become a full sandbox that students could edit to make a campus as they want to see it.
Development
Starting the map, it was evident that modelling the campus from scratch would be very challenging and time consuming. After a lot of research, I found a tool called CADMapper. This tool uses public sources like OpenStreetMap, NASA, and USGS to create 3D CAD files of any location. The free version allowed for a 1x1km square to be scanned. The issue was that they were CAD files which meant they had to be opened in Rhino or an equivalent program. Opening the plane in Rhino allowed for the files to be exported into an .obj to be usable in Spline.
The OBJ file directly from Rhino was very messy and limited the adjustment of the geometry of each object. This made separating the pathways and building geometry very difficult and tedious. No matter, it was nothing in comparison to making all the buildings from scratch. After separating all the buildings and pathways into their own groups, each object could receive materials and eventually interactive elements. The colors were chosen to match the website theme. It was really important to limit polygons and materials in the scene so that it could be run on most machines. Nobody wants to try and interact with a very buggy, and low performance mess.
Our Instagram account allowed RE-VIEW to release live updates and tease information. It does not reveal the intention or purpose of RE-VIEW rather it keeps curious students up to date. The Instagram was how RE-VIEW would alert followers about upcoming events and further develop the characters identity. Instagram was a perfect platform choice because it is very image based and most of the content we would post has very strong visuals we would want to display. One large issue with Instagram was adding links in the bio. We intended for the account to link to the our website but Meta was not a fan.
