INTERACTIVE DESIGN // Final Project

July 19, 2021

INTERACTIVE DESIGN // Final Project

Week 11 - Week 16 (09/06/2021 - 16/07/2021)

Fann Man Ling - 0344623 (BDCM)

Interactive Design // Mr. Shamsul & Mr. Lun

Final Project // Design, Exploration, and Application

LECTURES

Week 11: Brief on Final Project

Week 12: Review on Presentation slide of Final Project

Week 13: No class (postponed to week 15)

Week 14: Review on progression

Week 15: Review on progression

Week 16: Final Project submission deadline

- Lecture -

INSTRUCTION

Module Information Booklet

FINAL PROJECT: Design, Exploration, and Application

WEEK 11 // 09.06.2021

We were asked to prepare the topic of our final project, and its mood board, sitemap, and wireframes. for the next week's class.

WEEK 12 // 16.06.2021

IDEATION

For this final project, I wanted to do my personal portfolio site to showcase my design works and things about me, and also as an instant way to communicate my style to clients or audiences. Initially, I looked forward my website to be minimalist, modern, and visually clean.

DRAFT #1

Fig 1: DRAFT #1

WEEK 13 // 23.06.2021

However, I found it looks plain and unattractive. Since my personal portfolio site should represent my own personality and vibe, so I've decided to redo another design for it. I started to think of myself, what is the thing I am fond of, what is my style, what elements can represent me, etc.

After brainstorming the idea, I realized that I have a great fondness for 2D arts and illustration, specifically cute kinds of drawing and characters. Hence, I would like to make my website looks cheerful and cute.

Draft #2:

Fig 2: DRAFT #2

For my display typeface, I used Calistoga as it looks cheerful which fits my theme. As for my body typeface, I tried to use Poppin.

Feedback received from Mr. Shamsul in Week 14's class:

- No issue with the design of the layout.

- But, the hamburger menu should be consistent. If you had the black circle elements at the hamburger menu, you have to place it on every page as well, so that it is consistent throughout the web pages.

WEEK 14 // 30.06.2021

However, I still don't see it's happening. The colour scheme and layout still are unable to bring out the cheerful vibe that I am expected. Therefore, I kept experiment and revise in Adobe Illustrator.

Draft #3:

Fig 3: DRAFT #3

I decided to add illustrations to my website since I like to create cute characters and I think it would make it more unique and creative. I was thinking to just add a big character besides the text at first, and I did make a character to see if that works. But then, I came across the website shown below (Fig 4), the idea of having repetitive characters came into my mind.

Fig 4: Reference (Source: Pinterest)

WEEK 15 // 07.07.2021

Even so, I felt that the body text typeface is not playful enough. Moreover, the colour scheme looks bad and ugly to me, I need to amend it.

Henceforth, I tried to look for different materials and colour schemes in the hopes of getting the right color that fits my theme and brings the anticipated and unique mood. Not only that, I tried to find another font that I feel right for my body text. The characteristic of the font must be cheerful and playful enough. These really took me quite a lot of time.

Fig 5: Reference, Materials for a better colour combination

Draft #4:

Fig 6: DRAFT #4

WEEK 16 // 15.07.2021

Yet, I still don't satisfied with the design. In terms of visual balance, I felt it would be better to keep the page with fewer items since it already has repetitive objects inside, thus, I decided to remove the body text so that it looks clean and straightforward. Also, the navigation would look better to be aligned in the middle.

In respect of the colour combination, I think the pink colour is not being used in a good way. It looks weird to me. Likewise, I was not content with the "works" page as not creative and unique enough.

After hours of brainstorming, I came out with my final colour schemes and fonts.

Fig 7: Moodboard

Draft #5:

Interestingly, I was tidying a basket in my room the other day, and then I noticed my student card. All of a sudden, the idea of creating cards for my monsters characters in my "works" page came to me. In this case, consistency could be ensured on my website as the characters are included on every page.

Fig 8: DRAFT #5

Feedback received from Mr. Lun:

- Can add some description to the "works" page to make sufficient content.

(so i added "Projects based on Category" on top of those cards in the "works" page.)

I am satisfied with Draft #5, hence I've decided to further work on this. Nevertheless, some changes have been made during turning the landing page idea into the actual website.

Final Results (some screenshots):