Interactive Design - Final Project: 5-Page Working Website
17/06/25 - 22/07/24 / Week 9 - Week 14
Brendan Fedya / 0376283
Interactive Design / Bachelor of Design
(Hons) in Creative Media / Taylor's University
Project 1:
Proposal
TABLE OF CONTENTS
I. INSTRUCTIONS
II. TASKS
During our in-class sessions with Mr. Shamsul, we have been doing HTML and CSS exercises every week—gradually progressing to more complicated coding to be done. This is essential to create a good working website for this final project. All of these are conducted using Adobe Dreamweaver
 |
| Figure 2.1: HTML & CSS exercises. |
It is stated in (Figure 1.1) week 10 exercise below, we should not forget to type <meta name="viewport" content="width=device-width, initial scale=1.0" in the head section so that it would be responsive on screens of various devices.
 |
| Figure 2.2: Viewport meta tag. |
I started by organizing the images I want to use in the website, resizing it into 72dpi so the images won't load too heavily. Renamed it accordingly to make it easier to locate.
 |
| Figure 2.3: Arranging images. |
 |
| Figure 2.4: Creating HTML and CSS per section. |
Then proceed to the contents of the index page, here is the comparison between the prototype and the real version. I tried to make it as similar as I could. The map is set with a placeholder for now, then later on I will try to embed the map inside the container.
  |
| Figure 2.5: Prototype (above) and real website (below) comparison. |
 |
| Figure 2.6: Creating carousel. |
Proceeding to create the footer which is very important, as it will be applied to all 5 working pages. I should define 2 equal columns to split between the terms of use, privacy policy and the other links section with the form section. Here's how it turns out along with the prototype for comparison:
 |
| Figure 2.7: Footer comparison, prototype (above) - real website (below). |
After this one whole page has been done, I start to apply hover effects. I already had this effect on some of the images and the texts in the prototype, what's left is to execute it with codes. Transition: ease is used in every hover effects I applied, as it makes the hovering experience feel smoother.
 |
| Figure 2.8: Applying hover effects. |
Now the first page has been done, the next second and third page should be relatively easy to make as it has way less information compared to the first one. To help even more, I've done the prototype for these 2 pages (About page and contact page) in project 2 before.
And again, I split parts of the website into different sections to contain different groups of information.
 |
| Figure 2.9: Styling about page. |
I did not expect that it is so hard to code the about page, because the images placements that I've made in the prototype are quite irregular so I cannot just simply style this using grids. Some of the image divs (groups) are using 2 classes at once to make the style work as expected, and I adjusted the position a lot during this part to make it look as similar as possible to the prototype.
The positions I adjusted are using a lot of pixel (px) adjustments, so I'm not sure if it's the ideal way or not. There are a lot of ways and I observed Mr. Shamsul often use other units such as 'rem' and 'fr' and it's rarely using 'px'. But we are not given any detailed description about this, so I don't actually know how that will work. Hence, I stuck to the method that I knew already, which is using 'px' units. At the end, I did get it done similar to my prototype!
Figure 2.10: Styling different image containers.
Here is the HTML and CSS code, pretty straightforward:
For the next 2 pages, I thought about reusing the styles that I've used in the 3 pages I made before. This is also to make the website appear more consistent. The fourth page I made is about a gallery page where I showcase images that could help the users to visualize the resort.
After this I proceed to start creating the last page. I've been thinking about creating a page that is connected through the index page itself, not through the navigation bar. In my index file, there's an option to click 'Know More' in the facilities section. So, I will create that facilities page which will be linked from that 'Know More' button.
It's actually an expansion of the hover effect I did in my prototype—but because of it's too complicated while also requiring JavaScript, which I have not learned at all before, so I just made a new page out of it.
And that concludes all of my journey of making my first working website! take a look at it by clicking the link here: HERE HERE HERE
Figure 2.11: Contact page, HTML & CSS.
Figure 2.12: Gallery page, HTML & CSS.
 |
Figure 2.13: Facilities page. |
Mr. Shamsul gave me feedback to use a hamburger menu for tablet screens or smaller. I learned how to make it through bootstrap and with AI's assistance I successfully made it work.
 |
Figure 2.14: Creating hamburger menu. |
And here comes the real challenge, which is to create a responsive website. I finally regretted my decisions of styling my CSS without organizing it properly before. I went through so much problems during this phase, like images not working like it should, the section placements are all off. I figured that most of the problems comes from me styling it using fixed positions like left: (x)px . So, to make it responsive, I restyled it from the start by resetting the problematic styles (by typing !important on the styles) I did in the original layout.
 | |
|
For responsiveness, I mainly targeted 2 different screen ratios: @media (max-width : 982px ) for tablets and @media (max-width: 480px) for mobile phones. This almost covers all the devices that people use daily. Here I will give a comparison of the website inspected from a mobile and a desktop perspective, as for tablet it is similar to what is shown in the mobile interface.
Figure 2.16: About page comparison, desktop (left) and mobile (right).
Also, the Google Drive folder to my project main folder: CLICK!!
III. REFLECTIONS
Ok the first thing I'm going to say about this final project is that IT IS SO SO DIFFICULT compared to the other modules. I never seen my classmates stressing out so bad when doing other assignments, but this? People be giving second thoughts about their chosen specialization in UI/UX and considered changing their own specializations to other areas. On top of that, It is said HTML/CSS is the easiest part for coding, and there's more to come if I'm going to choose UI/UX later on.
Personally for me, I choose UI/UX specialization for my next semester, and I know the road will be extremely difficult. I may hit more stressful, lower points in my life, but I believe that to be able to excel in what we do, we must be able to overcome these obstacles ahead of us, not by running away from it. I may take it slow to learn and to get a foothold in this class, but the effort spent on learning will eventually reap its benefits—at least I'm way better than what I was before taking this module. I wonder how will I be during Advanced Interactive class, well it's still a long time to go so cheers to another semester full of codes!
Comments
Post a Comment