Interactive Design - Exercise 2 - Web Replication
2/4/2025 - 27/5/2024 / Week 1 - Week 6
WangJiheng / 0378904
Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University
Task 1: Exercises 2 Web Replication
1.INSTRUCTIONS
2.LECTURES
Core Dimensions of Usability
Usability revolves around three critical pillars: effectiveness, ensuring users complete tasks accurately; efficiency, minimizing the time and cognitive effort required; and satisfaction, fostering a sense of confidence and ease throughout the interaction. These elements work together to create experiences where users feel supported, not hindered, by the design.
Fundamental Principles for User-Centric Design
- Consistency builds user intuition by keeping visual elements (buttons, fonts, navigation) uniform across interfaces (e.g., Adidas app’s consistent button styles and menus). Inconsistencies confuse users relying on learned patterns (e.g., a changed "back" arrow).
- Simplicity streamlines tasks with clear terms, fewer steps, and focus on essentials (e.g., Airbnb’s intuitive booking workflow with date/guest selection and payments, free of distractions).
- Visibility ensures key actions (e.g., "Book Now") stand out via color, size, or placement (e.g., Strava’s prominent activity icons on the home screen). Invisible features go unused as users can’t engage with what they can’t see.
- Feedback confirms actions (e.g., button color changes, "Added to Cart" pop-ups), reassuring users and reducing uncertainty (e.g., e-commerce notifications boost confidence).
- Error Prevention proactively reduces mistakes through real-time validation or mandatory prompts (e.g., Airbnb requiring host messages before booking) and clear error guidance to ease frustration.
Core Dimensions of Usability
Usability revolves around three critical pillars: effectiveness, ensuring users complete tasks accurately; efficiency, minimizing the time and cognitive effort required; and satisfaction, fostering a sense of confidence and ease throughout the interaction. These elements work together to create experiences where users feel supported, not hindered, by the design.
Fundamental Principles for User-Centric Design
- Consistency builds user intuition by keeping visual elements (buttons, fonts, navigation) uniform across interfaces (e.g., Adidas app’s consistent button styles and menus). Inconsistencies confuse users relying on learned patterns (e.g., a changed "back" arrow).
- Simplicity streamlines tasks with clear terms, fewer steps, and focus on essentials (e.g., Airbnb’s intuitive booking workflow with date/guest selection and payments, free of distractions).
- Visibility ensures key actions (e.g., "Book Now") stand out via color, size, or placement (e.g., Strava’s prominent activity icons on the home screen). Invisible features go unused as users can’t engage with what they can’t see.
- Feedback confirms actions (e.g., button color changes, "Added to Cart" pop-ups), reassuring users and reducing uncertainty (e.g., e-commerce notifications boost confidence).
- Error Prevention proactively reduces mistakes through real-time validation or mandatory prompts (e.g., Airbnb requiring host messages before booking) and clear error guidance to ease frustration.
3. Exercises 2 Web Replication
This exercise requires us to select two web page homepages from the websites analyzed in Exercise 1 and replicate them (that is, redesign them).
By replicating the structure, layout, fonts, colors, etc. of the web pages, we can enhance our understanding and practical skills in web design. You can use Photoshop or Adobe Illustrator to complete this task. There is no need to use exactly the same images, but you should try your best to restore the overall style and layout.
The website I have chosen is Morningtrain (listed on the CSS Winner website):
- Website Name: Morningtrain
- Original URL: https://www.csswinner.com/profile/morningtrain/2849
- Website Style: Modern, simple, with a dark background paired with elements of high saturation, and it has a strong brand personality.
1. Page Screenshot and Analysis
I first took a full-page screenshot of the homepage of Morningtrain, and then conducted a simple analysis of the entire page. It can be roughly divided into four areas:
- Top Navigation Bar (Logo and Menu)
- Hero Area (Main Visual + A Very Eye-catching Brand Slogan)
- Service Display Section (Multiple Small Modules)
- Footer Area (Contact Information, Social Media, etc.)
The First Attempt: Using the Developer Tools
I opened the developer tools and attempted to use the Capture Screenshot function to take a screenshot of the entire web page. However, during the operation, I didn't get the complete screenshot I wanted as expected. There were problems with the page display, and I spent a long time trying to solve it but in vain.
The Second Attempt: Using the GoFullPage Plugin
Then, I installed the GoFullPage plugin. This plugin is very simple. All I needed to do was click on the plugin icon, and the plugin would automatically scroll through the web page and take a screenshot of the entire page. After the screenshot was completed, the file was directly downloaded to my computer, and it was clear and complete.
This font is quite similar to that of the original web page I selected. Therefore, I chose this font and downloaded it.
Prototype Design
Comments
Post a Comment