Interactive Design - Final Project

-

Interactive Design - Final Project


24.06.2020 - 15.07.2020  (Week 11 - Week 14)
Wong Kai Yi (0340236)
Interactive Design
Final Project

1. LECTURE

No lectures

2. INSTRUCTIONS



24.06.2020 (Week 11)


After communicating with the client, I made a moodboard.


Moodboard: Fig 1.1 Moodboard

The client wanted a personal website to showcase her works, and the call to action is to "subscribe to my newsletter".

Here are the wireframes:

Fig 1.2 Home Page Wireframe

Fig 1.3 About Page Wireframe

Fig 1.4 My Works Page

Fig 1.5 Contact Page


01.07.2020 (Week 12)

Then, I designed the layouts with the contents (text and pictures) provided by the client.

Fig 1.6 Home Page

Fig 1.8 About Page

Fig 1.9 My Works Page

Fig 1.10 My Education Page

Fig 1.11 Contact Page


08.07.2020 (Week 13) - 15.07.2020 (Week 14)

I started to develop the website using html, css and bootstrap. Below is the final outcome of the website.

Final project submission: Hui Qi's Website

Desktop layout

Fig 1.12 Home Page

Fig 1.13 About Page

Fig 1.14 My Works Page

Fig 1.15 My Education Page

Fig 1.16 Contact Page

Mobile /  smaller screen layout

Fig 1.17 Home Page

Fig 1.18 About Page




Fig 1.19 My Works Page

Fig 1.20 My Education Page

Fig 1.21 Contact Page

3. FEEDBACK

24.06.2020 (Week 11)

Done with wireframe and sitemap, try to do the layout.

01.07.2020 (Week 12)

Make the colors of "My Works" same, can proceed with making the other pages' prototype and html.

08.07.2020 (Week 13)

No feedback

15.07.2020 (Week 14)

For about, my education and contact pages, make the footer at the bottom, by using min or adding blank div. Otherwise, looks clean and good.

Comments

Post a Comment

Popular posts from this blog

Publishing Design - Final Compilation & Reflection

-
Image
Publishing Design - Final Compilation & Reflection 28.08.2020 -  27.11.2020 (Week 1 - Week 14) Wong Kai Yi (0340236) Publishing Design Final Compilation & Reflection 1. INSTRUCTIONS Exercises Project 1 Project 2 Final Project 2. SUBMISSIONS Exercises Determining book size We are to take an A3 paper or stick 2 A4 papers together then fold it into half. After that, we have to determine our book size by making at least 3 sizes which are between A5 to A4. Fig 5.1 determining book size - red line (chosen size) Fig 5.2 determining book size - 32 pages cut out (untrimmed) Fig 5.3 determining book size - opened book (untrimmed) Here is a video of how it looks:  Fig 5.4 paged book before trimming Fig 5.5 Final 32 paged book Fig 5.6 Final 32 paged book Fig 5.7 Final 32 paged book Fig 5.8 Final 32 paged book Van de Graaf Grid Fig 5.9 Van de Graaf grid and with text Text formatting Fig 5.10 text formatting 1...
Read more

Design Research Dissertation

-
Image
Design Research Dissertation 27.08.2020 - 26.11.2020  (Week 1 - Week 14) Wong Kai Yi (0340236) Design Research Dissertation 1. INSTRUCTIONS 2. SUBMISSIONS Turnitin Report (PDF) Fig 1.1 Turnitin Report (PDF) Flipbook (Fliphtml5) Fig 1.2 Flipbook Journal Article (PDF) Fig 1.3 Journal Article (PDF) 3. REFLECTION This module is very different from the other modules in the Creative Media course, because it focuses on research. This journey through design research methodology and design research dissertation has been interesting yet challenging, as we are exposed to the systematic way of conducting research. I have learnt a lot on research, such as methodology, discussion etc. It is also crucial to include references from reliable sources and provide justification wherever required. Otherwise, the research would be not convincing and reliable as it is not backed up by academic sources.  Although I have faced many difficulties throughout both modul...
Read more

Advanced Interactive Design - Final Project

-
Image
Advanced Interactive Design 11.11.2021 - 02.12.2020  (Week 12 - Week 15) Wong Kai Yi (0340236) Advanced Interactive Design Final Project 1. LECTURE Week 12  (11.11.2021) Final project briefing  The final project consists of the use of Adobe Animate and Spark AR to make a Website and Filter for a campaign (can include selling products). The website is to promote the campaign and the filter (download app) Signifier to let users know that they can click it: when hover over; drop shadow, dot, underline, glow (with pulse), outline around the button What if it is too busy? It creates a cognitive load Layout design: everything is in grids, properly aligned Spacing to categorize 3-5 font size minimum 3 colors: background, foreground, accent most important content > element Content organization: grouping (through spacing) more important: more spacing  W rule for button: 2 Ws left right, 1 W up down (use the same font used in the button) 2. INSTRUCTIONS F...
Read more