Interactive Design / Exercise 3

04.06.2024 - 11.06.2024 (Week 7 - Week 8)

Tan Sin Mi (0368821)

Interactive Design

Exercise 3

CONTENT
  1. Instructions
  2. Exercise 3 - Creating a Recipe Card
  3. Feedback
  4. References
INSTRUCTIONS
 
EXERCISE 3 - CREATING A RECIPE CARD

We are required to choose ONE (1) recipe from the link given. Review the website that we 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.

First, I visited the website that given by lecturer to look for a recipe. I chose a Grapefruit Sorbet recipe as the recipe for this exercise.
Figure 1 Grapefruit Sorbet recipe

After chosen a recipe, I started design the recipe card by using Adobe Dreamweaver. I created a basic HTML structure, including recipe title, ingredients, instructions and notes.
Figure 2 Basic HTML code

Figure 3 Basic HTML code

Then, I created a CSS file and added some basic CSS to let my recipe card have more design.
Figure 4 CSS progress

Figure 5 CSS progress

Final Outcome: 


Figure 5 Final Outcome


Comments

Post a Comment

Popular posts from this blog

Advanced Typography / Task 2

Image
22.05.2024 - 21.06.2024 (Week 5 - Week 9) Tan Sin Mi (0368821) Advanced Typography Task 2 CONTENT Instructions Lectures Task 2A - Key Artwork Task 2B - Collateral Feedback Reflection Further Reading INSTRUCTIONS   LECTURES Week 5: Lecture 5- Perception & Organization Perception 1. Definition Perception is how something is regarded, understood, or interpreted. In typography, it involves visual navigation and interpretation via contrast, form, and organization of content. 2. Focus Typography deals with how textual, visual, graphical, and color elements are perceived and understood. Contrast 1. Size Large elements draw attention first, such as a big letter standing out against smaller letters. Commonly used to make titles or headings more prominent than body text. 2. Weight Bold type can stand out amidst lighter type of the same style. Other met...
Read more

Advanced Typography / Task 3

Image
21.06.2024 - 23.07.2024 (Week 9 - Week 14) Tan Sin Mi (0368821) Advanced Typography Task 3 CONTENT Instructions Task 3 - Type Exploration & Application Feedback Reflection Further Reading INSTRUCTIONS TASK 3 - TYPE EXPLORATION & APPLICATION  In this task, we are required to create or improve a font that addresses a problem or adds value in graphic design, animation, new media, or entertainment design. In last, we need to use the font we created to applying and presenting. This task can take one of three forms: Creating a new font Improving an existing font Experimenting Proposal: Figure 1.1 Proposal PPT Sketches: Figure 2.1 Letterforms Sketches First Version Digitized Letterforms: ...
Read more

Advanced Typography / Final Compilation & Reflection

Image
22.04.2024 - 23.07.2024 (Week 1 - Week 14) Tan Sin Mi (0368821) Advanced Typography  Final Compilation & Reflection INSTRUCTIONS Task 1:  Typographic System & Type and Play Task 2:  Key Artwork & Collateral Task 3:  Type Exploration & Application SUBMISSIONS TASK 1 | Exercise 1: Typographic System 24.04.2024 – 15.05.2024 | Week 1 – Week 4 Figure 1.1 Final: Axial (08/05/2024) Figure 1.2 Final: Radial (08/05/2024) Figure 1.3 Final: Dilatational (08/05/2024) Figure 1.4 Final: Random (08/05/2024) Figure 1.5 Final: Grid (08/05/2024) Figure 1.6 Final: Modular (08/05/2024) Figure 1.7 Final: Transitional (08/05/2024) Figure 1.1 Final: Bilate (08/05/2024) Figure 1.9 Final Typographic System.pdf (08/05/2024) Figure 1.10 Final  Typographic System with grids.pdf  ...
Read more