UI/UX Foundations for Product Design

Setup

• Local Environment [Canvas || Course structure]
• Learning to learn.

Figma Foundations

• Figma’s interface.
  Components & Variants.
  Distinguishing Product Design from UX Design.
  Digital Product:-Terms, Roles, considerations and contexts of a product lifecycle.

Design Ethics

• Define plagiarism.
• Identify Dark patterns & ethical violations.
• Second-order thinking in consideration of user action.

Inclusive Design

• Identify limitations of designing based on our abilities & biases.
• Differentiate between permanent, temporary, and situational disabilities.
• Explain the importance of diverse design-team perspectives (representation).

Accessibility

• Identify limitations.
• Describe the difference in disabilities.
• Explain the importance of diverse perspectives.
• List benefits to diversify representation within a digital product.

Problem Space Research

• Differentiate research approaches: problem space research VS solution space research.
• Relate contextual inquiry and user empathy.
• Business Analysis: Basic Concepts.

Market Research

• Rationalising domain research B4 development.
• Market SWOT analysis [Metrics analysis: Audience size, enthusiasm, and social sentiment].
• understand the history and trends of a product marketplace.

Qualitative research

• Differentiate qualitative and quantitative research methods.
• Explain user interview roles in problem space determination.
• Interview and follow-up questions design || Sequencing || prepping and implementation.

Quantitative research

• Statistical significance in determining meaningful data.
• Strategies to avoid research biases.
• Aligning survey questions to stakeholder goals.
• Digital Well-being
• Understand how digital products reward addictive behaviour.
• Distinguish between intentional
• & unintentional digital screen time.
• Listing metrics and default settings that account for user wellness & healthy interactions
• Synthesis
• Synthesis role in communicating findings to stakeholders.
• Differentiate thematic and content analysis.
• Use affinity diagramming to identify patterns within qualitative data.
• Analyze and reframe research insights to present opportunities for improvement.

Problem Scoping

• Identifying and challenging assumptions.
• Problem space exploration & decomposition.
• Defining solution space success criteria.

Sketching and Rapid Prototyping

• Using sketches to generate ideas and iterations.
• Differentiate sketching for idea generation and sketching for feedback.
• Develop sketches from common interface shapes.
• Use annotations and notes to clarify sketch functionality.

Analysing (Early ideas)

• Divergent and convergent thinking.
• Evaluate idea viability, feasibility, and desirability.
•  Using low-fidelity prototypes (early testing)

Visual Hierarchy

• Define visual hierarchy and explain adjusting element focus to create distinct levels of dominance.
• Define white space and explain its role in enhancing clarity and legibility and focusing user attention in design layouts.
• Explain the role of proportion in improving visual hierarchy.
• Apply contrast, white space, and proportion to improve the visual hierarchy of a design layout.

Elements of Composition

• Differentiating between symmetrical and asymmetrical balance in design compositions.
• Methods of achieving rhythm in design compositions.
• Explain the importance of Gestalt principles in the relationship between elements in a layout.

User Reading Patterns.

Layout Grids

• Defining the aesthetics usability effect and using grids to improve design quality.
• The role of grids in responsive designs.
• Adjustments designers make to optimize grids for mobile design.
• How to apply the box model in web design.

Imagery and iconography

• Criteria for determining appropriate images based on context and content.
• Universally recognised icons and reducing ambiguity.
• Styling Tiles for Ideation and Making an Emotional Connection.
• Determining appropriate layout illustrations.

Color Models

• Differentiating between between primary, secondary, and tertiary colors.
• Differentiating hue, saturation, and luminance.
• Differentiating between an additive and subtractive color models.
• Color Psychology models.
• Understanding international vs western color association.

Applying Color

• Breaking down the role of the 60-30-10 rule in creating a sense of proportion and balance in a design.
• Methods for finding color inspiration.
• Apply methods for reducing cognitive load when applying color to a user interface.

Typography

• Classifying type identification & terminology.
• Identify different types of spacing applied to type: tracking, kerning, and leading.
• Explain the relationship between line length and legibility.
• Explaining the role of typography in creating hierarchy and messaging.

Applying type

• Describe strategies for creating responsive typography.
• Principles for creating accessible typography.
• Strategies and resources for pairing fonts.

Interaction Principles

• Understand & explain why interface elements should be kept visible and functionality kept discoverable.
• Explain the benefits of mapping digital interfaces and real-world counterparts.
• Methods for enabling prevention, detection, and recovery of user errors.
• User Interface Patterns
• Define cognitive load and explain why familiar interaction patterns reduce cognitive load.
• Explaining the role of interaction patterns in streamlining communication within design and development teams.
• Breaking down examples of dark patterns & applying interaction patterns to an interface to decrease the cognitive load.
• Animation principles
• List types of easing and explain the role of easing in creating realistic animations.
• Explain why users should have a mechanism to disable animated content.
• Define change blindness and explain why animations can make changes between states easier to understand.

Microinteractions

1. Differentiating between a user-initiated trigger and a system-initiated trigger when starting a microinteraction.
2. Understand use cases for microinteractions, such as providing feedback on user interactions and helping the user identify and prevent errors.

Group Work || SCRUM