Labels

INTERACTIVE DESIGN: EXERCISES

INTERACTIVE DESIGN: EXERCISES

1/10/2024 - 15/10/2024 (Week1-Week4)

Zhang WanRu /0368214

Interactive Design / Bachelor of Design in Creative Media / Taylors University

Exercises

TABLE OF CONTENTS
1.Lecture 
2.Instructions 
3.Task
4.Feedback

1.Lecture 
week2
Usability: Designing Products for User Satisfaction
Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.It is a part of User Experience (UX) Design. It is the second level of UX Design .A design’s usability depends on how well its features accommodate users’ needs and contexts.
Principle of Usability
Key Principle of Usability ·Consistency
·Simplicity ·Visibility ·Feedback ·Error Prevention

Consistency is a key factor in web design for both visual elements and functionality. Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.Consistent design is intuitive design.It includes consistent navigation system,  page layout and menu structure, fonts and typography and branding in web design.Consistency is key for these patterns to be recognized and learned by users.  If similar-looking things do not produce a similar output, the user is bound to become frustrated.For example, if a website’s buttons are protruding boxes with labels on them, then all of the website’s buttons should look like that.  Similarly, if a backward arrow denotes the back button, then it​ should not be changed to something else because that would be inconsistent with what the user has learned.

Fig 1.1 Consistency example
Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
Fig 1.2  Simplicity example 
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. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.Users should know, just by looking at an interface, what their options are and how to access them.
Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.An example of feedback is when you’re on your mobile app and selected icon changes color when you in the selected screen.
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. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.

Fig 1.3 Error prevention example
Common Usability Pitfalls and How to Avoid Them
·Complex interfaces
·Confusing navigation
·Poor feedback
·Inadequate error handling
Week3
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.
Websites are typically divided into 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.
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 help users move around the website.Use clear and concise labels for menu items.Consider using dropdown menus for complex sites.

Week4
WEB STANDARDS
The standard markup languages：

• HTML
• CSS

In all kinds of documents, structure is very important in helping readers to understand the messages we are trying to convey and to navigate around the document.

HOW PAGES USE STRUCTURE

The use of headings and subheadings in any document often reflect a hierarchy of information Any document will start with a large heading, followed by an introduction or the most important information.

This might be expanded upon under subheadings lower down on the page When using a word processor to create a document, we separate out the text to give it structure Each topic might have a new paragraph, and each section can have a heading to describe what it covers.

In the browser window you can see a web page that features exactly the same content as the Word document To describe the structure of a web page, we add code to the words we want to appear on the page.

Fig 1.4 page
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 <element> Information </element> Each element tells the browser something about the information that sits between its opening and closing tags.

Fig 1.5 Opening Tag example 
Fig 1.6 Closing Tag example
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.7 Attributes example 

<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).
HTML has six levels of headings: 
• <h1> main headings 
• <h2> subheadings
 • If there are further sections under the subheadings then the <h3> element
Fig 1.8 The headings
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
Fig 1.9 the paragraph 
By enclosing words in the tags <b> and </b> we can make characters appear bold.
Fig 1.10 the words
By enclosing words in the tags <i> and </i> we can make characters appear italic.
Fig 1.11 the italic
HTML provides us with two different types:
-Ordered list are lists where each item in the list is numbered. List is for set of steps for a recipe that must be performed in order.
-Unordered list are list that begin with a bullet point.
<ol>
The ordered list is created with the <ol> element
<li>
Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list
item.)
Fig 1.12 the list
<ul>
The unordered list is created with the <ul> element
<li>
Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list
item.)
Fig 1.13 the list
Links are created using the <a> element.
User can click on anything between the opening<a> tag and the closing </a> tag.
Specify which page to link using the href attribute.
Fig 1.14 the link
<img>:
The <img> HTML tag serves the purpose of incorporating images into a web page.
The <img> tag essentially establishes a designated space
for displaying the referenced image.
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
Fig 1.15 the img
Week5
ID and Class attribute
The respective attributes：
1.ID attribute
-Every HTML element can carry the ID attribute
-It is used to uniquely identify the element from other elements on the page
-It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
-Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page
-Example: you might want to assign one paragraph within the page a different style from all of the other paragraphs
2.Class attribute
-Every HTML element can also carry a class attribute.
-Sometimes you will want a way to identify several elements as being different from the other elements on the page
-The class attribute on any elements can share the same value or name
- For example, you might have some paragraph of the that contain information that is more important than others and want to distinguish between these elements.
ID and Class attribute：
ID and Class attribute
-By default, using these attributes does not affect the presentation of an element.
-It will only change their appearance if there is a CSS rule that indicates it should be displayed differently.

Block elements
Some elements will always appear to start on a new line in the browser window.It is know as block level elements. Example: <h1>, <p>, <ul> and <li>
Introducing CSS:
-CSS allows you to create rules that specify how the content of an element should appear.
-Example, you can set the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level header should be in a blue, italic, Helvetica typeface.
-A CSS rule contains two parts: a selector and a declaration

-CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon.
-specify several properties in one declarations each separated by a semi-colon

2.Instructions 


3.Task
Exercises 1-Web Analysis
Instructions
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.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)
Link to choose websites:
Choose two  Web link：

Purpose and Goals:

Monolith Studio’s website conveys a strong artistic vibe to users, featuring unique artworks and creations. Its goal is to attract customers interested in modern and futuristic custom designs. The website showcases professional functionality and usability. With clear objectives, it effectively shapes the studio's image for its audience.


The website features a strong visual appearance, utilizing a black and white background to attract users with engaging pictures and videos. It perfectly complements a modern, minimalistic design style. The layout is clear and straightforward, enhancing navigation and accessibility, making it easy to understand. Each artwork is accompanied by a clear description and explanation, with clean typefaces that increase readability and align with the minimalistic design. The website also offers buttons to change the color of the descriptions and easy access to all pages and information, boosting interactivity and accessibility. This enhances the user experience while scrolling through the site and provides more visible descriptions for better understanding.


The website offers high accessibility. For example, simply moving your mouse automatically reveals the artworks’ content, providing an easy and interactive teaser. Users can also search through the search bar for more artwork content. Additionally, the site effectively showcases the studio’s services and creations. It is well-optimized for mobile devices, with good responsiveness and functionality. However, a small portion of 3D animations and displays may perform slower on a weak internet connection.

 


In conclusion, Monolith Studio’s website design demonstrates high creativity and artistic value, effectively showcasing their strengths to users. However, they should also focus on improving the content flow by minimizing animations to enhance the overall user experience on the website.

2. Webby Awards（https://winners.webbyawards.com/winners/video?years=0&sort=0）
Purpose and Goals:

The Webby Awards website features a clear and clean design that aligns with modern web design styles, emphasizing the awarded artworks. The layout is well-organized and tidy, enabling users to quickly access and choose different genres and years of awarded videos, along with important information and descriptions. The website is minimalistic and modernized, making it easy to understand, aided by bright colors in the typefaces. The color combinations create a fun appearance without being overwhelming, and the typefaces used are simple to read, as it matches with the overall layout. Moreover, the website provides high-quality videos and images that are visually appealing and attractive, enhancing users' understanding of the content. This indicates that the website performs well, providing HD quality videos for users. The labels section clearly showcases its functionality, allowing users to navigate the entire website effortlessly. Each award is accompanied by clear, informative descriptions, including the meaning of the videos and details about the awardee. It also provides related materials that users might be interested in, enhancing the overall browsing experience with just a click or touch.With recommendations, users are more keen to browse through the website with greater interests. However, the site has too much content, which can overwhelm users with information overload.

Overall, the responsiveness of the website is good for user experience, with no lagging issues. It serves as a helpful and informative resource, featuring a tidy, clear layout with high functionality for research, entertainment, and other purposes, despite the potential burden of information overload.

Exercise 2 - Web Replication

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. 
Free image:
https://www.pexels.com/

Google Fonts link:
https://fonts.google.com/

1.https://www.morganstanley.com/
2.https://banditrunning.com/
3.https://www.oceanhealthindex.org/?authuser=0

Choose two link：
https://banditrunning.com/
https://www.oceanhealthindex.org/?authuser=0

1.Bandit Running
Fig Progress Screenshot
                                              Fig  Web Replication  PDF (10/10/2024)
2. Ocean Health Index
Fig Progress Screenshot
                                          Fig  Web Replication  PDF (10/10/2024)



Exercise 3 - Personal CV Page 

First I looked at Pinterest for some inspiration.
Fig Reference
Fig make process
Fig screenshot 
Personal CV Page Netlify link:https://zhangwanru7.netlify.app/

Reflection

In this exercise, I completed the tasks of web page analysis, copying web page content by using the Adobe Illustrator application, and making a personal resume page through coding. These practices gave me a deeper understanding of web page construction and helped me gain valuable experience.
Through web page analysis, I learned to observe and understand the structure, layout, and functional characteristics of web pages. For example, by analyzing the title, text, pictures and other content, I mastered how to judge the purpose of a web page and was able to identify the interactive design of navigation bars and buttons. This process gave me a clearer understanding of user experience and design logic, and also allowed me to understand how design and function can be effectively combined to improve the practicality of web pages.

When using the Adobe Illustrator application to copy web page content, I restored the layout, fonts, colors, and typography of the web page from the perspective of visual design. This practice made me familiar with how to use tools to handle visual elements, and at the same time improved my understanding of web design aesthetics and typography principles. This is not only a skill enhancement, but also an extension of the overall cognition of web design.

In the process of making a personal resume page through coding, I designed and implemented a simple and practical web page from scratch. This task made me more proficient in using HTML and CSS, and learned how to solve practical problems through code. In the process of constantly adjusting styles and optimizing layouts, I further understood how to improve the visual effects and usability of web pages through details.

Through this exercise, I realized my progress and also realized the direction of improvement in future courses. I need to further learn responsive design to adapt to the needs of different devices, and explore more dynamic interactive functions to enhance the user experience of web pages. By practicing more different types of projects, I hope to comprehensively improve my design and development capabilities. This experience made me feel the fun and challenges of web development and design, and also made me full of confidence in future learning and growth.






Labels:

Comments

Post a Comment

Popular Posts