P$1-$ UX Design using Figma $(3\mathrm{.}5$ points$)$

Step $1$: Recreate a Sample Page $(2\mathrm{.}5$ points$)$

Choose a well$-$known website $($e$.$g$.,$ Amazon, Airbnb, Spotify$)$ and recreate a specific page from that website using Figma. The page can be a homepage, a product listing, a profile page, cart page, checkout page or any other relevant section. In this step, the focus is on replicating the existing design and layout of the chosen webpage.

Requirements:

Replicate the overall layout and structure of the chosen webpage.

Try to make typography, colors, and visual elements used in the original design as much as possible.

Pay attention to the placement and alignment of different components $($e$.$g$.,$ headers, images, buttons$).$

Step $2$: Improve the Design $(1$ point$)$

Identify potential areas for improvement and enhance the design to provide a better user experience. Apply UX design principles and techniques to make the page more intuitive, visually appealing, and userfriendly.

Some Possible Enhancements:

Identify usability issues or pain points in the original design and propose solutions.

Enhance the visual hierarchy to guide users' attention effectively.

Apply any additional design elements or components that align with the brand's style or the page's purpose.

P$2-$ Create a Recipe Page $(6\mathrm{.}5$ points$)$

Step $1$: Set up the basic HTML structure $(1$ point$)$

Create an HTML file named "recipe.html$"$ and set up the basic HTML structure with the doctype, opening and closing HTML tags, and head and body sections.

Step $2$: Add a Page Title and Heading $(1$ point$)$

Inside the head section, add a title that says "Delicious Recipe." In the body section, add an h$1$ heading that describes the recipe you'll be showcasing.

Step $3$: Add an Image $(1$ point$)$

Find an appetizing image that represents the dish you're featuring and save it in the same directory as your HTML file. Inside the body section, add an ing, tag with the following attributes:

src: Set the source attribute to the filename of your image.

alt: Provide alternative text for the image.

Step $4$: Display Ingredients $(1$ point$)$

List the ingredients required for the recipe. Inside the body section, add an unordered list $(y)$ to display the ingredients. Each list item $($li$)$ should contain the name of an ingredient.

Step $5$: Display Instructions $(1$ point$)$

List the step$-$by$-$step instructions for preparing the dish. Inside the body section, add an ordered list $(N)$ to display the instructions. Each list item $($li$)$ should contain a specific instruction.

Step $6$: Add a Link $(1$ point$)$

Provide a link to a related resource or website, such as a video tutorial or a blog post. Inside the body section, add an anchor $($a$)$ tag with the following attributes:

href: Set the href attribute to the URL of the resource.

text: Provide meaningful text for the link.

Step $7$: Add Additional Information $(0\mathrm{.}5$ point$)$

Include any additional information about the recipe, such as preparation time, cooking time, serving size, or nutritional facts. Inside the body section, use appropriate HTML tags to display this information.

Step $8$: Test your Page

Open the "recipe.html$"$ file in a web browser to see how your page looks and functions. Verify that the image, ingredient list, instructions, link, and additional information are displayed correctly.