Labels

EXERCISE 2

Week 1-Week 6 (23/04/2025-21/05/2025)

Jennifer Michelle Hiendrawan/0374682

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

Exercise 2

TABLE OF CONTENTS 
1.Lecture
2.Instructions
3.Task
4.Reflection
LECTURE 

Week 2
Usability: Designing Products for user satisfaction 

-Usability is how effectively, efficiently, and successfully a particular can utilize a product or design in a certain situation  
-Usability is second level of UX design 

Principle of usability
1.Consistency 
-Key factor for visual elements and functionality 
-Ensures that your website looks coherent and works harmoniously across the different elements, such as headers, footers, sidebars, and navigation bars
-Consistent navigation system, page layout, and menu structure, fonts, typography, and branding in web design 
-Example: If a website button 's are using boxes, then all of the website buttons should look like that
 
Fig 1.1 Consistency Example on Adidas App (Week 2, 30/04/20256)

2.Simplicity
-To minimize the number of steps involved in a process, use symbols and terminology and to make it difficult to make mistakes 

Fig 1.2 Simplicity Example (Week 2, 30/04/20256)

3.Visibility 
-The more visible an element is, the more likely users will know about them and how to use them 

Fig 1.3 Visibility Example (Week 2, 30/04/20256)

4.Feedback 
-Communicates the result of any interaction, making it both visible and understandable
-Example: When you are on your mobile app and selected icon changes color when you in the selected screen 

Fig 1.4 Feedback Example (Week 2, 30/04/20256)

5.Error Prevention
-Alerting a user when they are making error with the intention to make it easy for them to do whatever it is without making mistake 

Fig 1.5 Error Prevention Example (Week 2, 30/04/20256)

Common usability pitfalls and how to avoid them:
-Complex Interfaces
-Confusing Navigation
-Poor Feedback
-Inadequate error handling


Week 3
Why website structure matters?
-The foundation of a user friendly and accesible website 
-Affects user experience, SEO, and overall website performance
-People with disability must also can acces it 

Three key elements
Header
-Top section
-Logo, navigation menu, and contact information
-Provide quick access to essential information 

Body
-Main content 
-Contains text, images, videos, and multimedia elements
-Proper organization increase readabiliity 

Footer
-Located at the bottom of the website
-Copyright information, links to important page, contact details, 

Organizing content
-Use heading (H1, H2, H3) to create a hierarchical structure
-Needs logical grouping of content and clear labeling of section

Navigation menus
-Helps to move around the website 
-Use clear and concise labels 
 INSTRUCTIONS


TASK

BRIEF

We must replicate 2 websites from the 5 website that already chosen for exercise 1. We must use similar font, similar color, and also similar image. This task must be done on adobe illustrator 

FIRST WEBSITE 

Original Website:
Fig 3.1 Original Website Screenshot (Week 2, 30/04/20256)


Progress: 

1.I capture full size screenshoot and then i open the screenshot on adobe illustrator. After that i use rulers to measure the size of the text and images so that the results are the same size as the original website
Fig 3.2 Progress (Week 2, 30/04/20256)

2.I started to trace the image using pen tool.

Fig 3.3 Progress (Week 2, 30/04/20256)

3.After i trace the image, i found the image on google one by one.

Fig 3.4 Progress (Week 2, 30/04/20256)

4.I also find the similar fonts and made the each of the word. It took me a long time to find the similar font 

Fig 3.5 Progress (Week 2, 30/04/20256)

5.I started to do each page one by one
Fig 3.6 Progress (Week 2, 30/04/20256)

Fig 3.7 Progress (Week 2, 30/04/20256)

Fig 3.8 Progress (Week 2, 30/04/20256)

Fig 3.9 Progress (Week 2, 30/04/20256)

Fig 3.10 Progress (Week 2, 30/04/20256)

FINAL OUTCOME 
Fig 3.11 Final Outcome (Week 2, 30/04/20256)

SECOND WEBSITE:

Original Website:
Fig 3.12 Original Website (Week 2, 30/04/20256)

Progress:
1.I capture full size screenshoot and then i open the screenshot on adobe illustrator. After that i use rulers to measure the size of the text and images so that the results are the same size as the original website
Fig 3.13 Progress (Week 2, 30/04/20256)

2.I also find the similar fonts and made the each of the word. It took me a long time to find the similar font 
Fig 3.14 Progress (Week 2, 30/04/20256)

3.I started to design each page one by one 

Fig 3.15 Progress (Week 2, 30/04/20256)

Fig 3.16 Progress (Week 2, 30/04/20256)

Fig 3.17 Progress (Week 2, 30/04/20256)


Fig 3.18 Progress (Week 2, 30/04/20256)


Fig 3.19 Progress (Week 2, 30/04/20256)


Fig 3.20 Progress (Week 2, 30/04/20256)

4.I realized that the headline for the first page doesn't match the original font, therefore i decided to make it using pen tool because i couldn't find similar font.

Fig 3.21 Progress (Week 2, 30/04/20256)

REFLECTION

Experience
I gained a lot of new experiences through redesigning the website. I became more understanding and aware of the existing structure and have an idea of how to make a website neat and consistent. When duplicating the website, I also realized how important typography is in a website depending on the type of website it is.

Observation

For me, a very high level of precision is required in duplicating a website, because I have to find the same fonts, then look for similar images, and so on, in order to make the result as similar to the original as possible.

Findings
After duplicating this website, I observed that the choice of colors for a website is very important in accordance with the theme being presented.

Labels:

Comments

Post a Comment

Popular Posts