Interactive Design - Final Project
Atiqah Farzana Binti Syalleh Karimyee (0336740)
Interactive Design
Final Project
LECTURE NOTES
INSTRUCTIONS
Module Information Booklet:
EXERCISE
This final project requires us to create a professional microsite for a classmate. The website could take the form of a web design portfolio, small business website, informational sit or whatever else the client (classmate/partner) desires. The client will be in charge of setting the project goals, giving stylistic direction and providing all the content for the site, including images and other information.
The website must:
- use Bootstrap
- have 5 or more separate pages
- cannot use a template
- make our own logo and icons
I paired up with Farissa Eryna and we discussed a bit on what we wanted on our websites. Firstly, she wanted a personal portfolio to showcase her work. She gave me additional information on the aesthetic of her website, such as the colour scheme and the overall vibe.
This is my proposal slides:
Fig 1.1 Proposal - Slides
Feedback:
Mr. Shamsul said that the services page could include the processes of making the designs, such as which apps/softwares are used. Other than that, I could proceed with the wireframe of the website.
 |
| Fig 1.2 Layout Progress |
1. Landing page
 |
| Fig. 1.3 Layout - Landing Page |
2. About page
 |
| Fig. 1.4 Layout - About |
3. Portfolio page
 |
| Fig. 1.5 Layout - Portfolio |
4. Services page
 |
| Fig. 1.6 Layout - Services |
5. Contact page
 |
| Fig. 1.7 Layout - Contact |
Feedback:
Mr. Lun said that my layout is very clean and neat, and both lecturers said I could start adding the images so that it looks like a proper layout.
I couldn't do that right now as Farissa has yet to send me the images, so while waiting I decided to make the logo for her website.
 |
| Fig. 1.8 Logo Sketches |
I wanted to combine her initials 'F' and 'E' as they are very similar-looking letters. Because they look so alike, I figured it had the potential to be merged together.
Using Bodoni Regular, I made the letter 'E' an object and cut off the bottom stroke.
 |
| Fig. 1.9 Logo - Progress |
 | |
|
This is my final logo:
 | |
|
Mr. Shamsul taught us how to make the left and right arrow sliders for the carousel, so I also attempted to make one.
 | |
|
Farissa put all her images in a Google Drive where I can easily access them.
 | |
|
These are my pages with images added:
1. Landing page
 |
| Fig. 1.14 Layout - Landing Page |
2. About page
 |
| Fig. 1.15 Layout - About |
3. Portfolio page
 |
| Fig. 1.16 Layout - Portfolio |
4. Services page
 |
| Fig. 1.17 Layout - Services |
(Yes, I reused the same images because I was lazy hehe)
5. Contact page
 |
| Fig. 1.18 Layout - Contact |
Fig. 1.19 Final Layout (PDF)
With the layout completed and approved, I started working on the website immediately.
 |
| Fig. 1.20 Dreamweaver - Progress |
Listed below are the codes for:
Here are shots of the website as single images so they are clearer:
1. Landing page
 |
 |
Fig. 1.21 Final Layout - Home (Compiled)
2. About page
 |
| Fig. 1.22 Final Layout - About |
 |
| Fig. 1.23 Final Layout - Portfolio (Compiled) |
4. Services page
 |
| Fig. 1.24 Final Layout - Services (Compiled) |
5. Contact page
 |
| Fig. 1.25 Final Layout - Contact |
FEEDBACK
Week 11 (24/06/2020)
Specific feedback: Mr. Lun said that my layout is very clean and neat, and both lecturers said I could start adding the images so that it looks like a proper layout.
Week 12 (01/06/2020)
Specific feedback: No class.
Week 13 (08/07/2020)
Specific feedback: No class.
Week 14 (15/07/2020)
Specific feedback: Absent, submission moved to week 16!
REFLECTION
Experience: Week 11 (24/06/2020); I wanted to make this website more minimal and simplistic as I was already burnt out by project 2. Week 12 (01/06/2020); No class. Week 13 (08/07/2020); No class. Week 14 (15/07/2020); Absent.
Experience: Week 11 (24/06/2020); I wanted to make this website more minimal and simplistic as I was already burnt out by project 2. Week 12 (01/06/2020); No class. Week 13 (08/07/2020); No class. Week 14 (15/07/2020); Absent.
Observation: Week 11 (24/06/2020); I was more self-cautious when adding any css because I didn't want to have to redo everything again. This time I made sure to put things such as margin and padding in the html so the responsiveness would not be disturbed. Week 12 (01/06/2020); No class. Week 13 (08/07/2020); I felt like this project is easier because I already know what to do and how to do it :) Week 14 (15/07/2020); Absent.
Findings: Week 11 (24/06/2020); I found that doing the website in one go (or most of it) is much better than doing it little by little. When I come back to coding after leaving it for a few days, I felt like I wouldn't even remember how to do it anymore and it takes way more energy to remember the class titles and whatever's left to do and such. Week 12 (01/06/2020); I really do appreciate the off-days we get to complete our work as it allows for more time for us to do so, plus attending classes really drains me out because I would listen to everyone's feedback instead of actually doing work hehe Week 13 (08/07/2020); Absent. Week 14 (15/07/2020); I found that my Dreamweaver was very slow due to the amount of pages I had to open compared to just having a landing page.
Findings: Week 11 (24/06/2020); I found that doing the website in one go (or most of it) is much better than doing it little by little. When I come back to coding after leaving it for a few days, I felt like I wouldn't even remember how to do it anymore and it takes way more energy to remember the class titles and whatever's left to do and such. Week 12 (01/06/2020); I really do appreciate the off-days we get to complete our work as it allows for more time for us to do so, plus attending classes really drains me out because I would listen to everyone's feedback instead of actually doing work hehe Week 13 (08/07/2020); Absent. Week 14 (15/07/2020); I found that my Dreamweaver was very slow due to the amount of pages I had to open compared to just having a landing page.
Comments
Post a Comment