01/10/19 - 15/10/19 (Week 6 - Week 8)
Riyaz Mohamed Zain ( 0334031)
Interactive Design
Project 2
INSTRUCTIONS
Week 08
Project 2
For the Project we were assigned to create a Micro site for the trouble makers Manifesto. We were to Use the artworks and collateral from the Advanced Typography Class for this Project. Mr Samsul and Mr Lun told us that for this project we were to use Bootstrap. They taught us how to use Bootstrap and how to take website templates and edit them to fit the purpose.
Then we were told to make a simple wire frame to get an idea for what we wanted in the websites. It is important because to plan out the content that needs to in the website and make sure we don't miss out anything in the final design.
 |
| Fig 1.1 Wire-frame Sketch |
After getting rough idea of how I wanted the design to look like I started to look for a Bootstrap template to use. I decided to use the template Spectral as my Bootstrap template
 |
| Fig 1.2 Spectral Bootstrap Template |
 |
| Fig 1.2 Spectral Bootstrap Template |
|
 |
| Fig 1.4 Spectral Bootstrap Template |
|
 |
| Fig 1.5 Spectral Bootstrap Template |
|
Link to template Preview -
https://usebootstrap.com/preview/spectral/
Week 9
After chose this template because it had Containers in the right places and was close to my initial wire-frame design. there was however a lot of changes that need to be made.
 |
| Fig 1.7 Coding Process |
I started by removing the columns that I did not need. After this I uploaded all the images and the information that need to be in the website. After the setting up the initial elements of the website I moved on to adding effects and further elements into the design.
 |
| Fig 1.8 Adding circular container for lecture guest information |
 |
| Fig 1.9 Adding circles containers for lecture guest information |
 |
| Fig 1.10 Result for the lecture guest Photos |
In order to achieve the design in the wire frame template I made circular containers to display the pictures of the guest speakers.I also wanted to display some information about each speaker. I found that the best way to achieve this would be to add a hover overlay on top of each image.
 |
| Fig 1.11 Result after adding the Hover Effect on the images. |
After this section I moved on to the Merchandise Section. I wanted to add a hover effect on the price here as well so that users can purchase it..
 |
| Fig 1.12 Merch section of the page. |
 |
| Fig 1.13 Merch section with Hover effect on the price effect. |
Final Result
Comments
Post a Comment