Fundamentals of Web
Design and
Development: User
Experience (UX)
The Three Pillars of the Web
1. Web Development (The "Skeleton & Muscle"):
Backend: Server-side logic, databases, and APIs (making it work).
Frontend: Client-side code (HTML, CSS, JavaScript) that the user interacts with.
2. Web Design (The "Skin"):
Focuses on visual aesthetics: Color theory, typography, layout grids, and brand identity.
Goal: Emotional appeal and visual clarity.
3. User Experience (The "Soul"):
Focuses on the journey and feeling. Does the site solve the user's problem efficiently?
Goal: Frictionless interaction and user satisfaction.
Key Concept: A site can look beautiful (Design) and have bug-free code (Dev), but still fail if it is confusing to use
(Bad UX).
Defining User Experience (UX)
Origin: Term coined by Don Norman (Apple) in the 1990s. It covers all aspects of the end-user's interaction with
the company, its services, and its products.
The UX Honeycomb (Peter Morville):
Useful: Does it satisfy a need?
Usable: Is it easy to use?
Desirable: Do users want it? (Emotional design).
Findable: Is content easy to navigate?
Accessible: Can people with disabilities use it?
Credible: Is the information trustworthy?
Valuable: Does it deliver value to the business and the user?
UX vs. UI (User Interface)
The Distinction:
UI (User Interface): The specific screens, buttons,
pages, and other visual elements you use to interact
with a device. It is tangible.
UX (User Experience): The intangible experience
resulting from those interactions.
The Iceberg Analogy:
Above water (UI): Visual Design, Colors, Graphic
Layout.
Below water (UX): Research, Information Architecture,
Interaction Design, Scenarios, Content Strategy.
Analogy: If a website is a car, UI is the paint, dashboard,
and leather seats. UX is the feeling of driving it (smooth
suspension, responsive steering, comfortable
ergonomics).
The Design Thinking Process (UX Lifecycle)
Stage 1: Empathize: Understanding the users' pain points through user interviews and observation.
Stage 2: Define: Synthesizing research into a clear problem statement. Creating User Personas (fictional
characters representing user types).
Stage 3: Ideate: Brainstorming solutions. Techniques include sketching, "Crazy 8s", and mind mapping.
Stage 4: Prototype: Building a scaled-down version of the product (from paper sketches to clickable digital
mockups).
Stage 5: Test: Validating the prototype with real users to identify flaws before writing code.
Information Architecture (IA) & Navigation
Definition: The art and science of organizing and labeling
websites to support usability and findability.
Site Maps: A hierarchical diagram showing the structure of
the website's pages.
Card Sorting: A research method where users organize
topics into categories that make sense to them, not just
the stakeholders.
Navigation Patterns:
Hamburger Menu: Saves space on mobile but hides
options.
Mega Menu: Good for large retailers (e.g., Amazon) to
show deep hierarchy at a glance.
Breadcrumbs: Secondary navigation (Home >
Electronics > Laptops) that prevents users from getting
lost.
Nielsen’s 10 Usability Heuristics
1. Visibility of system status: Keep users informed (e.g., progress bars on file uploads).
2. Match between system and real world: Use familiar metaphors (e.g., a "folder" icon looks like a physical folder).
3. User control and freedom: Support "Undo" and "Redo".
4. Consistency and standards: Follow platform conventions (e.g., blue underlined text is usually a link).
5. Error prevention: Design to prevent slips (e.g., confirmation dialogs before deleting).
6. Recognition rather than recall: Don't force users to remember information from one part of the dialogue to
another.
Visual Psychology in UX
Gestalt Principles: How the human eye perceives visual elements.
Proximity: Objects close together are perceived as a group.
Similarity: Objects looking alike are perceived as related (e.g., all clickable buttons share a color).
Scanning Patterns: Users rarely read every word; they scan.
F-Pattern: Common for text-heavy content (users scan the top, then down the left side).
Z-Pattern: Common for landing pages with less text (eye moves top-left to top-right, diagonal down, then
across bottom).
Visual Hierarchy: Using size, color, and whitespace to tell the user what is most important (e.g., the "Buy Now"
button is the largest and brightest element).
From Wireframe to Mockup
Low-Fidelity Wireframes (Lo-Fi):
Tools: Pen & Paper, Balsamiq, Whimsical.
Purpose: Focus purely on layout and structure without the distraction of colors or images. "Where does the
button go?"
High-Fidelity Mockups (Hi-Fi):
Tools: Figma, Adobe XD, Sketch.
Purpose: The final visual look. Includes pixel-perfect spacing, typography, brand colors, and iconography.
"What does the button look like?"
Interactive Prototypes: Adding "hotspots" to mockups to simulate clicking and navigation for testing purposes.
Web Accessibility (A11y)
The Legal & Ethical Standard: Websites must be usable by people with visual, auditory, motor, or cognitive
disabilities.
POUR Principles (WCAG):
Perceivable: Information cannot be invisible to all senses (e.g., use Alt Text for images for screen readers).
Operable: The interface cannot require interaction that a user cannot perform (e.g., keyboard-only navigation
for those who can't use a mouse).
Understandable: Information and operation must be clear (avoid jargon).
Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents
(browsers/assistive tech).
Mobile-First vs. Responsive Design
Responsive Design: The layout changes based on the screen size (using CSS Media Queries).
Mobile-First Strategy: Designing for the smallest screen (mobile) first, then adding complexity for larger screens.
Why? It forces you to prioritize content. There is no room for fluff on a mobile screen.
Touch Targets: Buttons must be large enough to be tapped with a thumb (approx. 44x44 pixels minimum).
Conclusion & Key Takeaways
UX is not an afterthought: It must be integrated from Day 1 of the project.
You are not the user: Test your assumptions. What is obvious to you (the developer/designer) might be confusing
to the customer.
Iterative Process: A website is never "done." It requires constant monitoring of analytics and user feedback to
improve.
Call to Action: Start observing the web critically. When you get frustrated with a site, ask yourself: "Which UX
heuristic did they violate?"
Lesson 3
Fundamentals of Web
Design and
Development: User
Interface (UI)
Bachelor of Science in
Information Technology
Presented by: Mayjoy B. Cillo
What is User Interface (UI)?
Definition: UI is the point of human-computer interaction
and communication in a device. It includes display
screens, keyboards, a mouse, and the appearance of a
desktop.
In Web Design: It refers to the aesthetic design of all visual
elements of a digital product's interface—namely, the
product’s presentation and look.
The Goal: To produce a user interface which makes it easy,
efficient, and enjoyable (user-friendly) to operate a
machine in the way which produces the desired result.
UI vs. UX:
UX is the feeling of the experience (The skeletal
structure).
UI is the look of the experience (The skin, eyes, and
makeup).
The Building Blocks of Visual Design
1. Color:
Color Theory: Understanding the color wheel (Primary,
Secondary, Tertiary).
Psychology: Colors evoke emotion (e.g., Blue =
Trust/Tech, Red = Urgency/Passion, Green =
Growth/Money).
The 60-30-10 Rule: A balanced color scheme uses 60%
dominant color, 30% secondary color, and 10% accent
color.
The Building Blocks of Visual Design
2. Typography:
Serif vs. Sans-Serif: Serif (traditional, formal) vs. SansSerif (modern, clean, digital-first).
Hierarchy: Using font size and weight (H1, H2, p) to
guide the reader’s eye.
Readability: Line height (leading) and letter spacing
(kerning) ensure text is legible.
3. Imagery:
Use of high-quality photos, illustrations, and SVG icons
to support the message, not just decorate it.
Layout and Composition
The Grid System:
The invisible structure that governs the placement of elements.
12-Column Grid: The industry standard for responsive web design. It allows designers to align elements
consistently across different screen sizes.
Whitespace (Negative Space):
The empty space between elements.
Function: It prevents clutter, improves readability, and draws attention to active elements. "Whitespace is not
empty space; it is an active design element."
Alignment:
Create order and organization. Aligning text and images creates a sharp, ordered appearance which makes the
design easier to digest.
Common UI Patterns & Components
Input Controls:
Checkboxes vs. Radio Buttons (Multi-select vs. Single-select).
Dropdown lists vs. Toggles.
Text fields (with placeholder text and floating labels).
Navigational Components:
Breadcrumb (Home > Shoes > Sneakers).
Pagination (Page 1 of 10).
Tags (Categorization labels).
Informational Components:
Tooltips: Hover text for extra info.
Modals/Pop-ups: Critical information that requires immediate attention.
Cards: Containers for grouping related information (Image + Title + Description).
Visual Hierarchy Principles
Size: Larger elements are perceived as more important.
Color: Bright colors attract more attention than muted ones.
Contrast:
Light text on dark backgrounds (and vice versa).
High contrast is essential for calls-to-action (CTAs) like "Buy Now" buttons.
Proximity (Gestalt Principle):
Items close together are perceived as related.
Example: A headline should be closer to the paragraph below it than the paragraph above it.
Interaction Design (IxD) Basics
Feedback Loops:
The interface must communicate the result of an interaction.
Examples: Hover states (button changes color when mouse is over it), Active states (button looks "pressed"),
Loading spinners.
Affordance:
An object's visual characteristics should suggest how it is used.
Example: A ...
