Interactive Design - Project 2: Working Web Page

-

9.10.2023 - 23.10.2023 / Week 07 - Week 09
Ilhan Rayan bin Khairul Anwar / 0361205
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 2 - Working Web Page

LECTURES 


INSTRUCTIONS


PRACTICAL
For our second project, we had to take the Digital CV we made for Project 1 and recreate it to the best of our ability in Dreamweaver. 

Figure 1.1: Digital CV from Figma, Week 6 (2/10/23)

I started off by trying to create the background layout for the website so I could get that out of the way but I ran into a few issues with the code that I didn't know how to fix and what solutions I was given didn't work for me.

Figure 1.2: Issue #1 (23/10/23)

Figure 1.3: Issue #2 (23/10/23)

As seen in figures 1.2 and 1.3, I couldn't get the elements to connect together in a nice looking way without it affecting the other, along with that the blue column wouldn't fill up the corner parts of the website which was incredibly annoying. I tried my best to solve it but after a while I gave up and moved onto adding in the text and other images.

Figure 1.4: Website Screenshot, Week 9 (24/10/23)

For the most part, I didn't have much trouble with the images and text as those were a bit easier to do, however the Projects section at the bottom of the website is where I ran into trouble again.

Figure 1.5: Projects section screenshot, Week 9 (24/10/23)

At first, I was going to have this be a carousel where you could scroll between my different projects and the photos would be links that took you to my blog posts on those modules but as I tried to add in a carousel, I had to do a lot of complicated stuff with CSS and Bootstrap which I had no clue about so I ultimately scrapped that ideas as a whole and just presented three classes instead since I was also running short on time. I'll be honest with whoever is reading this, this was genuinely one of the worst projects that I've done, mostly due to my part as the work I did was quite poor and looking back I definitely could have tried to improve but because of my distaste towards coding, I essentially just gave up with this project. 

Final Website Link: Week 9 (24/10/23)

FEEDBACK

None

REFLECTION

Experience
I really tried my best with this project but with my lack of proper knowledge on the coding and how to efficiently use HTML and CSS, it lead to this project becoming the way it is. I think one part that made me suffer the most with this one was the way I designed my Digital CV with a third of the page being dedicated to my profile only for it to be cut off near the bottom for my Projects page. Along with that, the amount of elements that I had to add in alongside the listed lines of text in the profile made it a difficult process as well. 

Observation
While I was working on this project, I realised how much trial-and-error comes into play with this module as I had to constantly go back and see whether or not my code was working and most of the time, it didn't work at all.

Findings
I found that the live panel in Dreamweaver is not completely accurate to what is happening on the actual website as I was using that for most of the time to see if my code was working or not rather than actually going to the website and checking to see how it looked. I also learned that simplicity is often key with this kind of work as trying to do something complicated despite have very little knowledge on how this works can lead to a terrible product outcome. I hope to learn from my mistakes here and practice a bit more with HTML and CSS so it doesn't happen again.

Comments

Post a Comment

Popular posts from this blog

Information Design - Exercises

-
Image
03.02.2025- 17.03.2025 / Week 01 - Week 07 Ilhan Rayan bin Khairul Anwar / 0361205 Information Design / Bachelor of Design (Honours) in Creative Media Exercises INSTRUCTIONS EXERCISES Exercise 1: Quantifiable Information For our first exercise, we had to  g ather a set of objects that can be organized through a quantifiable factor. We then have to present it in a layout or graph visually. Figure 1.1: Raw Data For the objects that I would use for this exercise, I decided to go with Lego Technic pieces since I have an entire drawer filled with them so it would be interesting to see what I could do with them. I went with three different pieces since I had a high quantity of them compared to other the other pieces in my storage. Figure 1.2: Data Sorted I sorted the data into three simple categories, which was colour. Figure 1.3: Data Arranged I then arranged them neatly in their respective categories and added in the names for the specific piece that I used.  Figure 1.4: Data Pres...
Read more

Design Research Dissertation - Task 1, 2,3 and Final Task Compilation

-
23.04.2024 - 04.08.2024 / Week 01 - Week 16 Ilhan Rayan bin Khairul Anwar / 0361205 Design Research Dissertation / Bachelor of Design (Honours) in Creative Media Task 1, 2, 3 and Final Task - Design Research Dissertation Compilation INSTRUCTIONS PRACTICAL Task 1: Dissertation Draft For our first task in this module, we had to write a minimum 7000 word dissertation about our topic and research that we conducted in Design Research Methodology. Figure 1: Dissertation Draft Task 2: Visual Design For the second task of this module, we had to create a visual design for our dissertation by turning it into a flipbook styled paper, on top of that the visual design and aesthetic has to match and share a similar theme with the dissertation's topic. Because my dissertation is on indigenous cultures and representation, I decided to try and create a design using elements that they would have used in the past to create books. I used buckskin as the cover and parchment for the pages so that it wou...
Read more

Game Art - Final Project: Art Bible

-
11.12.2024 - 10.01.2025 / Week 12 - Week 15 Ilhan Rayan bin Khairul Anwar / 0361205 Game Art / Bachelor of Design (Honours) in Creative Media Final Project - Art Bible INSTRUCTIONS PRACTICAL With the work completed to a level that I'm satisfied with, I started uploading everything together onto one shared slideshow as my Art Bible. Because this module is connected with Environment Design, I included the drawings that I had made in that module in the slides since they were also Marvel Rivals based. Because my classmate told me that we needed cover art for our art bible, I decided to repurpose my unused splash art that I made for the cover since I did not have enough time to design an entirely new cover just for the art bible. REFLECTION I found this module overall to be the most fun of the three that I took this semester. I really enjoy this sort of work where I get to come up with concepts for a character which is the kind of work that I'm interested in. I enjoy coming up with ...
Read more