Interactive Design

April 05, 2023

Interactive Design - Exercises

JENNIFER HUANG (0352990)
Bachelor of Design in Creative Media
Interactive Design - Semester 2

LECTURE NOTES

Week 1 - Surveying the Possibilities

Figure. 1 Week 1 Lecture

Week 2 - Usability : Designing Products for User Satisfaction.

Figure. 2 Week 2 Lecture

Week 3 - Colors for Website

Figure. 3 Week 3 Lecture.

MODULE INFORMATION BOOKLET

Figure. 4 Module Information Booklet

EXERCISES

Week 1 - Exercise 1
First week of class I was absent (still back at my hometown). But there's task 1 that we'll need to finish by next week. Choose two websites form the link given and review the website we've selected carefully, taking notes of its design, and consider how they impact the user experience.

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

Write a brief report summarizing in not more than 500 words. You can include a screen capture of each section or page of the website to explain.

Figure. 4 Final Report. Task 1

Week 2/3 - Exercise 2 - Website Replica

On the second week, Mr. Shamsul explained about the usability of designing products for user satisfaction. First of, Usability refers to how effectively, efficiently, and successfully a particular user can utilize a product or design in a certain situation. It is a part of user experience or known as the UI design, it is the second level of UX design. Basically, a design's usability depends on how well its features accommodate user's needs and contexts.

When user 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
- Simplicity
- Visibility
- Feedback
- Error Prevention

Common Usability Pitfalls and How to Avoid Them :
- Complex Interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling

We then did a little group activity where each group were given a scenario and we need to design a new interface to solve a particular problem or meet a particular user need. Starting by doing a sketch of our design then create a basic prototype using paper, cardboard, or other simple materials (A4 Paper). On this class, we did a sketch on a A4 paper given my Mr. Shamsul.

For my group, we did Scenario 2. Designing a new social media platform for a specific interest group, such as fans of a particular TV shows or hobby. The requirements needed for the design are,
User need :
- Users want a platform that is easy to use, with clear communication and sharing features, and a sense of community among other users.
Usability principles to consider :
- Consistency
- Simplicity
- Feedback
- Error prevention.

First of, me and my team mates discussed what theme or platform should we do. After sharing quite a while, we decided to go with sports theme specifically basketball app.

Figure. 5 Our Final Sketch for B.talk home page.

Figure. 6 Feedback session given by group 1

Second task, we were to replicate two existing websites given in the link on google classroom to gain a better understanding of their structure. We can choose any two from the link given and follow the dimension of the existing website from the width and height. This exercise will help us develop our design skills using software such as photoshop or Adobe Illustrator, and gain insights into web design best practices. We can use any image from stock image or free stock icon. The image that we'll be using doesn't have to be an exact image and can replace it with a similar image. Focus on the layout, type style, and color style. To find a similar fonts we were allowed to download fonts form google fonts.

For this task, I decided to use Ocean Health Index and People by Wagepoint website.

Figure . 7 Looking for the original Width and Height for the Website

Figure . 8 Layers shown on Adobe Illustrator

Figure . 9 Final Result of Web replica.

Week 6/7 - Exercise 3 - HTML : Personal Profile Page

In this exercise, we're asked to create a personal profile page using HTML. The goal of this exercise is to help you practice out HTML skills and create a webpage that showcases your personal interests.

Instructions:

-Think about what you want to include on your profile page. You should include your name, a photo, a brief bio, and some personal interests.

-Use HTML tags to structure your content. You should use headings (h1,h2,etc) and paragraphs (p) to make your content more readable.

-Add lists (ul or ol) to showcase your personal interests. For example, you could create a list of your favorite books, movies, or hobbies.

-Add links (a) to your profile page. You could link to your social media profiles or to other websites that you find interests.

-Once you have completed your profile page, you can publish it online using a free hosting service like GitHub Pages or Netlify. This will give you a chance to see your webpage live on the web and share it with others.

Figure. 10

Week 8

Exercise 4 - Layout Exercise

Based on the content provided (text and images), our task is to create a responsive grid layout for a website. The design and alignment should be visually appealing and functional across different screen sizes, allowing for optimal viewing on both desktop and mobile devices. Upon completing the task, upload the exercise to Netlify and submit the link here. We may want to explore media queries for ensuring that your website is responsive and different link styles to improve the usability and aesthetic of the website.