Interactive Design - Project 2
10.6.21 - 19.6.21 (Week 11 - Week 12 )
Sajiya Mir (0340836)
Interactive Design
Bachelor of Design (Hons) in Creative Media
Project 2
Instructions
Week 11:
This week we started our project 2 where we had to make a microsite base on the wireframe we created in Project 1, I started with my header:
Fig.1.0 Html code for header
Fortunately, the coding for this section was simple, and I was able to make it look identical to my project one layout. I was able to practice constructing the arrangement and finish quickly, thanks to all of the exercises we did.
Fig.1.1 Header layout
The next thing I did was add the Navbar. This code I got from a website, and then I just customized it to match my layout. I inserted the met logo, made the link to the homepage, and linked the call of action. Lastly, I added the search bar, again using a code I found on the internet.
Fig.1.2. Header layout with navbar
The next part I worked on was the footer. As this was another easy party and wouldn't require much work, I decided to fish it first. I added all the text and the social media icons and linked them to their respective pages.
Fig.1.3 Footer layout
Week 11:
This week we started our project 2 where we had to make a microsite base on the wireframe we created in Project 1, I started with my header:
Fig.1.0 Html code for header
Fortunately, the coding for this section was simple, and I was able to make it look identical to my project one layout. I was able to practice constructing the arrangement and finish quickly, thanks to all of the exercises we did.
Fig.1.1 Header layout
The next thing I did was add the Navbar. This code I got from a website, and then I just customized it to match my layout. I inserted the met logo, made the link to the homepage, and linked the call of action. Lastly, I added the search bar, again using a code I found on the internet.
Fig.1.2. Header layout with navbar
The next part I worked on was the footer. As this was another easy party and wouldn't require much work, I decided to fish it first. I added all the text and the social media icons and linked them to their respective pages.
Fig.1.3 Footer layout
Week 12:
Once done with the footer, I started working on the art collection section. Here I added an 'owl carousel.' I opted to use this style of carasoul because it was the most similar to my original layout.
Fig.1.4 Owl Carousel layout
Fig.1.5 Html code for 'owl carousel'
I added all the images I had collected from the MET museum website. Then I added captions with the name of the painting, its artist, and the year it was made. Finally, I added a link to each title so when you click on it, it will take you to the full information page of the painting.
Once done with the footer, I started working on the art collection section. Here I added an 'owl carousel.' I opted to use this style of carasoul because it was the most similar to my original layout.
Fig.1.4 Owl Carousel layout
Fig.1.5 Html code for 'owl carousel'
I added all the images I had collected from the MET museum website. Then I added captions with the name of the painting, its artist, and the year it was made. Finally, I added a link to each title so when you click on it, it will take you to the full information page of the painting.
Fig.1.6 Art collection Layout
The final section I had to make was the "Events and Exhibition" section. I found a carousel that I liked and thought was similar to my original design for this section. I followed the Html code given on-site and customized what was needed.
I customised these three pictures in Illustrator with the events name and information to add to the carousel.
Fig.1.8 Event image 1
Fig.1.9 Event image 2
Fig.2.0 Event image 3
Fig.2.1 Html code for events layout.
Fig.2.2 Events layout
Lastly I made sure all the links were working and everything was aligned properly and I was done!
Final Project 2 Link
Reflection
Experience: Because we had to create the design using HTML and CSS, Project 2 was significantly more difficult than Project 1. Plus, I wanted to use two different types of carousels that I had never used before, which made learning and putting them to use time-consuming and, at times, frustrating. But, overall, I was pleased with the result; the completed website resembled my initial design closely, and I was pleased that I could accomplish this in my first attempt at learning HTML.
Observations: Most of my carousels didn't work since I failed to add the script and link to my HTML after viewing numerous YouTube videos and then Mr.lecture. Lun's I tried to identify the relevant script and add it before I started writing in HTML.
Findings: I also discovered that many of the effects I wanted on my website required the use of javascript. So, if we get the chance in the future, I'd like to learn the basics to at least create simple effects.
Comments
Post a Comment