Interactive Design / Final Project

Omar bin Shafik / 0371439

Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project

Instructions


Fig 1, Interactive Design MIB

Interactive Design Final Project

For the website redesign, I tried to follow my prototype closely wherever possible. For the final project we were instructed to make 5 working pages. I decided to make the home, forums, courses, gallery, and contacts pages. For this project I also used Bootstrap to help with the different elements in each page.

Website link: Netlify link

Design Choices

For the pages' colors, I decided to change them from what I had in the proposal to have more blue colors to pair with the main Yale website better. This is also shown in the prototype I made. I also followed advice given by Mr. Sam and looked up school website on Pinterest and google to find simple examples I could follow. 

The fonts I used were Source Serif 4 for all the titles and headers and Aleo for the body. I went with Source Serif 4 because I think it looks like a fancy font that would match the prestige the Yale name has and Aleo because it is a simple font with easily recognizable characters and good readability. 

I wanted to comprise the pages of mostly panels because it is a simple and easy to digest format. Not too much information is given at once and you can easily take in the information given. I also added buttons for easier readability and accessibility in some areas. 

Workflow

I initially started out with a blank html file and went on from there. I added the code that would let me use bootstrap first. After that I started to look up how to code the header. The header I found on bootstrap was for cards and the closest thing I could find to what I wanted was the navbar so I implemented that into the code. The title and image can be clicked to go to the home page. Alongside those are the buttons for the forums, gallery, and courses page. Besides those were drop down buttons for all the pages and the shop. The buttons in the shop drop down linked directly to the Yale merchandise website. 

After coding the navbar I started working on the footer. This was left really simple because I simply didn't know how to make it look like what I had in the prototype. 

After doing both the navbar and footer I created 4 other blank HTML files and copy-pasted the code for the navbar and footer into all of them. After this I started working on the content for the home page. I also created a separate CSS file for all of the style code. 

Home Page

The first thing I coded for the home page was 3 cards that linked to the forums, gallery, and courses pages respectively. This was simple enough, there was already code for cards with buttons in bootstrap so I used that. This is also where I coded some CSS to change the appearance for all the cards so that I wouldn't need to code it in every time I coded a card. 

After that, I coded the big title for the home page that would be at the top of the page. I added a background image of the Yale School of Art and added another image of the Yale School of Art logo on top of that alongside some text. 

Next I coded the section for the map and school tour. I couldn't find a full map for the art school so I just added an image of the building layout I found through Google. As for the video tour, again, I couldn't find an in depth tour of the art school and its facilities so I found a short tour of the Yale campus on YouTube and embedded it there.

I then coded the news and events section. This was confusing as some of the code I got from bootstrap I couldn't really understand but I eventually coded the events section using the columns and rows functions from bootstrap. Next to that I coded a carousel for announcements made. At first the images I used made it so that the carousel kept resizing when switching panels but I fixed this by just making the images the same resolution.

At this point was also when I created a test file to test out how some bits of code from bootstrap worked and how I could fit them into my own code.

Below this I did the student weekly showcase. This was simple enough, just being cards with images. 

Forums Page

For the forums page, there wasn't much I could do. I coded in the title, supporting text and created a couple of cards that looked similar to forums posts that can be seen on Reddit.

Gallery Page

For the gallery page I just coded a title, supporting text, and the year alongside some cards with images of Yale student's artworks.

Courses Page

Here I again code in title and supporting text. I also coded in what was in the original courses page and made sure the links linked to their respective resources.

Contacts Page

Here I coded the title and supporting text as well. Below I added in all of the contacts within 2 cards and separated the contacts using the list groups function for cards. I also made sure to make all of the links work. The emails should open up and option to send an email if clicked and the socials should link to their respective websites.

Challenges

For most of the coding process I couldn't figure out how to change the color of the navbar. At some point I figured out that the code for changing the background color was being overriden by a class that existed in bootstrap so I just got rid of that class in the navbar and the color managed to change. I also wanted to keep the navbar at the top of the page even while scrolling which I couldn't find on bootstrap so I googled it. I also wanted the footer to stay at the bottom of the page at all times which I also couldn't find the code for on bootstrap so I also just googled it. There was also an issue at some point where while scrolling the navbar kept going behind the cards on the home page. I found out later after googling that I needed to make the z-index of it a high number so that it stays on top of all the other elements on the page. 

In the end what I learned from this was that Google is a very useful resource.


Comments

Post a Comment

Popular posts from this blog

Advanced Typography: Task 1 Exercises

Image
23.4.2025 - 21.5.2025 / Week 1 - Week 5 Omar bin Shafik / 0371439 Advanced Typography / Bachelor of Design (Honours) in Creative Media Task 1 / Exercises LECTURES Week 1: Typographic Systems According to Elam, there are 8 major variations: Axial Radial Dilatational Random Grid Modular Transitional Bilateral Can be complex because they are dependent on communication to function properly. Additional aspects like hierarchy, order of reading, legibility and contrast also come into play. Typographic systems are essentially a set of rules that can be followed to help with decision making. This can take away intuition in some ways, it also serves as a solid framework that helps learners be guided while developing their own intuition in their explorations. ...
Read more

Digital Photography and Imaging - Digital and Physical Collages

Image
22.04.2024 - 14.06.2024 / Week 1 - Week 6 Omar bin Shafik / 0371439 Typography / Bachelor of Design (Honours) in Creative Media Digital Photography and Imaging LECTURES Week 1:  We were given a briefing/introduction to the module and what we would be doing for the semester. We were also tasked with our first task which was composing an image with magazine cutouts. Week 2:  Since the air conditioning still isn't running, our class was cut short. We were taught on the rule of thirds that we could use to make our images easier to look at and how to use it to our advantage while composing the image. Week 3: We learned about the basic controls of photoshop but the power cut out around one and a half hours into the class so it had to be cut short again.  Week 4: We went through the basics of photoshop and were tasked to create digital collages for our assignment. Week 5: We learned about how to shoot photos and about how lighting can affect the ph...
Read more

Video and Sound Production - Final Project

Image
Week 9 - Week 14 / 18 June 2025 - 23 July 2025 Omar bin Shafik / 0371439 Video and Sound Production / Bachelor of Design (Hons) in Creative Media Instructions Final Project For the final project we had to go through a checklist of things to do. We had to make a shot list, draw up a storyboard, film everything, and edit together a short video and we needed to use one kind of visual effect in the video. I was grouped up with Racheal for this Project. I made the shot list and storyboard for the video. After a few consultations with Mr. Martin, we made the story for the video better. Shot list: argument flash back sc1 sh1 front, medium close up mc walking to class sc1 sh2  3/4 low angle, medium flash back to mc arguing with parents sc1 sh3 3/4 eye level, medium close up mc shaking her head, getting the thought out of her head Classroom sc2 sh1  side, medium studying with headphones on/earpho...
Read more