Interactive Design: Exercise 2

on

30/04/2025 - 07/05/2025 (Week 2 - Week 3) 

Gabriella Grace Christyanti / 0371915
Interactive Design / Creative Media / School of Design 
Exercise 2 / Web Replication

TABLE OF CONTENTS 

1. Lectures
2. Instructions
3. Exercises
    3.1 Bürocratik  
    3.2 OH Architecture
4. Reflection

1. LECTURES

Usability is how effectively, efficiently, and satisfactorily users can utilize a product or design in a given context. It is the second major component of UX design and determines how intuitive and easy a digital interface is to use.

Five Key Principles of Usability

  1. Consistency

    • Ensures visual and functional harmony across the website.

    • Maintain consistent navigation, page layouts, typography, and button styles.

    • Example: All buttons should share the same shape and style throughout.

  2. Simplicity

    • Minimize steps required to complete actions.

    • Use clear terminology and recognizable symbols to reduce cognitive load.

  3. Visibility

    • Important elements should be clearly visible and easily discoverable.

    • Bright, obvious UI elements help users understand what to do.

  4. Feedback

    • Communicate the outcome of user actions clearly.

    • Example: Button color changes or confirmation messages after form submissions.

  5. Error Prevention

    • Prevent errors before they happen with confirmation prompts and guidance.

    • Example: “Are you sure you want to delete this file?” pop-up.

2. INSTRUCTIONS

3. EXERCISE 2: Web Replication 

Task Instruction:

In this exercise, we were tasked with replicating two main pages from two websites previously analyzed in Exercise 1. The goal was to deepen our understanding of layout, typography, and color scheme structure by recreating existing websites as closely as possible in Adobe Illustrator or Photoshop.

We were required to:

  • Follow the original dimensions (width and height)

  • Use similar fonts, color schemes, and layouts

  • Replace images with stock photos or icons where necessary

  • Focus on replicating visual design, not functionality (animations, transitions, etc.)

This hands-on approach allowed us to better understand how real websites are structured and designed, especially in terms of usability.

    Website chosen:

    1. Bürocratik

    Original Website Screenshot


    Process:

    • Captured a full-page screenshot of the homepage and imported it into Adobe Illustrator.

    • Resized the artboard to match the dimensions of the original site.

    • Applied rulers and guides to maintain alignment and spacing accuracy.

    • Identified and applied similar typefaces using Google Fonts and Adobe Fonts.

    • Reconstructed sections block by block, focusing on spacing, hierarchy, and white space.

    • Replaced interactive elements (e.g., videos or animations) with static image representations to simulate their visual presence.

    Typography:

    • Primary Font: Helvetica Neue (closest match to original)

    Color Palette:

    • Predominantly black and white

    FINAL OUTCOME 


    2. OH Architecture

    Original Website Screenshot


    Process:

    • Imported screenshot into Illustrator.

    • Resized artboard to match the original dimensions.

    • Used guides and rulers to align elements accurately.

    • Replaced images with similar stock images.

    • Applied black layer with low opacity to mimic transparency in the original site.

    Typography:

    • Primary Font: Helvetica Neue (closest match to original)

    Color Palette:

    • Monochrome (Black and White)

    • Earth-toned imagery

    FINAL OUTCOME 



    The adobe illustration version of the files: website replication .ai





    Comments

    Post a Comment