Interactive Design - Exercise

23/9/2024-ending week

FENG SHIWEN  /  0374595

Bachelor of Design in Creative Media   

Taylor's University 

INSTRUCTION


LECTURE

WEEK2

What is Usability?
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.


When users first encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge
An interface with high usability guides users through its easiest route to achieve its goal


Key Principle of Usability
  • Consistency
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.

  • Simplicity
The principle that user interfaces should be “simple” for users.
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.

  • Visibility
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
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.


Common Usability Pitfalls and How to Avoid Them

  • Complex interfaces
  • Confusing navigation
  • Poor feedback
  • Inadequate error handling




WEEK3

Why Website Structure Matters

Website structure is the foundation of a user-friendly and accessible website.
It affects user experience, SEO, and overall website performance.
A well-structured website helps users find information easily and keeps them engaged.


The Three Key Elements
Websites are typically divided into three key elements:
  • Header
  • Body
  • Footer

Header
The header is the top section of a webpage.
It usually contains the website's logo, navigation menu, and contact information.
The header provides users with quick access to essential information and navigation.

Body
The body is the main content area of a webpage.
It contains text, images, videos, and other multimedia elements.
Proper organization of content within the body is crucial for readability.


Footer
The footer is located at the bottom of a webpage.
It typically includes copyright information, links to important pages, and contact details.
The footer provides closure to the webpage and additional navigation options.


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


Navigation Menus
Navigation menus help users move around the website.
Use clear and concise labels for menu items.
Consider using dropdown menus for complex sites.




EXERCISE


📌WEEK2  |  Exercise 1

Write your report in e-portfolio

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

Write a brief report summarizing your findings and recommendations.

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)


I chose the following two sites for analysis ：

1.MERLIN

https://merlin.studio/

Merlin Studio offers services in crafting immersive digital experiences, specializing in web design, development, and 3D technologies for businesses and agencies.

Design and Layout

•Visual Design: The site uses a clean, modern layout. The color scheme is neutral and professional , aligning well with their brand.


• Imagery: High-quality images and 3D visuals emphasize the company’s capabilities, but some may affect load times.

Functionality and Usability
• Navigation: Simple, but concise menus with clear categories.
• Interactive Elements: Case studies and project highlights are interactive, but forms are limited.


Content Quality
• Relevance: The content is well-targeted to businesses needing custom digital experiences, with clear case studies showcasing their work. • Clarity: Text is concise, but some industry jargon might be confusing for non-experts.
Performance
• Load Times: Generally smooth, but larger visuals can impact performance.
• Compatibility: Performs well across devices, although mobile load times could be improved.
Strengths and Weaknesses
• Strengths: Engaging design, targeted content, strong portfolio.
• Weaknesses: Load time issues due to unoptimized visuals.
Recommendations
• Optimize images for faster mobile loading.
• Enhance form feedback for better user engagement.


2.Deduxer

https://www.deduxer.studio/


Purpose and Goals
Deduxer Studio offers no-code web development, SEO, and design services aimed at SaaS companies and agencies. Their goal is to provide fast, scalable, and visually compelling digital solutions through subscription-based plans.

Design and Layout
•Visual Design: The site uses a professional, clean design.
• Imagery: High quality images and smooth interaction, strong compatibility with the device, and few stuttering situations.
Functionality and Usability

 • Navigation: Simple, with clearly labeled categories, though some areas could benefit from clearer structure.
• Interactive Elements: Forms and CTA buttons are prominent but could improve user feedback after submissions.


Content Quality

 • Relevance: Targeted to their audience with useful case studies and industry-specific terminology.
• Clarity: Generally clear, though some technical terms might confuse less experienced users.

Performance
• Load Times: Desktop performance is solid.
• Compatibility: Compatible with  browsers, well-optimized for mobile use.

Strengths and Weaknesses
• Strengths: Strong design, relevant content, and targeted service offerings.
• Weaknesses: A lack of form feedback.

Recommendation
• Improve user feedback mechanisms after form submissions.


TEAM EXERCISE in class :


https://www.figma.com/design/cPV3Wf4stzwOxQR7yyPseY/EXERCISE-1?node-id=0-1&node-type=canvas&t=e0pXCJs1nU8p2FdR-0





📌WEEK3 | 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. 

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

Free image: https://www.oceanhealthindex.org/?authuser=0



EXERCISE  (1) :

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



EXERCISE (2)  :

https://www.morganstanley.com/




📌WEEK7-8 | Exercise 3

Personal CV Page
To design and build a personal CV page using basic HTML and CSS

Instructions:
  • Add your name as the main header at the top of the page.
  • Write a short paragraph describing yourself, your interests, and any hobbies.
  • List your most recent education details. Include the institution name, year, and course or program.
  • Create a bulleted list of at least five skills you have (these could be related to school, hobbies, or any other talents).
  • Add a simple contact section with an email address and a link to any social media profile (optional). 
  • Use different font sizes and weights to make sections and headers stand out.
  • Choose a basic color scheme for the text and background. Use colors that are easy to read and look professional.
  • Add padding and margins around each section to give your CV a clean, organized layout.
  • Use borders or horizontal lines to separate sections for a professional touch.
  • Add an image or profile picture at the top.
  • Style your CV with a unique font and background color or pattern to reflect your personality.


Working process  in Adobe Dreamweaver:


  • Create a folder for the task and include subfolder (images) and the HTML file in the folder
  • Create a single HTML file for the content. Name the file as index.html
  • Add the CSS rule within the head section
  • Upload the folder to Netlify






Comments

Post a Comment

Popular posts from this blog

Information Design - EXERCISE 1&2 : QUANTIFIABLE INFORMATION

Image
23/9/2025-Ending Week FENG SHIWEN  /  0374595 Bachelor of Design in Creative Media   Taylor's University TABLE OF CONTENTS INSTRUCTIONS LECTURES EXERCISE REFLECTION INSTRUCTIONS LECTURES WEEK 2 Exercise 1: Quantifiable Information – Quantify raw data and visualize information as a photograph A is a visual representation of numerical data that allows for easy interpretation and analysis.  Instruction: Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of marble ball 4. Set of colourful rubber strap In this exercise you're required to quantify our chosen objects and arrange them into a presentable layout or chart. ...
Read more

Advanced Interactive Design - Final Project

Image
21/4/2025-Ending Week FENG SHIWEN  /  0374595 Bachelor of Design in Creative Media   / Advanced Interactive  Design Taylor's University INSTRUTIONS FINAL PROJECT Completed Thematic Interactive Website Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages. Deploy the final website to Netlify or GitHub.  Review of the production process For this project, I used Adobe Animate to create the animation. I initially ran into an issue where the exported HTML showed a black screen, but after checking the file paths, organizing the folder structure, and uploading everything to Netlify, it was successfully resolved. Here are a few key screensho...
Read more

Games Development - Task 1

Image
26/9/2025-Ending Week FENG SHIWEN  /  0374595 Bachelor of Design in Creative Media   Taylor's University TABLE OF CONTENTS INSTRUCTIONS LECTURES TASK 1 REFLECTION INSTRUCTIONS TASK 1 -Individual Game Ideation For Task 1 of this course, each student is required to come up with an individual game idea. I chose to design a mini-game that combines stargazing, plants, and myths from different cultures. The game is called “The Altar of Stars and Flowers.” The concept is that players observe the stars and collect plants to complete rituals at an altar, gradually unlocking myths from Chinese, Greek, Egyptian, and other cultures. Fig 1.0 Star chart The theme of this game is to...
Read more