INTERACTIVE DESIGN- EXERCISE 2

 其中包括图片:

INTERACTIVE DESIGN - EXERCISE 1/WEB ANALYSIS

Huang jiaqi/0371553
Interactive Design / Bachelor of Design (Honours) in Creative Media         

Exercises 2/ Website Replication


TABLE OF CONTENTS

1. Instructions

2.  Lectures

3. Exercises

4. Feedback

5. Reflection


INSTRUCTIONS

This is the Module Information Booklet for this module: 

Lectures

Week 3 - Understanding Website Structure 

Figure 1.1 Week 3 Lecture, PDF


Exercises

Exercise 2 - Web Replication 

Your 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. 

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

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



Figure 2.1 Website 1_Ocean Health Index, PDF


fig2.2Process


fig2.3Process


fig2.4Process
fig2.5Process

Figure 2.6 Colours for the background

Top part: 



Figure 2.7 Top part

Navigation bar: 





Figure 2.8 Navigation bar

Heading 1:



Figure 2.9 Heading 1

Card left & right:



Figure 2.10 Card left & right

Middle part: 



Figure 2.11 Middle part

Heading 2: 

Figure 2.12 Heading 2

Boxes & information: 



Figure 2.13 Boxes & information 

Down part: 



Figure 2.14 Down part 



Layers: 

Figuer 2.16 Layers #1

Figure 2.17 Layers #2

My replication based on the website Ocean Health Index.


fig1.3 Exercise 2.17 Website Replication 1


fig2.18 Exercise 2: Website Replication 1pdf





Exercise 2: Website Replication 2


Exercise 2 - Web Replication_2

Morgan Stenley | Global Leader in Financial Services: https://www.morganstanley.com/


Some of the images choosen from pexels: 

Figure 3.3 Substitution images 

Navigation bar: 

Figure 3.4 Navigation bar

Heading 1: 



Figure 3.5 Heading 1

Information part: 



Figure 3.6 Information part 1





Figure 3.7 Information part 2_1



Figure 3.8 Information part 2_2



Figure 3.8 Information part 3

Figure 3.9 Information part 4

Down part: 

Figure 3.10 Down part
 



Layers: 

Figure 3.11 Layers #1

Figure 3.12 Layers #2

My replication based on the website Morgan Stenley | Global Leader in Financial Services.



Figure 3.14 Web replication_2, JPEG

Figure 3.15 Web replication_2, PDF






Feedback



Reflection

In replicating two existing main pages from websites, I focused on understanding their structure, layout, and overall visual design. The process helped me explore the spacing between elements, grid systems, typography, and use of color, allowing me to develop a better eye for web aesthetics. I used Adobe Photoshop to adjust elements, ensuring that I followed the dimensions of the original site. The exercise deepened my comprehension of responsive web design and typography consistency, while also enhancing my technical skills using stock images and Google Fonts for substitutions.

For Exercise 2, replicating two main pages of websites provided an insightful experience in understanding web design structure and principles. Through this task, I focused on replicating layout, typography, and color schemes, while creatively substituting similar stock images and fonts from Google Fonts. This process enhanced my attention to alignment, spacing, and proportion, ensuring consistency in visual hierarchy and user experience. It also strengthened my skills in software like Photoshop, helping me see how design elements work together to create aesthetically pleasing and functional web interfaces.








Comments

Popular posts from this blog

Typography-Task 1:Exercise1&2

Intercultural Design: Proposal Data Collection And Visual Design

Interactive Design-EXERCISE 1