UI/UX Design & Web Development: Key Principles

Posted on Apr 6, 2025 in Software Engineering

User-Centered Design Principles

  • User-centered design focuses on how users actually interact, not how designers assume they will.
  • The user is not you – Real user needs must be understood through research.

Motor Laws (Human Capabilities in UI)

  • Fitts’ Law – The time to reach a target depends on its distance (↑ = slow) & size (↑ = fast).
  • Formula: T = D / W
  • UI Tip: Make frequently used buttons larger & closer.
  • Steering Law – Navigating through constrained paths slows down interaction.
  • UI Tip: Use wider selection areas & avoid deep, complex menus.

Cognitive Load Reduction

  • Miller’s Law – People can hold 7 ± 2 chunks of information in short-term memory.
  • Recognition over Recall – Present users with familiar options rather than making them remember.

Key UI Concepts

  • Affordances – What an interface allows (e.g., a door handle suggests pulling).
  • Signifiers – Visual cues guiding interaction (e.g., a button label).
  • Metaphors – Familiar symbols for functionality (e.g., trash bin icon for deleting).
  • Learned Associations – Cultural cues (e.g., green = go, red = stop).

Usability Properties of UI Design

  • Efficiency – Helps users complete tasks quickly (e.g., predictive text, app docks).
  • Understandability – Clearly presents system state (e.g., thermostat displays temp).
  • Discoverability – Helps users find features easily (e.g., suggested actions).
  • Learnability – Allows users to improve their usage skills over time (e.g., Apple trackpad gestures).
  • Good design minimizes the Gulf of Execution (how to act) & the Gulf of Evaluation (what happened).

Web Basics

  • HTML – Defines structure & content.
  • CSS – Controls styling & layout.
  • JavaScript – Adds interactivity & dynamic behavior.

Why Separate Them?

  • Improves design flexibility.
  • Enables real-time updates.

HTML Basics

Common Elements:

  • <div> – Generic container
  • <span> – Inline container
  • <button> – Clickable button
  • <img> – Displays an image
  • <a> – Hyperlink
  • <input> – Form inputs

DOM (Document Object Model) – Represents HTML elements in a hierarchical structure, allowing manipulation via JavaScript.

CSS Basics

  • Selectors:
    • Element: p { color: blue; }
    • Class: .button { font-size: 16px; }
    • ID: #header { background-color: black; }
  • Box Model:
    • Padding – Space inside the border.
    • Border – Defines the boundary.
    • Margin – Space outside the border.
  • Layout Techniques:
    • Flexbox – Dynamic positioning.
    • Grid – Organizing content in structured layouts.
    • Positioning – static, relative, absolute, fixed, sticky.
    • Z-Index – Determines layering order.

JavaScript Basics

  • Why JavaScript?
    • HTML defines content.
    • CSS defines layout & style.
    • JavaScript adds interactivity.
  • Using JavaScript in HTML
    • Inline: <script> inside HTML
    • External: script.js (recommended for maintainability).

Common JavaScript Tasks

  • Modify HTML dynamically.
  • Change styles & layouts.
  • Handle events (clicks, inputs).
  • Perform calculations.

Example: Event Listener

document.getElementById("myBtn").addEventListener("click", function() {
    console.log("Button clicked!");
});

Advanced JavaScript Concepts

  • Arrow Functions
const add = (a, b) => a + b;
  • Useful Array Methods
    • map() – Transforms elements.
    • filter() – Selects matching items.
    • reduce() – Combines values.

Example: Filtering Large Stadiums

const bigStadiums = places.filter(p => p.maxsize > 100000);
console.log(bigStadiums);

AJAX & Asynchronous JavaScript

  • AJAX – Enables real-time updates without reloading the page.
  • Promises – Handles async operations.

Example: Fetching Data from API

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Promise Chaining

fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Figma & UI Prototyping

  • Figma – A collaborative web-based UI/UX design tool.
  • Auto Layout – Automatically resizes UI components.
  • Prototyping – Simulates interactions (hover, clicks).
  • Components – Reusable UI elements.
  • Variants – Different states of a component.

Human-Centered Design (HCD)

The User is NOT You

  • Observation > Assumptions.
  • Real user needs > Designer’s intuition.

HCD Process (Double Diamond Model)

  1. Need Finding – Identify pain points.
  2. Ideation – Brainstorm multiple solutions.
  3. Prototyping – Build lo-fi & hi-fi mockups.
  4. Testing – Validate with users, iterate on feedback.

Storyboarding & Speed Dating

What is a Storyboard?

  • A visual representation of an idea using sketches or panels to show user interactions.

Speed Dating for UX – Rapid user feedback before prototyping.

  1. Present a user need (problem).
  2. Show a scenario (context).
  3. Present multiple solutions.
  4. Capture user reactions.

Prototyping Types & Techniques

  • Low-Fidelity (Lo-Fi) Prototypes – Sketches, wireframes, paper mockups.
  • High-Fidelity (Hi-Fi) Prototypes – Interactive, clickable models.

Best Practices for Storyboarding:

  • ✅ Focus on the user experience.
  • ✅ Keep it simple (rough sketches are fine).
  • ✅ Show how users interact with the design.
  • ❌ Avoid excessive details – It’s about concept validation, not UI screens.

Final Takeaways

  • Fitts’ Law – Make buttons big & close.
  • Steering Law – Avoid complex navigation paths.
  • Recognition over recall – Use familiar visual cues.
  • HTML = Structure, CSS = Style, JS = Interactivity.
  • Async JavaScript enables dynamic updates without reloading.
  • Figma & Prototyping improve UI/UX efficiency.
  • User-Centered Design is iterative – Test, refine, repeat.

This cheat sheet serves as a quick reference for core UI/UX, web development, & JavaScript principles.