UI/UX Primitives

Note on UI/UX Primitives

5 min read
Published January 26, 2026
Tech Notes

Basics: Typography

Typeface is the design of the letters (e.g., Rethink Sans, Poppins). Font refers to a specific style or weight within that typeface (e.g., Poppins Bold 16px).

In simple terms, typeface is the family, and font is the individual member within the family.

Types of Fonts

image.png

  1. Serif Fonts:
  • Serif fonts have small lines attached to the end of strokes in letters. These fonts are seen as formal, traditional, and trustworthy.
  • Examples: Times New Roman, Georgia, Merriweather.
  • Use Case: Print media, high-end brands, blogs, and news websites for body text. Gives a classic, professional feel.
  1. Sans-Serif Fonts:
  • Sans-serif fonts are clean, modern, and lack the “feet” at the end of strokes.
  • Examples: Helvetica, Arial, Roboto, Open Sans.
  • Use Case: Digital screens, UI interfaces, tech websites, and modern brands. Best for readability on screens.
  1. Script Fonts:
  • Mimic handwriting or calligraphy and are decorative in nature.
  • Examples: Brush Script, Lobster, Pacifico.
  • Use Case: Should be used sparingly for logos or headings. Avoid for body text as they are hard to read in long form.
  1. Display Fonts:
  • Highly decorative fonts meant for limited use, often in large sizes.
  • Examples: Impact, Bebas Neue, Playfair Display.
  • Use Case: Headlines, posters, banners, and branding materials where you want to grab attention.
  1. Monospace Fonts:
  • Every letter takes up the same amount of horizontal space.
  • Examples: Courier, Consolas, Source Code Pro.
  • Use Case: Code snippets, terminal interfaces, or designs where a techy or vintage aesthetic is needed.

Font Weight

  • Font weight refers to the thickness of each character in of the font.

Tip: Avoid overusing bold or italic, as too much emphasis can reduce clarity and hierarchy.

image.png

Font Size

  • Hierarchy can be introduces through size. Typography hierarchy is the arrangement of text to show its importance.
  • Headings (H1, H2, H3): Larger font sizes for headings, usually starting with 32-48px for H1 and scaling down.
  • Body Text: 16px is the standard size for comfortable readability on most screens. For mobile, 14-16px works best.

Best Practice: Maintain proportional sizes between headings and body text to create a visual flow.

Typography Jargon:

  • Leading (Line height): The space between lines of text. Too tight makes it hard to read, too loose makes the text disjointed. For body text, a line-height of 1.5 to 1.75 times the font size is typically ideal.
  • Tracking (letter spacing): The space between characters in a block of text, affecting the overall density of text. It’s better not to change this unless you know what you’re doing as it might create a bad reading experience.
  • Kerning: The space between specific pairs of letters to make the text look more balanced (e.g., A and V in some fonts).

image.png

Resources

At the end of the day the text in your design should be legible and readable. Next let’s learn about colors!

link_to_page

Basics: Colors

Color plays a crucial role in UI/UX design—it enhances mood, draws attention, and impacts the overall user experience.

Color Theory

It is the study of how colors interact and the effects they create when combined. Parts of color theory are as follows:

  1. Color harmony: The use of colors in a way that creates a visually pleasing and balanced composition.
  2. Color value: Refers to the relative lightness, darkness, saturation and hue.
  3. Color Temperature: It is used to describe how cool or warm the color is. Warm colors (such as red, orange, yellow) are associated with feelings of warmth, excitement and energy. Cool colors (like blue, green, and purple) are often linked to feelings of calm, relaxation, and serenity.

image.png

Contrast

It refers to the difference in luminance or color that makes an object distinguishable from others. Good contrast improves readability and ensures that key elements stand out.

  • WCAG Guidelines for Accessibility:

    • For normal text, aim for a contrast ratio of 4.5:1.

    • For large text (24px+), a contrast ratio of 3:1 is acceptable.

    • Tools like Contrast Checker (WebAIM) can help ensure your design meets accessibility standards.

60-30-10 Rule

image.png

Breakdown:

  • 60%: Dominant Color – this will be the main color of your interface (e.g., background or large sections).
  • 30%: Secondary Color – used to add contrast to the dominant color (e.g., sidebars, cards, buttons).
  • 10%: Accent Color – used sparingly to highlight important actions (e.g., CTA buttons, icons, links).

Example:

  • 60%: A soft neutral or light blue background.
  • 30%: A deeper blue for headers or key areas.
  • 10%: A bright orange for action buttons or important elements.

Color Psychology

  • Red: Energy, passion, urgency. Use for warning messages or CTAs that need attention.
  • Blue: Trust, security, calm. Often used in tech, banking, and healthcare industries.
  • Yellow: Optimism, happiness, attention-grabbing. Be careful not to overuse as it can cause eye strain.
  • Green: Growth, health, peace. Frequently used for environmental and finance websites.
  • Black: Sophistication, luxury, authority. Ideal for premium brands or minimalist designs.
  • White: Purity, simplicity, cleanliness. Common in modern, clean web designs, often as a background.

Tip: Ensure your color choice aligns with your brand’s values and the emotions you want to evoke in your users.

The Problem with Too Many Colors

  • Overwhelming the User: Using too many colors can make a design feel cluttered and chaotic. This can distract users and dilute the focus from important elements, like CTAs or navigation.
  • Brand Dilution: If your design uses too many colors, your brand’s identity can get lost. Instead of users associating your brand with specific colors, they might not connect with your palette at all.
  • Lack of Hierarchy: Too many colors confuse the user’s understanding of what to focus on first. Design elements should have clear hierarchy, and color plays a key role in guiding the user’s eye through the interface.
  • The human brain can only process a limited amount of visual information at once. Too many colors increase cognitive load, making it difficult for users to quickly grasp what’s important or what action to take next.
  • Common Mistake: Overusing the 10% Accent Color for elements like text, icons, and buttons can make your design feel chaotic, defeating the purpose of the rule.

Solution: Stick to the 60-30-10 Rule and choose your colors wisely based on brand and usability.

Tip: Use the accent color sparingly, focusing on CTAs, notifications, or elements that require immediate user attention.

Resources

link_to_page

Introduction to UI/UX

User Interface (UI) - Includes visual elements such as buttons, text, images, entry fields and anything the user can/could interact with.

User Experience (UX) - Includes how a user interacts with and experiences a product.

Difference between User Interface (UI) and User Experience (UX)?

UX without UI is like brain without a body & a UI without UX is like a human without it’s brain.

image.png

Why UI/UX Matters:

  • First Impressions: Users decide whether they like your site or app within 50 milliseconds. Bad UI = trust destroyed instantly.
  • Competitive Edge: Good UI/UX is often what makes users choose your product over another with similar features.
  • Scaling: Consistent design helps maintain brand identity as you scale and adapt for new devices. (We will discuss about branding further in the class)

A solid UI consists of good typography, color theory, breathable spacing, maintaining consistency, and responsive design.

link_to_page

User Interface (UI)

User Interface (UI) focuses on the visual aspects of an application, including layout, color schemes, typography, icons, and overall aesthetics. The goal is to create interfaces that are not only visually appealing but also user-friendly.

  1. Hierarchy

    It refers to the arrangement of elements in a way that communicates importance and guides users through the interface.

    image.png

    • Types of Hierarchy
      • Visual Hierarchy: Organizes elements visually to guide user focus (e.g., size, color, spacing).
      • Content Hierarchy: Organizes the information structure, such as headings, subheadings, and body content.
    • Key Elements of Hierarchy
      • Size: Larger elements are perceived as more important (e.g., headlines vs. body text). Example: Headlines on a blog post are bigger to catch attention, while the body text is smaller for reading.
      • Color: Bold, vibrant colors draw attention, while muted tones recede into the background. Example: A bright red “Buy Now” button stands out on a neutral background.
      • Position: The higher and more centered an element is on the screen, the more attention it gets. Example: Important calls to action (CTAs) are often placed at the top or center of the page.
      • Whitespace: Adding space around an element helps it stand out. Example: A CTA button with ample whitespace is more noticeable than one cluttered with text or other elements.

  2. Consistency

    This helps in making the design intuitive, predictable, and easier to navigate. Consistent design reduces the learning curve for users and enhances the user experience.

    • Types of consistency
      • Visual Consistency: Maintaining uniformity in colors, fonts, buttons, icons, and spacing.
      • Functional Consistency: Ensuring that actions, behaviors, and navigation work similarly across different sections.
      • Internal Consistency: Uniformity within your product (across screens/pages).
      • External Consistency: Aligning your product with common design patterns that users are familiar with from other apps/websites.

  3. White Space (Negative Space)

    It refers to the empty spaces around elements in your design. It’s a crucial element of any layout, providing balance, separation, and focus.

    image.png

    It helps with:

    • Improved Readability: Proper use of white space around text blocks and elements makes content easier to read.

    • Focus and Emphasis: White space directs users’ attention to key elements, like CTAs, without overwhelming them.

    • Visual Hierarchy: Helps users understand the importance and grouping of elements. Elements surrounded by more space often seem more important.

    • Types of White Space:

      • Macro White Space: The larger gaps around bigger sections (e.g., between paragraphs, around images). This helps balance out the overall page and ensures clarity.
      • Micro White Space: The small gaps between buttons, icons, and text elements. Proper spacing ensures that these elements are easy to interact with and visually appealing.

      image.png

      Avoid clutter. Too many elements packed together create visual noise and confuse the user.

  4. Continuity

    The Gestalt principle of continuity states that users tend to perceive elements that are arranged on a line or curve as related, and they prefer smooth, continuous paths. Applications:

    • Guiding User Flow: Use visual cues like arrows, progress bars, or breadcrumbs to guide users smoothly through a journey or process (e.g., checkout, onboarding).
    • Alignment and Grouping: Align elements in a way that creates a natural flow of information (e.g., from top to bottom or left to right).
    • Navigation Menus: A consistent layout for navigation, like placing the menu bar at the top or sidebar, ensures that users can intuitively find their way through the app or website.

    Align elements to follow a predictable flow, guiding users through tasks without causing confusion.

link_to_page

User Experience (UX)

Let’s discuss some important UX laws:

  1. Hick’s Law

    • Principle: The more choices you present, the longer it takes for users to make a decision.
    • Application: Limit choices and break complex tasks into smaller steps (e.g., multi-step forms).

    image.png

  2. Fitts’s Law

    • Principle: The time to reach a target depends on its size and distance.
    • Application: Make buttons large and place frequently used elements within easy reach, especially on mobile.

    image.png

  3. Jakob’s Law

    • Principle: Users prefer interfaces that work like those they’re already familiar with.
    • Application: Stick to established UI patterns (e.g., cart icon in top-right corner on e-commerce sites).

    image.png

  4. Miller’s Law

    • Principle: People can hold 7 (±2) items in their working memory.
    • Application: Chunk information and avoid overwhelming users with too many details at once.

    image.png

  5. Law of Proximity

    • Principle: Objects close to each other are perceived as related.
    • Application: Group related elements together (e.g., form labels with input fields).

    image.png

  6. Aesthetic-Usability Effect

    • Principle: Users perceive visually appealing designs as more usable.
    • Application: Prioritize both aesthetics and functionality to improve user satisfaction.

    image.png

link_to_page

UI/Frontend Designing

The Design Process

The UI design process typically follows a series of stages that guide designers from initial concepts to final implementation.

  1. Empathize
    • Purpose: Understand user needs, market trends, and the problem the design aims to solve.
    • Methods: User interviews, surveys, competitor analysis, and market research.
  2. Define
    • Purpose: Clearly outline the project goals, user personas, and requirements.
    • Deliverables: User personas, user journey maps, and a project brief.
  3. Ideate
    • Purpose: Generate a wide range of ideas and potential solutions.
    • Methods: Brainstorming sessions, sketching, and mind mapping.
  4. Prototype
    • Purpose: Create low-fidelity wireframes and high-fidelity prototypes to visualize the design.
    • Deliverables: Wireframes, clickable prototypes, and flowcharts.
  5. Test
    • Purpose: Validate the design through user testing to gather feedback and identify usability issues.
    • Methods: Usability testing sessions, A/B testing, and heuristic evaluations.

image.png

Taking References

Taking references is a valuable part of the design process, not a negative practice. The key is to use them as inspiration rather than for direct copying:

  • Inspiration vs. Imitation: Use references to spark creativity, not as templates to replicate.
  • Innovation: Build upon existing ideas, combining them with your insights to create something unique.
  • Competitor Analysis: Examine competitors’ interfaces for inspiration and to identify best practices. Understand why certain design choices work and how to adapt them for your project.
  • Design Inspiration Platforms: Use sites like Dribbble, Behance, and Pinterest to explore various design styles and trends.

Remember, great design comes from synthesizing influences into something tailored to your project's needs, using references as a tool for growth and innovation.

Design Systems

Comprehensive guidelines that include design patterns, components, and branding elements to ensure consistency across products.

  • Benefits:
    • Consistency: Ensures all UI elements look and function similarly across the application.
    • Efficiency: Speeds up the design process by providing reusable components and patterns.
    • Collaboration: Improves communication between designers and developers by providing a common language.
  • Examples

Design Tools - Figma

image.png

Figma is a web-based design tool widely used for interface design, prototyping, and collaboration. It allows designers to create user interfaces for websites and applications.

Responsive Design

It is an approach to web design that aims to create a seamless experience across a variety of devices and screen sizes, from desktops to smartphones. The goal is to ensure that a website or application adapts its layout and content to provide an optimal viewing experience.

image.png

When designing responsive websites, there are two main approaches: mobile-first and desktop-first. Each has its own advantages and considerations.

Mobile-First Approach

The mobile-first approach involves designing for mobile devices first and then progressively enhancing the design for larger screens.

  • Advantages:
    • Prioritizes content for smaller screens
    • Encourages a minimalist design approach
    • Typically results in faster loading times on mobile devices
  • Considerations:
    • May require more effort to scale up for desktop views
    • Can be challenging to incorporate complex features initially

Desktop-First Approach

The desktop-first approach starts with designing for larger screens and then adapts the layout for smaller devices.

  • Advantages:
    • Allows for more complex layouts and features from the start
    • May be more suitable for content-heavy websites
  • Considerations:
    • Can lead to overly complex mobile versions if not carefully planned
    • May result in unnecessary elements on mobile devices

The choice between mobile-first and desktop-first depends on your target audience, project requirements, and the nature of your content. Many designers today prefer the mobile-first approach due to the increasing prevalence of mobile browsing.

link_to_page

UI/Frontend Development (Pt 2)

At high level frontend dev is a bridge between design and functionality, transforming static designs into interactive, responsive experience that look and work well on all devices.

Key Points

  1. Translating Mockups into Code

  2. Accessibility First

  3. Performance Optimization

  4. Making it Responsive

  5. Translating Mockups into Code

    • Get measurements, color codes, and font styles directly from designs for pixel-perfect UI.
    • Implement a mobile-first or desktop-first approach based on your target audience—whichever device is likely to have the larger user base.
    • Best Practices:
      • Semantic HTML: Use elements that define the structure (e.g., <header>, <footer>, <main>) to make the content easy to understand for both users and search engines.
      • Keep it Clean and Simple: Avoid unnecessary <div> wrappers. Aim for a minimal and logical structure.
      • Please use CSS Flexbox and CSS Grid

        • Use Flexbox for simple, one-dimensional layouts like navigation bars.

        • Use CSS Grid for complex two-dimensional layouts, allowing you to position elements with rows and columns.

          image.png

    1. Focus on Accessibility

      • Ensure keyboard navigation works for all interactive elements.
      • Add alt attributes for images, proper labels for form elements, and ensure good color contrast for readability.
      • Use semantic HTML tags (e.g., <button>, <header>, <nav>) to help screen readers and improve the overall accessibility of the site.

    2. Performance Optimization

      • Minimize the number of HTTP requests by combining files or using sprites.
      • Optimize images (compress them) and use lazy loading for media-heavy content.
      • Use minified CSS and JavaScript files in production.

Web Interactions (Pt 2)

Web interactions are behaviors and responses that occur when users engage with a website or app. These interactions guide users, encourage engagement, and can add an element of fun to the experience.

Key Types of Web Interactions:

  1. Hover Effects
    • Purpose: Provide visual feedback when a user hovers over elements like buttons, images, or links.
    • Example: Changing the color, expanding an element, or showing additional options when hovering.
    • Best Practice: Keep hover effects subtle but noticeable; excessive animation can overwhelm or distract the user.
  2. Scroll-Based Interactions
    • Purpose: Animate elements based on the user’s scroll position, creating a dynamic narrative as they move down the page.
    • Example: Parallax effects, fade-ins, or moving elements that follow the user’s scroll.
    • Best Practice: Avoid overly complex effects that can cause performance issues or interfere with accessibility. Ensure animations are smooth and do not block content.
  3. Loading Animations
    • Purpose: Provide visual feedback when loading content, improving perceived loading times.
    • Example: Spinners, progress bars, skeleton screens (placeholders mimicking the layout of actual content).
    • Best Practice: Make loading animations brief and relevant, giving users a sense of how long they need to wait.
  4. Gestural Interactions (For Mobile)
    • Purpose: Allow users to swipe, pinch, and tap to interact with the app or site.
    • Example: Swiping left or right to switch tabs, pinching to zoom in/out on images.
    • Best Practice: Make gestures intuitive; they should align with common mobile gestures for usability.

Common Types of Tactile Feedback:

  1. Visual Feedback
  2. Auditory Feedback
  3. Haptic Feedback (for Mobile)

Resources:

Branding (good to know)

Branding in UI/UX design is about more than just a logo or a color scheme—it’s about creating a consistent experience that reflects a brand’s identity, values, and message across all touch points.

Key Aspects of Branding:

  • Visual Identity: Colors, typography, logos, and imagery that make the brand recognizable.
  • Tone of Voice: The language and style of communication used in copy and messaging.
  • User Experience: The emotional response and impressions users have when interacting with your brand.

Core Elements of branding

  • Logo Usage: Consistently use logos across platforms with proper sizing and placement.
  • Brand Colors: Stick to primary, secondary, and accent colors. Colors evoke emotions—warm for energy, cool for calm, etc.
  • Typography & Brand Voice: Choose typefaces that align with brand tone (e.g., modern vs. traditional). Maintain consistency in font weights and styles.
  • Tone & Messaging: Keep a consistent tone of voice across all copy (e.g., playful, formal).
  • Iconography & Imagery: Keep a consistent icon style (outline, filled, etc.). Use photos or illustrations that reflect the brand’s tone and visual style.

Resources

link_preview