Interactive Design | Exercises 2 : Replicate Websites

-
01.05.25 - 07.05.25 / week 2 - week 3
Subhana Salim / 0375936 
Interactive Design/ Bachelor's of Design (Honours) in Creative Media / Taylor's University 
Exercises 2 : Replicate Websites

TABLE OF CONTENTS

1. Lectures
2. Instructions  
3. Final Submission
4. Process
5. Reflection


LECTURES

WEEK 2 :

Lecture :-  Usability : Designing Products for User Satisfaction.

1. Usability 
Refers to how effectively, efficiently and successfully a particular user can utilize a product or design in a certain situation. 

2. Principles of usability :-

a. Consistency

b. Simplicity

c. Visibility

d. Feedback

e. Error Prevention


3. Consistency
Consistency ensures that your website looks coherent and works harmoniously across all its different elements. It includes consistent navigation system, page layout and menu structure, fonts, typography and branding in web design.

4. Simplicity
Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible and make it difficult to make mistakes.

5. Visibility
Visibility is the basic principle that the more visible and element is, the more likely user will know about them and how to use them. User should know just by looking at an interface, what their options are and how to access them.

6. Feedback
Feedback communicates the result of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task

7. Error Prevention
Involves alerting a user when they're making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. 

8. Common Usability Pitfalls and How to Avoid them

  • Complex Interface

  • Confusing Navigation

  • Poor Feedback

  • Inadequate error handling



INSTRUCTIONS

Exercises 
We are required to do some exercises to get us started with this module and familiarize
ourselves with web designing. There are 2 exercises under this section.

1. Web Analysis - This exercise requires us to analyze 5 already existing website and identify areas for improvement.

2. Replicate Websites - This exercise requires us to replicate 2 of these websites using Photoshop, Illustrator or Figma.


EXCERCISES 2 : REPLICATE WEBSITES
FINAL SUBMISSION

Final Google Drive with all the files

Website 1 - Hook (Original)



Website 2 - Hook (Final Website Replication)

Figure 1.1 Final Website Replication - Hook

Website 2- KODE (Original)




Website 2- KODE (Website Replication)

Figure 1.2 Final Website Replication - Kode



PROCESS

For exercise 2, we had to replicate 2 from the 5 websites we analyzed. For the website replication I went with this 2 websites. 
  1. Website 1 :- Hook 

  2. Website 2 :- KODE


WEBSITE 1 :- Hook (Process)

I began by screen capturing capturing the entire site and imported the files into Adobe Illustrator.

I began the editing phase by making rectangle white and black shapes according to the original layout using the rectangular shape too

Then I went into https://www.pexels.com/ which is a website recommended by Mr. Shamsul for gathering free images. I downloaded images that were similar to the original one in this website. 

Then I began importing the images into the file and aligned them according to the original layout

Then I began adding the titles headings in different sections. I used Myriad Variable Concept as my font for this website replication (regular and semibold width)

Finally I finished it by adding in the minor text details. After aligning everything to place, I went back in and edited the size of the text to make it more consistent.


WEBSITE 2 :- KODE (Process)
 For website 2, I started with screen capturing the website and importing it into the Adobe Illustrator. I begin downloading related images to the ones in the original website. 

I first started with adding the black and white rectangle wherever is necessary

Then I began adding the relevant images that I got from pexels

Then I added the text using the Font Source Sans Variable (Regular, Bold, Bold Italic) for the text

Then I added the website heading which I traced using the pen tool and added a subtle gradient



REFLECTIONS

This exercise helped me better understand the visual layout and hierarchy of present day websites. I mainly found several consistencies while recreating the two websites such as using blacks and whites, sans serif typeface, lots of white space, big size titles, rectangular shaped images, etc. I also spent a decent amount of time trying the match the font and images to the original as possible. Finding images similar to the original in pixels was hard as it had a limited image base. I had to use my word choices carefully and scroll a lot to find similar images. 

Overall this assignment helped me strengthen my skills in visual analysis and digital replication. It gave me insight into how designers balance creativity with functionality. This exercise is a good step to making assignments in the later semester. 

Comments

Post a Comment