Interactive Design - Project 2

15/10/2020 - 29/10/2020  / Week 8 - Week 9
Avery Ong Xuan Ting  / 0344462
Interactive Design / Bachelor of Design ( Hons ) in Creative Multimedia
Project 2 / Microsite

INSTRUCTION


WEEK 8  

We have no class today because this week is Independent Learning Week. However, Mr. Shamsul mentioned that we need to start completing our project 2. It is the continuity from project 1. Student need to convert our project 1 file as a working webpage in project 2. We may use Bootstrap as the framework or continue using HTML/CSS. 

This project took me a lot of time to do. Maybe is because I still wasn't familiar with Dreamweaver and those coding yet, I do some research and tried to study all those coding but still can't come out with a perfect outcome.

fig. 1.0 ; first outcome

I really faced a lot of issues while doing this project. The Call to Action on the top right wasn't the color I wanted it to be after I check and find what is the problem many times. I showed lecturers my first outcome they also mentioned that there still have many problem need to fix it.

Link to First Outcome
  
Lecturer's Feedback :
Still got many issues need to fix. The webpage wasn't responsive. The elements can't combine with the background image, they must fix it as a code in Dreamweaver.

WEEK 9

After trying many days, I still couldn't fix all the problem. I try to find some code from W3schools.com to help my project 2 but all the method I had tried was not working. Therefore, I told Mr. Lun all the problem I'm facing from Discord for help.

fig. 1.1 ; first issue

Mr. Lun mentioned that I should set the background size to 100% then the image will be responsive. It works but when I minimize the window, it show out some extra white space.

fig. 1.2 ; second issue

Sir said that this is because the header have a height, that is why when I resize the background image to 100% to fit the width it shows the white space. But if I remove all the height properties in the section it became like this :

fig. 1.3 ; third issue

Mr. Lun said this is because it have no content to adjust the height now. Maybe I have to use media queries to adjust the height which base on the window size. Reference :
https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_ex1

If I set the height and width to 100%, it will fill up the browser. Usually we don't set height at all
or only set a very small value than it will be responsive. But after I tried to fix all the problem Mr. Lun had mentioned, it still couldn't work.

fig. 1.4 ; forth issue ; minimize

fig. 1.5 ; forth issue ; maximize

For the forth issue, Mr. Lun said that this is because of the image aspect ratio. it wont be able to fit in 100% nicely, I have to try other background size method. Reference :
https://www.w3schools.com/cssref/css3_pr_background-size.asp

After trying so many method to fix it. I choose to rework all the coding again. I deleted the first HTML and created a new HTML. Other than that, I also changed some design to fix some problem. Mr. Shamsul said that we don't have to follow exactly the same as the Project 1's design. It is possible to change some design while we met some issues. As a result, below is my final outcome :

Comments

Post a Comment

Popular posts from this blog

DIGITAL PHOTOGRAPHY AND IMAGING - PROJECT 1

Image
13/04/2020 - 21/5/2020 ( Week 1 - Week 5 ) Avery Ong Xuan Ting (0344462) Digital Photography and Imaging Project 1 / Exercises Task 1  Exercise ( Week 1 ) Hearst Mansion Exercise : final outcome Task 2 Exercise ( Week 2 ) Ghost House : final outcome Task 3 Exercise ( Week 3 ) Re-coloring : final outcome Task 4 Exercise ( Week 4 ) Displacement Map Exercise : part 1 ; final outcome Task 5 Exercise ( Week 5 ) Hybrid Animal : final outcome
Read more

DIGITAL PHOTOGRAPHY AND IMAGING - Week 1

Image
WEEK 1 (16 / 04 / 2020 ) Lectures :  After briefing of the class, we installed Photoshop and played a game named Bezier . It's not very challenging for me because I have finished this game on Monday in the Illustration and Visual Narrative class. So this is the second time I played this game as practising . The Bezier Game :  link:  https://bezier.method.ac/ Practical : Exercise 1 Three of my favourite photoshop works: by Magdiel Lopez This Photoshop designed by Magdiel Lopez is a man's head that splited into 4 parts. The contrast are built with black and white but he used 3 plain colours (orange , red and purple) to highlight the split between of them. I think this is quite an easy editing but it's very creative. from graphicriver.net  It's just a simple photo at first but after adding some effects and design, it became to be a very artistry image that is very eye-catching. I like the colour palette the way it represented,...
Read more

DIGITAL PHOTOGRAPHY AND IMAGING - PROJECT 3

Image
13/04/2020 - 13/07/2020 ( Week 1 - Week 14 ) Avery Ong Xuan Ting (0344462) Digital Photography and Imaging Project 3 / E-Portfolio  WEEK 1  Hearst Mansion Exercise : final outcome  WEEK 2  Ghost House : final outcome  WEEK 3  Re-coloring : final outcome  WEEK4    Displacement Map Exercise : part 1 ; final outcome  WEEK 5    Hybrid Animal : final outcome  WEEK 6    Cyborg demo 01 ( Bora ) : final outcome  WEEK 7    Cyborg demo 02 ( Geisha ) : final outcome  WEEK 8    Cyborg / Progress : Photo Manipulation  WEEK 9    Self -Titled : f inal outcome  WEEK 10    Photo editing in raw effect : final outcome  WEEK 11    Parallax and GIF in Photoshop : final outcome  WEEK 12    Cin...
Read more