Interactive Design Project 2 - Working Web Page

Week 4 - 9
Marcus Leong Ka Shing 0363643
Interactive Design / BA of Design (HONS) in Creative Media / Taylor's University
Project 2 - Working Web Page

---

LECTURES

Week 1-3

Week 4-6

---

INSTRUCTIONS

For this task, we were told to create a working web page based on our Project 1, Digital Resume Prototype. HTML and CSS codes were to be used to replicate a working webpage that almost exactly looks the same as our prototype. It also had to be responsive. 

Process

First things first, I went ahead and analyzed my current protype. 

Fig 1.0 Analyzing Prototype

I noticed I had a ton of graphical elements and backgrounds to work with. I did not know the trouble I was putting myself in at the start. I first added all the content with my header using different <h> tags and <p> tags. As I moved on to my first puzzle piece, I was stuck. I did not know how to create the effect of overlapping and graphical elements hence I opted for another method. 

Fig 1.1 Creating Background Images

I created artboards in Illustrator so I was able to use it as background images. It was going well at first until I hit another roadblock. 

Fig 1.2 Front End View

My webpage looked like this. It did not look the same as there were tiny parts of it that were not able to be aligned and fit well. I tried multiple methods and as the responsive screen shrunk, it became even worse. At this point I was stressed out because my progress was essentially not progress. The effort was all to waste because of my carelessness and lack of knowledge in CSS and HTML. I consulted my lecture and redid my webpage. 

Fig 1.3 CSS Code

Starting fresh, I used some codes from the previous HTML but just switched up the background images to background color. 

Fig 1.4 New Front End

Things looked much cleaner and more similar to my prototype. Simplifying my design made it much more easier to code. 

Fig 1.5 Front End View

I did the same for the other sections, and added the necessary margins and padding. It was a ton of trial and error. 

Fig 1.6 Using Inspect Element

I used the inspect element very frequently to preview my work. I found it very helpful to test and preview my edits. 

This was how my final main webpage looked like: 

Fig 1.7 Final Front End

 

Fig 1.8 Responsive CSS Code

Moving on, I made another set of CSS code for a mobile screen. This was to fully utilize the responsiveness so all content on my prototype was also available for view on mobile and tablet screens as well. 

This was how it looked like for on mobile. 

Fig 1.9 Mobile Screen

This is how it looks for a tablet screen. 

Fig 1.10 Tablet Screen

Final Outcome and Submission

Fig 1.11 Final Tablet Preview

Fig 1.12 Final Mobile Preview

Fig 1.13 Final Desktop Preview

---

Feedback:

Week 8: 

Simplify your work, reduce the graphical elements. 

---

Reflection 

Creating a working web page for my Digital Resume Prototype turned out to be quite a journey. Reviewing my prototype in Fig 1.0, I realized I had a lot of graphical elements, making the task challenging. As I added content using different tags, I struggled with making puzzle-like designs in Fig 1.1, prompting me to use Illustrator for background images. However, in Fig 1.2, my webpage didn't align well, and it became worse when trying to make it responsive. Feeling stressed, I sought guidance from my teacher and decided to start fresh. Simplifying my design in Fig 1.4 by switching background images to colors brought a cleaner look. With trial and error, I adjusted margins and padding, using the inspect element tool (Fig 1.6) to preview my work. The final main webpage in Fig 1.7 showcased a cleaner design, and I extended this to mobile and tablet screens, as seen in Fig 1.9 and Fig 1.10. Each screen required a new set of CSS code, resulting in the final outcomes displayed in Fig 1.11, Fig 1.12, and Fig 1.13. This experience taught me the value of starting afresh, keeping things simple, and using tools like inspect element for better progress.