Interactive Design / Exercise 2 : Web Replication
30/4/2025 - 7/5/2025 (Week 2 - 3)
Rachel Ng Jie Ting/ 0378902
Bachelors of design (Honours) in creative media
Interactive Design / Exercise 2 : Web Replication
Table of content
Week 3 : Understanding Website Structure
Lectures
Week 3 : Understanding Website Structure
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.
The Three Key Elements
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.
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.
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.
Instructions
Your task is to replicate TWO (2) existing main pages of the websites that you have analyzed in Exercise 1 to gain a better understanding of their structure. Follow the dimensions of the existing website, including 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 a stock image or a 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.
Submission Requirement:
Include all processes of your replication in your e-portfolio. Provide sufficient evidence of your work and upload the source file (.psd or .ai) to Google Drive. Make sure to turn the sharing setting to public and add the link in your e-portfolio post
Free image:
Google Fonts link:
--------------------------------------------------------------------------------------
Website #1 : Coffee Roasting Man
Capturing a Screenshot'
First, I took a screenshot of the Coffee Roasting Man front page for reference.
Setting up the artboard
Next, I opened up Adobe Illustrator and created a new document. Then, I imported the screenshot into Illustrator. I adjusted the artboard to make sure the dimensions matched the layout of the Coffee Roasting Man front page.
Recreating Header
Here, I have recreated the header of the website. I used the inspect function to identify the font used in the website (The body font in identical to the one the website used, but the title font is not, I have tried to match the font as close as possible). The artwork is recreated using image trace in Illustrator together with some manual touching up.
Title Font: Ladislav Bold
Font Size: 255 pt
Body Font: DM Mono Medium
Font Size: 21 pt
Recreating Content body
With a combination of the Shapes Tools and Type Tool, I've recreated each section in the body of the website. Many guidelines were used to ensure it is aligned according to the reference photo. The images used for my replica of the website were found on Pexel.com.
Recreating Footer
The footer by adding text, links, artwork and payment icons. I ensured that the layout and style were consistent with the original website. Just like in the header, the artwork is recreated using image trace in Illustrator together with some manual touching up.
Exporting Finished Work
Once finished, I exported my work in JPG and PDF format.
FINAL WEB REPLICATION 1#: COFFEE ROASTING MAN
Capturing a Screenshot'
First, I took a screenshot of the Rivora Systems front page for reference.
Setting up the artboard
Next, I opened up Adobe Illustrator and created a new document. Then, I imported the screenshot into Illustrator. I adjusted the artboard to make sure the dimensions matched the layout of the Rivora Systems front page. Guidelines were used to measure the height of each element in the website.
Recreating Header
Here, I have recreated the header of the website. I used the inspect function to identify the font used in the website. The gradient section is recreated using the Rectangle Shape Tool and the Gradient Tool.
Title Font: Arial Regular
Font Size: 70 pt
Sub-heading: Source Serif Variable Bold
Font Size: 51 pt
Body Font 1: OCR B Std Regular
Font Size: 11 pt
Body Font 2: Arial Regular
Font Size: 10, 12, 14, 16 pt
Body Font 3: Source Serif Variable Regular
Font Size: 35 pt
Recreating Content body
Using the Type Tool, I've recreated each section in the body of the website. Many guidelines were used to ensure it is aligned according to the reference photo.
Recreating Footer
The footer by adding texts and links. I ensured that the layout and style were consistent with the original website.
Exporting Finished Work
Once finished, I exported my work in JPG and PDF format.
FINAL WEB REPLICATION 2#: RIVORA SYSTEMS
-02.jpg)
Google Drive link with Adobe Illustrator file
https://drive.google.com/drive/folders/1LuvW1Mmf0CsTKo61hKfuOAlIg4jsDer7?usp=drive_link
Feedback
Week 3
General feedback : Do research and find a website to redesign for final project. (Chosen website: https://www.thechristmastreefarm.net/
Reflections
In this exercise, I have understood the importance of visual design, ease of navigation, and how clearly information is presented. Putting myself in the users' shoes became a key part of the process. With consistent practice, I developed a sharper eye for identifying both strengths and weaknesses in web design. This exercise has also sharpened my skills in Adobe Illustrator.
Comments
Post a Comment