Interactive Design

⭐ 24/4/2024 - 22/5/2024 (Week 1 - Week 5)

🎀 Yan Zhi Xuan | 0369425

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

📚 Exercises

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Exercise 1: Web Analysis

4. Exercise 2: Replicate A Website

5. Exercise 3: Creating a Recipe Card

1. LECTURES

WEEK 1 - LECTURE 1

Usability: Designing Products for User Satisfaction

Introduction to Usability

Usability refers to the effectiveness and efficiency of a product or design in a specific situation, as part of User Experience (UX) Design. It ensures users can easily navigate and achieve their goals without relying on expert knowledge.

Key Principles of Usability:
• Consistency: Ensures a coherent and harmonious website across various elements.
• Simplicity: Minimizes steps, uses clear symbols, and makes mistakes difficult.
• Visibility: Increases user awareness of options and usage.
• Feedback: Communicates interaction results, indicating success or failure.
• Error Prevention: Alerts users to avoid future mistakes.

Common Usability Pitfalls:

Complex interfaces, Confusing navigation, Poor feedback & Inadequate error handling

WEEK 2 - LECTURE 2

Note | UI/UX The Anatomy of a Web Page: 14 Basic Elements

Header

Web Page Header Design

• Crucial for strategic navigation and user experience.
• Serves as a site menu and contains various layout elements.
• Should not contain all elements to avoid overloading.
• Includes basic brand identity elements, call-to-action buttons, content links, social network links, contact information, language switcher, search field, subscription field or button, and product interaction links.
• Essential for web usability, ensuring elements aren't missed.
• Popular design practices include hamburger menu, sticky header, and two-layer navigation.

CTA Button

A call-to-action (CTA) button is a user interface element that encourages a user to take a specific action, such as buying or contacting a page. It turns a passive user into an active one. Effective CTA buttons are easy to notice and should be bold with microcopy explaining the main action. Without clear definition, visitors may scan the content quickly and leave it untouched.

Hero Section

• Pre-scroll area with visual hooks like hero image, slider, typography, video.
• Can include product photos, theme images, landscapes, devices, buildings, abstract models.
• Aims to grab attention and establish user connection.

Footer

• Marks the end of a web page and provides additional links and data for users.
• Crucial in web design for navigation purposes like contact information and sitemaps.
• Should be a harmonious combination with other design solutions and stylistic concepts.
• Includes brand identity signs, links to user support sections, credits to website creators, contact forms, links to social network accounts, testimonials, badges, certification signs, and a subscription field or button.

Slider

Slider in E-commerce and Business Websites
• Interactive element presenting products, offers, etc.
• Benefits: Space-saving, user engagement, attractive visual hook.
• Pitfalls: Negatively impact page speed, SEO, usability, mobile adaptation, user focus, potentially leading to distraction and ad-like behavior.

Search

Internal search is a functionality that allows visitors to browse content within a website based on their search query, saving time and effort. It enhances usability, retains users, and increases conversion rates. The search field, also known as a search box or search bar, is responsible for this functionality. For websites with over 50 pages, internal search is highly recommended. However, designers should not prioritize search over navigation, as some users may struggle with search interactions. For single-page websites, a well-designed navigation is sufficient, while a well-structured search is unnecessary for more complex websites.

Menu

• Menus are essential navigation elements in user interfaces, presenting options for interactions and categories.
• They can be a list of commands or categories, and can be located in various layouts and appearances.
• Menus can be organized horizontally or vertically, with popular types including classic horizontal menus, sidebar menus, dropdown menus, megamenus, and hamburger menus.
• Breadcrumbs are navigation elements that aid users in their website journey, providing better wayfinding and enhancing usability.
• Benefits of breadcrumbs include increased findability, fewer clicks, effective use of screen space, no misinterpretation, and lower bounce rate.
• Breadcrumbs are useful for complex websites with multiple pages and layers, while primary navigation is sufficient for simple websites with simple hierarchy.

Form

Forms are interactive elements that allow users to send information to a system or server. They are digital versions of traditional paper forms, with more options and functionality. Forms are used in various digital activities like registration, payment, feedback, and newsletter subscription. To ensure user communication, forms should be simple, intuitive, and have visual prompts and tips to support the user's process.

Card

Cards, also known as tiles, are layout elements that organize and visualize homogeneous data in a user-friendly way. They are organized in a grid, combining different types of content about an item.

Video

Video content is increasingly prominent on websites due to advancements in web development solutions and technical abilities. It attracts 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 product introductions, setting the atmosphere, and sharing feedback. However, pitfalls like loading time, contrast issues, and responsiveness can negatively impact user experience.

Progress Indicator
The Progress Indicator is a useful element that helps visitors understand the current point in information or actions, especially on pages with text content and long scrolling. It helps users estimate reading time and feels more confident in complex forms or processes.

Favicon

Favicon, a small, visual symbol representing a product or brand, is used in browser URL lines and bookmark tabs for quick visual connection, effective for website promotion and visual identity recognition.

Tags

Tags are secondary navigation elements found in blogs and websites with homogenous content. They provide quick access to specific content categories and are metadata, allowing users to create their own categories, enhancing navigation and content classification.

Favicon

WEEK 3 - LECTURE 3

Understanding Website Structure

Why Website Structure Matters?

Website Structure Importance
• Header: Houses logo, navigation menu, and contact details.
• Body: Primary content area with text, images, videos, and multimedia elements.
• Footer: Includes copyright information, links, and contact details.
• Each element impacts user experience, SEO, and overall performance.

Organizing Content

Content organization is crucial for a well-structured website, utilizing headings for hierarchical structure, logical grouping, and clear labeling for improved user experience.

Navigation Menus

Navigation menus aid website navigation, ensuring clear and concise labeling for menu items. Dropdown menus may be beneficial for complex sites.

Fig. 1.1 Anatomy of Landing Page.

WEEK 4 - LECTURE 4

The Web and Language

Interactive Design Web Standards

Evolution of Web and Software
• Web evolved from keyboard, mouse, and monitor to various devices.
• Wide variety of browsers like Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari.
• Use of operating systems like Windows, Mac OS, and Linux.
• Wide screen resolutions from 640 x 480 to 1680 x 1050 pixels.

Website Standards and Compliance
• Web standards ensure compatibility across devices and configurations.
• Non-compliance increases the likelihood of unauthorized access.
• W3C is responsible for creating and maintaining web standards.
• Standard markup languages used in building websites: HTML and CSS.

Why Web Standards?

Web standards are crucial for a better internet experience for developers and visitors, simplifying development and ensuring proper display of websites without time-consuming rewrites for all browsers.

How The Web Works?

When visiting a website, the web server hosting that site can be located anywhere globally, and to locate the server, your browser connects to a Domain Name System (DNS) server.

Fig. 1.2 How The Web Works?

Structure of A Web Page

• Structure Understanding
• Markup Learning
• Tags and Elements

Structure is important for readers to understand the message we try to convey and to navigate around the document.

How Pages Use Structure

The structure of a newspaper article, similar to an insurance form, includes headings for different sections and questions with checkboxes for readers to fill in details, similar to how it is structured in online documents. Documents often use headings and subheadings to indicate a hierarchy of information, starting with a large heading followed by an introduction or the most important information. The text is organized into subheadings and paragraphs using a word processor, providing structure and allowing each topic to have a unique heading.

HTML Describe The Structure of Pages

HTML Code Overview
• Composed of characters inside <> brackets.
• Usually consists of two tags: opening and closing. <element>Information</element>
• Each element provides information between opening and closing tags.

The HTML <h1> to <h6> tag is used to define headings in an HTML document. <h1> defines largest heading and <h6> defines smallest heading.

Fig. 1.3 A Closer Look at Tags.

Attributes Tell Us More About The Elements

Attributes, found on the element's opening tag, offer additional information by containing a name and value, separated by an equals sign.

Fig. 1.4 A Closer Look at Attributes.

Body, Head & Title

<body>

<head>

<title>

Fig. 1.5 Body, Head & Title.

Other Elements

Markup is a type of HTML tag used to add additional meaning and structure to a web page, allowing users to navigate and interact with it.

Headings

HTML has six levels of headings:

• main headings: <h1>

• subheadings: <h2>

• further sections under subheadings. The element <h3> is used for further sections and so on...

Fig. 1.6 Headings.

Paragraph

To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.

Fig. 1.7 Paragraph.

Bold and Italic

<b>

By enclosing words in the tags <b> and </b> we can make characters appear bold.

The <b> element also represents a section of text that would be presented in a visually different way (for example key word in a paragraph) although the use of <b> element does not imply any additional meaning.

<i>

By enclosing words in the tags <i> and </i> we can make characters appear italic.

The <i> element also represents a section of text that would be said in a different way from surrounding content- such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicised.

Fig. 1.8 Paragraph - Bold(left image) & Italic(right image).

List

There are lots of occasions when we need to use lists. HTML provides us with two different types:

• Ordered list: each item in the list is numbered. The list is for set of steps for a recipe that must be performed in order.

• Unordered list: begin with a bullet point.

Ordered List

<ol>

The ordered list is created with the <ol> element.

<li>

Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item.)

Browser indent list by default.

Fig. 1.9 Ordered List.

Unordered List

<ul>

The unordered list is created with the <ul> element.

<li>

Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item.)

Fig. 1.10 Unordered List.

Nested List

You can put a second list inside an <li> element to create a sub-list or nested list.

Browsers display nested lists indented further than the parent list.

In nested unordered lists, the browser will usually change the style of the bullet too.

Fig. 1.11 Nested List.

Links

Links are the defining features of the web because they allow you to move from one web page to another.

Commonly type of links:

• Links from one website to another

• Links to one page to another on the same website

• Links from part of a web page to another part of the same page

• Links that open in a new browser window (tab)

Writing Links

Links are created using the <a> element. Users can click on anything between the opening<a> tag and the closing </a> tag. Specify which page to link using the href attribute.

Linking to Other Sites -Writing Links

<a>

• Links are created using the <a> element which has an attribute called href.

• The value of the href attributes is the page that you want users 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 web address for the site, also know as an absolute URL.

• Browsers show links in blue with an underline by default.

Linking to Other Sites - Adding Image

<img>

• The <img> HTML tag serves the purpose of incorporating images into a web page.

• In the context of web design, it's important to note that images are not physically inserted within a

web page; instead, they are linked to it. The <img> tag essentially establishes a designated space

for displaying the referenced 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

Fig. 1.12 Writing Links.

Fig. 1.13 Adding Image.

Return to the Table of Contents

2. INSTRUCTIONS

Doc. 2.1 Module Information Booklet of Interactive Design.

Return to the Table of Contents

3. EXERCISE 1: WEB ANALYSIS

Purpose and Goals of the Website

• Evaluate whether they are effectively communicated to the user.

Fig. 3.1 Website #1: https://www.awwwards.com/

Website #1: Awwwards

The goal of the Awwwards platform is to recognize and promote the best of web design and development. It displays innovative and creative websites, providing inspiration and insight for designers and developers. Building a network of experts who can push the boundaries of web design and benefit from each other's work.

Effectiveness of Communication:

The purpose and goals of Awwwards are effectively communicated through various means on the website. The homepage highlights websites that have won awards prominently, making it clear that the emphasis is on appreciating quality in online design. Several categories on the navigation bar, like "Directory" "Nominees" and "Market" further highlight the site's goal of exhibiting excellent work and offering resources to professionals in the field.

Fig. 3.2 Website #2: https://www.webbyawards.com/

Website #2: The Webby Awards

The Webby Awards recognise outstanding work on the internet in a number of categories, such as social media, apps, websites, and advertising. It highlights trends and innovations in online media with the goal of honouring the best digital experiences and content creators. Creating a sense of community among internet fans and professionals.

Effectiveness of Communication:

The Webby Awards' website design and content successfully convey the organization's mission and objectives. The homepage highlights the celebration of excellence in digital content and experiences by showcasing previous winners and nominees. The navigation menu's "Winners," "Resources," and "About" categories make it simple to find relevant information about the awards and the submission process.

Visual Design and Layout of the Website

• Evaluate its use of colour, typography, and imagery.

Fig. 3.3 Website #1: https://www.awwwards.com/

Website #1: Awwwards

The primary colour palette used by Awwwards is modern and minimalist, with tones of grey, black, and white. White and black are used for text and background elements, ensuring readability. The typography on Awwwards is clean and readable, with sans-serif fonts for headings and for body text. Headings are typically bold and uppercase, creating hierarchy and drawing attention to important sections. Body text is generally presented in a legible size and style, ensuring readability across different screen sizes. The imagery aims to inspire visitors with examples of creative design while reinforcing the website's focus on visual excellence.

Fig. 3.4 Website #2: https://www.webbyawards.com/

Website #2: The Webby Awards

The Webby Awards website employs a bold and vibrant colour palette, featuring a combination of white and black as its primary colours. White and black are used for text and background elements, ensuring readability. The typography on The Webby Awards website is modern and attention-grabbing, with the extensive use of sans-serif fonts throughout the design. Headings and titles are often displayed in large, making them stand out and command attention. Body text is generally presented in a legible size and style, ensuring readability across different screen sizes. It uses imagery to showcase winners and the latest information.

Functionality and Usability of the Website

• Evaluate its navigation, forms, and interactive elements.

Fig. 3.5 Website #1: https://www.awwwards.com/

Website #1: Awwwards

Awwwards has a clear and intuitive navigation menu, allowing users to easily access different sections of the website such as "Inspiration", "Blog" and "Directory". The dropdown menu and subcategories are used to organize content further, improving the browsing experience for users seeking specific information or inspiration. It incorporates forms for various purposes, such as submitting websites for consideration or being part of the pro in business. It also includes interactive elements such as buttons, sliders, and galleries to enhance user engagement and showcase featured content effectively.

Fig. 3.6 Website #2: https://www.webbyawards.com/

Website #2: The Webby Awards

The Webby Awards website typically features a straightforward navigation menu, allowing users to navigate to sections like "About", "Winners", "Features", "Resources" and "Categories." The Webby Awards utilizes forms for purposes such as submitting entries, registering for events, 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 Website's content

• Evaluate its accuracy, clarity, and organization.

Website #1: Awwwards

Awwwards provides comprehensive web design trends, best practices, and award-winning websites, with well-researched content, interviews, and case studies, enhancing its credibility. Content on Awards is generally presented clearly and understandably about visual design, branding, UX design, and developers to learn and share. Awwwards organizes its content into categories such as "Winners", "Nominees", "Blog", and "Collections" making it easy for users to find relevant information.

Website #2: 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, and profiles of award-winning projects and personalities is typically well-researched and fact-checked. The Webby Awards organizes its content into sections such as "Winners," "Nominees," "About," and "Categories," providing users with easy access to relevant information. Within each section, content is typically organized logically, allowing users to navigate past winners and nominees by year, category, or other criteria.

Website's Performance

• Evaluate its load times, responsiveness, and compatibility with different devices and browsers.

Website #1: Awwwards

Awwwards prioritizes optimizing load times to ensure a smooth user experience. It is likely designed to be responsive, adapting its layout and content dynamically based on the user's device and screen size. It is tested across a range of popular browsers such as Chrome and Safari to ensure compatibility. The website can still work smoothly.

Website #2: The Webby Awards

The Webby Awards prioritizes optimizing load times to provide a seamless user experience. It is likely designed with responsiveness in mind, ensuring that its content adapts to various screen sizes and devices and is tested across a range of popular browsers such as Chrome and Safari to to ensure compatibility. The website can still work smoothly.

Strengths and Weaknesses of the Website

• Impacts on the user experience.

Website #1: Awwwards

Strengths:

Awwwards offers users inspiration, community engagement, educational resources, and recognition of outstanding web designs. It provides a rich source of visual inspiration, fosters a sense of community through user voting and comments, and provides valuable insights and learning opportunities, enhancing user trust and appreciation.

Weaknesses:

Awwwards' focus on visual design may limit user experience, create barriers for entry, and question its objectivity. Its competitive nature may exclude less experienced designers. The platform's extensive content may be overwhelming, potentially discouraging further exploration. Users may question the platform's trustworthiness.

Website #2: The Webby Awards

Strengths:

The Webby Awards, a global digital media awards, provide credibility, industry insights, and global reach for users. They showcase diverse digital projects and talents, enriching their experience with international perspectives. The awards also foster connections and collaborations among professionals and enthusiasts, enhancing the overall user experience.

Weaknesses:

The Webby Awards' coverage may be limited in certain digital media areas, potentially missing emerging trends. The high entry costs may deter smaller organizations, limiting diversity. The judging process may be subjective, especially in categories relying on public voting, potentially affecting trust and perceived fairness.

Brief Report / Summary

• Summarize my findings and recommendations.

In reviewing the user experience of Awwwards and The Webby Awards websites, I found some strong points and areas needing improvement. Awwwards is great at inspiring designers, building a community, offering helpful resources, and giving recognition in the web design world. However, it's a bit exclusive, and its website can be confusing to navigate. The Webby Awards are respected, provide valuable insights, reach a global audience, and engage with a strong community. But they could cover more topics, be more affordable for submissions, and ensure fairness in judging.

Awwwards has its strengths. It's like a treasure trove for designers, offering ideas and examples to inspire creativity. The community aspect is cool too because it allows designers to connect, share ideas, and learn from each other. Plus, there are lots of helpful resources like articles and tutorials to improve skills. Winning an award here is a big deal and boosts a designer's reputation. However, Awwwards can feel a bit exclusive. Sometimes it seems like only the elite designers get recognized, which can be discouraging for beginners. Also, the website can be tricky to navigate, with so much content it's hard to find what you're looking for.

The Webby Awards have their good sides too. They're like the Oscars for the internet, and winning one is a big honour. Their insights into digital trends are valuable for anyone in the industry, and they reach people all over the world. It's nice how they bring everyone together through events and ceremonies. But, they could cover more topics. Sometimes it feels like they only recognize the big players, leaving out smaller but equally impressive projects. It's also pretty expensive to submit your work for consideration, which isn't fair to smaller designers or organizations. And sometimes it feels like the judging might be biased, favouring popular projects over truly innovative ones.

Improvements could be made to both websites. Awwwards could make their site easier to use, maybe by simplifying the menu options or making the search function better. They could also try to be more inclusive, maybe by featuring a wider range of designers and projects. The Webby Awards could consider adding more categories to recognize different types of digital work. They could also lower the cost of submissions to make it more accessible to everyone. And they should work on making the judging process fair and transparent, so everyone feels they have a chance to win.

Overall, both Awwwards and The Webby Awards have their strengths and weaknesses. By making some changes, they could improve the user experience and better serve their communities. Awwwards could be more welcoming and easier to use, while The Webby Awards could be more inclusive and fair in their judging. With some tweaks, both websites could continue to inspire and recognize the best in web design and digital media.

Return to the Table of Contents

4. EXERCISE 2: REPLICATE A WEBSITE

Chosen Websites