Interactive Design - Project 2

25/10/2018 -01/11/2018 (Week 9 - Week 10)
Kitty Lai Yung Syn (0331933)
Interactive Design - Project 2

---

INSTRUCTION

PDF File

---

PROGRESS
In project 2, we were assigned to do an e-invite which is related to Advanced Typography project 2. We are supposed to promote our Typosexual Typographic Exhibition and our collateral of the exhibition. Below is my sketch of the microsite.

Rough Sketches

Mr Shamsul said the sketches are fine but I have to add call-to-action into my microsite. 

Rough Sketch 2

After getting feedback from Mr Shamsul, I drew another rough sketch and this time I tried different ways to add call-to-action. In my final decision, I used the combination of sketch 1 and sketch 3. The main page, I will go for a pic of my sketchbook back cover and I will only put the navigation bar button at the top right, no logo at the top left because I found it visually confusing. I also wanna add buttons like 'MORE' or 'READ MORE', as the audiences would notice that there are other information below too.

html code

Real Time Preview

 This is a Real Time Preview. I was very confused because I added a little icon on the top but it did not show. I checked on my code many times and I am sure the codes are correct. Instead of wondering what problem of my codes, I tried to upload my files to 000webhost first.

Uploading files to 000webhost

Moving on to this, at first I have a problem uploading my files to 000webhost. The html has shown but the css was gone missing. I tried different ways by searching help on google, but it does not become better. So, Mr Shamsul and Mr Lee told me that I have to mirror the files which means how I have named and organized my files, they have to be the same in 000webhost.

My page is finally done after uploading 3 times of all the files to 000webhost. Also, my icon is there! I was so happy with it! It is there now, finally, YAY! This is my final look of my microsite

Final Look

This is my final look of my microsite.

Link to Project 2 final look:
https://kittylaiys.000webhostapp.com/ID%20P2%20TYPO/index.html

---

FEEDBACK

week 9: The sketches for project 2 are fine but it is compulsory to add call-to-action button.
week 10: Mr Shamsul suggested me, for the final project, I can share more about my part time job stuff. Xiao Shi is my partner and she will be taking over the content of website. But, Xiao Shi rejected the idea Mr Shamsul gave me, so no specific idea has been confirmed yet. For my partner Xiao Shi, she has not yet determine what to do for her website content, so I do not have any idea for my final project yet.

---

REFLECTION

Experience
week 9: We were doing some sketches for project 2 in class and asked for feedback from Mr Shamsul.
week 10: I was discussing final project with my partner Xiao Shi. It was so fun and excited to do something like this! We brought up so many memories to talk because we were looking back to our previous assignments and projects.

Observations
week 9: Many examples of microsite are shown online. I have googled some videos that teach advanced html. I learned some skills from there.
week 10: I observed that everyone is so happy and excited when we were assigned a project that we can partner up with our friends.

Findings
week 9: I found that I had a lot of adjustments have to make which is the assignment in Advanced Typography because the measurement does not show the same I did in Illustrator. 
week 10: I found that doing project alone VS having a 'client' is very different. I think this is a very good experience of having a 'client' because I learnt how to communicate and I was more motivated to do this project.

---

FURTHER READING

GETTING STARTED WITH ZURB FOUNDATION 4:
DESIGN AND BUILD PROFESSIONAL WEBSITES WITH ZURB FOUNDATION'S MOBILE-FIRST RESPONSIVE FRAMEWORK by Patterson, Andrew D.


I learned how the grid system of the Foundation consists of cells, rows, and columns. I learned how to manipulate rows, columns and the space between them in order to achieve different consequences. I learned how content, especially images, influences and is restricted by the grid system in general. I have taken some tips to create my own styles to improve the control of the grid layout.