Interactive Design - Project 2: Microsite Design & Project 3: Website

18/05/2022 - 06/07/2022 / Week 7 - Week 14
Darren Liga / 0351480
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Microsite Design and Project 3: Website

---

URL: 
https://project2-darrenliga-landingpage.netlify.app/index.html

INSTRUCTIONS

Project 2: Microsite Design

To follow up what we have done in Project 1, we were tasked to create a full website starting with the microsite design. I wanted to design for the landing page, about, works and contact us page.

Same like project 1, I continued the design process using Adobe Photoshop.

Fig 1.1: Landing Page

Fig 1.2: About Page

Fig 1.3: About page

Fig 1.4: Contact Page

Link to PDF: 

https://drive.google.com/file/d/1t4lY-RdfqiifQMS-4L6OntFPwfiEvc1c/view?usp=sharing

PDF 1.1: Final Project 2 Microsite Design, PDF

For the next part of the process, i would start coding the microsite

Project 1 coding process will be shown here as well.

I mainly followed the tutorial carried by Mr.Shamsul and used getbootstrap.com for all my bootstrap components, making sure to use bootstrap v4 instead of the latest v5 due to the 4th version being much more stable.

I faced a lot of issues while coding the whole site as i experienced some bootstrap problems, i will address some of the problems along the way.

The first problem i faced was my cards being too ugly, which then made me browsed from other html css site to get a card css which i like.

After getting the card design, another problem was i had to use a lot of @media code for each screen dimension as it wasnt responsive.

Fig 2.1: Card 1

Fig 2.2: Card 2

The cards still aren't pretty to this point.

Fig 2.3: Jumbotron button not centralized

Another problem was my jumbotron call-to-action button couldn't be centralized no matter what i do. I reached out to a friend who is a full-stack developer as for him, html and css would be very basic. He mentioned that he tried a few tricks but still couldnt manage to get the button to be centralized, and said that my button animation along with the bootstrap might be clashing against one another. I then was forced to use more than 10 @media commands and position the button using translate for each screen dimention. This whole process was very time consuming and lasted me as long as 2 weeks just to finish the code.

Fig 2.4: Final Card Design

Fig 2.5: Small-Screen Card Design

I then finalized my card design with the figure above. I had to manually code the card size for each screen resolution and scaling the image, along with the hover code individually for each card, for each screen. That explains my delay in submitting the first project as there just wasnt enough time for me to make all the code responsive and animated.

For my button problem, here is the animation.

Vid 1.1: Button Animation

I really like this button animation, after browsing the web for button animation i found 1 that i really like. The animation is simple but cool. The css code behind this animation is intense.

For showing the html css code, i will open the .html and .css code using VScode although i worked on dreamweaver.

258 lines of css code just for this animation

Fig 3.1: Button animation

1052 lines of @media css codes just to make the button and cards responsive.

refer to the video below

Vid 2.1: total landing page @media css code

URL of Final Project 1 Portfolio (Landing Page) hosted using netlify.

https://project2-darrenliga-landingpage.netlify.app

Since the hard part of the assignment is done, the continuation of my microsite is pretty straightforward.

Work Page

Fig 4.1 Work page HTML

Fig 4.2: Work Page CSS

The only problem i had while coding the work page was creating hover effects. I wanted text to show while dimming the image on hover while making the whole image gallery responsive. Several days wasted just to get this right.

Fig 4.3: work page on laptop

Fig 4.4: work page on mobile devices

Fig 4.5: text on hover

About Page

Problems started to arise while creating different pages. My navigation bar just couldnt be fixed in 1 position due to the different container div classes on each page, i tried making all the code the same, but the stock bootstrap 4.0 just kept messing with the actual backend.

Fig 5.1: About page HTML

Fig 5.2: About page css

Fig 5.3: About page on laptop

Fig 5.4: About Page on Mobile Devices

I didnt have time to refine any of the smaller devices user interface as im happy enough with the responsivity its at now. Usually when i start using @media's, the stock Bootstrap backend will mess with everything else. I also put the same button code from the landing page. 

Another problem from the bootstrap was at this page (about us) on the mobile version the navigation tab couldnt be pressed. Troubleshooting this issue will take me weeks, i just noticed this problem a day before submission.

Contact Page

Fig 6.1: Contact Page HTML

Fig 6.2: Contact Page CSS

I dont theres any problem with this page aside from the same navigation bar tab that cant be accessed on mobile platforms (for work and about page, not contact).

Fig 7.1: Contact Page on Laptop

Fig 7.2: Contact page on Mobile

All the buttons and features on this contact page works perfectly. the only issue i have is i dont know how will people reach me when filling up the contact form. Its a sector that we havent been taught yet.

---

FEEDBACK

-no feedback due to holidays and cancelled classes

---

REFLECTION

Since im taking UI/UX as my specialization, i had a lot of interest in participating in this module. I learned all the stuff needed in order to be able to publish this final project. Although i feel that alot of time have been wasted due to the holidays clashing in with Interactive Design Wednesday class and several cancelled sessions, i couldnt get a proper feedback and wasn't able to fully learn from the mistakes i made. Hopefully in the advanced module on interactive design, i would expand my knowledge of coding.