Skip to main content

INTERACTIVE DESIGN | EXERCISES

Week 1 – Week 8 | 23/04/24 – 11/06/24
Emily Soh Ching-Ling | 0359478
Bachelor of Design (Honours) in Creative Media
Interactive Design | Section 03 | GCD60904
Exercises

TABLE OF CONTENTS 

1.0 LECTURES 

1.1 WEEK 1 — INTRODUCTION & BRIEFING

REQUIRED SOFTWARE:
  • Adobe Dreamweaver
  • Netlify
  • Adobe Illustrator / Adobe Photoshop
  • Adobe XD / Figma
PROJECT 1 BRIEFING:
  • Resume prototype.
  • Do not make it overcomplicated.
  • Sketches should be done in A4 (two sketches per A4).
PROJECT 2 BRIEFING:
  • Continuation of Project 1.
  • Resume creation.
FINAL PROJECT BRIEFING:
  • Theme: Anything you like.
  • Website mobility is the most important.

1.2 WEEK 1 — USABILITY

USABILITY:
  • Definition of usability: How effectively, efficiently, and successfully a user can use a product or design.
  • Usability is the second level of UX design.
  • A design's usability depends on:
    • How well its features accommodate the user's needs.
    • Context.
  • Characteristics of high usability interfaces:
    • The user should be able to navigate the interface easily without relying on expert knowledge.
    • The interface guides the users through using the easiest route.
PRINCIPLES OF USABILITY:
  • 1. Consistency:
    • Purpose:
      • To ensure the interface looks coherent.
      • To ensure the interface works harmoniously across all its different elements (e.g. headers, footers, sidebars, navigation bars).
      • To ensure the interface is recognised and learned by users.
        • If similar-looking elements don't produce similar outputs, it causes frustration.
    • Characteristics of consistent web designs: Consistent navigation system, page layout, menu structure, fonts, typography, and branding.
    • Examples: Apple.com, SimeDarby.com.my, 153joombas.com.
  • 2. Simplicity:
    • Purpose:
      • To minimise the number of steps involved in a process.
      • To use symbols and terminology that make the interface as obvious as possible.
      • To make it difficult to make mistakes.
      • To help the user achieve their goals faster and more efficiently.
  • 3. Visibility:
    • The more visible an element is, the more likely the user will know about it and how to use it.
    • Users should know their options and how to use them just by looking at the interface.
  • 4. Feedback:
    • Purpose:
      • To communicate the results of an interaction.
      • To signal whether or not the user or the product has succeeded / failed at performing a task.
    • Example: When hovering over navigation items, the element changes colour.
  • 5. Error Prevention:
    • Purpose: To alert the user when they're making a mistake.
  • Common Usability Pitfalls:
    • Complex interfaces.
    • Confusing navigation.
    • Poor feedback.
    • Inadequate error handling.

1.3 WEEK 3 — UNDERSTANDING WEBSITE STRUCTURE

IMPORTANCE OF WEBSITE STRUCTURE:
  • Website structure affects:
    • User experience (UX).
    • Search engine optimisation (SEO).
    • Website performance.
  • A well-structured website:
    • Helps users find information easily.
    • Keeps users engaged.
WEBSITE STRUCTURE:
  • 1. Header:
    • Definition of header: The top section of a webpage.
    • Contains: The website's logo, navigation menu, and contact information.
    • Purpose: Provides users with quick access to essential information and navigation.
  • 2. Body:
    • Definition of body: The main content area of a webpage.
    • Contains: Text, images, videos, and other multimedia elements.
    • Proper organisation of content is crucial for readability.
  • 3. Footer:
    • Definition of footer: The bottom section of the webpage.
    • Contains: Copyright information, links to important pages, and contact information.
    • Purpose: 
      • Provides closure to the webpage.
      • Provide additional navigation options.
  • 4. Content Organisation:
    • How: Use headings (H1, H2, H3, etc.) to create hierarchy.
    • Logical grouping of content and clear labelling of sections improve UX.
  • 5. Navigation Menus:
    • Purpose: Help users move around the website.
    • How: 
      • Use clear and concise labels for menu items.
      • Consider using dropdown menus for complex sites.

1.4 WEEK 4 — THE WEB & LANGUAGE

WEB STANDARDS:
  • Accessing the Web:
    • In the early days: Keyboard, mouse, and monitor.
    • Nowadays: Phones and tablets with touch screen interface.
    • Accessibility functions: Audible interfaces (i.e. for deaf people; people talk and listen to the screen) and speech output (i.e. for blind people and people who can't use their hands).
  • World Wide Web Consortium (W3C):
    • What is it: The organisation responsible for creating and maintaining web standards.
    • Examples of standard markup languages: HTML and CSS.
  • Definition of Web Standards: The core set of rules for website development.
    • Some websites do not comply with web standards, which increases their chances of being inaccessible.
  • Purpose of Web Standards:
    • To simplify website development.
    • To ensure that websites display properly across various browsers, operating systems, and screen resolutions.

1.5 WEEK 5 — HTML

HYPERTEXT MARKUP LANGUAGE (HTML):
  • 1. ID Attributes:
    • Every HTML element can carry an ID attribute.
    • Purpose: To identify one element as unique from other elements.
    • No two elements can have the same ID attribute value, otherwise the value is no longer unique.
    • ID attributes do not affect the presentation of an element.
      • It will only affect its appearance if a CSS rule indicates it should be displayed differently.
  • 2. Class Attributes:
    • Every HTML element can carry a class attribute.
    • Purpose: To identify a group of elements as unique from other elements.
    • More than one element can have the same class attribute value.
    • Class attributes do not affect the presentation of an element.
      • It will only affect its appearance if a CSS rule indicates it should be displayed differently.
  • 3. Block Elements:
    • Definition: Elements that appear at the start of a new line.
    • E.g. <h1>, <p>, <ul>, and <li>.
  • 4. Inline Elements:
    • Definition: Elements that continue on the same line as their neighbouring elements.
    • E.g. <b>, <i>, <em>, <a>, and <img>.

2.0 TUTORIALS 

2.1 WEEK 2 — PROTOTYPE DESIGN

Instructions:
  1. Design a new e-commerce app for a local clothing store.
  2. Users' needs: Users want to be able to easily browse and purchase clothing items online, with clear product descriptions and images, and a simple checkout process.
  3. Usability principles to consider: Consistency, simplicity, visibility, and error prevention.

Figure 2.1-1: WIP, Week 2 (30/04/24)

Figure 2.1-2: Final Prototype Design, Week 2 (30/04/24)

Figure 2.1-3: Testing Prototype, Week 2 (30/04/24)

2.2 WEEK 4 — HTML WEBPAGE #1 (PART 1)

Instructions:
  1. Create a webpage about yourself.
  2. Upload to Netlify.
  3. Software: Notepad.

Figure 2.2-1: HTML — Viewed in Notepad, Week 4 (14/05/24)

2.3 WEEK 5 — HTML WEBPAGE #1 (PART 2)

Instructions:
  1. Create a table for "My Schedule".
  2. Create a form for "Contact Me".
  3. Software: Adobe Dreamweaver

Figure 2.3-1: HTML — Table, Week 5 (21/05/24)

Figure 2.3-2: HTML — Form, Week 5 (21/05/24)

2.4 WEEK 6 — HTML WEBPAGE #1 (PART 3)

Instructions:
  1. Customise webpage:
    1. Background (colour, image).
    2. Fonts (family, weight, style, size, colour).
  2. Software: Adobe Dreamweaver

Figure 2.4-1: HTML — Background, Week 6 (28/05/24)

Figure 2.4-2: HTML — Fonts (Embedded from Google Fonts), Week 6 (28/05/24)
Fonts used: Jersey 25 Charted & Jersey 15

Figure 2.4-3: HTML — Fonts (H1), Week 6 (28/05/24)
Fonts used: Jersey 25 Charted

2.5 WEEK 7 — HTML WEBSITE #1 (PART 4)

Instructions:
  • Customise webpage: 
    • Body (width, margin, padding).
    • Hover (H1).
  • Software: Adobe Dreamweaver

Figure 2.5-1: HTML — Body, Week 7 (04/06/24)

Figure 2.5-2: Before (Left) & After (Right) — Body, Week 7 (04/06/24)

Figure 2.5-3: HTML — Hover, Week 7 (04/06/24)

Figure 2.5-4: Before (Left) & After (Right) — Hover, Week 7 (04/06/24)

2.6 WEEK 9 — HTML WEBSITE #2

Instructions:
  1. Create a navigation bar.
  2. Create columns.
  3. Software: Adobe Dreamweaver.

Figure 2.6-1: Navigation Bar, Week 9 (18/06/24)

2.7 WEEK 10 — FINAL PROJECT SAMPLE

Instructions:
  1. Create a sample website.
  2. Software: Adobe Dreamweaver.

Figure 2.7-1: Sample Website, Week 10 (25/06/24)

3.0 INSTRUCTIONS 


4.0 EXERCISE 1 — WEB ANALYSIS 

Instructions: 
  1. Analyse two existing websites.
  2. Identify the strengths and weaknesses of the websites, and how they impact UX.
  3. Write a report summarising your findings and recommendations. 
  4. Requirements: Around 250 words per website.

4.1 WEBSITE #1 — HAUS

Figure 4.1-1: Haus by HAUS, Week 1 (24/04/24)

4.1.1 PURPOSE & GOALS OF THE WEBSITE

Haus is a digital agency that specialises in web design and technology. This website acts as an e-portfolio for potential clients, with a target audience of e-commerce businesses.

Figure 4.1.1-1: Homepage, Week 1 (24/04/24)

The homepage has five sections in total, introducing the user to the agency's services, collaborators, notable works and contact information (Figure 4.1.1-1). A more detailed version of each section can be found in the navigation bar.

Overall, this accomplishes the website's function and successfully promotes the agency.

4.1.2 VISUAL DESIGN & LAYOUT

Figure 4.1.2-1: Homepage Variations, Week 1 (24/04/24)

The website is minimalistic in design, however, the start of the homepage, which periodically changes in background colour, typeface, and slogan (Figure 4.1.2-1), is very eye-catching. 

Figure 4.1.2-2: "About" Page Visual Design & Layout, Week 1 (25/04/24)

The website's colour palette is bland. Other than the homepage, the website is entirely in beige and black. That said, the fonts are readable, the text hierarchy is clear, and there's sufficient white space. The imagery is appropriate and relevant to the content (Figure 4.1.2-2).

Figure 4.1.2-3: "Contact" Page Visual Design & Layout, Week 1 (25/04/24)

One particularly eye-straining part of the website is the "Contact" page. The text is too large, and the images change every time the user scrolls, making the page look cluttered and messy (Figure 4.1.2-3)

Suggestions for improvement: 
  • Have a consistent accent colour to make the colour palette interesting. 
  • Reduce the font size and number of images on the "Contact" page.

4.1.3 FUNCTIONALITY & USABILITY

Figure 4.1.3-1: Homepage, Week 1 (25/04/24)

The website's navigation bar is located at the top of the interface (Figure 4.1.3-1), making it easily accessible to users, although it blends in with the body text and background.

Figure 4.1.3-2: Micro-interactions, Week 1 (25/04/24)

The interactive elements give clear feedback when interacted with (Figure 4.1.3-2). 

Figure 4.1.3-3: Titles of The Main Pages, Week 1 (25/04/24)

The titles of the main pages are vague and unclear, meaning the user has to scroll down to understand what they are seeing (Figure 4.1.3-3). The subpages are better titled.

As such, the website functions well but is lacking in terms of usability.

Suggestions for improvement:
  • Make the navigation bar contrast more against the body text and background.
  • Title the pages properly for ease of understanding.

4.1.4 CONTENT

Figure 4.1.4-1: Homepage Content Organisation, Week 1 (25/04/24)
Homepage Content: About > Work (latest projects) > Partnerships > Work > Contact
Navigation Bar: Work > About > Partnerships > Careers > Contact

The organisation of the homepage is a bit confusing. The order of the content is different from the navigation bar, and the "Work" section is split into two parts (Figure 4.1.4-1). Other than that, the rest of the website is well-organised.

Figure 4.1.4-2: Example of Work, Week 1 (25/04/24)

The content is well-written and detailed, with recent works promoted on the homepage. Text is paired with relevant imagery. The images are also themed, making the overall page look cohesive.

Suggestions for improvement:
  • Keep the navigation bar and homepage content order consistent.
  • Do not separate the two "Work" sections on the homepage.

4.1.5 PERFORMANCE

Figure 4.1.5-1: Compatibility on Different Devices, Week 1 (25/04/24) 

The website is highly compatible with different devices (Figure 4.1.5-1). It also has a fast loading speed and is extremely responsive.

4.2 WEBSITE #2 — ARTS TECH

Figure 4.2-1: ARTS TECH by HKADC, Week 1 (26/04/24)

4.2.1 PURPOSE & GOALS OF THE WEBSITE

ARTS TECH Exhibition 2.0 is the second iteration of an interactive arts programme launched by HKADC. The goal of the programme is to promote artistic and technological development in Hong Kong by transforming historical sites into interactive art.

Figure 4.2.1-1: Homepage, Week 1 (28/04/24)

The homepage of the website features two sections (Figure 4.2.1-1):
  • The event title, slogan, timeline, and event trailer.
  • The preview of the exhibitions.

The homepage doesn't tell the user what this website / programme is about. Instead, the user is expected to find the "About" page (located in the menu) for basic information.

Overall, while the website does feature all information relevant to the programme, important information could be made more visible. 

Suggestions for improvement:
  • Add an "About" section on the homepage.

4.2.2 VISUAL DESIGN & LAYOUT

Figure 4.2.2-1: Examples of Layout & Typography, Week 1 (28/04/24)

Figure 4.2.2-2: "Related Programmes" Page Visual Design & Layout, Week 1 (28/04/24)

The website is consistent in its layout and text formatting (Figure 4.2.2-1). All text are readable, utilise the same sans-serif font family, and have clear hierarchy. The imagery is appropriate and relevant to the content, and there's enough white space (Figure 4.2.2-2). 

Figure 4.2.2-3: Futuristic Elements & Use of Imagery, Week 1 (28/04/24)

Paired with futuristic background elements and imagery, the website has a clean, modern look to it (Figure 4.2.2-3). That being said, the colour palette of this website is extremely limited, being entirely grayscale. As a result, visual elements often blur together.

Suggestions for improvement:
  • Have a consistent accent colour to make the colour palette interesting and make differentiating visual elements easier.

4.2.3 FUNCTIONALITY & USABILITY

Figure 4.2.3-1: Interactive Elements, Week 1 (27/04/24)

Figure 4.2.3-2: Bad VS Good Examples of Interactive Elements, Week 1 (27/04/24)

All the interactive elements of this website have high visibility, work smoothly and give clear feedback, save for:
  • The menu icon is small and discreet, making it difficult to locate (Figure 4.2.3-1).
  • The "Exhibition" section on the homepage, where the buttons to preview different projects are not clearly stated and do not give feedback when hovered over (Figure 4.2.3-2).

Figure 4.2.3-3: Progress Bar / Sub-Menu, Week 1 (28/04/24)

Additionally, a progress bar / sub-menu is provided at the bottom of each page as a means of tracking reading progress and fast navigation (Figure 4.2.3-3).

Suggestions for improvement:
  • Make the menu icon larger and more obvious.
  • Make the preview buttons in the "Exhibition" section (homepage) give feedback.

4.2.4 CONTENT

Figure 4.2.4-1: Organisation, Week 1 (27/04/24)

Users can easily navigate the website as information is well-organised, sorted into categories and clearly titled (Figure 4.2.4-1). The content is well-written and detailed.

4.2.5 PERFORMANCE

Figure 4.2.5-1: Compatibility on Different Devices, Week 1 (28/04/24)

The website is highly compatible with different devices (Figure 4.2.5-1). It has a relatively fast loading speed and is extremely responsive.

5.0 EXERCISE 2 — WEB REPLICATION 

Instructions: 
  1. Replicate two existing website main pages.
  2. Show a comparison between the original and the replicated.
  3. Images, fonts, and icons can be replaced with similar counterparts.
  4. Software: Adobe Photoshop / Adobe Illustrator.

5.1 MAIN PAGE #1 — BANDIT RUNNING

Figure 5.1-1: Grids, Week 3 (07/05/24)

Figure 5.1-2: Images — Before (Left) & After (Right), Week 3 (08/05/24)
Image source: Pexels, Software: Photoshop

Figure 5.1-3: Comparison #1 — Original (Left) & Replica (Right), Week 3 (08/05/24)
Fonts used: Acumin Variable Concept

Figure 5.1-4: Comparison #2 — Original (Left) & Replica (Right), Week 3 (08/05/24)

Figure 5.1-5: Web Page #1 Replica (Final Submission), Week 3 (08/05/24)

5.2 MAIN PAGE #2 — OCEAN HEALTH INDEX

Figure 5.2-1: Grids, Week 3 (09/05/24)

Figure 5.2-2: Images — Before (Left) & After (Right), Week 3 (09/05/24)
Image source: Pexels, Software: Photoshop

Figure 5.2-3: Comparison #1 — Original (Left) & Replica (Right), Week 3 (09/05/24)
Fonts used: Montserrat, Helvetica, Arial, Tw Cen MT

Figure 5.2-4: Comparison #2 — Original (Left) & Replica (Right), Week 3 (09/05/24)

Figure 5.2-5: Web Page #2 Replica (Final Submission), Week 3 (09/05/24)

6.0 REFLECTION 

These exercises eased us into the module by giving us something familiar to work with. While not overtly difficult, they were time-consuming and required attention to detail. 

Labels:

Comments

Post a Comment

Popular posts from this blog

VIDEO & SOUND PRODUCTION | FINAL COMPILATION

Week 1 –  Week 15 | 26/04/24 – 04/08/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Video & Sound Production | Section 03 | VSP60104 Final Compilation TABLE OF CONTENTS  1.0 PROJECT 1 — AUDIO EDITING EXERCISES     1.1 EXERCISE 1 — AUDIO DUBBING     1.2 EXERCISE 2  — SOUND SHAPING 2.0 PROJECT 2 — SHOOTING & EDITING     2.1 PROJECT 2A — PRODUCTION SHOOT     2.2 PROJECT 2B  — IG / TIKTOK VIDEO 3.0 FINAL PROJECT — STOP-MOTION 1.0 PROJECT 1 — AUDIO EDITING EXERCISES  1.1 EXERCISE 1 — AUDIO DUBBING Google Drive Link to Project 1 blog post Figure 1.1-1:  Exercise 1 — Video (Final Submission), Week 4 (19/05/24) Figure 1.1-2:  Exercise 1 — PPT (Final Submission), Week 4 (19/05/24) 1.2 EXERCISE 2 — SOUND SHAPING Google Drive Figure 1.2-1:  Exercise 2 — Phone Call Sound Effect (Final Submission), Week 10 (27/06/24) Figure 1.2-2:  Exercise 2 — Closet Sound Effect (Fina...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 3 — FINAL PROJECT

Week 6 –  Week 8 | 11/03/24 – 29/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 3 — Final Project TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 3 — FINAL PROJECT     2.1 TASK DELEGATION     2.2 SKETCHES     2.3 CRAFTING     2.4 DECORATING & ASSEMBLY     2.5 PHOTOSHOOT      2.6 FINAL SUBMISSION 3.0 FEEDBACK     3.1 WEEK 7 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 3 — FINAL PROJECT Instructions:   Produce a visual design outcome that reflects your interpretation and definition of "framing". Consider the cultural and aesthetic aspects of your design. 2.1 TASK DELEGATION 1. KANZASHI OF THE PAST: Sketching:  Ying Ying, Velicia Crafting:  Emily, Velicia Decorating:  Emily, Ying Ying Photoshoot: Ying Ying (photography), Velicia (modelling), Emily (editing) 2. KANZASHI OF THE PRESENT: Sketching:...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 2 — FIELD STUDY

Week 4 –  Week 5 | 26/02/24 – 10/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 2 — Field Study TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 2 — FIELD STUDY     2.1 RUNDOWN     2.2 OSAKA     2.3 KYOTO     2.4 NARA     2.5 INFORMATION COMPILATION      2.6 FINAL SUBMISSION 3.0 FEEDBACK 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 2 — FIELD STUDY Instructions:   Collect research materials (i.e. visual, oral, textual, tactile artefacts) to support Project 1. All research materials must be recorded, documented, and should include information such as: Type of artefact / material. Purpose. Symbolism. Cultural / historical background. 2.1 RUNDOWN We decided to base our field of research on the three major cities in the Kansai region: Osaka, Kyoto, and Nara . This is for two reasons: 1. The Heart of Japan:  Osaka is known...
Post a Comment
Read more