INTERACTIVE DESIGN（Exercises 2）

 

Interactive design Exercises Web Replication & HTML

01/5/2025 - 08/05/2024 / Week 2 - Week 3

LONG BOJAING / 0375362

GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media 

Exercises  Web Replication & HTML

INSTRUCTIONS

LECTURES

1. Why Website Structure Matters
A clear and well-structured website is crucial for delivering a positive user experience. It enhances navigation, improves accessibility, supports SEO efforts, and boosts overall site performance. When users can find what they need easily, they are more likely to stay engaged.

2. Key Components of a Website

• Header
  Positioned at the top of each page, the header typically includes the site logo, main navigation links, and contact details. It serves as the primary access point to important sections of the website.

• Body
  This is the central area where the main content appears—text, images, videos, and interactive elements. A well-organized body enhances readability and keeps users interested.

• Footer
  Located at the bottom of the page, the footer often contains copyright information, supplementary links, and contact options. It acts as a logical end to the page while offering additional navigational support.

3. Organizing Content Effectively
Strong content structure is vital for usability. Use a clear hierarchy of headings (H1, H2, H3, etc.) to break content into manageable sections. Group related topics together to make the page more user-friendly and visually coherent.

4. Navigation Menus
Menus guide users through the site, so their design must be straightforward and intuitive. Use clear, concise labels for menu items. On more complex websites, dropdown menus can improve clarity and enhance navigation.

Exercises

Your task is to replicate two main pages from the websites analyzed in Exercise 1. Follow their dimensions (width and height) to understand their structure. This will help you improve design skills using software like Photoshop or Adobe Illustrator and learn web design best practices.

(https://bloomparis.tv/)

(https://akkeknitwear.com/)

To replicate a website design in Adobe Illustrator, the process begins with importing a reference image. I first captured a screenshot of the homepage and placed it into my Illustrator workspace using File > Place. This acts as a layout guide to maintain accuracy in positioning.

Next, I set up the workspace by creating a new document and adjusting the artboard size to closely match the proportions of the original website. This ensures that all design elements fit properly within the layout.

For the header section, I used the Rectangle Tool to form the background and added text elements such as the logo and navigation menu using the Text Tool. I selected a clean sans-serif font and fine-tuned the style and size to mirror the original design.

When it came to the main content, I added or recreated background visuals, then inserted text and adjusted font attributes—such as size, color, and alignment—to closely resemble the website’s actual typography and structure.

To polish the design, I utilized the Eyedropper Tool to sample colors directly from the reference image. I also refined element spacing, alignment, and applied subtle enhancements like shadows or borders to improve visual consistency.

Finally, the design was exported using File > Export > Export As, selecting a suitable file format for presentation or submission.

FEEDBACK – Week 3

During Week 3, the class focused on the technical process of replicating web pages using Adobe Illustrator. Mr. Shamsul introduced practical steps, such as capturing full-page screenshots, importing them into the AI workspace, and adjusting visual elements like fonts and backgrounds for accuracy. Students were given time to begin their replication. My initial draft was reviewed positively, and I was advised to move forward. Additionally, a second website was chosen for final project development, with feedback provided on its design suitability.

REFLECTION

This exercise offered a clear, hands-on approach to analyzing website composition through direct replication. Rebuilding the layouts of DON’T BOARD ME and MADE IN HAUS allowed me to dissect design principles in action—understanding how spacing, typography, and layout decisions influence clarity and user flow.

Working in Adobe Illustrator throughout the process helped strengthen my command of digital tools, from artboard setup to color sampling and font alignment. The activity required close attention to detail, encouraging me to think more critically about visual consistency and hierarchy.

Guidance from Mr. Shamsul was methodical and supportive, providing structure while allowing space for individual interpretation. The added task of selecting a new site for the final project introduced an opportunity to apply learned techniques in a more independent context.

Ultimately, this project was valuable not just for refining my Illustrator skills, but for deepening my awareness of what makes a website visually effective. It helped build the kind of observational precision that is essential in both UI design and brand communication.