Interactive Design - Exercises

 Interactive Design - Exercises

August 30.2023

28.8.2023 -  / Week 1 -
Xing Yu / 0361463 / BA of Design (HONS) in Creative Media
Interactive Design
Exercises 1 - 4

---

LECTURES

Week 1 

In the first week, we give a brief overview of this module, as well as assignments throughout the semester. Our primary goal is to perform web analysis that covers multiple aspects and needs to be done on two different websites.

Week2

In the second week, we delved into the topic "User Satisfaction: Design" and worked to deepen our understanding of product usability. We don't just talk about it, we dive into usability, focusing on how a product or design performs in a given context. This includes the effectiveness of the product, i.e., its performance in meeting specific user needs and expectations; Efficiency, that is, the operational efficiency of the product in actual use; And the degree of success, that is, the level of success and satisfaction that the product can bring in practical applications. Our research not only helps us better understand the relationship between user satisfaction and design, but also gives us more insights into product usability, helping to improve the quality and effectiveness of design and product development.

                                                         

Week3

In Week 3, we delved into Web architecture. Mr. Sham emphasized that the key to a website is not only its design, but also its function and architecture. He stressed the crucial importance of a smartly constructed website to help users find information easily and encourage them to actively engage. A good website structure enhances user experience and engagement by providing user-friendly navigation, ensuring a logical layout of information, and simplifying user interaction with the website. This theme deeply emphasizes the close relationship between the design and functionality of a website in order to achieve optimal user satisfaction.

       

Week4

In week 4, we are about to start our first project, which is very important for our learning process. Therefore, in this week's course, we are committed to learning about Web standards, gaining an in-depth understanding of how the web works, document structure, and page layout. We are not only concerned with theoretical knowledge, but also actively involved in practical operations, where HTML code becomes our focus.

In our studies, we examine the writing of HTML code in detail, including the use of tags, elements, and attributes. This process was further intensified after the lecture, where we participated in a class on working with HTML code. I completed this exercise with my own hands using notepad, while the instructor taught us how to write HTML code and gave us step-by-step instructions on how to save files, which provided a solid foundation for our future projects and practices. This week of courses has laid an important foundation for us to prepare for the upcoming project.

                                                           

Class Task - Create a profile page.

This week's class assignment requires us to create a profile web page that makes full use of what we learned in the last class. We will design a web page with the following elements: title section, personal information, interests, photos and contact information. This task will allow us to use a combination of web design skills to bring our personal information to life and improve our web production skills.

Codes 1

Codes 2

Result 1

Netlify Profile:

https://xingyu-exercise.netlify.app/

Week5

Add <h1> tags </h1>, <p> tags </p>, and so on.

                                                      

Week6

We took an in-depth look at CSS Selectors, which are considered a foundational component of CSS and one of the key tools for building web page styles and layouts. Selectors allow us to select HTML elements in different ways and apply styles to them, which provides powerful flexibility and control for web design and development. Through the in-depth study of CSS selectors, we are able to better customize and fine-tune the appearance and interaction of web pages to provide users with a better browsing experience. This is one of the things that is necessary to build modern Web interfaces, and it opens up endless possibilities for creating a wide variety of visual effects and user interfaces.

                                                      

Week7

We took an in-depth look at CSS Selectors, which are considered a foundational component of CSS and one of the key tools for building web page styles and layouts. Selectors allow us to select HTML elements in different ways and apply styles to them, which provides powerful flexibility and control for web design and development. Through the in-depth study of CSS selectors, we are able to better customize and fine-tune the appearance and interaction of web pages to provide users with a better browsing experience. This is one of the things that is necessary to build modern Web interfaces, and it opens up endless possibilities for creating a wide variety of visual effects and user interfaces.

                                                       

---

EXERCISES

In the first exercise, we were tasked with analyzing links to two specific websites. We need to scrutinize both sites, identify their strengths and weaknesses, and think about their impact on the user experience.

Task requirements:

1. Create a concise Google slideshow report to clearly present our analysis results.

2. Analysis of each website

3. Include screenshots of your website for each page or section of your report so that readers can visualize your observations.

4. Format your report clearly, including clear headings and subheadings, so that readers can easily understand your analysis.

                                       

Exercise 2 - Replicating Website

Our task was to replicate two existing home page sites in order to study their layout structure in depth. In this process, we need to ensure that the dimensions of these sites are accurately followed, including width and height, in order to get the most realistic restoration possible. In this way, we will be able to understand their design philosophy and user experience more comprehensively, providing valuable reference and inspiration for our projects.

Process 1

Process2

Original site

Copied Website

Exercise 3 - HTML and CSS 

HTML file (recipe.html) :

Recipe titles: Use the <h1> or <h2> tags to set an appealing title that stands out at the top of the page.

Necessary images: Embed images using <img> tags so that readers can visualize the food being cooked.

Ingredients List: Use an unordered list (<ul>) or an ordered list (<ol>) to list the required ingredients, using a <li> label for each item.

Step-by-step cooking instructions: Use paragraphs (<p>) or numbered ordered lists (<ol>) to provide detailed cooking instructions, and each step should be clear and clear.

External CSS file (style.css) :

In external CSS files, you can use CSS rules to spruce up the look of recipe cards. Here are some sample rules, but you can customize them as needed:

Set the page background color, font color, border, etc.

Set the font size and color of the title.

Adjust the size and margins of the image to ensure that it appears centered in the recipe card.

Specify the style of the ingredients list, such as font style, symbol ICONS, etc.

Define the appearance of step-by-step cooking instructions, such as text formatting, numbering styles, spacing, etc.

Be sure to link to an external CSS file in your HTML file to apply these rules. In the header of the HTML file, use &lt; link&gt; The label introduces the CSS file as follows:

1. 
   

html
<!DOCTYPE html>
<html>
<head>
    <title>您的食谱标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- 在这里插入食谱内容 -->
</body>
</html>

By creating a beautiful HTML recipe page with corresponding external CSS files, you can make the recipe more appealing while providing clear instructions and visual elements to help readers understand and make your cuisine.

process

Recipe Card

Final Recipe Card 
https://6529abc034035d26aea43fc6--lucent-pastelito-4e55bf.netlify.app/

Final Recipe Card 

Reflection

In website design, the intuitiveness and ease of navigation directly affect the user's overall experience. A clear, intuitive navigation structure not only enables visitors to quickly understand the organizational structure of the site, but also effectively guides them to the information they need. In navigation design, reasonable classification, clear labels and intuitive navigation paths are all key factors to ensure that users can reach their goals quickly and easily.

In addition, considering the variety of different devices and screen sizes, responsive design becomes particularly critical. By analyzing how websites are presented on a variety of devices, including desktops, tablets, and mobile phones, I've highlighted the need to ensure that websites are perfectly presented on different screen sizes.