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/
Free image:
https://www.pexels.com/
Google Fonts link:
https://fonts.google.com/
Ocean Health Index: https://www.oceanhealthindex.org/?authuser=0
Figure 2.1 Website 1_Ocean Health Index, PDF
fig2.3Process
fig2.4Process
fig2.5Process
Top part:
Heading 1:
Boxes & information:
Down part:
Layers:
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/
Figure 3.1 Website 2_Morgan Stsnley | Global Leader in Financial Services, PDF
Figure 3.2 Website 2_Morgan Stenley | Global Leader in Financial Services, JPEG
Some of the images choosen from pexels:
Navigation bar:
Heading 1:
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:
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.
Comments
Post a Comment