Interactive Design : Lectures & Exercises


22.4.2024 / Week 1- Week 4
Angel Tan Xin Kei / 0356117
Interactive Design / Bachelor of Design (Hons) in Creative Media
Lectures & Exercises


⋆ ˚。⋆୨୧˚ Lecture ˚୨୧⋆ ˚。⋆

Week 1 Usability: Designing Products for User Satisfaction
It 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.An interface with high usability guides users through its easiest route to achieve its goal.

Key Principle of Usability 

1. Consistency
 
  • ensures that website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.  
  • an intuitive design which includes consistent navigation system,  page layout and menu structure, fonts and typography and branding in web design  
2. Simplicity
  • 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.  
  • design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience   
3. Visibility 
  • equally important is the opposite: when something is out of sight, it’s difficult to know about and use
4. Feedback 
  • communicates the results of any interaction, making it both visible and understandable
  • give the user a signal that they (or the product) have succeeded or failed at performing a task
5. Error Prevention 
  • involves alerting a user when making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake
Common Usability Pitfalls and How to Avoid Them
  •  Complex interfaces 
  • Confusing navigation 
  • Poor feedback 
  • Inadequate error handling 
Week 2 UI Design: Basic Types of Buttons in User Interfaces

Button is an interactive element that enables to get the expected interactive feedback from the system following a particular command.Designers have to apply considerable time and effort to create effective and noticeable buttons that are naturally integrated into the general stylistic concept but are contrast enough to stand out in the layout.
  • CTA Buttons
    • presents a conversion for a particular page or screen (for example buy, contact, subscribe, etc.), in other words, it turns a passive user into an active one.
  • Text Buttons
    • usually used to create secondary interactive zones without distracting from the main controls or CTA elements
    • terminology is transparent: it’s a button presented with a piece of text
  • Dropdown Button
    • drop-down list of mutually exclusive items
  • Hamburger button
    • hamburger menus free the space making the interface more minimalist and airy
    • responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices
  • Plus Button
    • users are directly transferred to the modal window of creating content or a medium stage when they are given additional options to choose from and make adding content more focused
  • Expendable Button
    • a button is expanded into a set of buttons marking definite types of content, so that the user could make the choice at the start and reach the necessary screen
  • Share Button
    • share the content or achievement directly to social networking accounts
  • Ghost Button
    • the ghost button offers access to less popular option which helps to build a solid visual hierarchy of the buttons on the screen
  • Floating Action Button (FAB)
    • a round icon button elevated above other page content and usually gives instant access to essential or popular actions users do with the app
Week 3 Understanding Website Structure 
Website structure is the foundation of a user-friendly and accessible website. It affects user experience, SEO, and overall website performance. 

Figure 3.1 Anatomy of Landing Page

Websites are typically divided into three key elements:
  • Header ( logo, essential information and navigation)
  • Body (multimedia elements)
    • Content (heading 1. 2. 3)
    • Navigation Menu 
  • Footer (copyright information and links )
Week 4 The Web and Language


Week 4 // UNDERSTANDING WEB Structure 

My About Me Sites:



Week 5 HTML & CSS


Week 7 CSS Selector


⋆ ˚。⋆୨୧˚ Instruction ˚୨୧⋆ ˚。⋆


Week 1 |  Exercise 1 Deadline: April 30

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) 

Week 3 | Exercise 2 Deadline 15th May 2024
This task is to replicate TWO (2) main pages from the websites provided in the link below to gain a better understanding of their structure. Choose any two websites from the link. Follow the original dimensions for width and height. This exercise aims to enhance your design skills using software like Photoshop or Adobe Illustrator and provides insights into web design best practices.

What To Have in The Replication:
  • Images and Icons: Use stock images or free stock icons; they don't need to be exact matches but should be similar.
  • Fonts: Focus on the layout, typography, and color scheme. Use Google Fonts to find similar typefaces if the original fonts are not available.
  • Design Elements: Use shapes to construct arrows and other symbols as demonstrated in class.
  • Logos and Symbols: Find similar logos and symbols if the originals are not accessible.
  • Technical Skills: For complex backgrounds like gradients, use tools like the eyedropper and create transparent text boxes to filter images.
Deliverables:

Final Comparison: Provide a side-by-side comparison of the original and replicated versions of the websites.

⋆ ˚。⋆୨୧˚ Exercises ˚୨୧⋆ ˚。⋆

Week 1 // Exercise 1: WEB ANALYSIS
1st Website:  




Week 3 // Exercise 2 : WEB REPLICATION
In this week, we were tasked to replicate two main pages from the provided link to understand their structure. Focus on layout, typography, and color scheme, using Photoshop or Illustrator. Replace original images with similar stock images or icons. Download comparable fonts from Google Fonts. Screenshot the website and replicate the page to enhance your web design skills.

Mr. Shamsul also provided us some resource to find images and install font:
Free image:

Google Fonts link:

 
Firstly, Mr. Shamsul showed us how to screenshot the full page of a website in Chrome by right click--> inspect --> run command --> screenshot full screen then we get a screenshot.png of a website but need to adjust the layout first before we proceed.

Figure 1.1 Steps to screenshot the webpage
 
Figure 1.2 Screenshot of Morgan Stanley website.png

We need to find similar fonts and images to replicate the website. Our teacher showed us how to use shapes to construct arrows and symbols using pathfinder to divide feature. After examining the websites, I discovered the fonts used, but the Morgan Stanley typeface is paid, so I used an alternative of Muktahee font family to replace. 
Figure 1.3 Font used is Karla and Ms Glorolia


Figure 1.4 Constructing arrows using diamond shapes and divide feature

As for logo, I found the similar shape then use Image Trace feature to make and expand the image into outlined object so it is easier to adjust shape and colour

Figure 1.5 Image Trace for Similar Logo

Final outcome comparison between Original and the Replicated versions of the websites :

Comparison of Replication (Left) and Original (Right)


 
Figure 2.1 Screenshot of Ocean Health Index Websites.png

The font used is all san-serifs so Montserrat, Helvetica, Arial so it is easier to get from Adobe Fonts and convenient to replicate.
Figure 2.2 Font used shown in inspectors

The Ocean Health Index site was easier after mastering those skills in website 1, requiring the eyedropper tool for background gradients and transparent text boxes to filter images.

Figure 2.3 Gradient applied and Low Opacity of Shape 

Then I found some bubbles png to enhance the coherent of the original background.

Figure 2.4 Input of Bubbles elements 

Overall, it was quite easy to understand the layout design and interface, including the header, body content, and footer of the websites.

Final outcome comparison between Original and the Replicated versions of the websites :
Comparison of Replication (Left) and Original (Right)

Week 7 // Exercise 3 : CREATING A RECIPE CARD
In this exercise, Mr Shamsul assigned a task where we need to create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.

Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions

Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

I have thoroughly looked through the recipe book and discovered my favorite dessert: strawberry scones.     

I have carefully compiled the list of ingredients needed to prepare this delightful treat and designed the colour and picture that I would like to input.  


⋆ ˚。⋆୨୧˚ Reflection ˚୨୧⋆ ˚。⋆
Observation 
Engaging in web replication exercises provided a valuable opportunity to dissect and understand the underlying structure of various websites. I observed how different websites implement their layouts, styles, and functionalities, gaining insights into best practices and common design patterns. These exercises revealed the importance of semantic HTML for content structure and the use of CSS for visual styling. Analyzing the code of existing websites helped me identify efficient coding techniques and the strategic use of elements to enhance user experience.

Experience 
Recreating a website structure and designing a recipe cookbook using HTML and CSS was a practical and immersive experience. By replicating existing websites, I learned to pay attention to detail, ensuring that every element was accurately reproduced. Creating the recipe cookbook involved organizing content logically and applying CSS to make the design visually appealing and user-friendly. This hands-on project allowed me to experiment with different layout techniques, color schemes, and typography, enhancing my ability to create well-structured and aesthetically pleasing web pages.

Findings 
Through these exercises, I found that replicating websites and creating my own projects significantly strengthened my coding skills. Understanding the structure and design of existing websites provided a solid foundation for my own creations. Working on the recipe cookbook taught me the importance of clean, semantic HTML for content organization and the power of CSS in transforming a simple layout into an engaging user interface. These activities reinforced the value of practice and analysis in mastering web development, ultimately leading to more efficient coding practices and improved design capabilities.

Comments

Popular posts from this blog

Information Design / Exercises

Game Development // Task 2: Art Asset Development

Information Design / Project 1: Animated Infographic Poster