Label

Interactive Design: Exercise 2

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

Katherine Alexandra Sutanto / 0373585
Interactive Design / Creative Media / School of Design
Exercise 2 / Website Replication

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Exercise

4. Reflection


LECTURES

  • Week 2: 

    I watched a video shared by Mr. Shamsul on the topic of "bad doors," which introduced the concept of a Norman Door. This term describes a door whose design gives users the wrong signals about how to use it where you’re led to do the opposite of what’s actually intended. These doors often require signs to explain their function, revealing poor design.

    From this, two key concepts were highlighted:

    • Discoverability: The ability to understand what actions are possible just by looking at the interface.

    • Feedback: Clear indication of what action has taken place after interaction.

    An interface should be intuitive. In some software, like Adobe Illustrator, tutorial pop-ups might help users become familiar with the interface. However, such aids should not be necessary on a website it should be self-explanatory.

    Good design incorporates both discoverability and feedback, forming the basis of Human-Centered Design.

    Usability

    Usability refers to how effectively, efficiently, and satisfactorily a user can interact with a product in a given context. It reflects how well a design supports the needs and goals of users, without requiring prior expertise.

    A user should be able to achieve their objective intuitively, even on their first interaction.

    Principles of Usability

    1. Consistency
      A consistent interface feels familiar and is easier to learn. Design elements such as headers, footers, navigation bars, typography, and layout should be uniform across the site. When similar elements behave similarly, users can predict outcome, this is key to intuitive design.

    2. Simplicity
      Interfaces should be simple and streamlined. Reduce the number of steps required for a task, and use recognizable symbols and clear language. A simple design helps users reach their goals quickly and with less effort.

    3. Visibility
      Important features should be easy to find. The more visible an element is, the more likely users will notice and understand how to use it. Users should be able to see their options and know how to interact with them just by looking.

    4. Feedback
      Every user interaction should produce a visible and meaningful response. Feedback helps users understand whether their actions have been successful or if there’s an issue that needs correcting.

    5. Error Prevention

      Error prevention involves guiding users to avoid mistakes before they happen. This is typically done by providing warnings or confirmation prompts when a potentially harmful action is about to be taken.



INSTRUCTIONS




EXERCISE 2: WEBSITE REPLICATION

As for the second assignment, we are to replicate 2 existing main pages of the websites that we have analyzed in Exercise 1 in order to gain more understanding of the website's structure.

Instructions:
  • Follow the dimensions of the existing website, including the width and height.
  • Use software such as Photoshop or Adobe Illustrator 
  • Use any image from a stock image or a free stock icon. 
  • Find similar typefaces/fonts, you can download fonts from Google Fonts.
Website chosen from Exercise 1:

As the first step, I'd screengrab the 2 chosen websites from Exercise 1 analysis. 

Right click --> Inspect --> Run command --> Capture full size screenshot

Fig 3.1 Screenshotting the website


I'd make my way to photoshop, where I'd import the screenshotted website. After importing, I'd proceed to start the replication process by taking the background colour as the base of this website.


Fig 3.2 Importing Sequence


Next, I'd gather the sources needed to replicate the website. For the main background of the first page, I managed to find the raw picture used on the original website. As for the elements, typically the texts, I'd use a font generator to help out with the desired font.

Fig 3.3 Sources


In order to replicate the aesthetic, I'd switch the colour of the picture to red and contrast it.

Fig 3.4 Changing gradients

This is the final look of the first page.

Fig 3.5 1st Page Comparison

I did similar process to the next few pages.



Fig 3.6 2nd and 6th Page Comparison



Proceeding to the second website, I'd go on a similar process by gathering sources of graphics, background, etc.

Importing sequence:

Fig 3.7 Importing and settling background
Replicating sequence:



Fig 3.8 Replication process


FINAL OUTCOME


Fig 3.9 Warhol Arts Replication PDF


Fig 3.10 Baci Baci Replication PDF





REFLECTION

During the second week, we were introduced to this particular assignment as a brief opening to resume our knowledge regarding the website we analyzed, with that we try to learnt he elements and importance of design by replicating the design though PSD or Illustrator . At first, I tended to prioritize aesthetics over the purpose behind a design. However, this assignment has significantly broadened my perspective and deepened my understanding of design. It helped me develop a more logical approach to how a website or any platform affects its audience. By analyzing five different websites in depth, I’ve learned to empathize with users and recognize that good design goes beyond visual appeal; it must also be clear, functional, and easy to navigate. Overall, this assignment provided a strong introduction to the module and has been a valuable learning experience.

Label:

Komentar

Posting Komentar

Postingan Populer