Interactive Design — Exercises

April 23, 2023

Interactive Design — Exercises

3.4.2023— (Week 1—Week )
Rachel Madeline Purwanto / 0356994
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises

❥LECTURE

Week 2 — Designing Products for User Satisfaction

Usability

- Refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.

- Part of User Experience Design. Second level of UX design.

- Design's usability depends on how well its features accommodate users' needs and contexts.

- When first user encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge

- Interface with high usability guide users through its easiest route to achieve its goal.

Key Principles of Usability

1. Consistency

key factor in web design for both visual elements and functionality.
ensures that your website looks coherent and works harmoniously across all its different elements (headers, footers, sidebars, and navigation bars)
consistent navigation system, page layout and menu structure, fonts and typography and branding in web design

2. Simplicity

principle that user interfaces should be simple for users
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
incorporating it in designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently while enjoying great user experience

3. Visibility

basic principle that the more visible an element is, the more likely users will know about them and how to use them; when something is out of sight, its difficult to know about and use
users should know, just by looking at an interface, what their options are and how to access them.

4. Feedback

communicate the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they have succeeded or failed at performing a task.
Example : display error message when user imput wrong data, hovering above an element, click sound when clicked on something

5. Error Prevention

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.
important because humans are prone to and will always make mistakes.
Example : website warns the user if their password is too simple

Common Usability Pitfalls and How to avoid them

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

Week 3 — Colors for Web

Why color matters in Web Design?

- most apparent advantage of using right color combinations in web design is that they help users understand and navigate the site.

- can improve visitors' online experiences

- enabling them to find the information they need and respond to your Call of Action

- plays significant role in branding and product messaging

- color plays a huge role in customers' decisions about purchasing a product

- colors can increase overall brand recognition

Color Relationship

Monochrome : consisting various tints, shades, saturations of same color
Complementary : based on two colors from opposite sides of the color wheel
Analogous : featuring three colors that are next to each other on the color wheel
Triadic : using 3 colors that are at the points of a triangle drawn within the color wheel

- Complementary and analogous color schemes are the easiest to work with for many designers.

Fig 1.1 Color Relationship

Color Warmth

- hues that contain higher amount of yellow and red are considered warm colors

- evoke a sense of passion, happiness and heat

- can seem aggressive and bring feelings of danger, often used in alert messages

Fig 1.2 Color Warmth

- cool colors contain higher amounts of blue and purple

- reminisce chilly climates, crystal clear waters, or the sky

- considered more soothing and relaxing than warm colors

- can also carry connotations of formality and sadness

- CMYK used in print design

Tint and Shades

- tints are created by adding white to a color

- higher levels of white will produce lighter tints

- if add black will produce a different shade, darker the shade the more black it contains.

Fig 1.3 Tints and Shades

Hue, Saturation, Lightness

Hue describes the degree of similarity between colors

point reference is usually a color such as red, green, blue or yellow

Saturation refers to color intensity

increasing it will make the color more vibrant and darker
decreasing it will make the color appear faded and pale

Lightness defines how bright a color is compared to pure white

Contrast

- Its a crucial element of any website, especially when it comes to background color and text

- vital not only for readability but content hierarchy as well

Color Psychology

red is a strong energetic color, can symbolize emotions and ideas, both positive and negative
orange is a warm and happy color, reminds users of friendliness, enthusiasm, and motivation
yellow symbolizes joy, happiness, sunlight
green is a positive and calm color widely associated with nature, ecology, and renewing energy
blue is a popular choice for many corporate brands as it symbolizes trust and reliability
purple is associated with royalty, luxury and wealth, high amounts of it can distract users
pink is a youthful and romantic color, related to femininity
black has many meanings and can evoke different feelings when used in combination with other colors
white is a popular choice for modern, minimalist websites, increases readability, feeling of cleanliness and light

How to select and effective color scheme

- By experimenting in a guided environment, we are able to learn how to apply these principles without becoming frustrated when things are not working perfectly.

- These tools are a sort of "color theory safety net", to help you explore your own creativity without ever needing to stray far from the established rules for pleasing color combinations.

Exercise

We were told to do some research based on 3 websites.

What are the three basic colors that monitors transmit?

Red, green and blue
How many colors could be referenced by name (e.g., "red") in HTML 4.01?
16
How many different colors are there in the "web-safe" palette?
216

Are the majority of people we refer to as color blind unable to see any color at all? Explain.
No, depends on the type of type of color-blindness they have, the colors with which they have difficulty distinguishing depend upon their type of color-blindness, but red-green deficiencies are the most common, meaning that certain shades of the colors red and green may appear very similar.
According to the WebAIM page on color blindness, what is the key to designing sites that are accessible to people who are color blind?

However, when colors are not perceived by users who are blind or color-blind, are overridden by custom settings, or are not readily distinguishable, this information would need to be conveyed by annotating the image, using different styles or contrasts for each line, or by supplementing the image with text on the web page that conveys the same information.
Information should also be provided in another way.

❥INSTRUCTIONS

❥TASK

Website Analysis

For our first task, we are instructed to choose 2 websites from the given link and analyze them, taking note of its design, layout, content, and functionality. We are to identify the strengths and weaknesses of the website and consider how they impact the user's experience.

There are several things we have to consider when writing 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 colour, 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.

Fig 1.1 Website Analysis

Week 2 — Exercise

As a group, we were instructed to sketch out wireframes of an online classroom website in an hour. We started with the landing page first and the general layout so all of us could go forth from there and keep the icons and layout consistent throughout the rest of the pages.

Fig 2.1 Website Wireframes Draft Plan sketches

We drew the layout of 4 pages of that website including the home page, class materials and lessons, folder, and assignments. It included a chat box always at the corner where you could communicate with your classmates as well as your teachers and a notification and calendar sidebar on the right to keep track of all the assignments due as well as classes or meetings.

Fig 2.2 Website Wireframe Sketches

Week 2 — Exercise Replicate Website

For this week's task, we are instructed to replicate two chosen existing websites to gain a better understanding of their structure. Follow the dimension of the existing website from the width and height. We are to use either photoshop or illustrator and must use similar fonts and typefaces.

I decided to use Illustrator since it was easier for me to do all the logos and icons on Illustrator.

Fig 3.1 Progress done on AI for first website

Fig 3.2 Progress done on AI for second website

Fig 3.3 Final replicated websites

Week 6 — HTML Exercise : Personal Profile Page

This week we are instructed to create a personal profile page using HTML. The goal of this task is to help you practice your HTML skills and create a webpage that showcases your personal interests.

We are to add certain HTML tags to structure our content :

Use headings (h1, h2, etc) and paragraphs (p) to make our content more readable.
Make sure to add lists (ul or ol) to showcase personal interests. (for ex; create a list of your favorite books, movies, or hobbies.
Add links (a) to profile page. (link to socmed or other websites)
Include an image (img) on profile page (could be a pic of yourself or something that represents personal interests)

Fig 4.1 Progress of HTML Profiling

Fig 4.2 Progress of HTML Profiling

Fig 4.3 First look of the Website

After making some adjustments and learning how to add image as background, I refined the website to fit the colour scheme further. I explored with colour codes and lists as well.

Fig 4.4 Final Design of HTML Profiling Exercise

https://rachelmadelinesprofile.netlify.app/

Week 7 — Exercise 4 : Layout Grid Exercise

For this exercise, we are tasked to create a responsive grid layout for a website. Design and alignment should be visually appealing and functional across different screen sizes which allows for optimal viewing on both desktop and mobile devices. Explore media queries for ensuring that your website is responsible and different link styles to improve the usability and aesthetic of the website.

Fig 5.1 Progress for HTML

Fig 5.2 Progress for HTML

Fig 5.3 Progress for HTML

Fig 5.4 Progress for CSS

To make the layout visually appealing and organized, I decided to do research on how to layout the image beside the text and found out about display grid and flex, which allows you to layout elements in columns and rows as shown above. At first, I tried to use display grid but noticed that there was too much space between the text and the box so I decided to change it to display flex.