INTERACTIVE DESIGN / PROJECT 1, 2, & FINAL

on
05.10.2022 - ?.?.2022 (Week 7 - Week 14)
Devina Angeline Wiratama / 0350824
Interactive Design / Bachelor of Design (Hons) in Creative Media
<iframe src="https://drive.google.com/file/d/1kuvPQR1uRF14Binb-lwj-oeQw1HDD3Kk/preview" width="640" height="480" allow="autoplay"></iframe>

Exercise
W8 - Landing Page Design

Week 7 / 05.10.2022
It's Independent Learning Week.

Week 8 / 05.17.2022
Project 1 & 2 Briefing.

Landing Page Design
A landing page is a distinct page on your website that's built for one single conversion objective. A landing page should be designed, written and developed with one business goal in mind. You are required to create a static landing page of a microsite from any topic of your choice. Please do your own research about microsites.

Please indicate the topic of your choice by this week in the comment section and start to do the wireframe/sketches of the landing page. You need to show the sketches by next week during class. A minimum of 5 sketches are required.

We will extend the project for Final Project as we do not have enough time.

I choose "Skincare Product Services" as my topic for this project. Here are my references from Pinterest.

Fig. 1.1 - 1.3 / References from Pinterest, Week 8 (05.17.2022)

Mr Shamsul wanted us to make a minimum of 5 sketches. Here are my sketches. 
Fig. 1.4 - 1.6 / Sketches, Week 8 (05.23.2022)

I plan to make something like skincare routines or steps of skincare or importance of skincare, etc.

Exercise
W9 - Landing Page Design

Week 9 / 05.24.2022
This week, Mr Shamsul wanted us to finish our landing page on Illustrator as PDF. Here is my progress.

Fig. 2.1 - 2.3 / Progress, Week 9 (05.24.2022)

My file is too big, so I cannot preview or embed it on google drive. Here is my preview.

Fig. 2.4 / Preview, Week 9 (05.24.2022)

Exercise
W10 - Bootstrap

Week 10 / 05.31.2022
This week, Mr Shamsul starts by giving feedback to us about our static landing page. Next, Mr Shamsul gave us an introduction to bootstraps. (other YouTube)

Fig. 3.1 / Bootstrap Introduction, Week 10 (05.31.2022)

Mr Shamsul wanted us to submit project 1 and the details in google slides. For next week, we can try a bit for project 2 and learn bootstrap, later next week class we will do bootstrap together.

Here is project 1 in google slides.

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRmYbF1Zm6BZAPw6yFqQfbpi1a5QyVVnpaYL4i2J_gEHclvIyrqDy3Hf2sHPPHFOYWli2b1kMeSEtBW/embed?start=true&loop=true&delayms=3000" frameborder="0" width="480" height="299" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

Exercise
W12 - Project 2

Week 12 / 06.14.2022
Here is project 2 progress.

Fig. 4.1 - 4.4 / Progress, Week 12 (06.14.2022)

Here is the Result.
Fig. 4.5 / Result, Week 12 (06.18.2022)

Exercise
W13 - Final Project

Week 13 / 06.27.2022
This week, I continue project 2 as my final project. First I save each of my navbar names. 

Fig. 5.1 / Divide, Week 13 (06.27.2022)

Second, I renamed the navbar names from "#" to "__.html". 

Fig. 5.2 / HTML, Week 13 (06.27.2022)

Third, I checked whether all the buttons worked or not. I found it weird because sometimes the link for Shopee, WhatsApp, and Instagram refused to connect, but sometimes worked also. Only the link for email and Blogspot worked very well.

Fig. 5.3 / Links, Week 13 (06.27.2022)

Next, I feel a bit unsatisfied with the first page, so I changed the background of the first page. Here it is.

Fig. 5.4 - 5.5 / First Page, Week 13 (06.27.2022)

Then, I rechecked it again and upload it on Netlify. Here is my First Final Project result.

Fig. 5.6 / Preview, Week 13 (06.27.2022)

Fig. 5.7 / Video Preview First Result, Week 13 (06.27.2022)

Then I feel like it's not enough so I update again. I put new images, new button action, a transition of the button, etc. Here is the progress.
Fig. 5.7 - 5.8 / Progress, Week 13 (06.28.2022)

Here is the Final Result.
Fig. 5.9 / Final Result, Week 13 (06.28.2022)

Click here.
Fig. 5.7 / Video Preview, Week 13 (06.29.2022)

FEEDBACK

Week 9 / 05.24.2022
  • Specific Feedback
    Sketch #1 is better than else. Your sketches are clear and clean. Don't forget to put your sitemaps.
Week 10 / 05.30.2022
  • General Feedback
    Prepare the logo in a square shape, so can put in the website name
  • Specific Feedback
    Put button action on the first of the homepage. Put button action also of each content on hair care and skin care. Put a bit of information and button action again in other products. Reduce the size of the footer.
Week 12 / 06.14.2022
  • General Feedback
    Finished your project 2 at the end of this week.
  • Specific Feedback
    Here are the links for your references.
    https://www.w3schools.com/css/css_link.asp
    https://mobirise.com/bootstrap-carousel/bootstrap-%D1%81arousel-slider.html

REFLECTION

Initially when learning coding itself was quite fun and quite easy to practice. But when I entered project 2, I started to have doubts about it and coding became the least of my interest. It was quite difficult and stressful when doing it. How to position the design to fit project 1. How about the CSS, which sometimes seems like nothing has changed. How to be careful, if there is a typo, I have to scan everything from the beginning until I find where the error lies. I also do not enjoy the process as a result the results are not optimal and unsatisfactory. But I'm grateful that I learned about basic coding and was able to pass this task well with the help of Mr Shamsul too. Coding really trains accuracy, perseverance, and patience. But coding also gives you headaches, unhealthy eyes, and a roller-coaster of emotions.


Comments

Post a Comment