Interactive Design / EXERCISE 2: Web Replication
.gif)
Daphne Lai Yu Cheng / 0366380
GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
EXERCISES / Website Analysis, Web Replication & HTML, CSS Document Development
Week 2 (29/4/2025):
For lecture, Mr Shamsul showed us a video about human centered design, design thinking process and talked about "Usability: Designing Products for User Satisfaction".
Figure 1.1 It's Not You. Bad doors are everywhere. by Vox
Design Thinking Process
- Observation/Empathise
- Define
- Ideate
- Prototype
- Test
- Refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
- An interface with high usability guides users through its easiest route to achieve its goal.
1. Consistency: Makes sure the website looks coherent and works harmoniously across different elements such as headers, footers, sidebars and navigation bars.
2. Simplicity: Interface should be "simple" for users. Minimal number of steps involved in a process to help users achieve their goals faster with good user experience.
3. Visibility: The more visible the element is, the more likely users will know about and how to use them.
4. Feedback: The results of any interaction to make it both visible and understand. To give users a signal that they/product have succeeded or failed at performing a task.
5. Error Prevention: Alerting users when they are making a mistake to make sure they don't make a mistake on whatever they are doing. Example: While deleting something, a pop up with "Are you sure you want to delete?" will alert users to make sure if they want to continue performing that action.
We started off by researching about way finding applications like Waze, Google Maps, Taylor's App (specifically Campus Guide > Floor Plan) and asked ChatGPT on what are the expected features in a wayfinding application. Then, we divided parts and started sketching them.
Figure 1.2 Wayfinding Application Design (29/4/2025)
We ended up with 13 pages for the wayfinding application. Overall, as someone who is taking UI/UX specialisation, it was a fun activity because we applied design thinking process and principles of usability in the paper prototype on how to create a user friendly application design.
Week 3 (6/5/2025):
For lecture, Mr Shamsul talked about "Understanding User Structure".
- Website structure is the foundation of a user friendly and accessible website.
- Header: Top section of a webpage consisting of website logo, navigation menu and contact information.
- Body: The main content area of the webpage which contains images, texts, videos and multimedia elements.
- Footer: Located at the bottom, includes copyright information and contact details.
These 3 key elements of websites are crucial in website structure to ensure and help users find information easily and keeps them engaged with the website.
Organising Content: Use headings (H1, H2, H3, etc.) to create a hierarchical structure. Logical grouping of content and clear labeling of sections for better user experience.
Navigation Menus: Use clear and concise labels for menu items. Consider using dropdown menus for complex sites.
EXERCISE 2: Web Replication & HTML, CSS Document Development (29/4/2025)
Your task is to replicate TWO (2) existing main pages of the websites that you have analyzed
in Exercise 1 to gain a better understanding of their structure. Follow
the dimensions of the existing website, including the width and
height. This exercise will help you develop your design skills
using software such as Photoshop or Adobe Illustrator and gain
insights into web design best practices.
You can use any image from a stock image or a free stock icon.
The image that you will be using does not have to be an exact
image from the original website. You may replace it with a similar
image. Focus on the layout, type style, and color style. To find
similar typefaces/fonts, you can download fonts from Google Fonts.
You may need to screengrab the website and can begin to replicate
the page.
Free image:
https://www.pexels.com/
Google Fonts link:
https://fonts.google.com/
Website Replication 1: OH Architecture
%20%207_5_2025%201_37_49%20AM.png)
Figure 2.1 Geologica (Semibold) & Coolvetica (Alternative)
I started by finding for similar fonts on Google fonts and Dafont as an alternative. Font Used: Geologica (Semibold) & Coolvetica (Alternative).
%20%207_5_2025%2012_54_51%20AM.png)
%20%207_5_2025%2012_59_45%20AM.png)
Figure 2.2 Process: Placing Guidelines
I placed guidelines for the margins then typed in the contents and placed images into the illustrator artboard after choosing the right font.
%20%208_5_2025%203_33_55%20AM.png)
Figure 2.3 Process: Tracing Elements
After completing all the image placements and contents, I used the rounded rectangle tool to create the shape of the website's interactive elements.
%20%209_5_2025%201_56_32%20AM.png)
Figure 2.4 Process: Create Outlines
Lastly, I double checked all the content on the artboard then selected all the texts and created outlines.
Figure 2.5 Website Replication 1
Website Replication 2: MONOLITH
Figure 2.6 Inclusive Sans (Semibold), Geologica (Semibold) & Coolvetica (Alternative)
I started by finding for similar fonts on Google fonts and Dafont as an alternative. Fonts Used: Inclusive Sans (Semibold), Geologica (Semibold) & Coolvetica (Alternative).
%20%207_5_2025%2012_49_44%20AM.png)
%20%207_5_2025%2012_51_25%20AM.png)
Figure 2.7 Process: Placing Guidelines
I placed guidelines for the margins then typed the contents and placed images into the illustrator artboard after choosing the right font.
%20%208_5_2025%203_33_02%20AM.png)
Figure 2.8 Process: Tracing Elements & Creating Outlines for
texts
After completing all the image placements and contents, I used the eclipse tool and pen tool to create the shape of the website's interactive elements. Next, I double checked all the content on the artboard then selected all the texts and created outlines.
%20%207_5_2025%2012_14_18%20AM.png)
%20%207_5_2025%2012_29_12%20AM.png)
Figure 2.9 Process: Tracing MONOLITH's logo
Lastly, I used the pen tool to trace MONOLITH's logo on the top and bottom of the screenshot of the website then refine the tracing by smoothening out the edges.
Just a note: This is a full capture of the website. It may appear incomplete at first glance, but that's because the homepage is designed with a looping scroll. The footer of the page transitions back into the header which creates a continuous cycle. I wanted to clarify this in case it causes any confusion during submission.
Figure 2.10 Website Replication 2
Google Drive Link: https://drive.google.com/drive/folders/14z3aqinDrNRrmVTLn0qCxmXP502LYTfG?usp=sharing
Throughout exercise 2 and practical class activities, I have learned a lot about the importance of website usability and how a website affects user experience by analysing issues such as narrow margins, inconsistencies in layout, etc. The website replication also gave me a better idea of how to create a well structured website.
My favourites were definitely the wayfinding application paper prototype. I think these activities will be helpful for me in pursuing UI/UX. These exercises were interesting, and I will definitely utilise the knowledge I have acquired in the upcoming tasks in interactive design.
Comments
Post a Comment