Interactive Design Exercise 2: Website replication

 

27 April 2024- 3 July 2024

NABIL JULIUS DORN (037978)

(INTERACTIVE DESIGN) | Bachelor of Design in Creative Media | Taylor's University

Task 1: Website Replication

---

List

• LECTURES
• INSTRUCTIONS
• TASK
• FEEDBACK
• REFLECTION
• FURTHER READING

---

<back to top>

LECTURES

Week 3

Understanding website structure

Fig 1.1.1 Anatomy of a landing page

Fig 1.1.2 User viewing pattern

Why website structure matters:

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.

Three key elements:

1. Header
2. Body
3. Footer

1. Header

The header is at the top of the webpage. It usually contains the website logo, navigation menu and contact information. The header provides users with quick access to essential information and navigation.

2. Body

The body is the main content area of the webpage. It contains text, images, video 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.

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.

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.

---

<back to top>

INSTRUCTIONS

This is the Module Information Booklet for this module: 

<back to top>

TASK

Task 1.2

Replicate a website

In this task, we needed to replicate an existing website to gain a better understanding of its structure.

We are recommended to use software such as Photoshop, Adobe Illustrator or Figma.

Here is the screengrab of the website of my choice: Bandid Running

The first step I took was going to pexels and unsplash to find the stock images that would suit the website replication.

Fig 1.2.1 Images found

I then inspected the website to find the fonts used throughout the website.

Fig 1.2.2 Font found

The fonts found in the website are:

• Helvetica, sans-serif
• Tomato Grotesk
• FK Grotesk

Fig 1.2.3 FK Grotesk

I also extracted the main colors from the website using the eyedropper tool. These are the main colors used.

Fig 1.2.4 Color palette used

I arranged all the elements according to the grid I made using the original website

Fig 1.2.5 Arranged elements according to the grid

Fig 1.2.6 JPEG format final outcome

Here is the final outcome of my replication:

Here is the screengrab of the second website I chose to replicate: Ocean Health Index

Here are the fonts I found from the website:

Fig 1.2.6 Font found from website

Fig 1.2.7 Font found from website

Using an add-on called SVG Export, I managed to extract these icons from it.

Fig 1.2.8 SVG icons found

Fig 1.2.9 Color palette used

I then went on to inspect the website and managed to extract the original images used on the website.

Here are those images:

Fig 1.2.10 Images extracted

I used clipping masks to achieve the same effect as shown in the website

Fig 1.2.11 Editing process

I again used clipping masks and gradients to achieve the same effect as the websites background.

Fig 1.2.12 Background website

Following the grid I laid out using the original website, I arranged all the individual elements, grouping some to make it easier, and adjusting sizing.

Here is the replicated website with the grid:

Fig 1.2.13 Website layout arranged with grid

Fig 1.2.14 Replicated website in JPEG

Here is the final outcome of the replicated website in PDF form:

---

<back to top>