💧 Final Project
NG MEI YING (0340563)
Interactive Design
Final Project
INSTRUCTION
FINAL PROJECT: Professional Web Design
24/06/20 (W11): Design Idea Proposal
For this week students required to pair up with one partner for the final professional dynamic website design. Both of the partners would play the role of customer and designer interchangeably. This time, students needed to design 5 pages of responsive microsites with different content and features. My partner for this final project was Zi Yi and below was the mood board for the design ideas prepared by both of us.
Customer Design Requirements:
- CTA Button: Services & Shop
- Webpages Sections: Home, About, Artwork, Photography, Shop
- A minimalist design with some sketchy visual effect in the earthy colour scheme
- Special Requirements: Avoid neon and dark colour theme
Fig 1.0 Design Idea Proposal
FEEDBACK: Mr Shamsul mentioned that students required to create a customised logo for their partners as well as to provide the prototype design in Photoshop. A reminder was given that students were allowed to utilise the CSS Bootstrap template from the internet with proper customisation that could meet the design requirements of the customer.
01/07/20 (W12): Design Materials Collecting
For this week, my partner and I started to prepare all of the materials and resources needed for the website design especially the images. We created a google file and shared the materials and resources needed for each other. My partner prefered to provide her original masterpieces images as the main resources for the personal website design. For me, I did not have that many masterpieces available on my hands at the moments; therefore I decided to collect some images from the open sources platform for the carousel images as well as the artworks. To ensure the images suited the design theme requirements, both of us were free to search for more suitable images to create a highly customised website design with good aesthetic and functionality. Below was some images stock from my partner.
 |
| Fig 2.0 Image File (Part A) |
 |
| Fig 2.1 Image File (Part B) |
 |
| Fig 2.2 Image File (Part C) |
 |
| Fig 2.3 Image File (Part D) |
 |
| Fig 2.4 Image File (Part E) |
Aside from searching images, I did some research in Google font to seek out the potential font style according to the design requirements as well. The typefaces chosen at the beginning was Capriola Font and Noto Sans Font. Capriola Font was chosen due to its unique curvey stroke and it would be mainly used for the title text. While the Noto Sans with slick clean stroke would be mainly applied on a long paragraph body text.
 |
| Fig 2.5 Google Fonts (Type A) |
 |
| Fig 2.6 Google Fonts (Type B) |
08/07/20 (W13): Prototype Design
This week, students were tasked to show the first version of the prototype website layout design for the lecturers. According to the design requirements mentioned by my partner in the early week, the colour tone applied in the prototype design was mainly the earthy natural colour tone with some green elements to create a visual balance in the sense of colour. A background image with the photographer at the homepage section was applied aiming to portrait the beautiful photo shooting atmosphere at the same time to create a visual memory with good aesthetics for the visitors. For the introduction page design, the original image of the customer was used as the human eyes could function as guidance that led the visual direction to the descriptions delicately. The rest of the layout design would be designed with good readability that allowed the comfort focus on the masterpieces as well as the information itself.
 |
| Fig 3.0 Custome Logo Design |
 |
| Fig 3.1 Prototype Design in Photoshop |
Fig 3.2 Prototype Design (Homepage)
Fig 3.3 Prototype Design (About Me)
Fig 3.4 Prototype Design (Artworks)
Fig 3.4 Prototype Design (Photography)
Fig 3.5 Prototype Design (Services & Shop)
FEEDBACK: According to the feedback from the lecturer, the layout design was clear with good readability. It was a common website design with high acceptance as well. For the contact section at the homepage website design, the image could be replaced with the map by using the iframe code. However, I could insert the static image of the map rather than the responsive map as well.
15/07/20 (W14): Microsite Design (First Stage)
After we had done with the prototype design, we were free to proceed to work on the website coding in DreamWeaver this week. The colour scheme was not exactly the same as the proposed prototype design as there were some colour adjustments done in the consideration of design functionality. For the design of artwork and photography webpage, the hovering effect with a high similarity of camera photo capturing was applied to echo the artistic design theme of photography.
 |
| Fig 4.1 HTML Codes in DreamWeaver |
 |
| Fig 4.2 CSS Codes in DreamWeaver |
Fig 4.3 Microsite Design (Homepage)
Fig 4.4 Microsite Design (About Me)
Fig 4.5 Microsite Design (Artworks)
Fig 4.6 Microsite Design (Photography)
Fig 4.7 Microsite Design (Services & Shop)
22/07/20 (W15): Microsite Design (Final Stage)
While I had accomplished the first codding version of the microsite design, there were some tangible design issues discovered. The layout design was too clean and simple that creating too much unnecessary negative white spaces throughout the structure design. In the end, it may result in a boring layout design with emptiness. Moreover, the title font was tended to create too much tender childish sense that was lack of the sense of professionalism and seriousness; Besides, the concept of the title image was not matching well too. The new typefaces replaced was Antic Didone Font with elegant serif stroke and Noto Sans TC Font with slimmer san serif stroke; both of the fonts with different design structure would create an obvious contrast for the title text and the body text in a harmonious manner.
 |
| Fig 5.1 Google Fonts (Type A) |
 |
| Fig 5.2 Google Fonts (Type B) |
 |
| Fig 5.3 HTML Codes in DreamWeaver |
 |
| Fig 5.4 CSS Codes in DreamWeaver |
 |
| Fig 5.5 Website Publishing in Netlify |
When it came to the image, the original header images were replaced with Europe ancient architecture structures and stone statue with delicate patterns to portrait the leisure yet artistic travelling atmosphere in the eye of the photographer. At the home page of the personal website, the visitors would be greeted by the welcoming words with a visual atmospheric sense that would guide them onto the services and merchandise sections. The background of some website design was replaced with the customised wallpaper with the rough and sketchy texture of the granules. The dark colour was applied to the footer part to create a better visual hierarchy of the website as well. I hope that my partner would happy with the final outcome and any feedback were always welcomed.
Fig 5.6 Microsite Design (Homepage)
Fig 5.7 Microsite Design (About Me)
Fig 5.8 Microsite Design (Artworks)
Fig 5.9 Microsite Design (Photography)
Fig 5.10 Microsite Design (Services & Shop)
Final Microsite Design: https://ngmeiying-0340563-finalproject-home.netlify.app/
REFLECTION
24/06/20 (W11)
- Experience: As there was almost no lecture session, students could have more time to deal with their accumulated assignments. I was happy and thankful to have my friend who willing to work together with me for this project initiatively as designing a personal website was the thing I had always longing for.
- Observation: Students seemed to have a better design think when it came to the mood board idea proposing for the final personal website design. Lecturers were indeed really kind and patient to help out students with their issues in the tasks.
- Findings: I found that voluntary division of labour and collaboration based on mutual trust was crucial for the group work to ensure that the task could be accomplished effectively and efficiently. I was unsure of what kind of design could depict the design requirements well at the beginning, maybe due to the reason that I did not really know my friend well or I was really lack of the eye to designing a great customised website 😂🥶
01/07/20 (W12)
- Experience: For this week, my partner and I continued working on finding the images resources for the website designs. Through this process, I got the chance to look back for my previous project works of Interior Design.
- Observation: I realised that I could learn a lot when discussing work with my partner although we did not have a highly mature design thinking and solution as compared with the working experts. I was glad that my partner was very patient and open-minded with my design proposal, she had provided me with a great chance to explore more possibilities in designing the website without too much pressure and restrictions.
- Findings: I realised that I did not have many good works as there were numerous design issues could still be found haha, but sadly I did not good work of personal artwork as compared with the school work...... I really admired that my partner had a good amount of personal artwork before her tertiary study. I would like to create more personal artwork during my semester break rather than just focus too much on academic projects 🥴🥺
08/07/20 (W13)
- Experience: It was quite stressful although there was no lecture as students were slowing facing the challenges to deal with multiple assignments at the same time and students must accomplish each and every of the projects with full attention to meet the deadline.
- Observation: I realised that some of the quality of works had been going backwards as I was lack of sufficient time to cover all of the design considerations. On the other hand, my mind tended d to be exhausted in design thinking... The dedication of attention and focus was not even as I had put too much effort in focusing on other projects.
- Findings: I found that I was kind of worried that my prototype design could not meet my partner's expectation as in my point of views, there was still a lot of improvement space fo the first prototype design... However, it was great that lecturers had postponed the submission deadline which allowed us to explore more possibilities as well as to improve the design
15/07/20 (W14)
- No Class
22/07/20 (W15)
- No Class
Comments
Post a Comment