INTERACTIVE DESIGN - PROJECT 2
23.05.19 - 13.06.19 (Week 8 - Week 11)
Helen Angelia (0336203)
Interactive Design
Project 2
LECTURES
Lecture 6: -
23.05.19 (Week 8)
There was no lecture this week as we worked on our photoshop exercise.
Lecture 7: Bootstrap
30.05.19 (Week 9)
For this week, we learned about Bootstrap to help us in working project 2.
Lecture 8: -
06.06.19 (Week 10)
There was no lecture this week as it was a public holiday.
Lecture 9: -
13.06.19 (Week 11)
There was no lecture this week as we continued on our project 2.
INSTRUCTIONS
Module Information Booklet (MIB)
PROJECT 2 - TROUBLEMAKERS MICROSITE
23.05.19 - 30.05.19 (Week 8 - Week 9)
Since we were still doing the photoshop exercise, I haven't really started on the project 2 yet, but I've come up with an idea for my website layout, once my typography collaterals were done. So, I've made a sketch for it.
Fig 1.1
Website Layout Sketch
06.06.19 (Week 10)
I didn't ask feedback for my sketch yet, and I doubt the lecturers will know what I want to do with my layout, so I made the template straight in Ai and send for feedbacks.
Fig 1.2
1st Attempt of Ai Template
Mr. Shamsul said that it was too cramp and told me to change it. Here is my second and final attempt of the template:
Fig 1.3
Final Attempt of Layout Design
Fig 1.6
Final Outcome (After Revision)
Final Outcome Embedded in PDF
13.06.19 (Week 11)
At first, I didn't use Bootstrap as it was still really new to me and I went with the traditional way. I had already done my first attempt of coding and show it to Mr. Lun, but I could only open it in Safari, while the result was really messy in Chrome.
Fig 1.4
1st Attempt in Coding
Mr. Lun recommended and taught me how to use Bootstrap, but I still find it quite difficult. Since I couldn't hand in the old one, I needed to make another website layout with Bootstrap from zero which really took my time.
Fig 1.5
Outcome of Responsive Images
Fig 1.6
Outcome of the Microsite
Here is my link to my first attempt outcome:
Google Chrome Browser
Fig 1.7
Final Outcome (After Revision)
Home
Fig 1.8
Final Outcome (After Revision)
About
Fig 1.9
Final Outcome (After Revision)
Details
Fig 2.0
Final Outcome (After Revision)
Merchandise #1
Fig 2.1
Final Outcome (After Revision)
Merchandise #2
Fig 2.2
Final Outcome (After Revision)
Contact
Fig 2.3
Final Outcome (After Revision)
Footer
Here is my final outcome after revision:
FEEDBACKS
23.05.19 (Week 8)
There was no feedback this week.
30.05.19 (Week 9)
There was no feedback this week.
06.06.19 (Week 10)
Online Feedback: Mr. Shamsul said that the first Ai template was too cramp and the second one is already okay.
13.06.19 (Week 11)
There was no feedback this week.
17.06.19 (Week 12)
Mr. Shamsul said that I need to delete the responsive images (slider), delete "home" navbar and make the home button as the scorpion logo, need to add more line-height, more padding at event details part, and delete the "back to top" part.
REFLECTION
EXPERIENCES
23.05.19 (Week 8)
I didn't know what to do for my microsite, as what comes to my mind is: "This is part of Mr. Vinod's class, need to make a layout which he will approve". So, I just tried to look at different websites and maybe I will try to combine them.
30.05.19 (Week 9)
The lecturers gave me a lecture about Bootstrap this week, but I couldn't really understand what the lecturers were saying, as everything was really blurry and I had a hard time learning it.
06.06.19 (Week 10)
When Mr. Shamsul said the Ai template was too cramp, I was panicking because the week was almost ending and I haven't started coding yet. I've tried to come up with ideas until my work got accepted.
13.06.19 (Week 11)
I did the microsite without using Bootstrap and the result was horrible! When I showed it to Mr. Lun, he immediately recommended me to use Bootstrap, so I need to make my website from scratch again. Overall, for this week, it really gave me a lot of stress because I was really slow in coding and I haven't done my work even though the deadline was already decided.
OBSERVATIONS
23.05.19 (Week 8)
I tried to observed my friends' works of the photoshop exercise, and I saw a lot of them were doing a good job in designing the website and also in coding which makes me couldn't afford to leave behind.
30.05.19 (Week 9)
Not many of my friends have already started on project 2 yet, so I couldn't see much of their work and I thought that I might need inspiration beside only looking at Pinterest and the seniors' work.
06.06.19 (Week 10)
I tried looking at the Pinterest for website template examples and watching YouTube videos in learning how to code and how to make a good website about reservation at a colloquium and sort of things like that.
13.06.19 (Week 11)
Now that the class already started again, most of my friends have already done their website and just need to fix some parts, but some of them also haven't started yet because they were also confused in using Bootstrap.
FINDINGS
23.05.19 (Week 8)
I found out while fixing my photoshop exercise that I needed to put drop-shadow on the fonts to make it more legible, also the hovering part needs to have brighter colour as well.
30.05.19 (Week 9)
I didn't really understand of everything the lecturers were saying for the Bootstrap lecture, but one thing for sure, the key to using Bootstrap is only to copy-paste the coding and change some things.
06.06.19 (Week 10)
While looking at Pinterest and seniors' works, I found out on how to make the website template using the elements from the key artwork of the Troublemakers Manifesto.
13.06.19 (Week 11)
After having a long discussion with Mr. Lun, I now have figured out how to use the Bootstrap, even though just a little bit and not all. But thanks to him, I could use understand the Bootstrap more now.
FURTHER READINGS
23.05.19 (Week 8) - 13.06.19 (Week 11)
For my further readings, I didn't read any book and only watch YouTube tutorial videos as much as I can and here is some of them:
Comments
Post a Comment