Labels

INTERACTIVE DESIGN- FINAL PROJECT


Week 14 (29/11/22)
Student: Tai Ser Yeet (0345798)
Programme: Bachelor of Design (Honours) in Creative Media
Task: Final Project- Design, Exploration & Application

INSTRUCTIONS

Fig 1.1 MIB Interactive Design, Week 1 (29/8/22)


FINAL PROJECT: DESIGN, EXPLORATION, APPLICATION

WEEK 13

INSPIRATION

I went onto Google and compiled examples of website designs that were fitting to the tabs I was going to make active such as the ABOUT, SHOP, CART, and ACCOUNT pages. More specifically, the ABOUT page was going to be regarding Mahsa's background and a few mottos. 

Fig 1.2 Inspiration, Week 13 (22/11/22)


Fig 1.3 Inspiration, Week 13 (22/11/22)


Fig 1.4 Inspiration, Week 13 (22/11/22)


Fig 1.5 Inspiration, Week 13 (22/11/22)

SKETCHES

I have sketched four of the designs for web pages in order to get a clearer direction of where I am heading.

Fig 1.6 Sketches, Week 13 (22/11/22)


CODING

Using the same file from Project 2, I started to work on my Final Project there. Before that, I also linked all of the tabs from the navigation bar first as a tester so that nothing goes wrong when I am done coding. 

The picture below shows that I am making the header of the ABOUT page and aligning it in the center.

Fig 1.7 Making Header, Week 13 (22/11/22)

Next, I worked on the sub-section of the ABOUT page. I added padding to the text and img_fluid to the image so that it would be responsive to the rows placed.

Fig 1.8 Adding Padding and img_fluid, Week 13 (22/11/22)

The image's position was incorrect hence, I spent 30 mins trying to solve it. Turns out, it was because I had accidentally placed a closing tag of text after the image.
Fig 1.9 Problem-Solving, Week 13 (22/11/22)

Fig 1.10 Solved Version of the Page, Week 13 (22/11/22)

After testing the website for a while, I thought that I should code in a way that allows users to browse other web pages in a different tab by using target_blank so that it is less cluttered and more organized.

Fig 1.11 Adding target_blank, Week 13( 22/11/22)

For the ACCOUNT page, here I am increasing the font size and adding numbers so that it is easier to keep track of the elements. However, in the end, I scratched the entire idea and replaced it with a simpler form.
Fig 1.12 Readjusting the font and arrangement, Week 13( 22/11/22)

For the SHOP page, I am duplicating the text row as I have to state the name and price of the item and have them stacked under each other. 
Fig 1.13 Duplicating Caption, Week 13( 22/11/22)

I tried a different approach and placed the sizes of the clothing below the name of the items instead. But then I just realized that having the price of the item is more important than the sizes as they can just click into it.

Fig 1.14 Trying out a Different Caption, Week 13( 22/11/22)

FINAL SUBMISSION OF FINAL PROJECT 
Labels:

Comments

Post a Comment