Interactive Design - Lectures and Exercises1,2,3

Sep 22,2024

22.10.2024

QIULIHUA/0365036

Interactive Design/Bachelor of Design (Honours)in Creative Media

LECTURE

WEEK2

Usability: Designing Products for User Satisfaction

Consistency:

Consistency is a key factor in web design that involves both visual elements and functionality.
It ensures that a website looks co-ordinated and works smoothly from one section to another, such as headers, footers, sidebars and navigation bars.
Consistency means intuitive design, including consistent navigation systems, page layouts, menu structures, fonts and branding.

Simplicity：

The principle of the user interface is to keep it ‘simple’ for the user.
Simplicity means reducing the number of steps in a process, using clear symbols and terminology so that the interface is as obvious as possible, and reducing the likelihood of user error.
Incorporating simplicity into your design can help create better user interfaces that enable users to achieve their goals faster and more efficiently, while enjoying a great user experience.

Visibility：

Visibility is a fundamental principle that means that the more visible elements are, the more likely users are to understand them and how they are used. Conversely, hidden elements are difficult for users to know and use.
Users should be able to clearly understand the available options and how they are accessed by just browsing through the interface.

Feedback：

Feedback is a way of communicating the results of a user's interaction with an interface in a way that is both visible and easy to understand.
The primary role of feedback is to signal to the user whether they or the product has been successful in performing a task.

Error Prevention：

The error prevention principle is designed to alert users when they make a mistake in order to help them complete the operation more easily without making a mistake.
The importance of this principle lies in the fact that humans are naturally prone to making mistakes and will always make them.

Understanding Website Structure

Why Website Structure Matters

Website structure is the foundation of a user-friendly and accessible website.

It affects user experience, SEO, and overall website performance.

A well-structured website helps users find information easily and keeps them engaged.

The Three Key Elements

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.

Organizing Content

Content organization is key to a well-structured website.
Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
Logical grouping of content and clear labeling of sections improve user experience

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.

INTERACTIVE DESIGN WEB STANDARDS

WEB STANDARDS

In the early days of the Web, everyone accessed the Web using a keyboard, mouse, and monitor.
Today, there is much more variety in the ways people access the Web.
Many people do so on their phones or other pocket mobile devices.Many people do so on tablet computers with touch screen interfaces instead of keyboards and mice.
Some people access the web through audible interfaces (they talk to the computer, or they listen to the computer talk to them, or both).
Many people who are blind depend on speech output, and people who are unable to use their hands depend on speech input.

WEB STANDARDS

Hardware and software issue:

Growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and others.
People use a variety of operating systems, including Windows, Mac OS, and Linux.
People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x1050 pixels and beyond.

Web standards are essential rules for developing websites to ensure they work across different devices and configurations.

Given the diversity in how people access the web, websites may appear differently to users, but the content must remain accessible to everyone.

Adhering to web standards is the best way to guarantee compatibility.

While it’s possible to create websites without following these standards, it increases the risk of accessibility issues for many users.

The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).
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

WEEK 3

Why Web Standards?

To make internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards.
When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding.
Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites.

HOW THE WEB WORK

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;（eg: www.google.com, www.bbc.co.uk）
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. Every device on the web has a unique IP address; it’s like the telephone number for that computer
The unique number that theDNS server returns to yourcomputer allows yourbrowser to contact the webserver that hosts thewebsite you requested. Aweb server is a computerthat is constantlyconnected to the web, andis set up especially to sendweb pages to users,
The web server then sends the page you requested back to your web browser

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.

Organizing Content

Content organization is key to a well-structured website.
Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
Logical grouping of content and clear labeling of sections improve user experience.

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.

INSTRUCTION

EXERCISE

WEEK2 | Exercise 1

exercise1：

1.Group Activity:

FIG 1.0 Group activity

link :https://www.figma.com/design/tgzpFoIntlHpsWaUDBeoJT/Untitled?node-id=0-1&t=xCLigPam8ffLChJv-1

2.Write your report in e-portfolio

Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.Write a brief report summarizing your findings and recommendations.

Website Analysis Report

I have chosen the websites Awwwards and The Webby Awards. Awwwards recognizes excellence in web design and development, inspiring innovation, while The Webby Awards highlights the best in internet content, including websites, videos, and social media. Both aim to promote excellence in digital creativity.

Awwwards:Awwwards - Website Awards - Best Web Design Trends

The Webby awards:The Webby Awards

Fig 1.1 awwwards

Fig 1.2 The Webby awards

Awwwards features a modern design with an attractive color scheme and typography that captures user attention. In contrast, The Webby Awards opts for a cleaner design focused on messaging, using conservative colors while maintaining visual appeal. Both sites are clearly laid out, making it easy for users to find winning entries in various categories.

About Functionality and Usability,Awwwards has an intuitive navigation system, allowing users to find awards and resources easily, with responsive interactive elements enhancing the user experience. The Webby Awards also offers effective navigation for quick access to awards and nominees, featuring a user-friendly interface.

Fig 1.3 awards and resources

Fig 1.4 awards and resources

Awwwards provides high-quality content for designers, while The Webby Awards offers detailed information on winners and the judging process, appealing to a broader audience. Both sites load quickly and function well across platforms.

Fig 1.5 Awwwards' resources

FIG 1.6 Details of the winners and judging process for The Webby Awards

However, Awwwards' search function could be improved for easier access to specific entries. While informative, updates on design trends may not be frequent enough. The Webby Awards has a simpler design that may lack visual impact and offers less in-depth analysis of design trends.

Fig 1.7 Awwwards' search field

Fig 1.8 Search field for The Webby Awards

In summary, Awwwards focuses on web design inspiration, while The Webby Awards covers a broader range of digital content. Enhancements to the search function and design approaches could benefit both platforms, which are invaluable resources in digital creativity.

WEEK3 | Exercise 2

exercise 2：

Your 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.This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.

1.https://www.oceanhealthindex.org/?authuser=0