Interactive Design Exercise 2: Website Replication
10 October 2024 - 17 October 2024
CHONG CHENG TAO (0371072)
Interactive Design | Bachelor of Design in Creative Media | Taylor's
University
Exercises 2/ Website Replication
List
LECTURES
Week 3:
Website structure is the foundation of a user-friendly and accessible website.
It affects user experience, SEO, and overall website performance. A
well-structured website helps users find information easily and keeps them
engaged.
It also make the website search engine optimised. When users are familiar with
one website, they aretend to stick on it.
Three Key Elements of Website:
- Header
- Body
- Footer
1. Header
The header is the top section of a webpage. It usually contains the
website's logo, navigation menu, and contact information. The header
provides users with quick access to essential information and navigation.
Logo is usually place on the left as user tend to view in F-pattern direction.
Fig 1.1 Scanning Pattern on the Web
2. Body
The body is the main content area of a webpage. It contains text, images,
videos, and other multimedia elements. Proper organization of content within
the body is crucial for readability.
3. Footer
The footer is located at the bottom of a webpage. It typically includes
copyright information, links to important pages, and contact details. The
footer provides closure to the webpage and additional navigation options.
Additional:
4. Organizing Content
Content organization is key to a well-structured website. Use headings (H1,
H2, H3, etc.) to create a hierarchical structure. Logical grouping of
content and clear labeling of sections improve user experience.
5. Navigation Menus
Navigation menus help users move around the website. Use clear and concise
labels for menu items. Consider using dropdown menus for complex sites.
INSTRUCTIONS
This is the Module Information Booklet for this module:
Exercise 2: Web Replication
Exercise 2: Web Replication
We need to replicate 2 existing main pages of the websites given.
Follow the dimensions of the existing website from the width and
height. We can use softawre like Photoshop, Adobe Illustrator and
Figma.
These are the screengrab from my selected websites:
Fig 2.1 Webiste 1: Ocean Health Index
Fig 2.2 Website 2: Bandit Running
1. Bandit Runner
I love the overall layout and typography in this website. It's clean
and modern
Font: FK Grotesk Neue Trial (Regualr,Medium and Bold)
I use SVG Export extension to get the logos.
Fig 2.1.1 Logos & Design Element (SVG)
1.
Fig 2.1.2 Navigation Bar & Page 1
2.
Fig 2.1.3 Page 2
3.
Fig 2.1.4 Page 3
4.
Fig 2.1.5 Page 4
5.
Fig 2.1.6 Page 5
6.
Fig 2.1.7 Page 6
7.
Fig 2.1.8 Page 7
For the "MEMBERSHIP" text, at first I use gradient similiar
to metal shading. Later, I duplicate the text and place in
the abck to create shadow-like visual. Lastly, I apply
Chrome effect in Illustrator to enhance the metal texture.
Fig 2.1.9 "MEMBERSHIP" text
Fig 2.1.10 Metal gradient
Fig 2.1.11 Chrome effect
8.
Fig 2.1.12 Page 8
9.
Fig 2.1.13 Footer
Fig 2.1.14 Comparison
Fig 2.1.15 Layers
Final Submission:
Fig 2.1.16 Exercise 2: Website Replication 1
Exercise 2: Website Replication 1 (PDF)
2. Ocean Health Index
I manage to get the original image for the website background. I
started by re-creating the background gradient.
Font: Helvetica
Fig 2.2.2 Background gradient
1. Navigation Bar
Fig 2.2.3 Navigation Bar
2. Heading 1
Fig 2.2.4 Heading 1
3. Card Left & Right
Fig 2.2.5 Card left & right
4. Heading 2 & Boxes
Fig 2.2.6 Heading 2 & Boxers
5. Footer
Fig 2.2.7 Footer
Fig 2.2.8 Comparison
Fig 2.2.9 Layers
Final Submission:
Fig 2.2.10 Exercise 2: Website Replication 2
Exercise 2: Website Replication 2 (PDF)
REFLECTIONS
I think this is a good starting point for understanding the basic structure of a website. While replicating it, I notice more features and small details compared to when I'm just using or casually scrolling through it.
Comments
Post a Comment