Interaction Design - Exercise (Web Page Analysis)
April 24, 2024 - (Week 1 - Week 6)
linchenyi/ 0367008
Interaction Design/Bachelor of Design in Creative Media
Task 1: Practice
1.LECTURE
Week 1
A summary of the first week of classes is as follows:
Mr. Shamsul emphasized the importance of usability in design during this week’s session. Usability refers to how users can use a product effectively and efficiently, and it is a key component of user experience design (UX).
Week 1 Slides:
During the lecture, Mr. Shamsul introduced several key usability principles：
1） Consistency:
- Consistency is a key factor in visual elements and functionality in web design, ensuring that the website looks coherent and that individual elements work harmoniously.
- Consistency includes aspects such as navigation system, page layout, menu structure, fonts and typography.
- Consistent design enables users to recognize and learn patterns, and users will become frustrated if similar elements do not produce similar output.
2）Simple:
- The interface should be as simple as possible, minimizing the number of steps and using obvious symbols and terminology.
- Simple design helps users achieve their goals faster and more efficiently and provides a good user experience.
3） Visibility:
- Visibility means that the more visible an element is, the more likely users are to understand and use them.
- Users should know what their options are and how to access them just by looking at the interface.
4） Feedback:
- Feedback communicates the results of any interaction, making it both visible and easy to understand.
- Feedback indicates to the user whether a task was completed successfully, such as navigation items changing color or loading a submenu when the mouse is hovered over them.
5） Error prevention:
- Error prevention is about making it easy for users to do what they are doing without making mistakes.
- Avoid common usability pitfalls like complex interfaces, confusing navigation, poor feedback, and insufficient error handling.
- By following these principles, designers can create websites with a great user experience and avoid common usability issues.
Week 2
Group Activity: Prototyping
In the second week of lectures, we learned about website usability. We got four through the scenario of prototyping a website interface to solve a specific problem or meet a user's need. Then, after each team completed the interface design, the other teams tested the website for usability.
Fig 2.1 Design a new e-commerce application for a local clothing store，week1
Fig 2.2 Group Activity: Apparel Website Design Prototype, Week 2
Fig 2.2 Group Activity: Apparel Website Design Prototype, Week 2
Week 3:
Website Structure
Course Overview
This week, Mr. Shamsul teaches us about the importance of website structure. Good website structure not only helps improve user experience, but also has a significant impact on search engine optimization (SEO).
main elements
Header
Function: The header provides users with main navigation and important information, and often includes the website logo, navigation menu, and search bar.
Why it matters: A clear and easy-to-navigate title can significantly improve the user experience, allowing users to quickly find the information they need.
Body
Function: The body contains the main content of the website, including text, images, videos and other media.
Organization: Content needs to be organized appropriately to ensure the information is clear, readable, and easy to understand. This can be achieved through the use of paragraphs, subheadings, lists, and multimedia elements.
Why it matters: Good content organization not only improves the reading experience for users, but also makes it easier for search engines to crawl and index your site's content.
Footer
Functionality: The footer is located at the bottom of a web page and typically contains copyright information, privacy policy, contact us, and more navigation options (such as social media links).
Importance: The footer provides users with additional navigation help and information, enhancing the integrity and usability of the website.
Through this week's study, we further understood the basic elements of website structure and its key role in improving user experience and SEO. Mr. Shamsul’s explanation helped us realize that a good website structure is not only the optimization of page layout, but also the basis for improving overall website performance and user satisfaction.
Week 3 Slides
Week 4：
HTML Exercise: Profile Page
This week’s learning summary
This week, Mr. Shamsul introduces us to the concept of web standards, covering the timeline of the web's evolution and how a website's software and hardware work. Although we already touched upon the basic structure of web pages last week, this lecture helps us understand these concepts more fully.
We focused on learning the universal web language - HTML. Mr. Shamsul walked us through the basics of HTML, including how to create headings, paragraphs, bold text, italic text, ordered and unordered lists, and how to insert images.
In class practice, we applied the basics of HTML we learned. Mr. Shamsul takes us through the actual coding in a text editor to create a basic HTML page. We renamed these files to .html files and uploaded them to the Netlify platform. Our main task is to introduce ourselves and include a personal picture on the page. This process not only consolidated our understanding of HTML syntax, but also allowed us to experience the complete process of deploying local files to a web platform.
Week 4 Slides
Fig 4.1 Screenshot of my HTML code，Week 4
Introduce yourself using HTML PPT：
Nitlify：
Week 5
Use DW to further improve the curriculum
Fig 5.1Information page HTML code ，Week 5
Fig 5.2 Information page HTML code ，Week 5
file:///Users/linchenyi/Desktop/HTML%20Lesson/index%E6%9C%80%E7%BB%88.html
2. INSTRUCTIONS
Week 1 ：No feedback
2. INSTRUCTIONS
2. Exercise 1: Network Analysis
Week 1 | Exercise 1
We need to select two (2) websites from the given links. Carefully examine the website you choose, paying attention to its design, layout, content, and functionality. Identify the strengths and weaknesses of your website and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What should be included in the analysis:
Consider the goals and objectives of the website and evaluate whether they are effectively communicated to users.
Evaluate the website's visual design and layout, including use of color, typography, and images. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of website content, including its accuracy, clarity and organization. Consider the performance of your website, including load times, responsiveness, and compatibility with different devices and browsers.
Provide link
Option 1: https://www.csswinner.com/winners
Option 2: https://www.awwwwards.com/
Option 3: https://www.webbyawards.com/
Analyze from the following points：
1.Goals and objectives
2.Visual design and layout
3.Website functionality and usability
4.Quality and relevance of website content
5.Website performance
The Vendredi Society website is an online platform showcasing fashion brands, aiming to showcase high-quality clothing and accessories products to users and convey the brand's lifestyle and values.
First of all, we can see that the goals and communication methods of the Vendredi Society website interface are very clear. Through the overall design, pictures and language style, the website successfully conveys the brand's positioning and style and attracts the attention of the target audience. Its main goal is to display and sell high-quality fashion products and show users the brand's lifestyle. The website effectively communicates the brand's positioning and style through visuals and language style, allowing each page to clearly display its products and brand image.
Fig 1.1 Text layout，week1
Secondly, in terms of visual design and layout, the Vendredi Society website uses simple and bright colors, mainly white, black and light gray, in line with the brand image. The page layout is concise and clear, and the products and content are presented in a clear way without too many distracting elements. High-quality images showcase the products, providing users with an intuitive shopping experience.
Furthermore, in terms of functionality and usability, the Vendredi Society website provides a clear navigation menu so that users can easily find the required pages and product categories. The website also provides shopping cart and checkout functions so that users can easily select and purchase products.
Fig 1.2 Navigation menu，week1
In addition, the content quality and relevance of the website are fully guaranteed. Product descriptions and information are accurate and clear, providing users with sufficient shopping reference. The content is clearly formatted and the text and pictures are combined so that users can clearly understand the product information. The products are clearly classified and users can easily find the products they need according to their needs.
Fig 1.3 Simple interface, product information，week1
Finally, in terms of website performance, the Vendredi Society website loads quickly and users do not experience long waits for pages to load. . At the same time, the website is well compatible on different browsers and operating systems, ensuring users a good experience in different environments.
In summary, the Vendredi Society website provides users with a pleasant shopping experience through its well-designed interface, high-quality content and excellent performance, successfully conveying the brand's high-end image and values.
https://madeinhaus.com/
Made in Haus website research report
The Made in Haus website is an online platform focused on home furnishings, committed to providing high-quality products and conveying the brand's design philosophy and lifestyle.
First of all, the goal of the Made in Haus website is to display and sell high-quality homewares and convey the brand's design philosophy and lifestyle. Through concise and clear design and clear language, the website successfully conveys the brand's positioning and style and attracts the attention of the target audience. The website effectively conveys the brand's positioning and style through visual effects and language style, so that each page clearly displays its products and brand image.
Secondly, in terms of visual design and layout, the Made in Haus website adopts a modern and simple design style, with the main color being white, which is consistent with the brand image. The page layout is concise and clear, and the products and content are displayed in a clear way, allowing users to easily browse and understand the products. High-quality images showcase product details and features, providing users with an intuitive shopping experience while enhancing brand appeal.
Fig 1.4 Color matching style，week1
Secondly, in terms of functionality and usability, the Made in Haus website provides a clear navigation menu so that users can easily find the required pages and product categories. The website also provides shopping cart and checkout functions so that users can easily select and purchase products. At the same time, the website also provides a simple and intuitive payment process, which improves the user's shopping experience.
Fig 1.5 Text design，week1
Fig 1.6 Modern minimalist design typography style，week1
Furthermore, in terms of content quality and relevance, product descriptions are accurate and clear, providing users with sufficient shopping reference. Each product page has detailed information and pictures, allowing users to fully understand the product's features and benefits. The products are clearly classified and users can easily find the products they need according to their needs.
Finally, in terms of website performance, the Made in Haus website loads quickly and users can quickly access the pages and information they need. The website has good responsiveness on different devices, and users can browse the website smoothly on different devices such as desktops, tablets, and mobile phones. The website has good compatibility on different browsers and operating systems, ensuring users a good experience in different environments.
3. Exercise 2: Website Copy
Our assignment this week is to copy two (2) existing homepages of the website given in the link below to better understand its structure. Choose any two from the given links. Follow the dimensions of your existing website in terms of width and height.
Free image:
https://www.pexels.com/
Google Fonts link:
https://fonts.google.com/
https://www.pexels.com/
Google Fonts link:
https://fonts.google.com/
Website copy 1: https://www.morganstanley.com/
First, I imported a screenshot of the https://www.morganstanley.com/ landing page (check - Run command - Search screen - Capture full size) into Adobe Illustrator.
The font used by this website. I couldn't find the font in Google Fonts, so I replaced it with the Myriad Variable Concept font. The text is arranged according to its position and displayed in the outline view.
Below is a comparison between the original website and the copied website, as well as a high-level view of the final results.
Fig 2.1 Screenshot of the original website, web page copy process，week3
Final result of website copy 1
Fig 2.2 Final result of website copy 1: Morganstanley PDF, Week 3
Website copy 2: https://banditrunning.com/
Fonts used on this website. I couldn't find the font in Google Fonts, so I replaced it with a similar Nunito Sans font. The text is arranged according to its position and displayed in the outline view.
Below is a comparison between the original and copied sites, as well as a high-level view of the final results.
Fig 2.3 Screenshot of the original website, web page copy process, week3
Final result of website copy 2
Fig 2.4 Final result of website copy 2: Banditrunning PDF, Week 3
4. Exercise 3: CSS Layout - Recipe Card
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from the link below.
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Use your creativity to make the page look appealing and interesting
I chose the Italian grandma's tiramisu
Fig 3.1 Production process pictures,Week 7
Exercise 3: Making Italian Grandma's Tiramisu CSS Layout - Final result of Recipe Card
Css ：
Html：
5. FEEDBACK
Week 1 ：No feedback
Week 2 ：Feedback on classroom group assignments: The website experience is convenient.
6. REFLECTION
The articles provided in class can be used as further reading to gain a more detailed understanding of multiple key elements in web design, with detailed explanations of their design and functions:
- Header: Located at the top of the web page, it is the first area that users see after entering the website. The header contains core navigation and website identity and is the main navigation element in the website layout.
- Headings: May include branding, call-to-action buttons, links to different website content categories, social media links, contact information, etc. Titles are an important element in user interfaces, providing key information and navigation options.
- CTA Button: A call-to-action button is designed to encourage users to take a specific action, such as purchasing, contacting, or subscribing. They are often designed to grab users' attention so they can take action quickly.
- Hero section: The above-the-fold area of a webpage that often contains visually appealing elements such as a hero image, a slider, eye-catching fonts, or a video. The hero section quickly grabs the user’s attention and conveys the desired message.
- Footer: Located at the bottom of a web page, it marks the end of the web page. Footers typically include branding, supporting links, contact information, social media links, etc., providing additional navigation and information fields.
- Slider: Used to display different products, offers or information. Although sliders are attractive and interactive, there are also some controversies, such as the possible impact on page speed and usability.
- Search bar: The internal search feature allows users to browse content within the site and displays relevant content based on search queries, giving users a way to quickly find the information they need.
- Menu: As one of the core navigation elements of a website, menus can appear in different locations on the page, such as horizontal menus, sidebar menus, drop-down menus, etc. Menu design should be based on user research and analysis to provide the best user experience and navigation options.
- Breadcrumb navigation: As a secondary navigation tool, breadcrumb navigation helps users understand where they are on the website and can more easily adapt to the website structure, improving the website's find ability and navigation efficiency.
- Form: A form is an element used for interaction between a user and a system or server, usually to collect information entered by the user. Designers need to ensure that forms are easy to use, reduce user steps, and provide clear visual cues and support.
- Card: As a layout element, cards are used to visualize and organize similar data or content. Cards are usually arranged in a grid format, with each card looking like a separate section, helping users quickly browse and understand the content.
- Video: Video has become an effective tool to attract users’ attention and convey information. Designers need to consider the impact of video on web page load times, user experience, and accessibility, and ensure that video content captures and retains users’ attention.
- Progress Indicator: A progress indicator helps users understand the overall situation of the current amount of information or set of operations, especially suitable for long reading articles, complex tables, or multi-step processes.
- Favicon: A favicon is a symbol that represents a product or brand in a browser's URL line and bookmark tabs, helping users quickly identify and access a website.
- Tag: Tag is a secondary navigation element used to jump directly to a specific content category. It usually appears in blogs and content websites and provides additional content classification to support navigation.
评论
发表评论