Interactive Design
.png)
Code: GCD 60904
Date: 31.03.2021 - 18.07.2021
Week: 1 - 16
Week: 1 - 16
Program: Bachelor of Mass Communication
Major: Advertising and Brand Management
Minor: Creative Media
Instructions
Week 1: Introduction to the module
This week, Mr Shamsul and our co lecturer Mr Lun introduced the meaning of Interactive Design, subject outline, assignment, and told us to create our own e-portfolio.
Week 2: Evaluating Website
For this week, we learned about different types of websites on the internet and evaluating websites by comparing the good and bad using live websites. Our lecturer breakout us into a room so we can discuss in a small group. We are given an exercise which is to fill in 5 good websites and 5 bad websites and present them. During this activity, we learned to evaluate the concept, content, context, readability, loading time, and etc to determine the websites are good or bad.
Week 3: User Interface
In this third week, Mr Lun replaced Mr Shamsul to lecturer us in class because Mr Shamsul was having some emergency. This week topic is about UI(User Experience) and UX(User Interface), we learned about the difference between UI and UX designer responsibilities. Based on my opinion, UX requires more creativity and harder than UI because they are responsible for creating the software application (app) the concept from scratch. Normally UX is for physically press down when you click it and UI is series of buttons and how they look.
Left side: Mr Lun wireframe example
This is the lecturer layout from the recorded video:
Week 10: Responsive Web Design
For this week, we learned to create rows and columns and make the website responsive. Moreover, we learned to insert a navigation bar and slideshow/carousel for images using Bootstrap.
This is the full image of the website:
This is the responsive effect:
Week 11: Show Progress
This week, Mr. Samsul was briefly explaining the final project, we have to create 5 pages of HTML for our website. Before creating the website, we have to make a sitemap and wireframe to plan our website and design. Besides, this week students are showing their exercise 2 and project 2 progress. During the project 2 progress, I found out that creating a store website are too complicated for me and difficult for me to fix the problem. Hence, I simplified my website again to make it easier such as reducing the container box.
This is my new wireframe:
Week 12: Submission for Project 2
During the class, students are showing the progression for project 2 and ideas for the final project. He recommends me to make a portfolio for the final project because it was easier and simple.
In addition, this week is also our due date for project 2. However, I'm not satisfied with project 2 because I could not fix my problem smoothly. Therefore, I made some little changes to my website such as the navigation bar and I changed the video section to About. I am unable to make project 2 responsive due to limited time.
This is the link to my project 2 finale outcome: Project 2
Week 13: Final Project Progression Check
This week, students are required to show their idea and progress on the final project. Based on project 2 experience, I decided to make a portfolio for my final project because I don't want to face the same problem again.
This is the link to my final project ideas: Final Project - GoogleSlide
This is my moldboard, I decided to choose the second moldboard colour for my portfolio background because it is easier to read the words instated of dark colour background.
For my wireframe, Mr. Shamsul said my "Logo" can link to the "Home" page instead of putting a Home button in the navigation bar. He also recommends me to create my own social media button so it looks more matches my website design. Moreover, the Work page he said was too rounded for the box corner.
These are my improved version of the wireframe:
Week 14: Continue with Final Project
This week is the final week of this semester. Therefore, there are quite a lot of assignments to complete and submit this week. Fortunately, we don't have class this week, but I had to complete 4 pages of my website after the submission of other subjects assignment.
Week 15: Final Project Progression check
This week, we had the last class with Mr. Lun on Wednesday. I showed him my website progression during the class and explaining my ideas to him. He recommended me to add more content for my Home page and My Portfolio page. Besides, the About Me page words are too hard to read due to the background colour.
This is my Home page, I added an images grid of my design in this page:
This is my About page, I changed the background to become darker so the words look clearer:
Week 16: Submission for Final Project
This weekend is the due date for the final project, I had completed my portfolio website. I made 6 pages for my portfolio website which are Home, About, Portfolio, Contact, Project(Portfolio), and Exercise(Portfolio). In the process of creating my website, I had clearly understood how to use HTML, CSS, and Javascript. Even though it was hard and stressful at the first time, but the more I practiced, I could smoothly use Dreamweaver coding compared with the previous project and exercise I did last time. Overall, I am satisfied with my final outcome.
These are my final outcome website:
Contact
Instructions
Week 1: Introduction to the module
This week, Mr Shamsul and our co lecturer Mr Lun introduced the meaning of Interactive Design, subject outline, assignment, and told us to create our own e-portfolio.
Week 2: Evaluating Website
For this week, we learned about different types of websites on the internet and evaluating websites by comparing the good and bad using live websites. Our lecturer breakout us into a room so we can discuss in a small group. We are given an exercise which is to fill in 5 good websites and 5 bad websites and present them. During this activity, we learned to evaluate the concept, content, context, readability, loading time, and etc to determine the websites are good or bad.
In this third week, Mr Lun replaced Mr Shamsul to lecturer us in class because Mr Shamsul was having some emergency. This week topic is about UI(User Experience) and UX(User Interface), we learned about the difference between UI and UX designer responsibilities. Based on my opinion, UX requires more creativity and harder than UI because they are responsible for creating the software application (app) the concept from scratch. Normally UX is for physically press down when you click it and UI is series of buttons and how they look.
Besides, we are given project 1 prototype design which is designing our own website using photoshop or illustration. Mr. Lun explains to us the common basic layout of a website and showed us a wireframe example during the class. The basic needs for a website are container, header, logo, navigation, main content, sidebar, footer, and Whitespace. We are being asked to create our own website draft before we end our class, thus I planned to make a healthy cosmetic for my website using photoshop and I showed it to Mr. Lun before I leave.
Left side: Mr Lun wireframe example
Right side: My own website draft
Topic: cosmetic Target: people who love to do makeup and skincare Purpose of the web: teach people to make up and what to buy
Week 4: Type For Screen Design
This is an activity we did in class, we are required to use notepad to create a website. We have split into a breakout room to discuss with classmates.
This is the HTML code:
Week 5: Submission for Project 1 - GoogleSlide
This week is a public holiday, but we have to submit project 1 landing page design using Google Slides. The slides include the description, wireframe, visual reference in the slide.
This is a link to my Project 1 final outcome: Project 1 - GoogleSlide
Week 6: Exercise 1 - Triathlon HTML
This week we learned to do exercise 1 in class using Dreamweaver HTML, such as inserting images, making a list using ul li, anchor text, <h1>heading 1,2,3</h1>, and paste the given information in the <p>HTML paragraph</p>. We have been put in breakout rooms again so we can discuss with classmates, it was quite fun having breakout rooms.
This is the link to my Exercise 1 final outcome: Exercise 1
Topic: cosmetic Target: people who love to do makeup and skincare Purpose of the web: teach people to make up and what to buy
Week 4: Type For Screen Design
This is an activity we did in class, we are required to use notepad to create a website. We have split into a breakout room to discuss with classmates.
This is the HTML code:
This is my final outcome:
Week 5: Submission for Project 1 - GoogleSlide
This week is a public holiday, but we have to submit project 1 landing page design using Google Slides. The slides include the description, wireframe, visual reference in the slide.
This is a link to my Project 1 final outcome: Project 1 - GoogleSlide
https://docs.google.com/presentation/d/1aAy163DenvV-SwdnsU0UDbmbH1XWP-7mkSqbHIq7Ksw/edit#slide=id.gd3b381661f_0_0
This is my process of designing my wireframe:
I e-mailed Mr. Shamsul and text Mr. Lun for improvement. Mr. Shamsul said my design looks complicated, he recommended me to simplify the navigation and elements used in the design. Moreover, he asked me to reduces the box in the design and the font size. Last but not least, he reminded me to add copyright information, social media icons, secondary navigation, and etc. For Mr. Lun, he said I have to improve on the overall design and try to do more research to get more references.
This is my process of designing my wireframe:
I e-mailed Mr. Shamsul and text Mr. Lun for improvement. Mr. Shamsul said my design looks complicated, he recommended me to simplify the navigation and elements used in the design. Moreover, he asked me to reduces the box in the design and the font size. Last but not least, he reminded me to add copyright information, social media icons, secondary navigation, and etc. For Mr. Lun, he said I have to improve on the overall design and try to do more research to get more references.
Week 6: Exercise 1 - Triathlon HTML
This week we learned to do exercise 1 in class using Dreamweaver HTML, such as inserting images, making a list using ul li, anchor text, <h1>heading 1,2,3</h1>, and paste the given information in the <p>HTML paragraph</p>. We have been put in breakout rooms again so we can discuss with classmates, it was quite fun having breakout rooms.
This is the link to my Exercise 1 final outcome: Exercise 1
Week 7: Exercise 1 - Triathlon CSS & Submission for Exercise 1
This week is to continue on Exercise 1, I learn to use CSS to change the background colour, words colour, font size and font type. Today is the end of Ramadan, therefore we end the class earlier.
Week 8: Independence Learning Week
This week is independence learning week, there are no classes this week.
Week 9: Exercise 2 - Layout Exercise
Since our class on Wednesday is a holiday, we have to join the Thursday class. However, I have another class in the morning, I only can watch recorded video after class. This week is about how to create a layout for our website and insert CSS into HTML to make boxes, create borders for boxes, controlling and adjusting the dimensions of boxes. Besides, CSS allow us to change the colour, font type, sizes and et cetera. At the end of the video, we are required to create our own navigation bar and explore others by ourselves. However, I'm kind of confusing during the process of creating my layout exercise and it took me a lot of time to complete it.
This is the link to my Exercise 2 finale outcome: Exercise 2
This week is to continue on Exercise 1, I learn to use CSS to change the background colour, words colour, font size and font type. Today is the end of Ramadan, therefore we end the class earlier.
Week 8: Independence Learning Week
This week is independence learning week, there are no classes this week.
Week 9: Exercise 2 - Layout Exercise
Since our class on Wednesday is a holiday, we have to join the Thursday class. However, I have another class in the morning, I only can watch recorded video after class. This week is about how to create a layout for our website and insert CSS into HTML to make boxes, create borders for boxes, controlling and adjusting the dimensions of boxes. Besides, CSS allow us to change the colour, font type, sizes and et cetera. At the end of the video, we are required to create our own navigation bar and explore others by ourselves. However, I'm kind of confusing during the process of creating my layout exercise and it took me a lot of time to complete it.
This is the link to my Exercise 2 finale outcome: Exercise 2
This is the lecturer layout from the recorded video:
For this week, we learned to create rows and columns and make the website responsive. Moreover, we learned to insert a navigation bar and slideshow/carousel for images using Bootstrap.
This is the full image of the website:
This is the responsive effect:
This week, Mr. Samsul was briefly explaining the final project, we have to create 5 pages of HTML for our website. Before creating the website, we have to make a sitemap and wireframe to plan our website and design. Besides, this week students are showing their exercise 2 and project 2 progress. During the project 2 progress, I found out that creating a store website are too complicated for me and difficult for me to fix the problem. Hence, I simplified my website again to make it easier such as reducing the container box.
This is my new wireframe:
During the class, students are showing the progression for project 2 and ideas for the final project. He recommends me to make a portfolio for the final project because it was easier and simple.
In addition, this week is also our due date for project 2. However, I'm not satisfied with project 2 because I could not fix my problem smoothly. Therefore, I made some little changes to my website such as the navigation bar and I changed the video section to About. I am unable to make project 2 responsive due to limited time.
This is the link to my project 2 finale outcome: Project 2
This week, students are required to show their idea and progress on the final project. Based on project 2 experience, I decided to make a portfolio for my final project because I don't want to face the same problem again.
This is the link to my final project ideas: Final Project - GoogleSlide
https://docs.google.com/presentation/d/15XG3IRrJfO3tiFvTy7F_yU2h2toIXI9zmvINjWzEKUw/edit#slide=id.ge12082da47_0_13
My sitemap at first included Home, About, Project, Contact, and FAQ. After showing my idea to Mr. Shamsul and Mr. Lun in class, I have made my improvement for my side map:
My sitemap at first included Home, About, Project, Contact, and FAQ. After showing my idea to Mr. Shamsul and Mr. Lun in class, I have made my improvement for my side map:
This is the mood board colour palette code I choose: 
These are my improved version of the wireframe:
This week is the final week of this semester. Therefore, there are quite a lot of assignments to complete and submit this week. Fortunately, we don't have class this week, but I had to complete 4 pages of my website after the submission of other subjects assignment.
Week 15: Final Project Progression check
This week, we had the last class with Mr. Lun on Wednesday. I showed him my website progression during the class and explaining my ideas to him. He recommended me to add more content for my Home page and My Portfolio page. Besides, the About Me page words are too hard to read due to the background colour.
This is my Home page, I added an images grid of my design in this page:
This is my Portfolio page, I added a contact button at the bottom so the colour will match the title colour:
This is my Contact page:
This weekend is the due date for the final project, I had completed my portfolio website. I made 6 pages for my portfolio website which are Home, About, Portfolio, Contact, Project(Portfolio), and Exercise(Portfolio). In the process of creating my website, I had clearly understood how to use HTML, CSS, and Javascript. Even though it was hard and stressful at the first time, but the more I practiced, I could smoothly use Dreamweaver coding compared with the previous project and exercise I did last time. Overall, I am satisfied with my final outcome.
These are my final outcome website:
Home
About
Portfolio
Project(Portfolio)
Excercise(Portfolio)
.png)
Comments
Post a Comment