Exercises
28.8.2023 - 27.11.2023 (Week1- Week 14)
Tiffany Tan Xuan / 0362472
Interactive Design / Bachelor of Design (Honours) in Creative
Media
Project 2: Recipe Card
INSRUCTIONS
EXERCISE 1 - Web Analysis
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.
Write a brief report summarizing your findings and
recommendations.
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:
Final Outcome (particular part)：
Final Outcome (particular part)：
FINAL :
PPT Link: https://docs.google.com/presentation/d/1s_BLU0lmTDTuuv-G3lVlyV6BSvUanYWMpA4SGEBiswA/edit?usp=sharing
EXERCISE 2 - Web Replication
Our 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 Link :
I chose Morgan Stanley and Ocean Health Index as my web
replication. First I took a screenshot of the website and then imported it
into Illustration. Then, I started my replication. I changed
the original fonts, and then I found similar pictures to
replace the original ones.
Progress in Adobe Illustrator :
Final Task of Morgan Stanley:
Progress in Adobe Illustrator :
Final Task of Ocean Health Index:
EXERCISE 3- Creating a Recipe Card
In this exercise, we 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.
PROGRESS:
Ingredients
• 1 cup organic frozen mixed berries
• 1 cup frozen banana
• 1 cup almond milk
• 1 scoop vanilla protein powder
• 1 cup mixed fruit
• 1 cup granola
• 1 cup almond milk
• 1 scoop vanilla protein powder
• 1 cup mixed fruit
• 1 cup granola
Directions
1.Add frozen banana and mixed berries to a blender, blend on low until small bites remain.
2.Add almond milk and protein powder, blend on low again until the mixture reaches a soft serve consistency.
3.Scoop into 1-2 serving bowls, topped with mixed fruit and granola.
2.Add almond milk and protein powder, blend on low again until the mixture reaches a soft serve consistency.
3.Scoop into 1-2 serving bowls, topped with mixed fruit and granola.
Comments
Post a Comment