Interactive Design - Project 2

INTERACTIVE DESIGN - PROJECT 1

15/10/20 - 29//10/20/ Week 8 - Week 10

Ibrahim Fazal Ahmad / 0337423

Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylors University

Project 2

INSTRUCTIONS

'

WEEK 8: E-Learning Week.

WEEK 9: After finishing the design of the website it was time to finally design it in Dreamweaver. I did run into a lot of difficulties trying to finish the website honestly. I really struggled with all the details, small images, and trying to keep everything centred.  I began with a simple template from bootstrap, as I needed to use the carousel and buttons. 

I began with my first section, being the carousel and navbar. For my navbar, I did a combination of the previous simple navbar we had learned, along with the burger menu. 

Figure 1:  Navbar Code

The carousel was done rather simplistically, just using the code from the Bootstrap website. However, I needed to have text and an image on top of it which has to stay still. 

Figure 1.01: Carousel Code

After which I did the second section, being the Amenities. I had put all of the contents in a container. I then split the row into 3 parts. One part for the image, one part for the text and descripton and one part for the small icons.

Figure 1.01: Amenities Code

Next, I had to create the third section, which was the "Getting Here" one. I wanted to include a map, so I got an <iframe> from a website I had found that can convert google maps locations to usable codes for HTML. I had divided the row into 2 sections here, the first being the information and the second being the map itself. 

Figure 1.02: Getting Here, Code

Lastly, I completed my footer. It has a lot of content that are in rows. So, I had 2 separate rows within a jumbotron, which I had found online being shown to create a footer. The first row had the larger texts, such as "Quick Links" and "Check out our Apps". While the second row had the rest of the information. 

Figure 1.03: Footer Code

Here is my finished website: Project 2! Along with the still images below. 

Figure 1.04: Landing Page

Figure 1.05: Amenities Navigation

Figure 1.06: Map to Sunway Pyramid

Figure 1.07: Footer

FEEDBACK:

Week 8: -

Week 9: -

Week 10: The website looks overall fine, however, a few changes can be done. Add a white line on the left of the content in the footer. Make the heart in the amenities section smaller. Add the map in using a <iframe>. Remove the search bar in amenities and add the icon of a magnifying glass instead. Add the Sunway logo on the top left. 

REFLECTIONS:

WEEK  8: - 

WEEK 9: This week was most definitely frustrating mostly because I chose to make such a complicated design for my website. It felt very difficult to work with and honestly, I am not very good at Adobe Dreamweaver or coding in general. So I struggled a lot and spent many hours just trying to do a few simple things such as centre content or get text above the carousel and keep it static. An observation I made was that most websites spanning across different content will usually have some sort of call-to-action to keep users engaged. One finding I made was that classes and ids are extremely useful because I can use certain tags just to give that certain element the trait I wanted. 

WEEK 10:: This week went overall better, I understood HTML a lot more and felt more in control and understanding of what I was doing. Bootstrap helped heavily in constructing my website and allowed me to look up possible ways of solving the issues I was having. However, trying to fix issues relating to responsiveness was honestly extremely difficult and confusing. Having so many elements in my website I felt so lost and confused on how to deal with it, therefore my website did end up looking pretty on fullscreen. But looked very confusing when scaled down. I am rather disappointed that I couldn't figure it out. One observation I made was that the media query can allow us to change many things just as a website is scaled down. One finding I made was how to make my images get larger and show they're being interacted with when you hover over it with your mouse.