Interactive Design - Final Project
Abigail Bea Chong Ka Yee (0333966)
Interactive Design
Final Project
INSTRUCTIONS
FINAL PROJECT
For our final project, we were paired up in partners to create a website for each other. I chose to partner up with Ava. Both of us discussed what we wanted and we had kind of a minimalistic thought for both our websites. Thus we also shared a google drive to post our information, pictures etc. She even gave me her portfolio with all the pictures I needed along with relevant information.
 |
| Fig 1.1.1 Google Drive |
 |
| Fig 1.1.2 Her Portfolio she gave me |
Ava wanted a website about herself maybe something like an e-portfolio. She would like it if there was a design page to show off what she did as a designer and when she went to London in 2017. Here is the draft version of it along with the colour scheme.
 |
| Fig 1.1.3 Colour Scheme |
 |
| Fig 1.1.4 Draft of the layout |
After trying out several cursive fonts it didn't really fit with what I was going for. So I changed it to these two fonts from Google Fonts. The first one is Alata which is a sans-serif font and Bebas Neue a cursive font.
 |
| Fig 1.1.5 Alata |
 |
| Fig 1.1.6 Bebas Neue |
I had trouble choosing the templates to use but I ended up choosing this template called Shape. https://www.free-css.com/free-css-templates/page229/shape
I wanted to make the photos have a slightly cool light on it so I edited it on an app called VSCO.
 |
| Fig 1.1.7 Before |
 |
| Fig 1.1.8 After (cool light) |
After editing the pictures I opened Dreamweaver and begin to code. Here is the process:
 |
| Fig 1.2.1 Process |
 |
| Fig 1.2.2 Process |
 |
| Fig 1.2.3 Process |
The screenshots of the 5 pages.
 |
| Fig 1.3.1 Home Page |
 |
| Fig 1.3.2 About Me page |
 |
| Fig 1.3.3 Design Page |
 |
| Fig 1.3.4 London Page |
 |
| Fig 1.3.5 Contact Page |
REFLECTIONS
Experiences
This module has taken me through a journey of learning codes with a better understanding since I took foundation in computing they expected me to already know what I was doing which I did not. When Mr Shamsul explained about the id and div I now finally understand why the id starts with a # and div with a . in CSS. Furthermore, it also allowed me to see my weak and good points when designing a landing page and I felt like this moduled gave us less workload compared to the other modules even though for me I am quite slow. I like the fact that everyone helps each other a lot in this class and big thanks to Mr Shamsul and Mr Lun for helping us out when we needed it.
Observations
I noticed that I do not mind HTML and CSS however I am still slow at writing codes and there are still a lot of elements that I do not know but want to learn. I hope that I can get the hang of it soon since I am going into New Media. I've also noticed that my friends and I are both struggling with the lines of codes but I feel like we're all learning something new.
Findings
I found out there are many other elements about web design we should take notice of when observing whether it is good or bad design. For example, interactiveness is important to the users but too many interactions can be distracting and confusing.
FURTHER READING
Golden Tips and Examples to Create Visual Hierarchy in Website Design by Mockplus
This article talks about how to create visual hierarchy in website design here are some of the points. The first part is to use space to highlight the UI contents with negative space it can help to highlight the UI contents by creating visual hierarchy intuitively. Below is an image that represents that:
 |
| Fig 1.1 |
Another important point is that 'contrast shows differences between visual elements'. The visual elements like colours, sizes, space and shadow can create contrast with one another to show the differences between them which allow designers to make visual hierarchy stand out in the website.
Below is the example of contrast with visual elements.
 |
| Fig 1.2 |
Lastly, in contrast to graphical dominance, a website UI is not only beautiful and attractive. The optimal arrangement of the contents of an Android or Mac device is also useful for UX / UI developers.
Comments
Post a Comment