Web Applications 2018
Master of Science: Human-Computer Interaction Design
Module: Web Applications
*the website was hosted by City University, but sadly the website does not exist anymore
Screencapture of the website when it was finished in 2018.
Structure and architecture
For this website, I planned to do a one-page-scroll with different sections differentiating them using colours. I wanted to build the structure of the site using HTML and CSS and not use a template. I have used bootstrap before, but I wanted to challenge myself and really understand the structure of a website, so I decided to not use a template for my structure. I made the navigation-bar at the top using a class and then I would define the style in the CSS. All the menu items had a # in front of the names, so it would link down to the different sections. I defined all the sections with separate div-tags and then I would edit them in the CSS. Every other section was pink and white, so they could be easily differentiated. To make the website responsive I used a code called “viewport” in the head section of my HTML (https://www.w3schools.com/css/css_rwd_viewport.asp).
I made my header in the CSS and made it a no-repeat background element with a 100% width. This was so I could have a header image that would cover the whole page. I also used vw instead of px for my padding and margins of the articles so that they would follow the viewport responsive functionality. For the text (p) elements I used “overflow: scroll” to make sure that when resizing the page, you would be able to scroll the content and it wouldn’t disappear. For the “Filmography” section I used a thumbnail list as a template to structure the filmography in the HTML and the CSS (https://codepen.io/bradfrost/full/evwgx).
For the navigation- bar I really wanted to have a smooth- scroll effect when clicking the different menu- items. To implement this I found an example on W3 (https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll) that would help me create the smooth- scroll that I wanted. I copied the code and edited it to make it fit my website. I was also able to implement a “back-to-top” button using W3 for this function as well (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top). I was very happy with the result, and I made sure to study the jQuery to make sure I understood the functionality of it as well.
I’m very pleased with how this turned out, and I’m very happy that I was able to generate some dynamic content for my site.
For my data visualization I used a bubble chart template from Git Hub (https://github.com/gka/datawrapper-d3-bubble-chart/blob/master/readme.md). I downloaded the files and implemented them into my code using a CSV- file. I had gathered the data myself and edited the CSV- file according to my data. The bubbles were in a separate JS- file. The data was gathered from different articles and I transcribed this into an excel document. But I didn’t implement my excel-sheet, I simply used it as an external source.
I was quite happy with how it turned out. I managed to understand some of the basics regarding the D3- files in the end. This particular template was quite easy to use, and I managed to edit the CSV- file to fit my data. I simply changed the names and the values to fit my data. The sizes of the bubbles were anything from 1200 to 15000. So, for example I changed one bubble to be called “Bill Murray” and changed the size to 8000, since he has appeared in 8 Wes Anderson films. For Owen Wilson I changed the size to 6000, since he has appeared in 6 films and so on.
Visual Design, Look and Feel, User Experience
For the design I wanted it to be minimalistic and to match the style of the Wes Anderson films itself. I used the colour scheme from The Grand Budapest Hotel image that I used as my header. I wanted to implement simple and easy navigation. Since my website wasn’t very content- heavy I decided to have a scroll-page so that the users can easily navigate up and down. The sections are concise and not cluttered with information.
Overall, I’m quite happy with the way my site turned out, especially in terms of the visuals. But it could have been improved with some more functionalities in general.