Interactive Design - Project 2: Microsite Design & Project 3: Website

04/10/2022 - 04/11/2022 / Week 10 - Week 14
Tan Pei Yun/ 0345386
Interactive Design/Bachelor of Design in Creative Media
Project 2 & 3 - Microsite Design & Website

---

Instructions

Project 2 &3 : Mircosite Design &website

Wire-frame in miro-board

Fig 1.0 Progress in Miro-board 

For the mircosite task, I decided to remain using Miro board for guiding me before began my design in Illustrator , this time we were not longer to do 20 sketches / wireframe like our landing page.  We were required to do the mirco site with 5 pages. So here are my progress of miro board.

Feel free to my miro-board :

https://miro.com/app/board/uXjVPUT4MZw=/share_link_id=133826694816

Font Choice

Fig 1.2 Final Font choice for website 

Google font : Arvo 

https://fonts.google.com/specimen/Arvo?query=arvo

Sitemap

Fig 1.3 Sitemap 

While looking to also assigned us to create a sitemap of our microsite. It was supposed to help us to design the pages easier and useful be useful on linking all the pages together during project 3. In the sitemap , I have listed down the 5 pages I would like to created and with its content inside.

The pages i will be created : 
1. Home page
2. About page
3. Shop page 
4. Contact page 
5. Sign In page

Digitisation/ Progress in Illustrator: 

Fig 2.0 Overall Progress in microsite design

Fig 2.0 Chosen Font and Colour Scheme

 

It was quite tiring and overwhelmed during this stage, a final task to create another 5 pages and getting covid was really hard to maintain the productivity in doing this final project. However, I am still trying my very best in making the 5 pages and to make sure the theme, colour and page layout are on the right track.

Colour Schemes : Soft Pastel Colour , Holographic

Google Font Used : Arvo in Regular and Bold

Below are the final outcome of the 5 pages : 

Fig 2.2 Compilation of 5 pages microsite design 

Note : the file is too large, so suggested to put inside google drive so it won't affect the quality of it. 

Link to mircosite design folder :https://drive.google.com/drive/folders/14SV5cjiXz2rQP_S0Gp1FtrD_OQ1kfuRa?usp=sharing

Website / Coding Progress

During the coding stage, was defiantly very time-consuming and as a beginner who was completely new into her "coding journey" , I had watched quite amount of tutorials and looking in google on how to fixed the errors and to code what I wanted. I used DreamWeaver to create my site as instructed by the lecturer and started working from the navigation bar.

Below are screenshot some of the progress as a "hard-working" proof  and also for me to note down some of the challenging I had met , so let's go : 

Fig 3.0 Html & Css Progress in dreamweaver

Fig 3.1 Navigation and brand logo

It was really glad that I able to live in a powerful generation where there are bunch of useful resource to help me out, of course I do not want to "cheat" during this final project , I would love to learn from it and take it as a good and challenging experience for me to do it from the beginning to the end. 

Here are the useful source that had helped me out during the final task :

• https://www.w3schools.com/
• https://getbootstrap.com/
  
• https://mdbootstrap.com/docs/standard/extended/gallery/
  
• https://mdbootstrap.com/docs/b4/jquery/forms/contact/
  
• https://www.flaticon.com/free-icon-font/heart_3916585?related_id=3916585
  

Fig 3.2  About page and photo gallery 

Fig 3.3 Error #1 (helpp)

After done the navigation part, here I begin with the about and page where inside it include content of the introduction about Roubit brand, and also some picture of the brand. During this part was getting tough as the alignment wasn't right and it took me quite awhile to figure it out which part was wrong and right.

Fig 3.4 Contact Form & Log In (html & css)

Fig 3.5 Fixed Problem in Contact Form

I also included login and contact form to the website. There are some minor mistake as the form are not in the middle but in the end I managed to fixed it. Overall, I quite satisfied and feel proud able to make it into this step and making me "slightly" motivated to do the next part and can't wait to the final outcome. 

Fig Shop Page (html)

During the shop page product section , there's a multiple problem and errors againn. There's 2 colour (blue and grey) in the card section at the text. I was not satisfied how it looks, and it took me quite awhile to check it one by one and glad that I able to fix it. 

Fig  3.5 Footer with newsletter 

Fig 3.5 Before and after fixing the errors 

Unfortunately, I met a few mistake during the last part of footer, firstly I did wrong with the "&" , however it is still easy to do the correction from "&" to the entity number of "&#38,".

Final Outcome : 

Here are my final HTML, CSS and images in zip and also the netlify website 

https://tan-pei-yun-final-project3-roubit.netlify.app/

**Kindly use google chrome to view the website, thank you. 

---

Reflection

In this final project, I do know what is my exact feeling , I believe is more towards to "mixed" feeling, It does really struggled yet challenging but I managed to learn like ALOT. To be honest, I find coding to be quite complicated to me and I even wondered it is possible for me to code a whole website with several pages but after some time, I realised that it is not impossible and I somehow did it. 

The starting of this project was really stressful for me because I couldn't really figure out the style and colour palette that could really represent me on my website. During in the last few weeks, I getting unmotivated plus Covid had making me slow for my progress, I can't blame anyone else but only myself,it's all my fault. After going through all my design throughout all these semesters, I found out that my style was inconsistent and the use of colours are also very different and my work does not seem to compliment when I put them together(even after editing), to give an overall feeling that I want to give off to my audience.

I felt lost and then I started thinking about what do I really enjoy doing and what do I really like as a person. I discovered that I'm quite a minimalist yet a very "pastel" person and I like to keep things clean and neat, which is why I've decided to choose my layout to be clean and minimalist even though I did wonder would it be too simple and effortless. I think this project also helped to find myself and get to know myself better throughout the process.

Besides, I've learned to stay clear-headed and remind myself not to be hasty and be patient to figure out things step by step. Overall, I'm quite happy with the outcome and I definitely need more practice to get better and try more sophisticated design.