Interactive Design : Final Project

Week 14 - Week 15 : 17 May 2022 - 26 Jun 2022
Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Final Project 
INSTRUCTION

FINAL PROJECT : Microsite

Final project is the continuation of Project 2, which students are required to develop a microsite that must be fully functioned with a clear call to action.

Final Individual Pages (Static Design)
Here are the refined design the new layout. 

Figure 1.1, Landing page, Week 13 (21/6/2022)

Figure 1.2, About page, Week 13 (21/6/2022)

Figure 1.3 , Art Services, Week 13 (21/6/2022)

Figure 1.4, Digital Art, Week 13 (21/6/2022)

Figure 1.5, Traditional Art, Week 13 (21/6/2022)

Figure 1.6, Contact, Week 13 (21/6/2022)

Landing Page 
The process of developing landing page is documented in Project 2.

About Page
I created a copy of the HTML document with the identical navigation bar and footer as the landing page. 

Figure 1.7, Codes for the about page, Week 14 (28/6/2022)

The button "Art Services" will lead the users to the page that will show Catchy's art services (traditional art and digital art). 

Art Services

Both content are grouped under the container of "services-main". The content will be responsive if responsive meta tags and media queries are added. I make sure the border radius is same as the one I used for about page so that the design looks consistent. 

Figure 1.8, CSS of art services page, Week 14 (28/6/2022)

Figure 1.9, CSS of art services page, Week 14 (28/6/2022)

Traditional Art
In my previous design, I plan to have 3 artworks in a row with left and right arrows to navigate the users to click and view more artworks. However, the problem is the drawings will appear very small in phone screen. 

Figure 2.1, Initial design, Week 14 (28/6/2022)

My another plan is to make the drawings swipeable to left and right. Unfortunately, I could not find a solution to make it works in HTML and CSS.

Figure 2.2, Solution #1, Week 14 (28/6/2022)

The another solution is to create grid to fit 3 drawings in a row. This is the easiest solution that could work. 
Figure 2.3, Solution #2, Week 14 (28/6/2022)

Figure 2.4, Codes for the traditional art page, Week 14 (28/6/2022)

Figure 2.5, CSS of the traditional art page, Week 14 (28/6/2022)

The description of each artwork is added when hovering. 

Digital Art
The same layout is applied on the digital art page too.
Figure 2.6, Codes for the digital art page, Week 14 (28/6/2022)

Contact
When the users clicked on the "serve me!" button, it will bring them to the contact page. 

Figure 2.7, CSS for the contact page, Week 14 (28/6/2022)

I added text box at the message column so that the messages will start from the top left corner. The word-break property in CSS is added to specify the text to be broken or spitted when reaching the end of a line. 

Figure 2.8, CSS for the contact page, Week 14 (28/6/2022)

Final Submission


Final website showcase, Week 15 (8/7/2022)

REFLECTION

I learned that learning HTML and CSS are the basis of building web pages and web applications. It is not an easy task for a complete beginner like me to design a responsive website. The hardest part is to make sure the website is both aesthetically appealing and functional, from a designer perspective. I have to keep my design simple and straightforward because I did not have the ability to apply more advanced language like JavaScript to make my designs work. 

This module is particularly more applicable to those who are going for UI/UX. Although this doesn't interest me, I'm still grateful to get exposed to the basics of the world of "coding" and I will definitely pay more attention on the website design/app design in the future.