Interactive Design 202404(Exercises)
24.04.2024
Week 1 - Week 8
You Siyuan/0366978
INTERACTIVE DESIGN / Bachelor's of Design Honors In Creative Media
Exercises
TABLE OF CONTENT
1. Instructions
2. Lectures
3.Exercise 1: Web Analysis
Instructions
Lectures
WEEK 1 - LECTURE 1
Introduction to Usability
The usability of the website was introduced in this week's lecture.
Usability refers to how effectively, efficiently and successfully a product or design is utilized by a particular user in a particular situation. The usability of a design depends on how well its functionality is adapted to the needs and context of the user.
The usability of a design depends on how effectively, efficiently and successfully a product or design is utilized by a particular user in a particular situation.
An interface with high availability should make it easy to guide users towards their goals without relying on expertise.
Availability principle
Consistency
Consistency design is intuitive design. Vital in the visual elements and functionality of web design, ensuring a coherent and harmonious website, including headers, footers, sidebars, navigation bars, fonts, typography, branding, and buttons.
Simplicity
Simplicity refers to the need to minimize the number of steps involved in the process, using symbols and terminology to make the interface as obvious as possible and not error-prone. Incorporating simplicity into your design can help users achieve their goals faster and more efficiently, while enhancing the user experience.
Visibility
Visibility is a fundamental principle, and the more visible an element is, it's crucial because more visible elements make users more aware of their choices and how to use them.
Feedback
Communicate the outcome of the interaction, indicating success or failure. Its job is to give the user a signal that they have succeeded or failed in performing the task. It is visible and understandable, just like hovering over navigation items on a desktop or laptop computer.
Error Prevention
It includes alerting users when they make mistakes that can help them avoid future mistakes, with the goal of making it easier for them to do what they're doing without making mistakes.
Common usability flaws
Complex interface
Confusing navigation
Poor feedback
Insufficient error handling
WEEK 2 - LECTURE 2
Note | UI/UX The Anatomy of a Web Page: 14 Basic Elements
We'll focus on the basics of an effective web page, their impact, and their contribution to the user experience, with plenty of web design examples. Web page elements should be selected in alignment with user and business objectives, and solutions should be tested and updated based on real-time interactions.
Header
The header is the top of the page, where you can see the strategic navigation and user experience more intuitively, so this is the title that is crucial. Can be used as a website menu and contains various layout elements. The title of the web page should not contain all the elements, as it can be overloaded and difficult for the user to concentrate. Designers and marketing experts choose options that make strategic sense.
The header may contain a bunch of meaningful layout elements:
The basic element of a brand identity is usually the logo
Call to action button
Links to basic categories of site content
Social networking links
Basic contact information (phone number, email address, etc.)
Language switcher in multilingual interface
Search field
Subscribe to a field or button
Links that interact with the product, such as trial versions, downloads from the AppStore, etc.
Titles are critical to Web usability, ensuring that elements are not missed, and that their use should be based on custom and consistency of user experience. Some popular design practices for Web titles include:
The Burger menu hides the link to the page behind the hamburger button.
Sticking headers keep the core navigation area visible during scrolling.
Two-tier navigation separates the two routes to improve Web usability for pages with heavy content and long scrolling.
CTA button
A call-to-action (CTA) button is a user interface element that encourages a user to take a specific action, such as making a purchase or contacting a page. It turns passive users into active users. A valid CTA button is easily noticed and should have a bold copy explaining the main action. Without a clear definition, visitors may quickly scan the content without touching it.
Hero Section
The hero section is the pre-scroll area of a web page that presents strong visual appeal, such as hero images, sliders, typography, or videos. It can include product photos, subject images, landscapes, equipment, buildings, or abstract models. The goal is to create a quick, emotional and informative connection with the user and grab their attention faster.
Footer
The footer is the bottom of a web page, indicating the end of it and providing additional links and data for the user to find. Footers are crucial elements in web design and are often used for navigation purposes such as contact information and sitemaps. It should harmoniously integrate with other design schemes and style concepts to support general usability and navigability, especially in the case of infinite scrolling. The footer can include:
Brand identification marks, usually the name and logo of a company or product
Link to the User Support section
Credit to the website creator
Contact forms and information
Link to company or product accounts on social networks
Awards and badges
Certification mark
Subscribe to a field or button.
Slider
A slider is an interactive element that applies the technology of a slide show or carousel to present different products, offers, etc. Sliders are popular in e-commerce and business websites for displaying product galleries.
Pros: Space saving, user engagement and attractive visual hooks.
The pitfall: Negatively impacts page speed, search engine optimization, usability, mobile adaptability, and user attention, potentially leading to distraction and ad-like behavior.
Search
Internal search allows visitors to browse the content within a website based on their search queries, saving time and effort. It enhances usability, retains users, and increases conversion rates. The search field, also known as the search box or search bar, is responsible for this function. For sites over 50 pages, internal search is strongly recommended. However, designers should not prioritize search over navigation, as some users may struggle with search interactions. For single-page sites, a well-designed navigation is sufficient, while for more complex sites, a well-structured search is necessary.
Menu
Menus are a vital navigation element in the user interface, providing options for interactions and categories. It can be a list of commands or categories. Menus can be located in different layouts and have different looks. Designers should design the function, appearance, and location of menus based on user research and technical literacy. A well-designed menu can accelerate the achievement of goals and improve the user experience.
Menus can be organized horizontally or vertically, and some popular types can be found on different websites:
The classic horizontal menu is a common menu type that is organized horizontally in the title of a website.
The sidebar menu displays vertical options on the page.
The drop-down menu is complex, and other options open when the mouse hovers below the main menu.
Megamenus is extensible, presenting a large list of options in a two-dimensional drop-down layout.
The hamburger menu expands when clicked to save space and is often used on mobile websites.
Breadcrumbs
Breadcrumbs are a navigation element that helps users navigate the site, provides better wayfinding, and enhances usability, especially for large sites with multiple pages, rather than replacing the main navigation menu. Advantages: Increased searchability, reduced number of clicks, efficient use of screen space, avoidance of misunderstandings, and reduced bounce rate.
Breadcrumbs are useful for complex websites with multiple pages and layers, such as e-commerce platforms. For simple websites with simple hierarchies, the primary navigation is sufficient for effective user interaction.
Form
A form is an interaction that allows a user to send information to a system or server. They are digital versions of traditional paper forms with more options and features. Forms are used for a variety of digital activities, such as registration, payments, feedback, and news subscriptions. To ensure easy communication for users, forms should be simple, intuitive, and have visual prompts to support the user's process.
Card
Cards, also known as tiles, are layout elements that organize and visualize isomorphic data in a user-friendly manner. They are organized in a grid that combines different types of content about a project.
Vidoe
Due to advances in web development solutions and technical capabilities, video content is becoming more prominent on websites. It grabs customers' attention and informs them quickly and brightly. Video content activates multiple channels of perception, including audio, visual, and motion, while telling a story. Videos are popular visual hooks for introducing products, setting the mood, and sharing feedback. However, drawbacks such as load times, contrast issues, and responsiveness can negatively impact the user experience.
Progress Indicator
A progress indicator is a useful element that helps visitors understand the current point of information or action, especially on pages with text content and long scrolling. It can help users estimate reading time and feel more confident in complex forms or processes.
Favicon
A Favicon is a small visual symbol that represents a product or brand and is used for browser URL lines and bookmark tags, quick visual connections, and is effective for website promotion and visual identity.
Tags
Tags are secondary navigation elements that provide quick access to specific content categories and are metadata that allows users to create their own categories, enhancing navigation and content categorization. It can be found in blogs and websites with homogeneous content.
WEEK 3 - LECTURE 3
Understanding Website Structure
Websites are usually divided into three key elements:
1. The header is located at the top of the web page and contains the website's logo, navigation menu and contact information, allowing users to quickly access key information.
2. The body of a web page, including text, images, video, and multimedia elements, is the main content area, and its proper organization is essential for readability.
3. The footer is located at the bottom of the web page and contains copyright information, links to key pages, and contact information, providing an end and additional navigation options.
Organizing Content
Content organization is crucial to a good website, using headings for hierarchy, logical grouping, and clear labels to improve the user experience.
Navigation Menus
The navigation menu helps with website navigation, ensuring clear and concise labels for menu items. Dropdown menus may be beneficial for complex sites.
WEEK 4 - LECTURE 4
The Web and Language
Interactive Design Web Standards
The web has evolved from keyboards, mice, and monitors to devices such as phones, tablets, audible interfaces, and voice outputs for the blind and disabled, including those who rely on voice outputs or voice inputs.
Hardware and software issues:
• Various browsers such as Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari.
• Use operating systems such as Windows, Mac OS and Linux.
Widescreen resolution from 640 x 480 to 1680 x 1050 pixels.
The diversity of web access means that your website may look different to many visitors. However, content is crucial for all users. To ensure compatibility between different devices and configurations, websites must adhere to web standards. Non-compliance increases the likelihood of unauthorized access.
The central organization 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 language we use to build websites. The standard markup languages we will use in this course are:
•HTML
•CSS
Why Web Standards?
For developers and visitors, web standards are essential to a better Internet experience, simplifying the development process and ensuring that websites are displayed correctly without time-consuming rewrites for all browsers.
How The Web Works?
When visiting a website, the web server hosting the website can be located anywhere in the world, and in order to find the server, your browser connects to the Domain Name System (DNS) server.
Web page structure
• Structure understanding
• Marker learning
• Tags and elements
Structure is important for readers to understand the message we are trying to convey and to navigate through the document.
How do pages use structure
The structure of a newspaper article is similar to an insurance form, including headings for different sections and questions with checkboxes for readers to fill in details, similar to the structure found in online documents. Documents typically use headings and subheadings to represent a hierarchy of information, starting with a broad heading followed by an introduction or the most important information. Use a word processor to organize text into subheadings and paragraphs, providing structure and allowing each topic to have a unique heading.
HTML describes the structure of a page
HTML Code Overview
• Consists of characters in <> brackets.
• Usually consists of two labels: a start and an end. Element < > < / > Information about the element
• Each element provides information between the start and end tags.
The HTML <h1> to <h6> tags are used to define headings in HTML documents. <h1> defines the largest header and <h6> defines the smallest header.
Attributes tell us more about the element
Attributes found on the element's start tag provide additional information by containing the name and value (separated by an equal sign).
Body, Head & Title
<body>
<head>
<title>
Other elements
A tag is an HTML tag used to add additional meaning and structure to a web page, allowing users to navigate and interact with it.
title
HTML has six levels of headings:
• Main title :<h1>
• Subtitle :<h2>
• Further chapters under the subheading. The element <h3> is used for later sections and so on...
Period of
To create a paragraph, surround the words that make up the paragraph with the start <p> tag and the end </p> tag.
Bold and italic
< b >
By enclosing words in <b> and </b> labels, you can make characters appear bold.
The <b> element also represents a piece of text that will be presented visually differently (such as keywords in a paragraph), although using the <b> element does not imply any additional meaning.
< i >
By including words in the <i> and </i> tags, we can make characters appear in italics.
The <i> element also represents a piece of text that will be represented differently than the surrounding content, such as technical terms, ship names, foreign words, ideas, or other terms that would normally be italicized.
List
There are many situations where we need to use lists. HTML provides two different types:
• Ordered list: Each item in the list is numbered. This list is used for a set of steps for a recipe that must be performed in order.
• Unordered list: Start with a bullet.
Ordered list
< ol >
Ordered lists are created with <ol> elements.
< li >
Each item in the list is located between the beginning <li> tag and the end </li> tag (li denotes the list item).
Default browser indent list.
Unordered list
< ul >
Unordered lists are created with the <ul> element.
< Li >
Each item in the list is located between the beginning <li> tag and the end </li> tag (li denotes the list item).
Nested list
You can place a second list inside the <li> element to create a sublist or nested list.
The browser displays the nested list, further indented than the parent list.
In nested unordered lists, browsers often change the style of bullets as well.
Link
Links are the defining feature of the web because they allow you to move from one web page to another.
Common link types:
• Link from one website to another
• Link from one page to another on the same website
• Links from one part of a web page to another part of the same page
• The link that opens in a new browser window (TAB)
Links to writing
Links are created using the <a> element. The user can click anything between the start <a> tag and the end </a> tag. Use the href attribute to specify the page to link to.
Links to other sites - write links
< I >
• Links are created using the <a> element, which has an attribute called href.
• The value of the href attribute is the page you want the user to go to when they click on the link.
When you link to a different website, the value of the href attribute will be the full URL of that website, also known as the absolute URL.
• The browser displays blue links with underscores by default.
Links to other sites - Add images
< img >
• The <img> HTML tag is used to incorporate images into web pages.
• In the context of web design, it is important to note that images are not physically inserted into them
web page; Instead, they are associated with it. The <img> tag actually establishes a specified space
Used to display referenced images.
• It is worth mentioning that the <img> tag itself has no content, only by
Attribute, thereby eliminating the need for an end tag.
When you use the <img> tag, you must include two basic attributes:
•src - This property specifies the path to the image.
alt - This property provides alternative text for the image, which is crucial for accessibility
• Title - This property provides a tooltip for the image in your browser
Exercise 1: Web analysis
The purpose and objectives of this website
Evaluate whether they are effectively communicated to users.
Awwwards
The goal of the Awards platform is to recognize and promote the best in web design and development. It showcases innovative and creative websites that provide inspiration and insights for designers and developers. Build a network of experts who can push the boundaries of web design and benefit from each other's work.
Effectiveness of communication:
Communicate the aims and objectives of the award effectively through various means on the website. The home page highlights the sites that have won awards, with a clear emphasis on the appreciation of the quality of online design. Several categories on the navigation bar, such as "Catalog," "Nominees," and "Markets," further highlight the site's goal of showcasing outstanding work and providing resources for professionals in the field.
The Webby Awards
The Webby Awards recognize outstanding work on the Internet in several categories, such as social media, apps, websites and advertising. It highlights trends and innovations in online media and aims to recognize the best digital experiences and content creators. Create a sense of community between online fans and professionals.
Effectiveness of communication:
The Webby Awards' website design and content successfully communicate the organization's mission and goals. The home page highlights the celebration of exceptional digital content and experiences by showcasing past winners and nominees. The "Winners," "Resources," and "About" categories of the navigation menu make it easy to find relevant information about the awards and the submission process.
Visual design and layout of the website
Evaluate its use of color, typography, and images.
Awwwards
The main tones used by Awwwards are modern and minimalist, with shades of grey, black and white. White and black are used for text and background elements to ensure readability. Awwwards' typography is clean and easy to read, with sans-serif fonts for headings and body text. Headings are usually in bold and capital letters, creating a hierarchy and drawing attention to the important parts. Body text is usually presented in a readable size and style, ensuring readability on different screen sizes. The aim of these images is to inspire visitors with examples of creative design while reinforcing the site's focus on visual excellence.
The Webby Awards
The Webby Awards website has adopted a bold and vibrant color palette, with a combination of white and black as the main colors. White and black are used for text and background elements to ensure readability. The typography on the Webby Awards website is modern and striking, with extensive use of sans-serif fonts throughout the design. Headings and headings are usually displayed in large font, making them stand out and draw attention to themselves. Body text is usually presented in a readable size and style, ensuring readability on different screen sizes. It uses images to show the winners and the latest information.
Functionality and usability of the website
Evaluate its navigation, forms, and interactive elements.
Awwwards
Awwwards has a clear and intuitive navigation menu that allows users to easily access different parts of the site, such as "Inspiration," "Blog," and "Directory." Drop-down menus and subcategories are used to further organize content and improve the browsing experience for users seeking specific information or inspiration. It contains forms for various purposes, such as submitting a website for consideration or becoming part of a professional business. It also includes interactive elements such as buttons, sliders, and galleries to enhance user engagement and effectively showcase featured content.
The Webby Awards
Webby Awards websites typically feature an intuitive navigation menu that allows users to navigate to sections such as "About," "Winners," "Features," "Resources," and "Categories." Webby Awards uses forms for purposes such as submitting a work, registering for an event, or seeking useful information. It also incorporates interactive elements such as buttons, sliders, and dynamic content to engage users and highlight past winners and nominees.
Quality and relevance of the content of this website
Evaluate its accuracy, clarity, and organization.
Awwwards
Awwards offers comprehensive web design trends, best practices and award-winning websites, as well as well-researched content, interviews and case studies that enhance their credibility. The content on the awards is usually clear and accessible content about visual design, branding, user experience design, and what developers learn and share. Awwwards divides its content into categories such as "winners," "nominees," "Blogs," and "Favorites," making it easy for users to find relevant information.
The Webby Awards
The Webby Awards website generally provides accurate information about past winners, nominees, categories, and submission guidelines. Content related to digital media trends, industry insights, award-winning projects and profiles is often well researched and fact-checked. The Webby Awards split its content into sections such as "Winners," "Nominees," "About," and "Categories," giving users easy access to relevant information. Within each section, the content is usually organized logically, allowing users to browse past winners and nominees by year, category, or other criteria.
Website’s performance
Evaluate its load time, responsiveness, and compatibility with different devices and browsers.
Awwwards
Awwwards may prioritize optimizing load times to ensure a smooth user experience. Awwwards may be designed to be responsive, dynamically adjusting its layout and content based on the user's device and screen size. It was tested on a range of popular browsers, such as Chrome and Safari, to ensure compatibility. The website still works.
The Webby Awards
The Webby Award may prioritize optimized load times to provide a seamless user experience. Responsiveness :Webby Awards is likely designed with responsiveness in mind, ensuring that its content ADAPTS to a variety of screen sizes and devices, and is tested on a range of popular browsers, such as Chrome and Safari, to ensure compatibility. The website still works.
Advantages and disadvantages of this website
Impact on user experience.
Awwwards
Advantages:
Awards provide users with inspiration, community engagement, educational resources, and recognition of good web design. It provides a rich source of visual inspiration, fosters a sense of community through user votes and comments, and provides valuable insights and learning opportunities that enhance user trust and appreciation.
Cons:
Awwwards' focus on visual design can limit the user experience, create barriers to entry, and question its objectivity. Its competitive nature can repel less experienced designers. The broad content of the platform can be overwhelming and may hinder further exploration. Users may question the credibility of the platform.
The Webby Awards
Advantages:
The Webby Awards is a global digital media award that provides users with credibility, industry insight and global reach. They showcased different digital projects and talents, enriching their experience with an international perspective. The award also promotes connections and collaboration between professionals and enthusiasts, enhancing the overall user experience.
Cons:
The Webby Awards' coverage may be limited to certain areas of digital media and may miss emerging trends. High entry costs can discourage smaller organizations, limiting diversity. The judging process can be subjective, especially in categories that rely on public votes, which can affect trust and perceived fairness.
Brief Report / Summary
Include screenshots of each section or page of the website to explain.
Summarize my findings and recommendations.
While reviewing the user experience of both sites, I found some advantages and areas for improvement. Awwwards is very good at motivating designers, building communities, providing helpful resources, and gaining recognition in the web design community. However, it's a bit exclusive, and its website navigation can be confusing. Webby Awards are respected, provide valuable insights, engage a global audience, and engage with a strong community. But they can cover more topics, make more affordable submissions, and ensure fair judging.
The award has its advantages. It's like a treasure trove of designers that can provide a lot of meaningful ideas and examples to spark creativity. The community aspect is also great because it allows designers to connect with each other, exchange ideas, and learn from each other. There are also plenty of useful resources, such as articles and tutorials to improve your skills. Winning an award here is a meaningful event that enhances the designer's reputation. However, award ceremonies can feel a bit xenophobic, and sometimes it seems like only elite designers are recognized, which can be frustrating and frustrating for beginners. The site can be difficult to navigate, with too much content and complexity, and it takes a lot of time to find what you're looking for.
There is also a bright side to the Webby Awards. Winning this award is a big honor because they're like the internet's Oscars. They reach people all over the world, and their insights into digital trends are valuable to anyone in the industry. It's good that they bring everyone together through activities and ceremonies. However, they can cover a lot more topics. Sometimes it feels like they're only endorsing big companies and ignoring small projects that are just as impressive. Submitting your work is also very expensive, which is unfair to small designers or organizations. Sometimes it feels like the review can be biased and biased in favor of popular projects over truly innovative ones.
Some improvements could be made to both sites. Awwwards can make their website easier to use by simplifying the menu options or making the search function better. They can also try to be more inclusive, perhaps by recommending more designers and projects. Webby Awards could consider adding more awards to recognize different types of digital works. They can also reduce the cost of submission and make it more accessible to everyone. They should strive to make the judging process fair and transparent so that everyone can win on their own.
All in all, both the Oscars and the Webby Awards have their own advantages and disadvantages. By making some changes, they can improve the user experience and better serve their community. Awards can be more popular and easier to use, while Webby Awards can be more inclusive and fair in the judging. With a few changes, these two sites can better continue to inspire and identify the best in web design and digital media.
EXERCISE 1: WEB ANALYSIS
Final Outcome - Exercise 2: Replicate A Website
Classroom exercises
Part 1 Prototyping - Digital Resume/CV
Duration :2 weeks
Objective: In the first part of the assignment, the focus is on creating a UI design prototype for a digital resume or CV using prototyping software such as Adobe XD or Figma. The UI design prototype will demonstrate the layout, visual elements, and user interface interactions of the digital resume.
Requirements:
1. Content and structure:
Prepare the content of your resume, including personal information, education, work experience, skills, projects and other relevant sections.
Determine the order and hierarchy of paragraphs according to their importance and relevance.
2. Layout and visual design:
Design the layout of your digital resume using selected prototyping software. Define where the different parts are and how they flow together.
Use typography, color palettes, and appropriate spacing to apply consistent visual design.
3. Departments and organizations:
Divide your resume into logical sections, such as "Profile," "education," "experience," "skills," "projects," and "contacts."
Prioritize sections based on their relevance and importance to target positioning
4. Visual elements:
Combine relevant images, ICONS or placeholders with content to enhance the visual appeal of your digital resume.
5. Prototype demonstration:
The process of updating an electronic portfolio, explaining and presenting tasks
Evaluation criteria:
UI design prototyping jobs will be evaluated against the following criteria:
Clarity and effectiveness of UI design, layout, and visual elements.
The appropriateness of the selected layout, color palette, and image.
Example:
My resume: Behavior
Portfolio | resume | Graphic design | Digital marketing :Behance
Resume: Behavior
My resume 2023: Behavior
Procedure:
First, I created a short sketch of the prototype using Adobe Illustrator.
After that, I made some adjustments to the draft in Figma.
Exercise 3
Requirements:
- Create a recipe card using HTML and CSS.
The goal is to design a basic web page that displays the ingredients and instructions of the recipe in a visually appealing format. Choose a recipe from the link below (Healthy Recipes and Natural Food Cooking - 101 Recipes)
Create an HTML file called index.html.
Create a section that displays the following information:
Recipe name
Include the images required for the page
Proportioning list
A step-by-step cooking guide
Create an external CSS file called style.css.
Apply CSS rule style to personal recipe cards.
Use CSS selectors, such as element selectors (e.g., body, h1, ul), class selectors (e.g.,.recipe-title,.ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Use physical creativity to make the page look attractive and interesting.
Process:
 |
| fig3.1Working process |
 |
| fig3.2 Make fonts |
Finally, put the website output folder of the finally created site into the Netlify mentioned in the Lectures item to make a webpage that anyone can open.
 |
| fig3.3Make a website |
Submission：
 |
| fig3.4Final picture |
Comments
Post a Comment