Interactive Design - Final Project
Chan Qian Hui 0334447
Interactive Design
Final Project - Design Exploration & Application
INSTRUCTION
FINAL PROJECT
For this project, we were tasked to pair up with a friend and create a 5 page website for them. It could be a professional portfolio or personal journal. I paired up with Kar Yan as we work quite well together.
Kar Yan's Blog : https://karyannky.blogspot.com/
Pre-planning
We started by discussing things we want to include in the website. The sections which she wish to have in her website are About, Design, Photography and Food. Since Kar Yan really likes watermelon, I have decided to use it as the overall theme for her website.
 |
| Fig 1.0 Watermelon colour scheme |
Then we share the assets we wish to include in a google drive folder.
 |
| Fig 1.1 assets shared in google drive |
Progress
This was the bootstrap template I chose as my reference. It is a one page website called Folio : https://bootstrapmade.com/folio-bootstrap-portfolio-template/
I started by adjusting the image size so it is consistent and making sure it's not too big that the website takes a long time to load.
 |
| Fig 2.0 Adjusting picture sizes in Adobe Illustrator |
I also designed a few extra elements for her website such as a logo and favicon.
 |
| Fig 2.1 Logo and favicon for website |
Coding Process of the website :
 |
| Fig 2.2 HTML index code |
 |
| Fig 2.3 HTML subpages code |
 |
| Fig 2.4 CSS style code |
 |
| Fig 2.5 CSS responsive code |
 |
| Fig 2.6 Javascript code |
It was quite troublesome for me to code in the beginning because I needed to change the one page website into several websites. I had to look around the css and javascript as well which was included in the template to know where to change and dissect in my website. It took me sometime to understand the code and when I got the gist of it the progress went pretty well.
I faced some troubles when I tried to add certain extra elements like back-to-top button and overlay effects but thanks to the help of Mr Lun and my friends it got resolved.
Final Website Link :
https://karyanportfolio.netlify.com/
REFLECTION
Experience
I really glad that this module existed as I get to learn a lot about html and CSS coding. Although it was quite confusing in the beginning with the large amount of information but slowly I started to read and understand the codes better .
Observation
I observed that I was able to understand and code better after having a gist of it and laying down my fundamentals of it. Although I may miss out some small details but I would read more and learn about it.
Findings
I found out that it is important to keep your file and information really neat and consistent when it comes to coding. Even like a small error or extra dot could make your file fail to work and you need to constantly fix and find the problem.
FURTHER READING
Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Robbins
This friendly guide is a really good book for people who are new to web design. Readers start by learning how the web and web pages work, and then steadily build from there. Each chapter provides exercises to help learn various techniques and short quizzes to make sure we understand key concepts. It is simple and clear enough for beginners, yet thorough enough to be a useful reference for experienced developers keeping their skills up to date. Some things that I learnt are how to Build HTML pages with text, links, images, tables, and forms, Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects, Learn how JavaScript works and why the language is so important in web design, Create and optimize web images so they’ll download as quickly as possible, Learn the ins and outs of Responsive Web Design to make web pages look great on all devices, Become familiar with the command line, Git, and other tools.
Comments
Post a Comment