Interactive Design - Project 2
30/5/2019- 13/6/2019 (Week 9- Week 11)
Interactive Design
Project 2
Instructions
Project 2
For our second project, we are required to create a microsite for the event 'The Troublemakers Manifesto'. Mr. Shamsul briefed us on how to use templates from bootstrap to create our website so that we can make the websites look more professional and appealing.
I started by looking the templates available from bootstrap, and I found one that I particularly like and would like to work more on it.
After deciding on the template, I started sketching out the wireframe for the website.
For my mood board, I wanted to go with really simple colors like black and white, as my key artwork is also black and white. I also use the typeface "Century Gothic" as the default font for the website as I like its thin strokes and rounded alphabets.
I also went to Pinterest to look for inspiration for my websites, and I found a few that I really liked.
Visual Reference 1
Visual Reference 2
Visual Reference 3
I used these visuals as my reference for my mock up, and this is my first mock up:
First mock up
After showing to Mr. Shamsul, he thinks that its okay, but I could make it look more exciting. Then I started to add some more stuff to make it look more interesting.
My final mock up
Mr. Shamsul approve of my final mock up after I added the free stock images that I found online.
I used Bootstrap's template for my microsite, and the one I use is a combination of Carousel and Product.
Coding in Dreamweaver
After I got done coding, this is my outcome!
The link to the microsite can be found here.
Carousel Template
Product Template
Outcome for website
Mr. Shamsul and Mr. Lun gave me feedback a week later and asked me to change a few things here and there, and so this is my final version of the website!
Click here to go to the website.
Feedback
Week 9
Mr Shamsul asked me to change and alter the width settings for the previous website exercise.
Week 10
Mr Shamsul said that the work is okay but I should try to make it look more exciting.
Week 11
Mr. Shamsul said that the 'home' button in my nav bar should be an image of our key artwork, and that the overall outcome looks fine.
Week 12
Mr. Shamsul said that he liked my key artwork, and he commented that the font size should be consistent. Other than that, he thinks that the layout overall looks okay.
Reflection
Week 9
I realized that it was much more easier using templates to create our websites as it saves us a lot of time and the templates online all look professional and nice.
Week 10
There was no class this week due to Hari Raya.
Week 11
I realized that using a template to create websites is not any easy either as we have to know exactly where to change things and the codes in Bootstrap can be confusing sometimes.
Week 12
I notice that creating a good website with nice layout is rather challenging as the codes might not work everytime, and we have to be attentive to the details.
Comments
Post a Comment