Interactive Design / Exercise 2

23.04.2024 - .02.2024 (Week 4 - Week 5)

Tan Sin Mi (0368821)

Interactive Design

Exercise 2

CONTENT
  1. Instructions
  2. Exercise 2 - Web Replication
  3. Feedback
  4. References
INSTRUCTIONS
 
EXERCISE 2 - WEB REPLICATION

We are required to replicate TWO (2) existing main pages of the websites from the link given 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. 
Required:
  1. We can use any image from stock image or free stock icon. The image that we will be using does not have to be an exact image from the original website.
  2. We may replace it with a similar image. Focus on the layout, type style, and color style. 
  3. To find similar typefaces/fonts, we can download fonts from Google Fonts. 
  4. We may need to screengrab the website and can begin to replicate the page.
Free image: Link
Google Fonts: Link

I choose to replicate the main pages of Morgan Stanley and Ocean Health Index websites. After captured the full-page screenshots, I am going to use Adobe Illustrator to start my work.

1. Morgan Stanley
Figure 1.1 Morgan Stanley Progress

Figure 1.2 Morgan Stanley Final Outcome

2. Ocean Health Index
Figure 2.1 Ocean Health Index Progress

Figure 2.2 Ocean Health Index 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