Interactive Design - Final Project
Kitty Lai Yung Syn (0331933)
Interactive Design - Final Project
INSTRUCTION
PDF File
PROCESS
We were assigned to develop a 4-to-5-subpage website for our partner. I partnered up with Xiao Shi. So, Xiao Shi will be my client and I have to do what she wants and she will be doing mine. We discussed what we wanted to do. Last, we came out a decision. We decided to create a personal website for both of us. In another word, the website will be about our artworks and some self-experience or self-interest. So, I looked back her E-portfolio and took the contents from there.
Link to Xiao Shi's FID E-portfolio:
https://xiaoshiyeoh99.wixsite.com/xiaoshi
 |
| FID E-portfolio |
Link to Xiao Shi's E-portfolio:
https://xiaoshi0919.blogspot.com/
 |
| Creative Media E-portfolio |
So, after finalizing together on Skype, Xiao Shi did not have any reference or samples for me but she did mention she wants her photos in a theme, which means the color of the photos has to be in a category. So I started to look into her photos and arranged her photos into a theme.
 |
| Reference 1 |
 |
| Reference 2 |
 |
| Reference 3 |
 |
| Reference 4 |
 |
| Reference 5 |
 |
| Reference 6 |
 |
| Reference 7 |
 |
| Trying out Xiao Shi's Instagram photos |
 |
| Matching Xiao Shi's photography |
 |
| html code |
 |
| Real Time Preview |
 |
| Uploading files on 000webhost |
 |
| Final Look |
https://kittylaiys.000webhostapp.com/ID%20FINAL/index.html
FEEDBACK
week 10: Mr Shamsul suggested me, for the final project, I can share more about my part time job stuff. Xiao Shi is my partner ad she will be taking over the content of website. But, Xiao Shi rejected the idea Me Shamsul gave me, so no specific idea has been confirmed yet on that time. For my partner Xiao Shi, she has not yet determined what to do for her website content, so I do not have any idea for my final project yet.
week 13: For my project 2, Mr Shamsul remind me the typeface and the key artwork should be the same.
week 14: It is okay to use templates as long as we do some changes.
REFLECTION
Experience
week 10: I was discussing final project with my partner Xiao Shi. It was so fun and excited to do something like this! We brought up so many memories to talk because we were looking back to our previous assignments and projects.
week 12: I was doing touch up of my project 2. There were so many issues of my html. Luckily, Mr Lee and Mr Shamsul helped me with that.
week 13: I continued on my projects in class.
Observations
week 10: I observed that everyone is so happy and excited when we were assigned a project that we can partner up with our friends.
week 12: I looked around everyone's work, some of them are very talented in designing website and doing the html thingy.
week 13: Everyone is doing their work in class.
Findings
week 10: I found that doing project alone VS having a 'client' is very different. I think this is a very good experience of having a 'client' because I learned how to communicate and I was more motivated to do this project.
week 12: I should try to create my own layout instead of downloading templates.
week 13: I am starting to get used to and like to use Adobe Dreamweaver. The process is like discovering. Discovering new codes and understand the codes.
FURTHER READING
RESPONSIVE WEB DESIGN BY EXAMPLES:
BEGINNER'S GUIDE - SECOND EDITION by Firdaus, Thoriq
Creating Drop Shadow
Much the same as creating rounded corners, using images was unavoidable to create shadow effects in the website in the past. Now, adding a drop shadow has been made easy with the introduction of the box-shadow property. The box-shadow property consists of five parameters (or values):
The first parameter specifies where the shadow takes place. This parameter is optional. Set the value to inset to let the shadow appear inside the box or leave it empty to display the shadow outside.
The second parameter specifies the shadow verticaland horizontal distance from the box.
The third parameter specifies the shadow blur that fades the shadow; a bigger number will produce a bigger but faded shadow.
The fourth parameter specifies the shadow expansion; this value is slightly contradicted to the shadow blur value. This value will enlarge yet also intensify the shadow depth.
The last parameter specifies the color. The color can be in any web-compatible color format, including Hex, RGB, RGBA, and HSL.Carrying on the preceding example, we can add up box-shadow, as follows:
div { width: 100px; height: 100px; border-radius: 30px; box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);}
Creating Rounded Corners with CSS3Back in the 90s, creating a rounded corner was complicated. Adding a pile of HTML markup, slicing out images, and formulating multiple line style of rules is inevitable, as presented in the post by Ben Ogle at http://benogle.com/2009/04/29/css-round-corners.html.CSS3 makes it much simpler to create rounded corners with the border-radius property, and the following is an example:
div { width: 100px; height: 100px; border-radius: 30px;}
Furthermore, we can also round only to specific corners. The following code snippet, for example, will round only the top-right corner:
div { width: 100px; height: 100px; border-top-right-radius: 30px;}
Comments
Post a Comment