INTERACTIVE DESIGN: FINAL PROJECT 03
21/06/2022 - 09/07/2022 (Week 13 - Week 15)
ALICIA TENG YI LING / 0345159 / BDCM
INTERACTIVE DESIGN
Final Project / Microsite
FINAL PROJECT: MICROSITE
There was an issue with the amount of time we had for each project so Mr. Shamsul decided that he final project is a continuation from project 1 and 2. In this assignment, it is to add on four more working subpages to the same landing page to create a working microsite, using whatever platform you desire.
I decided to design and code these four pages in the navigation bar:
- ABOUT - More about me.
- NEW - Relates to the "Latest Arrivals" Panel in the landing page.
- SHOP - Relates to the "All Collections" section in the landing page.
- FAQ - More about the shop, products and myself again.
 |
Fig 1.1 Final Landing Page Header |
Sketches
Following this, I began creating some rough sketches in Adobe Illustrator. I wanted to maintain a similar theme to the landing page but with each section having a slightly different header so I gave each of them a different image.
I want the pages to be simple and minimalist with more images visible than words (perhaps a hover effect) so the overall aesthetic of the page would be like a picture board.
To maintain consistency throughout the pages, I decided to reuse the same navigation bar and header format as well as the same footer.
 |
Fig 2.1 All Pages Draft Sketches Together |
 |
Fig 2.2 About Page Sketch |
 |
Fig 2.3 New Page Sketch |
 |
Fig 2.4 Shop Page Sketch |
 |
Fig 2.5 FAQ Page Sketch |
 |
Fig 2.6 Selected Colour Palette |
Completed Still Wireframes
There were updates in the design from the sketches. For sake of consistency and personal preferences for the aesthetic appeal.
 |
Fig 3.1 All Pages Still Wireframe Designs |
 |
Fig 3.2 "About" Still Wireframe Design |
 |
Fig 3.3 "New" Still Wireframe Design |
 |
Fig 3.4 "Shop" Still Wireframe Design |
 |
Fig 3.5 "FAQ" Still Wireframe Design |
I adore the colour palette and the matching themes each page has as it definitely looks like a website that I would own. I really like how they look and they're pretty simple to navigate in my opinion. I hope the coding section won't kill me though.
Creation Process
For this project, I used Adobe Dreamweaver. I began by creating an outline in my code by labelling each section to keep things organised and so I would not get confused. I prefer to work section by section, meaning that I'd write the HTML for the header then finish the CSS before moving on to the "My Purpose" section, repeat this, and so on. While, Mr. Shamsul recommended we stick to Bootstrap, I found that a lot of the design elements I wanted to include in my website could not be executed through Bootstrap. So, I took to the internet and learned all the new things primarily through YouTube and Google.
ABOUT
 |
Fig 4.1 About Header |
 |
Fig 4.2 Self-Description Section |
 |
Fig 4.3 Embedded YouTube Video |
In fig blah, I embedded a YouTube video of a previous project I finished which is essentially a self-directed interview about myself. I thought it would fit well in this section so I added it in.
NEW
 |
Fig 5.1 New Header |
Depending on the background of the image, several design elements were changed to match it. For example, instead of underlining in white when the navigation bar is hovered over. I changed it to black so it would be more evident against the bright background.
 |
Fig 5.2 Updated Colour for this subpage's navbar |
 |
Fig 5.3 Clothes Showcase 1 |
 |
Fig 5.4 Clothes Showcase 2 |
SHOP
 |
Fig 6.1 Shop Header |
 |
Fig 6 Shopping Description |
 |
Fig 6 Shopping Description + Footer |
FAQ
 |
Fig 7.1 FAQ Header |
 |
Fig 7.2 Answering Questions Layout 1 |
 |
Fig 7.3 Answering Questions Layout 2 |
Unlike the other page's headers, I wanted to try a more strong colour in the header as a large section of this page is black and I did not want it to be too overwhelming compared to the rest of the design.
The footer and navigation bar remains the same in every subpage to maintain consistency and avoid confusing people who visit my site.
Further Development
In this stage, I was trying to make the microsite responsive in all devices.
Dimensions shown:
- iPad Mini
- iPhone 12 Pro
About
 |
Fig 8.1 iPad Mini About Page Showcase |
 |
Fig 8.2 iPhone 12 Pro About Page Showcase |
New
 | |
|
 |
Fig 8.4 iPhone 12 Pro New Page Showcase |
Shop
 | |
|
 |
Fig 8.6 iPhone 12 Pro Shop Page Showcase |
FAQ
 | |
|
 |
Fig 8.8 iPhone 12 Pro FAQ Page Showcase |
Fixed Issues
- The most issues I encountered was with making the microsite responsive on all devices
- While it is not perfect, I did my best to make it readable.
- Another problems involved was due to how messy my code is, it was hard to find things I did not label properly so this assignment was quite lengthy but fun nonetheless!
There were a few deviations from the original design but I think it's better that way as they are more practical and look better aesthetically.
Updates to the design:
- I added a lot more information and product details than I thought I would so it ended up slightly altering the overall design.
- In "Shop All", instead of placing product information below their images, I decided to make it pop up when hovered over to minimize the amount of text on the page as I thought that it would look cleaner.
- Updated the hover line colour for "NEW" navbar to match the background better.
- Additionally, I hyperlinked the navigation bar in the footer to its intended pages, as I had forgotten to do that previously.
HTML and CSS CODE for the Four Pages
Here is the link to a Google Drive that contains all of the HTML and CSS codes I used for this project:
I sincerely apologise how long the codes are. I used some of it from my previous project and it became quite messy.
Final Microsite Submission:
Fig 9.1 Final Microsite Test Recording
Netlify Link: https://final-project-aliciateng.netlify.app/index.html
FEEDBACK
Week 14:
Make sure to test your website before submission. Test all links from all pages, check if there's any broken links for your images.
REFLECTION
The final project was a very lengthy learning but fun process for me. It was slightly easier this time as I could refer to my old code from project 2. There were times where I could not understand why my code wasn't working but like last time, when I slow down and take my time to properly read through the lines, the mistake is evident. Overall, I really like how the microsite turned out and I'm very proud of it especially considering how I was not great at coding when I first started this module.
Initially, I was worried that because the layouts of all the pages were somewhat similar, the viewer would feel bored viewing the website but I tried my best to make sure everything was consistent and in theme whilst also looking appealing. I liked creating the other four pages design to match the landing page but also in a way that they would have their own individual differences to stand out.
Comments
Post a Comment