Interactive Design: Exercises
22.04.2024 - 16.06.2024 || Week 1 - Week 8
Hanson Pea Wei Hao || 0359463
Interactive Design || Bachelor of Design (Honours) in Creative Media || Taylor's University
Exercises: HTML Document Development & HTML, CSS Document Development, CSS Layout Mode
Hanson Pea Wei Hao || 0359463
Interactive Design || Bachelor of Design (Honours) in Creative Media || Taylor's University
Exercises: HTML Document Development & HTML, CSS Document Development, CSS Layout Mode
Lists
1. Lectures
2. Instructions
3. Feedbacks
4. Reflections
Lectures
Week 1: Understanding Website Structure
Week 2: Anatomy of a Website
For week two we need to read and understand this website:
Week 4: The Web and Language
Week 5: HTML & CSS
Week 6: CSS Selector
Instructions
Exercise 1: Web Analysis
For this exercise, we need to choose two websites from the link given and review the websites, which are The Webby Award, Awwwards, and Csswinner. and write a brief report summarizing our findings and recommendations.
Brief Report Summarizing:
Based on the requirements, I have chosen The Webby Award and Awwwards for doing a report for it. After trying out both of the websites. I have summarized the Cons and Pros for both of the websites which are The Webby Award and Awwwards and even do a conclusion for both of them.
First of all, I would like to talk about Awwwards. Awwwards is very good at recommending outstanding design in websites, and a good website to let a designer show his creativity, innovation, personal ideas, and development of his personal artwork and design. After looking at the system it provides, I can see that this website has gathered a bunch of professional designers and even has a good community for designers. From what I see, I see them provide a lot of inspiration like different artwork from other designers, or provide a lot of courses to suggest ideas for other designers. The best part about this website, I would like to say, is their feedback section. They provide a place for designers to share their designs and get feedback from other designers people who know about design or even professional designers on this website. This kind of feedback can improve these designer ideas and create a better design. The best part I would like to say is the section button is always at the bottom of the website. You can use the button to go back to the top, home button, and even go to any label that is provided. I think the Cons of Awwwards are to focus on making websites look very pretty and fancy and to focus on User Experiences. This makes it lose some of its quality. I feel like the content provided can be more professional.
The second will talk about the second choice I made which is the Webby Awards. The pros of the Webby Awards are a lot. Starting from its user experience, I would like to say it is one of the cleanest and smoothest websites I have seen. The content inside is very rich such as design for the website and mobile side, advertised, Media and PR, Video, Social, games, Metaverse, immersive & AI, App, Dapp, and Software. It contains almost all of the stuff that can be found on the internet. Other than that, the Webby Awards not only include professional designers inside but there are also lots of companies that can share and give feedback for other designs. The Webby Awards also judge the content very fair by having a section that allows people to vote for their favorite web or design, It makes additional engagement and interaction. I also found out that the winner in The Webby Awards can enhance the reputation of a designer or the whole company in the industry. The Cons part I guess will be one of its user experiences, which is that the home button is a bit hidden. You need to scroll up and put your mouse on the top part, then it will appear. Other than that I would like to say overall it is good.
In conclusion for both of the websites, I would like to say I like the user experience in Awwwards more than The Webby Awards. The Awwwards is good for designers looking to showcase their design skills and gain feedback from a community of peers, and the Webby Awards is Good in raising popularity.
First of all, I would like to talk about Awwwards. Awwwards is very good at recommending outstanding design in websites, and a good website to let a designer show his creativity, innovation, personal ideas, and development of his personal artwork and design. After looking at the system it provides, I can see that this website has gathered a bunch of professional designers and even has a good community for designers. From what I see, I see them provide a lot of inspiration like different artwork from other designers, or provide a lot of courses to suggest ideas for other designers. The best part about this website, I would like to say, is their feedback section. They provide a place for designers to share their designs and get feedback from other designers people who know about design or even professional designers on this website. This kind of feedback can improve these designer ideas and create a better design. The best part I would like to say is the section button is always at the bottom of the website. You can use the button to go back to the top, home button, and even go to any label that is provided. I think the Cons of Awwwards are to focus on making websites look very pretty and fancy and to focus on User Experiences. This makes it lose some of its quality. I feel like the content provided can be more professional.
The second will talk about the second choice I made which is the Webby Awards. The pros of the Webby Awards are a lot. Starting from its user experience, I would like to say it is one of the cleanest and smoothest websites I have seen. The content inside is very rich such as design for the website and mobile side, advertised, Media and PR, Video, Social, games, Metaverse, immersive & AI, App, Dapp, and Software. It contains almost all of the stuff that can be found on the internet. Other than that, the Webby Awards not only include professional designers inside but there are also lots of companies that can share and give feedback for other designs. The Webby Awards also judge the content very fair by having a section that allows people to vote for their favorite web or design, It makes additional engagement and interaction. I also found out that the winner in The Webby Awards can enhance the reputation of a designer or the whole company in the industry. The Cons part I guess will be one of its user experiences, which is that the home button is a bit hidden. You need to scroll up and put your mouse on the top part, then it will appear. Other than that I would like to say overall it is good.
In conclusion for both of the websites, I would like to say I like the user experience in Awwwards more than The Webby Awards. The Awwwards is good for designers looking to showcase their design skills and gain feedback from a community of peers, and the Webby Awards is Good in raising popularity.
(569 words)
Exercise 2: Replicate a Website
For the second exercise, we were asked to replicate two websites among three websites which is
Morgan Stanley, Oceon Health Index, and Bandit Running. So I choose to do Morgan Stanley and Oceon Health Index for a duplicate.
To do the duplicate, we need to go to the left side right click the empty part, and inspect the site. after that press the options button which know as the three dots, and choose Capture full-size screenshot.
After that put your image inside adobe illustrator and then use the image as guideline.
Fig 2.1, step to capture whole website part 1
Fig 2.2, step to capture whole website part 2
Part 1: Morgan Stanley
Fig 2.3, Duplicate of Morgan Stanley Website
Part 2: Ocean Health Index
Fig 2.4, Duplicate of Ocean Health Index
Exercise 3: HTML and CSS Document Development
For this exercise, we need to create a recipe card by using HTML and CSS. We should create a webpage that displays the ingredients and instructions clean and interesting. the recipe should be chosen from a website providing which name 101 Cookbook 101 Cookbook.For me, I have chosen a thousand-layer lasagna for my recipe card. In my idea, I think a recipe card should not be that fancy or colorful because it will be a distraction and make people not focus on the food itself.
Fig 3.1, the HTML code
Fig 3.2, the CSS code
Reflections
Exercise 1:
In this exercise, I learned how to analyze a website. Distinguish between an interactive website and a normal website. But I feel that my analysis of websites is not that mature. As the first exercise, we can learn how to analyze and understand a website is really good.
Exercise 2:
In this exercise, I have learn how to make a prototype of a website by duplicated others website. Quite fun for the duplicated website, Other than the website page is very long to duplicate, all good and its the first time I pay attention to look did how a proper website should look like and what's the important part inside a website.
Exercise 3:
In this exercise, It's my first time I learn how to use html and CSS to form a looking good website. It's still very new for me and I did suffer a lots in learning how to make a website with html. Sometimes, I did rage when I saw a lots of error appear in my Dreamweaver and I cant solve them. In the end I create a recipe Card I still can accept, but I sure its not my limit, it just my limit in knowledge for coding.
Comments
Post a Comment