INTERACTIVE DESIGN EXERCISE 2

on

  INTERACTIVE DESIGN

|| Leong Hui Xuan 0365793
|| /04/2025- /04/2025 (Week   - Week  )
|| Bachelor of Design in Creative Media 
|| Exercise 2
Table of Content
INSTRUCTION


LECTURES

week 2: Usability: Designing Products for User Satisfaction

Usability
- Effectively, efficiantly, and successfully utilise a product / design
- User friendly when first encounter
- High availability interface

Principle of Usability
  1. Consistency
  2. Simplicity
  3. Visibility
  4. Feedback
  5. Error Prevention
Figure 1.0, Addidas app 
Consistency
- key factor in web design for visual elements and functionality.
- Intuitive design
- Include navigation system, page layout and menu structure, fonts and typography and branding.
- Example: Adidas Mobile App / Strava Mobile App / Air BNB Mobile App / ZUS cofee


Figure 1.1, Google Map 
Sinplicity
- Simple for users
- Minimize the number of steps involved in a process
- Use symbols and terminology


Figure 1.2, Taylor's Mobile App 
Visibility
- The more visible the elements, the more likely users are understand them and know how to use them.


Figure 1.3, Pop out window when dowloading image
Feedback
- Communicates the result of interaction
- Give user a signal 


Figure 1.4, Shopee app 
Error Prevention
- Alert users when they make mistakes


Common Usability Pitfalls
  • Complex interfaces
  • Confusing navigation
  • Poor feedback
  • Inadequate error handing




EXERCISE 
In this exercise, we need to replicate 2 existing main pages of the websites. By following the dimensions of the existing website, including width and height, using Photoshop or Adobe Illustrator. 

We need to capture the full size image of the website and make it as a template in Adobe Illustrator. Then, we can follow the layout, typography and text to replicate the website.


Website 1: DUCHATEAU

Research for Fonts and Photos: 

Figure 1.5, Fonts and photos that the DUCHATEAU website used
The website use both serif, sans-serif fonts and soft beige white photos, then I started find the similiar fonts and photos in Google Fonts and Pexels. 


Figure 1.6, Fonts that similar with the DUCHATEAU website 
I found some similar fonts in Google Fonts and decided to used them as the fonts for the copy site.

Figure 1.7, Photos that similar with the DUCHATEAU website 
These are the photos that I found in Pexels and used them as the photos for the copy site.


Process: 

Figure 1.8, First step of replicate DUCHATEAU website 
First, capture the full size image of the website, then place as template in Adobe Illustrator and rename the layer to "Template."

Figure 1.9, Second step of replicate DUCHATEAU website 
Next, I placed similar photos I found in Pixels and typography using similar fonts in the same location.


Figure 1.10, Third step of replicate DUCHATEAU website 
Lastly, I replaced the icon image and placed the colour blocks according to the template.




Website 2: OH Architecture

Research for Fonts and Photos: 

Figure 2.1, The fonts and photos that OH Architecture website used
This website use different type of sans-serif fonts and house photos with plants or grass and with a sky background.

Figure 2.2, Fonts that similar with OH Architecture website

The similar fonts that I found in Google fonts are DM Sans, Myraid Variable Concept, and Arial.

Figure 2.3, Photos that similar with OH Architecture website used 
These are the similar photos that I found to replace the original photos in Pexels.

Process: 


Figure 2.4, First step of replicate the OH Architecture website
Same as website 1, place the image as template then I stated to replace the photos and typography.
Figure 2.5, Second step of replicate the OH Architecture website

Replace with similar photos and fonts



FINAL OUTCOME

DUCHATEAU Website Replicate A.I File:


OH Architecture Website Replicate A.I File:


REFLECTION 

Experience
In this exercise, we need to replicate the website that we choose through similar photos and fonts, but the layout and dimension of the website and text need to be followed. I choose the OH Architecture website and the DUCHATEAU website as the website that replicate the template. After choosing websites, we need to find the similar fonts and photos in Google Fonts and Pexels. These two website are both about architecture, furniture and interior design, so when I find the images in Pexels, I straight away find all the relevant photos for both website at one time. 

Observation
While working on this exercise, I noticed how clean and minimal both websites were. The design is very modern, with lots of white space, balanced layouts, and simple fonts. The images played a huge role in the overall look, often being full-screen or large and high quality. It is not hard to find related images on Pexels because the theme overlapped, but finding the similar photos in colour, elements and angle still take time for me.

Findings
What I realised through this exercise is that replicating a website is not just about finding a similar image or font; it is about understanding the flow and structure of the design. Small details like spacing, text size, and alignment affect how close the replicate feels to the original. Overall, this exercise helped me to know more about the details and the web layout.







Comments

Post a Comment