Assignment#3
This project is an audio visual tour of NYUAD in broader terms. The concept behind this is to convey a sense of being on campus; while activities and programming of different departments on campus do convey a sense of belonging, the long-distance element cannot be eliminated and students eventually do end up feeling like they are not a part of NYUAD as they are not physically on campus. This is the reason why this website is specifically made for people not on campus. In more specific terms, the target audience of this website is new prospective students, current students off campus and graduates who may get pangs of nostalgia while reminiscing their times at NYUAD. In fact we can claim that the elements in this website and the information provided is so in-depth and so simply, yet so professionally presented that everyone and anyone who wishes to access will be able to do so and won’t face any difficulty navigating through it. The theme used in implementation is consistent with the official NYUAD branding guidelines (the link to which is https://nyuad.nyu.edu/content/dam/nyuad/news/documents/20190707-Brand-Guidelines-Master-3.pdf ). The website strives to convey the experience of being on campus through all senses that can be virtually conveyed (sight and sound). People can also choose what sense they wish to get i.e. they can just listen to the sounds of a patictular place on loop as well as just view the 360 images.
The html of the index.html/landing page begins with a header overlay element that contains the transparent navbar, the video, video purple overlay, the animations of the overlay text and the buttons to begin the tour/open the video. The nav bar in overlay contains all links to the relevant website. A consistent theme of black is implemented throughout the navbar, including in the NYUAD logo. The text links and buttons in the navbar on hover change to purple to add the essence of NYUAD and to amplify the effect that this particular object links to something. The images initially have a black color that changes to purple on hover. All hex codes used throughout the website as well as the fonts used are from NYUAD’s official branding guidelines that can be found on this website I would also like to point out that it was a conscious decision to have the right half of the navbar a bit to the right so as to make the nyuad logo pop out and to add a certain right margin that not only looks unique on the page itself but also is consistent with the general layout of the website once the sidebar is open. This implementation clearly translates into the overall concept because of the direct link between the NYUAD’s branding guidelines and the methods of implementation used on the website. Moving on as the user begins the tour, he realizes that the NYUAD experience is not just limited to the background drone shot, i.e. and the styling used [the font family used -Gothman-, color palette, and the logo] as the arabesque background (as is consistent with the menu and sub menu backgrounds) also gives off the theme of NYUAD pride. Divisional elements displaying relevant information have been neatly and centrally positioned in the webpage and are only visible upon clicking the relevant links [ “let’s begin” links to the welcome div, and the tour categories in the welcome div link to the divs containing the maps for the locations].
As the user hovers over the cards of the locations, the audio of that place autoplays. This brings us to the actual highlight of this website- the audio. Due to the limitations of the audio euipment availability, I had to make use of my iphone microphone to record the audios of 8 locations in the day and in the night [17 total audios] and edit them using audacity as well as Adobe Premier Pro. I used the spectogram view in audacity to remove high pitch noises and to amplify certain sounds; for example, I wanted to amplify the birds cripping in the palms-day audio clip and I wanted to remove the sound of the wind as much as I could. I also used the remove background noise. Additionally, I used Adobe premier pro to layer audios and remove certain parts of audios that contained distorions: I used the frequency equalizer, manual noise reduction, layer multiple audios and the smooth/harmonize audio functions. After editing 17 clips, I can say that I am intermediatly comfortable with using these audio editing softwares and can work my way around editing audios. Another significant takeaway si that I learnt to carefully amalgamate audios so as to make sure they blend in with the other audios without sounding like they are purposely forced to merge. Audios need to blend in such that there is not point where the listener can point out that "this is where the audios merge"; the merge needs to be strategic, seemelss and incredibly smooth.
Within every div, there is content consistent with the heading of the Div. The font family used throughout the page is Gotham and multiple NYUAD branded front colors are used to, for example, show emphasis. Furthermore, a scroll to top button is activated through java script when the user enters a div element that is below the video overlay of the landing page so that the user can easily access the video overlay and other links (menu, about us and inspiration) in the navbar. The menu and the submenu are implemented using extensive JavaScript and by giving every individual element a unique identifier (id). During the styling implementation, I gave particular attention to tiny details, for example, the icons in the “about us” section that link to the creator’s social media are also given a filter of grayscale so as to maintain the consistency with the navbar elements. Similarly, every clickable element has some styling (underline for side menu items/color change for navbar icons/underline for navbar text links/ transform scale for social media icons in the about us section) to indicate that they are clickable. The font has also been kept consistent as is on NYUAD’s official website.
the initial concept was to convey a sense of being on campus as opposed to belonging; the latter is already achieved through the extensive online programming that takes place. I had expectations from the website itself and from working in a team as well. as for the website, my expectations were not enetirely met due to the limitations of the equipment available; I would've loved to use a 360 camera and a professional microphone to record the sounds so as to capture most clearly the essence of the audio-visual tour of NYUAD. With respect to my expectations of working in a team, I realized that as is normal, I had certain disagreements with my partner with respect to the aesthetics of the website. We, however, reached a commonground wherein we both compromised on certain aspects and reached a commonground so that the look of the website can be improved while ensuring that all team members are satisfied. The opinions of NYUAD students played a crutial role in helping us reach an agreement as they gave unbiased suggestions about what looks good with respect to the general aesthetics of the website. I believe that this project has greatly helped me with improving my comfort level with experimenting with javaScript, it has made me realzie that minimalism is perhaps the best way to go when it comes to deciding the aesthetics of a website and that external opinion and internal compromise is the best strategy when working in teams.