UI/UX & Mobile Design Lecture Summaries

Compiled for Exam Preparation

Table of Contents
Lecture 1: UI/UX Lecture Summary
1. Definitions
2. UI vs. UX
3. UI Frameworks
4. Key Concepts for the Exam
Lecture 2: Colors, Fonts, and Icons
1. Colors
What is Color?
Color Wheel
Color Selection Methods
HSV in Practice
Color Psychology
Color Palettes
Color Temperature
Color Blindness
2. Fonts
Types of Fonts
Fixed vs. Variable Width
Famous UI Fonts
3. Icons
Why Use Icons?
Icon Formats
Icon Fonts
Key Takeaways (Lecture 2)
Lecture 3: Visual Effects
1. Introduction to Visual Effects
2. Design Styles
3. Specific Visual Effects
4. Key Principles
5. Human Interface Guidelines (HIG)
6. Trends in UI/UX
Key Takeaways (Lecture 3)
Lecture 4: Mobile UI & Material Design
1. Difficulties of Mobile UI Design and Solutions
1.1 Visual Clutter
1.2 Unclear Navigation
1.3 Tiny Text and Functional Elements
1.4 Low Contrast Text and Elements
1.5 Too Many Clicks to Complete Tasks
1.6 Bad Error Handling
1.7 Too Much Data Input
1.8 Unconventional Gestures
1.9 Lack of Visual Feedback
1.10 Annoying Notifications
1.11 Annoying Visual Effects
2. Laws in UI Design
3. Material Design
3.1 What is Material Design?
3.2 Pillars
3.3 Key Foundations
3.4 Layout
3.5 Color System
3.6 Typography
Key Exam Takeaways (Lecture 4)

Lecture 1: UI/UX Lecture Summary

1. Definitions

UI (User Interface):
The set of tools, windows, and components (e.g., buttons, title bars, icons) that allow users to interact with a device or application. It’s not limited to computers
or mobile devices—think ATMs or routers too.
Example: Clicking a folder icon opens a window with a title bar and content area.

UX (User Experience):
The overall experience a user has with a product, focusing on how it works in the real world—its ease of use, intuitiveness, and satisfaction. It’s about the
interaction, not just the function.
Example: A coffee maker button that clicks properly improves the experience; if it fails, it frustrates the user.
2. UI vs. UX

UI:

Focuses on aesthetics: colors, styles, fonts, icons.

The "look" of the product—like a sports car’s sleek design and dashboard.
Aims to capture attention visually.

UX:

Focuses on interaction: Is it smooth? Does it give clear feedback? Is it easy to use?

The "feel" of the product—like how responsive the car’s steering is.
Aims to provide an effortless and effective user interaction.

Key Insight:

UI is the surface (visuals), UX is the soul (experience).

Language and culture matter:
Writing direction (left-to-right like English, right-to-left like Arabic) affects layout.
Complex scripts (e.g., Chinese symbols) mean users can handle denser UIs.

3. UI Frameworks

Here’s a rundown of the frameworks covered, grouped by platform. Know their purpose and key traits.

Desktop Frameworks:

QT:
Cross-platform (Windows, Linux, macOS, Android, iOS).
Written in C++, with bindings for Python, Rust, etc.
Two libraries: QT Widgets (traditional desktop) and QT Quick (modern, uses QML).
Examples: VLC, Google Earth, Telegram.
GTK:
Open-source, written in C, used in Linux desktops (GNOME, XFCE).
Supports XML for UI design.
Examples: Firefox, GIMP, Inkscape.
Windows Forms:
Part of .NET, for Windows desktop apps.
Drag-and-drop design in Visual Studio; can run on Linux with Wine/Mono.
Example: NaviCat.
WPF (Windows Presentation Foundation):
.NET framework, uses XAML to separate UI from logic.
Windows-only, supports 2D/3D graphics and animations.
Benefit: Designers and coders can work separately.
JavaFX:
Java-based, uses FXML for UI, supports desktop and mobile.
Dropped from new Java SE, now in OpenJFX.
Supports CSS styling, 2D/3D.
Java Snapkit:
Modern Java UI library, runs on desktop and browsers (via CheerpJ).
Aims to blend Swing simplicity with JavaFX richness.
Iced:
Rust-based, experimental, cross-platform.
Used in System76’s Cosmic Desktop for Linux.

Mobile Frameworks:

Cordova:
Builds hybrid mobile apps using HTML, CSS, JavaScript.
Write once, deploy to multiple platforms (like Electron for desktop).
Ionic:
Open-source SDK for hybrid apps, supports Angular, React, Vue.
Builds mobile, desktop, and web apps with web tech.

Web Frameworks:

Bootstrap:
CSS framework for responsive web design.
Uses a 12-column grid with sizes (sm, md, lg, xl) for different screens.
Includes components like cards and badges.
Tailwind:
Utility-first CSS framework for custom designs.
More flexible than Bootstrap but requires more class-writing.
Web Assembly (Wasm):
Not a framework, but a tech to run C#, Rust, etc., in browsers.
Used by Flutter and Blazor for web support.
Blazor:
Web framework using C# and HTML, runs via Web Assembly or server-side SignalR.
Part of ASP.NET.
PrimeTech:
Provides UI component libraries (PrimeNG, PrimeReact, PrimeVue).
Enhances web elements with modern features.

Other Frameworks:

Flutter:
 Google’s UI SDK for mobile, web, and desktop from one codebase.
Uses Dart, supports Web Assembly for web.
.NET MAUI:
.NET framework for native mobile/desktop apps with C# and XAML.
Evolution of Xamarin.Forms, single codebase for multiple platforms.

4. Key Concepts for the Exam

Separation of UI and Logic:

Frameworks like WPF and JavaFX use XAML/FXML to split design from code, improving teamwork and maintenance.
Cross-Platform Development:
Write once, run anywhere (e.g., QT, Flutter, Cordova) saves time and effort.
Responsive Design:
Crucial for web/mobile (e.g., Bootstrap’s grid, Ionic’s adaptability).
Cultural Considerations:
Language direction and complexity shape UI/UX design—know this for real-world application.

Lecture 2: Colors, Fonts, and Icons

1. Colors

What is Color?

Definition:
Color arises from light waves of varying lengths reflected by objects. The reflected wavelengths determine the perceived color, as seen by our eyes or camera
sensors.
Prism Effect:
A prism splits white light into a rainbow, demonstrating how colors are components of light.
Materials:
Transparent: Allows all light to pass through (e.g., clear glass).
Translucent: Reflects specific colors while letting others pass (e.g., green glass reflects green light).

Color Wheel

Purpose:
A circular arrangement of hues showing relationships between colors.
Structure:
Primary Colors: Yellow, Red, Blue (spaced 120° apart, forming an equilateral triangle).
Secondary Colors: Orange, Green, Purple (mix of two primaries, positioned diagonally opposite their complement).
Tertiary Colors: Mix of a primary and adjacent secondary (e.g., Red-Orange), forming a hexagon within the circle.
Construction:
Start with primaries, add secondaries by mixing, then tertiaries, smoothing into a continuous wheel.

Color Selection Methods

HSV Color Space:

Hue: The color itself (angle on the wheel).
Saturation: Color intensity (distance from the center of the cylinder).
Value: Brightness (height in the cylinder, from black at the bottom to full color at the top).
Techniques:
Complementary: Opposite hues (e.g., Red and Green) for high contrast.
Triadic: Three colors forming an equilateral triangle (e.g., primary colors).
Tetradic: Four colors forming a square or rectangle (two complementary pairs).
Analogous: Adjacent hues for unity (e.g., Blue, Blue-Green, Green).
Split-Complementary: One hue plus the two adjacent to its complement.

HSV in Practice

Use a single hue with varied saturation and value to create cohesive palettes (e.g., brand color, text, borders).
Contrast Ratios:
Ensure accessibility with ratios like 4.5:1 for text against backgrounds (WCAG Level AA standard).

Color Psychology

Colors influence emotions (optional in UI but useful for branding):

Red: Passion, danger, urgency.
Blue: Calm, trust, intelligence.
Green: Growth, success, nature.
Yellow: Happiness, caution.
Purple: Luxury, spirituality.
Black: Power, elegance.
White: Purity, simplicity.

Color Palettes
 Definition:
A consistent set of colors for UI design, enhancing aesthetics and brand identity.
WCAG Guidelines:
Level AA: 4.5:1 contrast for text, 3:1 for large text or borders.
Level AAA: 7:1 for text, 4.5:1 for large text.
Examples:
Solarized: 16 colors, balanced for light/dark modes, reduces eye strain.
Nord: 16 pastel colors, bluish and calming, ideal for minimal designs.

Color Temperature

Measurement:
Measured in Kelvin (K):
Lower (e.g., 2000K): Warmer, redder light.
Higher (e.g., 6500K): Cooler, bluer light.
Effect:
Affects mood and perception in design.

Color Blindness

Types:
Red-Green: (Protanopia, Deuteranopia).
Blue-Yellow: (Tritanopia).
Monochromacy: (Grayscale vision).
Design Tip:
Use high contrast and focus on lightness differences for accessibility.

2. Fonts

Types of Fonts

Printing Fonts:
Optimized for print (e.g., Times New Roman, Arial).
UI Fonts:
Designed for screens (e.g., Tahoma, Segoe UI).
Cross-Use:
Possible but less effective outside the intended purpose.

Fixed vs. Variable Width

Fixed Width (Monospaced):

Equal character width (e.g., Source Code Pro), ideal for code editors and predictable UI layouts.
Variable Width:
Natural letter widths (e.g., Segoe UI), better for readability in general UI.

Famous UI Fonts

Neue Helvetica:
Versatile sans-serif, 51 weights, widely used but proprietary.
Roboto:
Geometric yet friendly, free under Apache license, used in Android.
Crete Round:
Warm slab serif, free under SIL Open Font License, great for web.
Comfortaa:
Rounded sans-serif, free under SIL Open Font License, suited for large sizes.

3. Icons

Why Use Icons?

Quickly convey actions or statuses (e.g., save as a floppy disk, play as an arrow).
Familiarity reduces the learning curve for users.

Icon Formats

ICO:
Small, fixed-size images (e.g., 16x16), distort when scaled.
PNG:
Supports transparency, better for scaling than ICO.
SVG:
Vector-based, scalable without quality loss, defined in XML.

Icon Fonts

Concept:
 Icons as scalable, colorable vector glyphs (like text), but monochromatic.
Examples:
Font Awesome:
1608 free icons, widely used (38% of sites with third-party fonts).
Simple Line:
160 icons for everyday use.

Key Takeaways (Lecture 2)

Colors:

Master the color wheel and selection methods (e.g., complementary, triadic).
Understand HSV and its role in creating cohesive, accessible designs.
Know WCAG contrast ratios (4.5:1 for text, 3:1 for borders).
Recognize color psychology’s optional role in UI.

Fonts:

Distinguish printing vs. UI fonts and their optimal uses.

Compare fixed-width (monospaced) and variable-width fonts.
Be familiar with UI fonts like Roboto and Neue Helvetica.

Icons:

Explain icons’ role in enhancing UI usability.

Compare ICO, PNG, and SVG formats, emphasizing SVG’s scalability.
Highlight Font Awesome’s prominence and icon fonts’ benefits.

Lecture 3: Visual Effects

1. Introduction to Visual Effects

Definition:
Visual effects are changes in the user interface (UI) that occur in response to user actions or shifts in the application’s state. Examples include a button
changing color when clicked or a shadow appearing to indicate depth.
Purpose:
They provide visual feedback, helping users understand interactions and enhancing the overall user experience (UX).

2. Design Styles

Skeuomorphic Design:

Description:
Digital objects mimic real-world counterparts (e.g., a trash can icon resembling a physical trash can).
History:
Popularized in the 1980s by Steve Jobs and Apple to make interfaces intuitive for new users.
Pros:
Flattens the learning curve by leveraging familiarity with physical objects.
Cons:
Can become cluttered and unnecessary as users grow accustomed to digital environments.
Modern Use:
Re-emerged in smartwatches to mimic traditional watch faces, blending digital and analog experiences.

Flat Design:

Description:
Emphasizes minimalism with simple shapes and minimal visual effects (e.g., Windows 8 tiles, iOS 7).
Purpose:
Prioritizes visual clarity and simplicity, reacting against skeuomorphism’s clutter.
Pros:
Clean and modern aesthetic.
Cons:
Lack of depth cues (e.g., shadows) can obscure element hierarchy, making interfaces harder to navigate.

Flat 2.0:

Description:
Merges flat design’s minimalism with subtle skeuomorphic elements like shadows (e.g., Microsoft’s Fluent Design with its “frosty glass” effect).
Purpose:
Balances modern aesthetics with usability by reintroducing depth and visual cues.
Pros:
Offers clarity and hierarchy without excessive ornamentation.

3. Specific Visual Effects

Shadows:
 Use:
Indicate depth and stacking order (e.g., drop shadows suggest an element is in front, inner shadows suggest it’s behind).
Application:
Especially valuable in mobile design to maximize limited screen space by suggesting a third dimension.

Color Changes:

Use:
Highlight state changes or errors (e.g., red borders on invalid inputs, lighter button tones on hover).
Key Note:
Must be paired with additional feedback (e.g., error messages) to clarify the reason for the change, avoiding confusion.

Cursor Changes:

Use:
Signal interactivity or application state (e.g., pointer becomes a text caret over text fields, a hand over links, or a spinner during processing).
Purpose:
Provides immediate feedback on possible actions.

Spinners:

Use:
Indicate processing without showing progress (e.g., rotating arches or moving geometric shapes behind frosty glass).
Purpose:
Prevents the UI from appearing frozen during background tasks.

Progress Bars:

Use:
Show task completion (e.g., a filling rectangle with a percentage) or act as indeterminate indicators (e.g., a rocking bar similar to spinners).
Purpose:
Communicates progress or ongoing activity to the user.

Animations:

Use:
Enhance transitions or aesthetics (e.g., sliding dialogs, fading effects, minimizing with a “magic lamp” effect).
Caution:
Should prioritize functionality over eye candy, ensuring they don’t overwhelm the user.

4. Key Principles

Visual Feedback:
Essential for informing users about the success of actions or the application’s state (e.g., a button darkening when clicked confirms an action).
Use with Caution:
Effects must serve a purpose beyond aesthetics. Ask: Does it improve usability? Does it distract from the UI’s main function? Apply or remove accordingly.

5. Human Interface Guidelines (HIG)

Definition:
Platform-specific recommendations ensuring applications align with their environments for consistency and usability.
Importance:
Helps applications blend seamlessly into their ecosystems (e.g., font sizes, button placements).
Notable Example:
Apple’s HIG, which sets a standard for cohesive design across its platforms.

6. Trends in UI/UX

Cyclical Nature:
Design styles evolve like fashion, often revisiting old ideas (e.g., iPhone’s shift from rounded to straight to rounded corners).
Influence:
Driven by user familiarity, technological advances, and cultural shifts.

Key Takeaways (Lecture 3)

Visual Effects:
Understand their role in feedback and usability, with examples like shadows, color changes, and animations.
Design Styles:
Skeuomorphic: Real-world mimicry for intuitiveness.
Flat: Minimalist clarity with potential depth issues.
Flat 2.0: Hybrid approach for modern usability.
Specific Effects:
Know their purposes (e.g., shadows for depth, spinners for processing) and best practices (e.g., pairing color changes with text).
Principles:
Emphasize feedback and purposeful application of effects.
HIG:
Recognize their role in consistency, with Apple’s HIG as a prime example.
Trends:
 Note the cyclical evolution of design styles.

Lecture 4: Mobile UI & Material Design

1. Difficulties of Mobile UI Design and Solutions

1.1 Visual Clutter

Problem: Overloading users with too much info on small screens.

Solutions:
Trim unnecessary content.
Prioritize user goals and journey.
Design for scannability (short paragraphs, lists).
Use progressive disclosure for on-demand content.

1.2 Unclear Navigation

Problem: Confusing navigation drives users away.

Solutions:
Use familiar patterns (e.g., Hamburger Menu, Bottom Tab Bar).
Keep options simple (e.g., max 5 in a tab bar).
Prioritize common tasks in UI.
Show current location clearly.

1.3 Tiny Text and Functional Elements

Problem: Small text/elements cause errors and discomfort.

Solutions:
Use legible fonts (e.g., San Francisco, Roboto; 11pt iOS, 14pt Android).
Ensure touch targets are 9mm × 9mm minimum.
Add padding between elements.

1.4 Low Contrast Text and Elements

Problem: Hard to read in varying conditions (e.g., sunlight).

Solution:
Use a contrast ratio of at least 4.5:1 (WCAG standard).

1.5 Too Many Clicks to Complete Tasks

Problem: Friction slows task completion.

Solutions:
Optimize key user flows.
Offer alternatives (e.g., voice input).

1.6 Bad Error Handling

Problem: Frustrates users with vague messages.

Solutions:
Use inline validation in forms.
Write clear, actionable error messages.

1.7 Too Much Data Input

Problem: Excessive typing reduces enjoyment.

Solutions:
Ask only essential info; reuse data.
Use proper keyboards (e.g., numeric for numbers).
Leverage device features (e.g., camera for credit cards).
Offer auto-suggestions/auto-complete.

1.8 Unconventional Gestures

 Problem: High learning curve for new gestures.
Solutions:
Stick to common gestures (scroll, swipe, pinch).
Use gestures as shortcuts, not replacements.

1.9 Lack of Visual Feedback

Problem: Users unsure if the app is working.

Solution:
Provide visual, audio, or haptic feedback.

1.10 Annoying Notifications

Problem: Overuse leads to app deletion.

Solutions:
Ensure notifications add value.
Limit frequency.

1.11 Annoying Visual Effects

Problem: Overdone effects annoy users.

Solutions:
Minimize decorative illustrations.
Assess animation’s long-term impact.
Allow turning off animations.

2. Laws in UI Design

Hick’s Law:
Decision time increases with more complex choices.
Jakob’s Law:
Users prefer familiar patterns from other sites/apps.
Law of Common Region:
Elements in a defined area are grouped together.
Law of Proximity:
Nearby objects are perceived as related.
Miller’s Law:
Working memory holds 7 ± 2 items.
Fitts’s Law:
Time to select a target depends on distance and size.

3. Material Design

3.1 What is Material Design?

Introduced in 2014, Material Design uses cards, grids, animations, and depth (lighting, shadows).
Updated in 2018 for flexible themes (geometry, colors, typography).
Aims for consistent, high-quality UI across Android, iOS, Flutter, and web.

3.2 Pillars

1. Material is a Metaphor:
Surfaces mimic physical materials (paper, ink, shadows).
2. Bold, Graphic, Intentional:
Uses print design principles for clear hierarchy.
3. Motion Provides Meaning:
Subtle, coherent animations guide users (e.g., button ripple effect).

3.3 Key Foundations

Surface:
UI reflects 3D space with light and shadows.
Elevation:
Measured in density-independent pixels (dp) .
Higher elevation = prominence (e.g., dialogs > app bars).
Light and Shadows:
Combination of key light (directional, sharp) and ambient light (soft, diffused).
3.4 Layout

Grid System:
Responsive columns, gutters, and margins.
Breakpoints: Adjust margins (e.g., 16dp on mobile vs. 32dp on tablets).
Regions: App bar, navigation rail, content area.
Navigation:
Lateral: Tabs for the same hierarchy.
Forward/Reverse: Buttons for hierarchy steps.
Upward: "Up" arrow to parent screens.

3.5 Color System

Primary:
Dominant brand color (e.g., Google blue).
Secondary:
Accent color (e.g., for FABs, sliders).
Error:
Specific error color (e.g., #B00020 for warnings).
Surface/Background:
Typically white (#FFFFFF).

3.6 Typography

A system of 13 predefined styles (headlines, body, captions, etc.).

Customizable typeface, weight, and case.

Key Exam Takeaways (Lecture 4)

Mobile UI:
Memorize common problems and corresponding solutions (e.g., WCAG contrast, adequate touch targets).
Design Laws:
Apply principles such as Hick’s Law and Fitts’s Law to justify UI design choices.
Material Design:
Understand its pillars, foundational concepts (elevation, light/shadow), grid systems, and color systems.

Good luck on your exam!