Interactive Design | EXERCISE 2

-

Gao Yuan Yi 0373945

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Exercise 2

INTRUCTION


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.

Links
https://www.morganstanley.com/
https://www.oceanhealthindex.org/?authuser=0
https://banditrunning.com/

Free image
https://www.pexels.com/

Google Fonts link
https://fonts.google.com/

Website #1 - Morgan Stanley
Fig. 2. 1 https://www.morganstanley.com/

Fig. 2. 2 Working process in Illustrator

Fig. 2. 3 Side by side comparison (left-original, right-replicate)

Website #2 - Bandit Running
Fig. 2. 4 https://banditrunning.com/

Fig. 2. 5 Working process in Illustrator

Fig. 2. 6 Side by side comparison (left-original, right-replicate)

Final Replicate Progress-PDF

Fig. 2. 7 Final replicate progress-PDF (up-Morgan Stanley, down-Bandit Running)

Comments

Post a Comment

Popular posts from this blog

Typography | Task 1: Exercises

-
Image
  22/4/24-27/5/24（week 1-week 5） Gao Yuan Yi  0373945 Typography Task 1: Exercises Lecture Week 1   a） Typo_0_Introduction In this lecture, Mr. Vinod introduce us to typography, which can be seen in our daily lives and can be used in a wide range of different fields. What is Typography？ Typography is the art of creating letters. It is  also animated and can infiuence wedding website design, app design, ect. It is important for designers.  Typograpgy has evolved over 500 years, from calligraphy to lettering, and finally to typography.  The arrangement of types includes selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letter pair (kerning).  The terms Typography also applies to the style, arrangement, and appearance of leeters, numbers, and symbols created by the process.  Font : A fonts refers to the individual font or weight within the typeface, l.e.:  Fig.1.1 Exam...
Read more

Design Principles | Task 1 Exploration

-
Image
3/2/2025 - 17/2/2025  Week 1 - Week 3 Gao Yuan Yi  0373945 GCD60804  Design Principles  / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1 Exploration Lecture Intro_Elements & Principles of Design 1. Elements of Design Point : The simplest element; repetition forms lines, and movement creates shapes. Line : Defines boundaries of shapes, expresses motion or emotion, and can depict light and shadow when grouped. Shape : A two-dimensional area, divided into geometric (regular) and organic (irregular) shapes. Form : Three-dimensional shapes, often used in sculpture and architecture. Texture : The tactile quality or visual representation of surfaces, divided into actual and simulated textures. Space : Can be two-dimensional or three-dimensional, divided into positive (filled) and negative (empty) space. Colour : Determined by light wavelengths, with three properties: hue, value, and saturation. 2. Principles of Design Contrast : Attracts attent...
Read more

Advanced Typography: Task 1 Exercises

-
Image
25/9/2024 - 16/10/2024  Week 1 - Week 3 Gao Yuan Yi 0373945 GCD61004  Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1 Exercises - Typographic Systems & Type & Play LECTURES Lecture 1 AdTypo_1_Typographic Systems Shape Grammar: A set of shape rules that apply in a step-by-step way to generate a set, or language, of designs.  Axial System: All elements are organised to the left or right of a single axis.  Fig.1.1.1  Axial System Radial System: All elements are extended from a point of focus.  Fig.1. 1. 2  Radial System Dilatational System: All elements expand from a central point in a circular fashion.  Fig.1. 1. 3  Dilatational System Random System: Elements appear to have no specific pattern or relationship.  Fig.1. 1. 4  Random System Grid System: A system of vertical and horizontal divisions.  Fig.1. 1. 5  Grid System Transitional System: An informal system ...
Read more