D17.Design

As part of my graduation show team I tasked myself with creating the website that would show information about the event, the graduates and the projects being shown at the exhibition.

Process

Wireframes and Ideation

Initially I asked the team what everyone wanted to be incorporated into the site. It was decided that we needed the basic information i.e. a description of the event, where and when it will be held, who our sponsors were and who the team was behind it. I began to create wireframes to show the possible layouts of the site and possible user flows as well as researching some other successful event websites for ideas. In my research I found interactivity was really important in a website. If the user couldn’t interact with the site they were less likely to remain on it, let alone return to it. I thought about how we could incorporate this into our website and use it to link the website more to the theme. This is how the idea of using interactive video player controls came to be. Visitors would be able to play with a video on the site that showed a preview of the design computing projects, in this way incorporating Design Computing, interactivity and the video timeline concept into the website.

Mockups

I began to create mockups on sketch trying to incorporate the image of the exhibition. I used the WCAGG Guidelines (Web Content Accessibility Guidelines) to ensure that the design was user friendly and intuitive. I created both a light theme and a dark theme, as well as mocking up different styles of navigation menus I had seen in my research. I then presented these to the Grad Show team. As a group we decided that we would use the light theme to oppose the societal norm of dark themes on websites and replace them with a light minimalist theme with parallax scrolling. 

Coding

I began coding the website by starting with the basic bootstrap bare template. This would allow for easy responsiveness. I began to create a basic skeleton of the site as well as ensuring my anchor tags were correct so that the navigation would run smoothly. I integrated the navigation with a script so that the screen would scroll smoothly between each anchor point. 

Initially I began making the transitional words with CSS. I began by reaching out to peers on what they thought design was to them. I then narrowed the responses down to 10 key ones. I had these words appear in a loop but found this created issues with the loop occurring too quickly. As a result all the words overlapped each other. To solve this, I created a class and then in CSS I animated the words to appear with a delay. I gave each word 5 seconds to fade in and out and looped the 10 words four times so the words would transition 40 times. This would ensure ample time for the user to watch and play with the video at the beginning of the site and still scroll down and be able to see the words.

I then researched the 2016 Grad Show website to find out what they had done and what we could do to make ours even better. In doing this, I identified a few areas I was missing such as the university branding, the sponsors section and a graduates section. I also saw that their website was quite simple and wanted to improve on this in our design. I began to brainstorm various additions such as a countdown to the exhibition, a Grad Team section and links to the facebook event and a calendar event.  

At this stage, the website still had with some errors in responsiveness (the spacing and the map) and an issue with a google font not embedding correctly into a site and as a result being replaced with many different fonts that were not in keeping with our theme, so I began looking into how to fix these errors.

The Graduates And Projects Pages

I used a similar layout to that of the graduate team section but replaced the bios with the graduates name, email and a link to the website they provided. I then encountered display issues with the spacing of the rows malfunctioning, primarily due to the fact that the images were all different sizes. As a result I had to go back into photoshop to resize the images so that they would space correctly and the website would be fully responsive. I chose to make this another page as I thought the loading time would increase too much if the visitor had to load all of the graduate images as well. Because of this, I then had to change the navigation so that it would work with both the anchor tags on the primary page, as well as a normal navigation from the graduates page.

I took a similar approach to the projects page with an image of each project followed by a one sentence description and the students involved.

Optimisation + Added Extras

Further optimisations were needed as the site was still too slow. I realised that a lot of the images taken for the catalogue were seriously oversized for the web, with some images as big as 40mb each. I used photoshop to reduce the size considerably but still maintain resolution quality. I also compressed the video so that it would run more smoothly for visitors. 

I decided to convert my project pages and my graduate pages to an array to allow for easier changes and a faster load time. I then looked into animate.css to create some css animations for my transitioning words to make them more interesting.  The website was finally ready to go live.