INTERACTIVE DESIGN, Exercises

INTERACTIVE DESIGN

Tuesday,April 23 .2024

2024.04.23/Week 1

Jia Wenbing /0365436/

Design principles/Bachelor of Design in Creative Media

Exercises 1- Web Analysis & Replicate a website

& HTML and CSS Document Development

& CSS Layout

INSTRUCTIONS

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).

Fig. 1.1 PPT Week 1 (25/04/2024)

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- Class Activity

This class activity assigns each group a scenario in which they need to design a mobile interface that solves a specific problem or meets a specific user need.
Each group was asked to outline their design ideas and draw a basic model. Each group is required to have one person act as a "user" to test the usability and usability of the prototype, and try to use the product interface to complete tasks. The teacher divided us into 5 groups.

I was assigned to the fifth group and completed this activity with the members of the 5 group.

Scenario 1: A local clothing store wants you to be responsible for a new e-commerce application.

User Needs: Consumers expect a straightforward checkout experience with clear product descriptions and photos and an easy way to browse and buy clothes online.

First let’s do some visual reference,We looked at shopping software like Taobao, Shopping.

This is our final result.

Fig. 1.1 Final result Week 2 (30/04/2024)

The second group came to our group as users to test the prototype and get some feedback from users.

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.

Fig. 3.1 PPT Week 3 (12/05/2024)

WEEK 4：

HTML Exercise: Profile Page

In this class, Mr. Shamsul mainly introduced the concept of network standards. We mainly learned the network language - HTML, and mainly explained the basic knowledge of HTML, including how to create titles, paragraph content, text content, ordered and unordered lists, and insert images. Our main task is to use the basic knowledge of HTML to create a web page. The main task is to introduce yourself, including personal photos and introduction content.

Fig. 4.1 PPT Week 4 (14/05/2024)

This week we use Notepad to convert it to an HTML web page, write code, and make a web page of our own according to the teacher's instructions.

Fig. 4.2 My Html web picture Week 4 (16/05/2024)

Fig. 4.3 Content written by me Week 4 (16/05/2024)

WEEK 5：

This course mainly talks about CSS Style Rules with HTML, including how to write page layout colors, backgrounds, text and font settings in CSS rules, and guides us to further improve the code

Fig 5.1 PPT Week 5 (21/05/2024)

Fig 5.2 Information page HTML code Week 5 (21/05/2024)

Fig 5.3 Information page HTML code Week 5 (21/05/2024)

WEEK 6

This week we learned about tables and how to enter text layout by clicking on spaces. Modify the entire text color and layout through code.

Fig. 6.1 Table creation and colors Week 6 (28/05/2024)

Fig. 6. 2 Font Changes Week 6 (28/05/2024)

WEEK 7

This lesson describes the types of CSS selectors, including basic selectors and complex selectors, and provides code examples and tutorials using different selectors to help us understand and apply CSS selectors.

WEEK 9

This lesson mainly describes how to use box layout in CSS to make the entire web page layout more standardized and beautiful.

Fig 9.1 Information page CSS code Week 9 (28/06/2024)

Fig 9.2 Information page HTML code Week 9 (28/06/2024)

Fig 9.3 The page uses box code layout Week 9 (28/06/2024)

Fig 9.4 The page uses box code layout Week 9 (28/06/2024)

WEEK 10

Explain how to create code and layout classification in the final project, and fine-tune the page layout.

WEEK 11

Start drafting of final project and present the content in the final project.

Exercise 1 - Web Analysis

This exercise requires me to select two websites for analysis from the links given by the teacher, analyze the advantages and disadvantages of the websites from layout, design, content and functions, and consider the user experience.

https://www.csswinner.com/details/wilde-weide-festival/17970

Fig. 1.1 Home page Week 1 (25/04/2024)

website goals and purpose :

This is a website about a music festival. The first page that is most clicked on is very effective in conveying its goals and objectives to users. It shows that this website is a music festival website, with a layout of music elements and the joy of the music festival. and restless atmosphere.

Fig. 1.2 Banner part Week 1 (25/04/2024)

visual design and layout of the website:

In the very beginning of the banner part, it has a very obvious centered composition, and its web browsing mouse is a very iconic sheep’s head, with very bright colors, using warm colors such as yellow and orange to express the atmosphere and atmosphere of the music fiery.

Fig. 1.3 interactive response Week 1 (25/04/2024)

You can see that its guidance includes very obvious buttons, and the interaction is clear and simple. When the mouse is moved, the music card will display the introduction content of the music and you can choose to play it. The content is clear. Let the user’s eyes focus on the picture and the overall atmosphere. However, the use of images is too mixed, especially the arrangement of drums and sheep heads. The user's first sight will be attracted instead of looking at the specific content. The form is rich in content, but the background image still gives me a noisy feeling.

Fig. 1.4 response delay Week 1 (25/04/2024)

Website functionality and usability:

The function of this website is very basic, which is to introduce music types and categories, including the contact information of the music festival and the tickets you want to buy. Being able to accurately find their official account, the clarity and organization of the entire page makes the festival theme clear. The overall performance of the website is very good, but the loading time is too long, the responsiveness is too slow, and the mouse movement is delayed and followed.

https://www.csswinner.com/details/nice/17994

Fig. 2.1 Home page Week 1 (25/04/2024)

Fig. 2.2 Interesting interactions Week 1 (25/04/2024)

website goals and purpose :

This is a very definite ice cream cake website. There are a lot of fruits and snowball elements, telling users that the ice cream is fruit-flavored ice cream, and displaying their products.

Fig. 2.3 Clear message Week 1 (25/04/2024)

Fig. 2.4 Bright colors Week 1 (25/04/2024)

visual design and layout of the website:

This website uses cooler colors such as blue, purple, purple and pink, indicating that they are cold drink products. The colors are bright and low in saturation, very cute and sweet, showing the deliciousness of the product. The overall layout is simple and cute, and the images use fruits and snowball ice cream, so that users can see your product at first glance and become interested in it. The website is fully functional, not only showing the diversity of its products, but also introducing product advantages, usability, and adding purchase channels and official accounts. The navigation is simple, because the simple composition and layout, and the buttons are very obvious, users can easily find the content they want. The interactive elements are very interesting. When the mouse slides down, the transition naturally changes color and is not stiff. At the same time, the fruit and snowball elements will I really like that it changes size based on the mouse, it's a fun interaction.

Fig. 2.5 Elemental coherence Week 1 (25/04/2024)

Website functionality and usability:

The overall quality of the website content is very coherent and relevant, all with a unified theme. The content of the website is very accurate, showing the advantages and features of its products. It is clear, well organized, and logical. From the beginning of product introduction, to product display and diversity, the final contact information is simple and clear. Make users overall relaxed and fun while browsing. The website performance is not very good, there are risks if the browser is not compatible enough, and the loading time is too long. The responsiveness is very good. It can change the color and page according to the speed of the user's mouse movement, including the change of element size, giving the user a good experience.

Findings and Recommendations:

I found that the simple design layout and clear content and button jumps will make users enjoy using it more. Most of the layouts are centered, and interesting and easy interactions can attract more users' attention and make them interested. Fast website responsiveness reduces the drain on users' patience. The website interaction is very active in terms of user experience and usage effect. At the same time, the website should be more concise and clear in theme so that users can better understand the function of the website. I suggest that the website layout should be simple, the design is interesting, the content is comprehensive, and the functions are complete. The most basic functions and contact information must be available, or product purchase channels. User experience is more important in everything. I think that only a good user experience can make users use it more Relax, this is the most important thing to consider as a designer.

Exercise 2 - Web Replication

This week I will learn to use Illustration to create a web interface and copy the web interface given by the teacher.Learn the layout structure, font style and color style of the web page.

We operate the page to download the full size of 1920x1080px on the web page, and then use the image as a template to start production.

Fig. 1.1 Production process Week 3 (12/05/2024)

Fig. 1.2 Production process Week 3 (12/05/2024)

I used reference lines to mark out all the areas and image locations, and then started working on it. This is the icon I drew myself.

Fig. 1.3 Drew icon Week 3 (12/05/2024)

Finally completed：

Fig. 1.4 Final completed 1 Week 3 (12/05/2024)

Fig. 1.5 Final completed 2 Week 3 (12/05/2024)

Exercise 3 - Creating a Recipe Card

The task is to create a recipe card using HTML and CSS layout, creating a web page containing the recipe title, images required for the page, a list of ingredients, and step-by-step cooking instructions.

Create an external CSS file named "style.css."

Apply CSS rules to style your recipe card.

Use CSS selectors to style different parts of the card.

I chose Chongqing noodles from China because I like noodles, it is spicy and delicious. After making it, I need to upload the recipe book HTML file to Neflify.

Neflify Link:

https://cerulean-pasca-73ecb3.netlify.app

Fig. 1. 1 create a recipe card Week 7 (10/06/2024)

HTML：

Fig. 1. 2 create a recipe card Week 7 (10/06/2024)

Fig. 1. 3 create a recipe card Week 7 (10/06/2024)

Fig. 1. 4 create a recipe card Week 7 (10/06/2024)

Fig. 1. 5 create a recipe card Week 7 (10/06/2024)

CSS：

Fig. 1. 6 CSS layout Week 7 (10/06/2024)

At the end, I realized I forgot to introduce the food, so I added the food introduction and layout.

Complete the display：

FEEDBACK

WEEK 2:

The purchase search bar we designed should be more detailed rather than limiting the user experience. And there should be more display interfaces inside the page instead of just a restrictive search interface. We lack too much detailed content. The page layout design should be uniform and concise. When users use the app, they should be relaxed and comfortable. When designing the app layout, pay great attention to the user experience.