Interactive Design - Final Project
20/06/19 - 4/04/19 (Week 12 - 14)
Azmina Fathima Haris (0337113)
Interactive Design
Final Project
LECTURES
Lecture 12
Week 12 (20/06/19)
No lecture this week.
Lecture 13
Week 12 (27/06/19)
Lecture 14
Week 14 (04/07/19)
No lecture this week.
Week 14 (04/07/19)
INSTRUCTIONS
Final Project
For our final project, we were asked to create website with a minimum of 5 webpages for one of our classmates; it has to have a specific purpose as well. I decided to work with Rausha and to create an e-portfolio for her. We discussed ideas for colour schemes and also the style she had in mind. I collected the required files and info from her and started working on the moodboard and wireframe for what I planned.
 |
| Fig. 1 Photos of her work |
 |
| Fig. 1.1 Photography page |
 |
| Fig. 1.2 Content for about & contact pages |
 |
| Fig. 1.3 Style tile |
 |
| Fig. 1.4 Sitemap |
 |
| Fig. 1.5 Wireframe sketches |
I found this theme by chance that I felt was very customisable. I also felt the full screen menu bar and the uneven grid for the gallery pages looked more to what Rausha had in mind. I decided to go with this as it would be easier to adjust this according to my wireframe onto this.
 |
| Fig. 1.6 White minimal portfolio template |
I continued working on the template and adjusted each page so that the menu bar, footer and the instagram carousel were consistent. I particularly struggled with the latter and it took a lot of help from Mr. Lun to fix it in the end.
 |
| Fig. 1.7 Coding process in Dreamweaver |
 |
| Fig. 1.8 Coding process in Dreamweaver |
 |
| Fig. 1.9 Coding process in Dreamweaver |
 |
| Fig. 2 Coding process in Dreamweaver |
 |
| Final outcome - landing page |
 |
| Final outcome - About me |
 |
| Final outcome - contact page |
 |
| Final outcome - Photo gallery |
 |
| Final outcome - portfolio page |
FEEDBACK
Week 12: Mr. Shamsul approved of my idea for the website and also said I could add a link to the blog if I wanted to. As for the template, he told us to make sure that we were making enough changes and that it wasn't the exact same.
Week 13: Mr. Shamsul sad it looked fine so far as I was pretty much done with the major parts of the website.
EXPERIENCES
Week 12: It was good to have a template that worked well - I really liked the inverse menu bar and how the carousel fits with the template.
Week 13: It was hard for me to stick to one consistent colour palette - I had already worked with many shades of blue from the carousel so it looked more cohesive.
Week 14: It was amazing seeing everything fit together and form a proper website rather than just a landing page or just a microsite and I'm glad I was able to do at least this much.
OBSERVATION
Week 12: I was glad that my template was so user-friendly - everything was organised and labelled very well, so it was easy to update to my needs.
Week 13: Combining two templates is a lot harder than it looks, especially when there are many javascript and css files involved.
Week 14: I got to learn a lot more animation from this project than the previous one - I felt like most of my classmates had tried it already but I had stayed clear to avoid confusion. Now that I did, I feel like I have a good idea of how text and background animations works in CSS.
FINDINGS
Week 12: I am not sure if the changes I made to the template were enough to make it seem customised and more personal, like what Rausha wanted.
Week 13: I was able to learn a lot about CSS from this by watching many tutorials and having to constantly check when there was an error.
Week 14: I learnt a lot from working with a "client" and trying to meet their requirements while also considering what is possible and an effective solution.
FURTHER READING
Responsive Web Design
(https://learn.shayhowe.com/advanced-html-css/responsive-web-design/)
Responsive web design is the practice of building a website that is suitable to work on every device and every screen size, mobile or desktop. This term might not be new, however the terms adaptive or mobile might be. Responsive and adaptive design are closely related, and often transposed as the same. Responsive means to generally react quickly to any change while adaptive means to be easily modified for a new purpose or situation such as change. A combination of these two are ideal for an effective website. Mobile, on the other hand, means to build a separate site commonly on a new domain solely for mobile users. This is not uncommon but is not the best option for users. Mobile websites can be extremely light but do come with the dependencies of a new code base and browser sniffing, all of which can become an obstacle for both developers and users.
Comments
Post a Comment