Project 2 - Microsite

25/10/18 - 1/11/18 (Week 9 - Week 10)
Ng Jia Jin (0331589)
Interactive Design 
Project 2: Typosexual Typographic Exhibition Microsite

Instructions

Module Information Booklet for this project: 




Lecture Notes

25/10/2018 (Week 9)

For this week, we learned about what a microsite is. Since we don't have to do an e-invitation for our current project anymore, we're going to do a microsite for our Typosexual Typographic Exhibition instead. 

So what is a microsite?

Microsite is basically a website that is sperated from the main website. It usually have a specific goal or objective to the microsite. For example, for this project we're going to create a microsite mainly just for the exhibition itself because by seperating it from the main website, a microsite can make the main website less cluttered and also cleaner. 


After that, Mr Shamsul gave us a lecture about bootstrap and also how can we apply it to our microsite. Bootstrap is We also learned about the grid system in bootstrap. 

Grid System in Bootstrap

Exercise

18/10/2018 (Week 8)

For this class, we were completing our previous given exercise, After we submitted our previous exercise, Mr Shamsul told us that we can start off our Project 2 by sketching out our layouts first before coding it on Adobe Dreamweaver.

Layouts for Microsite

25/10/2018 (Week 9)

This week, I finalized my layout for my microsite design. After showing Mr Shamsul and Mr Lun some of the layouts that I did at the previous week. He chose one of the layouts and then asked me to change some details of it to look more complete. 

What is the requirement for our microsite for this project?

We need to create a microsite specially for Typosexual Typographic Exhibition with all the necessary details. The main purpose of the website is to let our target audience know more about the exhibition and also to purchase the exhibition's merchandise if there're any. 

For my microsite, I included some merchandise items, the details of the exhibition and also the main poster of the exhibition. The reason I didn't add the RSVP button like the rest of my classmates is because the exhibition is free and anyone can come and go as they want so it is not necessary to add the RSVP as people can just go in as they want.

Final Layout for Microsite

Here are the elements that are going to be added to my microsite: 

Main Exhibition Poster

Exhibition Key Artwork

Merchandise #1: Phone Case

Merchandise #2: T-Shirt

Exhibition Details

Once I gathered all the important details for the exhibition, I then went on to start off my project on Adobe Dreamweaver. I started off by creating a navigation bar because it's one of the main component for my microsite.

Coding Process on Adobe Dreamweaver #1

Coding Process on Adobe Dreamweaver #2

Coding Process on Adobe Dreamweaver #3

Programming Code on Adobe Dreamweaver

After finalizing my microsite HTML codes and the style, I then went on to preview my website on Google Chrome. 

Preview #1

Preview #2

Preview #3

Preview #4

1/11/2018 (Week 10)

It's submission week for our microsite for Typosexual Typographic Exhibition.

For the link to the Typosexual Typographic Exhibition Microsite, click here.

Here are my code and the link to the website:

Feedback

Week 9

Mr Shamsul asked me to sketch more layouts for my microsite so that I can have more options to choose from.

Week 10

He approved my layouts and he chose one that is the best among the ones that I sketched. He also told me to not included too many borders as it make the whole layout ugly. 

Reflections 

Experience

Week 9

For this week, there's nothing much except me trying to create a layout for my microsite. I mainly focus on doing sketches for my microsite layout and also to try to do some coding on Dreamweaver. 

Week 10

This week, I focused on completing my microsite on Dreamweaver and also to make sure that all my style at CSS is in the correct order. But, when I want to upload my file on the free webhost website, it wouldn't let me upload my files and it was very buggy so I can only submit my zip file on Google Classroom. 

Observation

Week 9

When I'm sketching my layouts, I find that my layouts are very basic since it's a microsite so I can only add a few necessary details to it. When I'm coding my layouts into Dreamweaver, I find it pretty hard and not as easy as it seems because there are my codes to remember, one wrong code and your whole layout or alignment will be different and not aligned properly. 

Week 10

Coding is really not as easy as it seems. I had to keep redoing some layouts for my microsite because some of the codes are wrong or incomplete but I didn't know which one. I guess the only way to memorize all the codes is to keep practice coding. 

Findings

Week 9

Creating a microsite is quite a challenge to me because the layout that I sketched and the microsite that I created don't really look the same as I don't know a lot of coding. I find myself constantly going to a web based website called W3School for some code reference. 

Week 10

Throughout this project, I have learned a lot about coding and I felt that I could've done better for my microsite after this project. I'm sure I can do better for my next project.




Further Readings

28/10/2018 

HTML & CSS

HTML & CSS is published by John Wiley & Son Inc and the author of the book is Jon Duckett. The book mainly talks about creating attractive and user-friendly website content whether it's from scratch or from an existing template. I find this book very useful mainly because not only it teaches you the basic programming code such as how to start a HTML template but it also explains the usage of pictures or also GIF. Besides that, it also explains the usage of CSS and also to understand the harmony of colors within a webpage. 

In my opinion, I think this book is suitable to everyone who is currently working as a web designer or just web design students because this book has everything a web designer needs in it. I like how they included the usage of different types of images and also colors so that a web page looks pleasing to they eye.