INTERACTIVE DESIGN — EXERCISE
28.8.2023 - 27.11.2023(Week1- Week 14)
LIM JUN TENG / 0362890
Interactive Design / Bachelor of Design (Honours) in Creative Media
Exercise
INSRUCTUIONS
EXERCISE 1 - Web Analysi
Format: Google Slide
1.Choose TWO (2) websites from the link given. Review the website that you've 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.
2.Write a brief report summarizing your findings and recommendations.
3.Deliverables:Write a brief report summarizing in not more than 500 words. We 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)
4.What To Have in The 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.
PROGRESS:
1. YOU CAN BE ANY THING :https://youcanbeanything.tftl.agency/
The following photos and videos are what I find creative :
Final Outcome (particular part)：
2. BOBA ICE-CREAM : https://us.bobaicecream.com/
The following photos and videos are what I find creative :
Final Outcome (particular part) :
FINAL :
EXERCISE 2 :
Your task is to 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. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.
Websites :
1. Morgan Stanley
2. Bandit Running
3. Ocean Health Index
I have choose Morgan Stanley and Ocean Health Index to replicate. First I take a long screenshot of the website.
.jpg)
%20(1).jpg)
EXERCISE 3 :
In this exercise, you will 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.
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
Create an external CSS file named "style.css."
Apply CSS rules to style your 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.
Comments
Post a Comment