Interactive Design / Exercises 1 & 2 & 3 & 4

on

23/9/2024--14/10/2024 (W1-W4)

LIU YITONG (0370907)

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Exercise


INSTRUCTION



LECTURE

Week2 Usability: Designing Products for User Satisfaction

· Consistency
Consistency is a key factor in web design for both visual elements and functionality. 
It includes consistent navigation system,  page layout and menu structure, fonts and typography and branding in web design.

· Simplicity
The principle that user interfaces should be “simple” for users.

· Visibility
Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them.

· Feedback
Feedback communicates the results of any interaction, making it both visible and understandable. 

· Error Prevention
It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. 


Week 3 | Understanding Website Structure

· The Three Key Elements
Websites are typically divided into three key elements: Header，Body，Footer.

· Header
The header is the top section of a webpage.
It usually contains the website's logo, navigation menu, and contact information.
The header provides users with quick access to essential information and navigation.

· Body
The body is the main content area of a webpage.
It contains text, images, videos, and other multimedia elements.
Proper organization of content within the body is crucial for readability.

· Footer
The footer is located at the bottom of a webpage.It typically includes copyright information, links to important pages, and contact details.
The footer provides closure to the webpage and additional navigation options.

· Navigation Menus
Navigation menus help users move around the website.
Use clear and concise labels for menu items.
Consider using dropdown menus for complex sites.

Week 4 | INTERACTIVE DESIGN WEB STANDARDS

WEB STANDARDS
· The W3C has defined dozens of standards, including the standard markup languages we use to build websites. The standard markup languages we'll be using in this course are:  HTML，CSS.

HOW THE WEB WORK
1. When you connect to the web, you do so via an ISP. You type a domain name or web address into your browser to visit a site.
2.Your computer contacts a network of servers called DNS servers. These act like phone book; they tell your computer the IP address associated with the requested domain name.
3. The unique number that the DNS server returns to your computer allows your
browser to contact the web server that hosts the website you requested. 
4. The web server then sends the page you requested back to your web browser.

STRUCTURE OF A WEB PAGE
• Understanding structure
• Learning about markup
• Tags and elements

HTML DESCRIBES THE STRUCTURE OF PAGES
The HTML code is made up of characters that live inside angled brackets <> These are called HTML elements
Elements are usually made up of two tags: an opening tag and a closing tag.
Fig.1.0 The example of opening tag and a closing tag

ATTRIBUTES TELL US MORE ABOUT THE ELEMENTS
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
Fig.1.1 The example of attribute

BODY, HEAD & TITLE
<body>
You met the <body> element in the first example created. Everything inside this element is shown inside the main browser window.
<head>
Before the <body> element you will often see a <head> element. This contain information about the page. You will usually find a <title> element inside the <head> element.
<title>
The contents of the <title> element are either shown in the top of the browser (tab bar)

OTHER ELEMENTS
Fig.1.2 Other Elements
· HEADINGS
HTML has six levels of headings (<h1> main headings <h2> subheadings If there are further sections under the subheadings then the <h3> element is used and so on..)
· PARAGRAPH
Bold:By enclosing words in the tags <b> and </b> can make characters appear bold.
Italic:By enclosing words in the tags <i> and </i> can make characters appear italic.
· ORDERED LIST
1. Ordered list are lists where each item in the list is numbered. 
The ordered list is created with the <ol> element.
2. Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)
· UNORDERED LIST
1. The unordered list is created with the <ul> element
2. Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)
· NESTED LISTS
You can put a second list inside an <li> element to create a sub-list or nested list.
Browsers display nested lists indented further that the parent list.
In nested unordered lists, the browser will usually change the style of the bullet too.

WRITING LINKS
Fig.1.3 Weiting Links
Fig.1.4 The link that I wrote in class（W4）
Links are created using the <a> element User can click on anything between the opening <a> tag and the closing </a> tag.

ADDING IMAGE
Fig.1.4 ADDING IMAGE
It's worth mentioning that the <img> tag itself is void of content and is solely comprised of attributes, eliminating the need for a closing tag.
When using the <img> tag, two essential attributes must be included:
src - This attribute specifies the path to the image.
alt - This attribute provides alternative text for the image, which is essential for accessibility
Title - This attribute provides tool tip of the image in the browser

Class exercise
Fig.1.5 Class exercise 1
Fig.1.6  Class exercise2

EXERCISE

Exercise 1: Web Analysis

Week2
Group Activity
Fig.2.0 Group Activity
Link: https://www.figma.com/design/tgzpFoIntlHpsWaUDBeoJT/Untitled?node-id=0-1&t=0rRHypiXqgEnzgVk-1


Fig.2.1.Main interface
· Purpose & Goals: The SOGAI website aims to showcase the role of AI in art and culture, and provides a brief overview of its evolution. The artistic creation potential of AI is introduced, and ethical issues are also addressed.
Fig.2.2.Website screenshot 1
· Design & Layout: The minimalist design is visually appealing, and the high-saturation yellow and low-saturation green color combinations are readable. The layout is simple and easy to navigate.I especially like the scanning line effect it uses in artwork pictures, and the interface color matching looks very retro art.And there are many examples of famous AI art and human art on the website, which are easy to view and comfortable to typeset.
· Content Quality: The content is relevant and clearly written, providing a deep analysis of the impact of generative artificial intelligence on art. However, the site could benefit from more detailed case studies and practical applications to appeal to a wider audience. Information is well organised, although some areas feel under-developed, particularly in the area of ethical debate.
· Functionality & Usability: Navigation is intuitive, menus and chapter labels are clear. However, interactive elements such as forms or social share buttons are somewhat limited, reducing users' ability to engage deeply with the content.
· Performance: The site loads quickly, and it should be responsive on both mobile and desktop devices. However, typographic design on mobile devices is not as comfortable as on desktop devices.
· Recommendations: 1. Expansion of case studies and practical Ai art applications to deepen user understanding. 2. The button to view more examples should not be placed in the center of the screen, which feels easier to find but also less aesthetically pleasing.


Fig.2.3.Website screenshot 2
· Purpose & Goals: The aim of Zentry is to create a portal into the "PlayEconomy" that combines gaming, NFT and blockchain technologies on Web2 and Web3 platforms. But many features are still in development, which could limit user engagement.
Fig.2.4.Image dynamic feedback
· Design & Layout: The site has a sleek, modern design with deep colors and vivid images that give it a tech-driven feel. The layout is simple and clear, and the graphical dynamic feedback generated by scrolling with the mouse pulley is very compelling, which is one of the main reasons I like it.I was pleasantly surprised by everything the site did in terms of visual design and interaction.
Fig.2.5.Website screenshot 2
· Functionality & Usability: Navigation is intuitive and easy to access menus and areas, but most of the site lacks active functional elements. Although there are many pieces under development, the general usability of forms, social links, and active areas is effective.
· Content Quality: The content is futuristic and focuses on the integration of game systems. While the content is clear, it is somewhat limited in terms of practical details, especially for those unfamiliar with Web3 concepts. A deeper explanation would help clarify the benefits of the "Play Economy."
· Performance: The site performed well in terms of load times and was responsive on different devices and browsers. However, the heavy use of visual elements such as graphic videos can slow down the loading speed and sometimes cause stalling.
· Recommendations: 1.The proportion of pictures is large, and the text is relatively small, which leads to the explanation of details and concepts. 2.Introduce playable or interactive content to enhance the user experience and demonstrate the capabilities of Play Economy.

Exercise 2 - Web Replication
Our task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. 

Below is a screenshot of the web page.
Fig.2.6 Website screenshot 1

I found that most of the images in the original website had changes in transparency and rounded corners, For the edges of the article thumbnails to be rounded like the original, I used the clipping mask tool to cut off the edges of the images along with the rounded edge shape tool. And also changed the transparency to approximate the effect of the original website.
Fig.2.7 Progress 1

The final result is shown below.

Fig.2.8.1 Web Replication 1（JPG）

Fig.2.8.2 Web Replication 1 (PDF)

2. Morgan Stanley | Global Leader in Financial Services
Below is a screenshot of the web page.I looked for similar fonts on the website and finally found that it uses a font similar to Roboto.
Fig.2.9 Web Replication 2

Fig.2.10 Final Layout

The final result is shown below.
Fig.2.11.1 Web Replication 2 (JPG)



Fig.2.11.2 Web Replication 2 (PDF)

Exercise 3 - Personal CV Page
In this exercise，we need to design and build a personal CV page using basic HTML and CSS. This exercise will help you organize information into sections, practice styling text, and create a clean, professional-looking page layout.

Fig.2.12 Process of creating CSS in Dreamweaver

Create a folder for the task and include subfolder (images) and the HTML file in the folder and create a single HTML file for the content. Name the file as index.html.
Fig.2.13 Folder for the task

Upload the folder to Netlify
Fig.2.14 Upload the folder

Link to my webpage: Click Here

Exercise 4 - Personal CV Page
In class we used Dw to create a website about recipes for practice.
Fig.2.15 Part of process of creating HTML in Dreamweaver
Fig.2.16 Part of process of creating CSS in Dreamweaver
Fig.2.17 Website view

Link to my webpage: Click Here

REFLECTION
These assignments have been a rewarding journey. Learning usability principles like consistency and simplicity helped me evaluate websites more critically during the group activity.

Understanding website structures, like headers, bodies, and footers, and replicating designs such as the Ocean Health Index page taught me the value of precision. Adjusting transparency and rounded edges required focus but resulted in a satisfying outcome.

Building my CV page improved my skills in HTML and CSS, from organizing content to creating a professional layout. Uploading it to Netlify was exciting, as it made the project feel complete and functional.

These exercises strengthened my practical web design abilities and attention to detail.

Comments

Post a Comment