Interactive Design / Exercises
23.4.2024 - 7.5.2024 / Week 1 - Week 3
4.6.2024 - 10.6.2024 / Week 7 - Week 8
ID name YANG HANWEN
ID number 0364085
Program name bachelor of design (honors) in creative media
Exercises
TABLE OF CONTENTS
■ Lectures
Instruction
<iframe src="https://drive.google.com/file/d/1a7g9ZI98B9HJvOscWzhIhMBQlSDvJkLk/preview" width="640" height="480" allow="autoplay"></iframe>
Lectures
Week 1 / 24.4.2024
Mr. Shamsul Hamimi Ab. Rahman asked us to sign up for Netlify.
Week 3 / 7.5.2024
 |
| 1.8_AnatomyofLandingPage.jpg (1593×2447) (unbounce.com) |
Exercise 1
Exercise 1 - Web Analysis
Requirements:
- Choose TWO websites from the link given.
Review the website selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarizing findings and recommendations.
- Write a brief report summarizing in not less than 500 words. Can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings).
Analysis：
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Submission：
The websites I chose are 12Wave Interactive Studio and Equinox,the following ↓ is the analysis & evaluation report I wrote.
<iframe allow="autoplay" height="480" src="https://docs.google.com/document/d/1Kwr-lsrdnlyuqSlGG7VfbDDWGebatQO1uiiFjGqCwZo/preview" width="640"></iframe>
Exercise 2
Exercise 2 - Web Replication
Mr. Shamsul Hamimi Ab. Rahman gave us some A4 paper and asked us to design a web page prototype for one of the four scenarios in class.
So my group unanimously chose the 4th scenario.
Then our group showed the completed prototype draft to other groups for an interactive demonstration.
Then that group gave our group a generally good evaluation, but some details need to be updated, such as the large map location display and order history, etc.
During the third class, Mr. Shamsul Hamimi Ab. Rahman gave us the ↑ following task.
This exercise is ↓
- Replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height.
- Any image from stock images or free stock icons can be used, the image used does not have to be the exact image of the original website，replace it with a similar image. Focus on layout, font style, and color style. To find similar typefaces/fonts,download fonts from Google Fonts. Need to take a screenshot of the website before start copying the page.
Process:
Then Mr. Shamsul Hamimi Ab. Rahman gave the following three website links↓
However, the leader of our team told me that we need to use the "developer tools" in the browser. The specific operation method is↓
Press the F12 key on the keyboard → open the developer tools → complete the shortcut key on the keyboard"Ctrl/command+shift+P" to activate the command prompt → enter "Capture" to the right of "Run >" → click the "Capture full-size screenshot" column to download a complete screenshot of the current web page.
Regarding font replacement, I planned to find a bold font, so I entered "bold" in the search box. Then I found that the "IBM Plex Sans" font was similar to the font in the copied web page, so I used it.
Because Mr. Shamsul Hamimi Ab. Rahman said that we need to put our copied web pages and the copied web pages in different layers, and we conducted a hand-drawn website prototype design in the second week of class, so I divided it into three layers this time. These three layers are the copied web page screenshots, the interactive prototype design draft I made based on the web page screenshots, and the web page images that I finally copied.
For the text part in the web page prototype, I use characters such as "I" and "X" to indicate that this part is the text part of the web page.
Submission：
- Prototype
Exercise 3
Exercise 3 - Create a Recipe Card
Requirements:
- Create a recipe card using HTML and CSS.
The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE Recipe from the link（Healthy Recipes and Whole Foods Cooking for Everyday - 101 Cookbooks） below
- Create an HTML file named "index.html."
Create a section that displays the following information:
- Recipe title
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
- Apply CSS rules to style personal recipe card.
- Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Process:
Uh😅, when I got to this point in my e-portfolio, I realized that I didn't use the recipes on the requested website.
Comments
Post a Comment