Interactive Design - Project 2
4/4/19 - / /19 (Week 1 to Week )
Jasmine Teoh Lee Suan (0331993)
Interactive Design
Project 2 - Microsite
Project 2 - Microsite
Instructions:
Module Information Booklet:
Lecture Notes:
Week 9
Bootstrap - responsive web design framework
Responsive website
Framework - structure or library
Like for twitter there's different devices and the bootstrap can help you adjust to each device
CDN: group of servers - will check your location and detect which one is nearer
Like cache - when you open the website some element will be downloaded - so next time you don't have to download again - makes loading fast
Must be html doc
Put bootstrap at the header + responsive meta tag
Put javascript for bootstrap at the end of the body tag
Grid system: Bootstrap grid - divide into 12 columns bcs can be divided by 3
Class name - three equal columns - try to use a 12 number
Explanation: Add the class name that's all
Week 10
No lectures as it was Raya Hols so we worked on our project during the break.
Project 2:
Week 9
Sketches:
Moodboard and Colour Scheme:
Week 10
I made the backgrounds and other images that I needed to add into the design of my website this week. I referenced my Key Artwork from my Advanced Typography Project 1 and incorporated the printed speckle effect into my website. I also used the devil as my website's logo. I like it, it's cute and cool at the same time.
Week 11
This week, I was completing and adding everything onto my website. I wanted to add a carousel to my website's shop part at first but I felt like it was not really needed anymore and discarded it (damn I spent a long time trying to figure out how it worked though).
Screenshot of the coding process:
I also tried to make the website change backgrounds when it reached a smaller width but I didn't manage to do so.
Week 12
I completed and made readjustments to my website this week and published it online to webhostapp.
This is my final website layout:
HTML Section codes:
CSS Section (I was dumb when I did this and I didn't know that min.css = the compressed version so I strained my eyes a lot to find the places to change my design here :")):
Link to website: https://project2microsite.000webhostapp.com/index.html
Feedback:
Week 9: I showed Mr Shamsul my sketches for the wireframe and he asked me to choose one myself. I also showed him the moodboard and colour scheme and he said to make sure it's similar to my key artwork for typography.
Week 10: No feedback this week as it was Raya Hols.
Week 11: Mr Shamsul wasn't present today so I showed Mr Lun my work and he said that it was good to him already and asked whether I changed the font and the colours from the template which I did, but Mr Shamsul might be more picky about the design so I shouldn't take Mr Lun's feedback as a 100% approval yet.
Week 12: The lecturers both liked my work and I was very happy to hear that, Mr Shamsul liked the layout and the details part especially. He said that I made the background nice and fitting for my key artwork. They suggested me to increase the font size for the sub heading below the about section and justify the content in the about section as well (but I didn't like the way that turned out so I centre aligned it and formatted the works neater instead) and also to add an icon (my logo) to the website.
Further Reading:
1.
Comments
Post a Comment