A
Above the Fold
Above the fold is the portion of a web page that is visible without scrolling. The term originates from the newspaper industry, where the most important news appeared above the physical fold. In web design, above the fold determines the first impression: your headline, hero section, and primary call-to-action should be placed here. Research shows that 57% of page view time is spent on content above the fold. Make sure your core message is immediately visible on your landing page.
Accessibility
Accessibility (a11y) is the practice of designing websites and apps so they are usable by everyone, including people with visual, auditory, motor, or cognitive disabilities. This includes alt text for images, sufficient color contrast, keyboard navigation, and proper HTML structure for screen readers. The WCAG 2.1 guidelines (Web Content Accessibility Guidelines) are the international standard. In the United States, the ADA (Americans with Disabilities Act) increasingly applies to websites, and accessibility lawsuits have been rising year over year.
Adaptive Design
Adaptive design is a design methodology where multiple fixed layouts are created for specific screen widths, as opposed to responsive design which scales fluidly. With adaptive design, the server detects the device and serves the corresponding version. The advantage is full control per device; the downside is more maintenance. Today, responsive design is the standard, but adaptive design is still used for complex applications where the mobile experience needs to be fundamentally different from desktop.
Affordance
An affordance is a visual characteristic that suggests to the user how an element can be used. A button with a shadow and rounded corners invites clicking, a scrollbar suggests dragging, and underlined text implies a link. Donald Norman introduced the concept in "The Design of Everyday Things." In UX design, it is crucial that affordances are clear: if an element looks like a button but is not clickable, you create confusion and frustration for the user.
Animation
Animation in web design refers to moving elements that enrich the user experience: fade-ins, slide transitions, hover effects, and micro-interactions. Good animations provide feedback (a button that briefly pulses after clicking), guide attention, and make interfaces feel more alive. Bad animations slow down the page, distract, or cause motion sickness. The rule of thumb: animations should be functional and last no longer than 300-500 milliseconds. Use CSS animations where possible for optimal performance.
Atomic Design
Atomic design is a methodology by Brad Frost where you build interfaces from the smallest elements up to the larger whole, similar to atoms forming molecules. The five levels are: atoms (buttons, labels, inputs), molecules (search bar = input + button), organisms (navigation bar), templates (page structure), and pages (populated templates). Atomic design ensures consistency, reusability, and maintainability, and forms the foundation of modern design systems.
B
Backlog
A backlog is a prioritized list of tasks, features, and improvements that still need to be completed in a web design or development project. In Scrum, a distinction is made between the product backlog (all desired functionalities) and the sprint backlog (tasks for the current sprint). A well-maintained backlog helps teams stay focused and tackle the most important UX improvements first. Stakeholders contribute items, but the product owner determines the priority.
Below the Fold
Below the fold is all content on a web page that only becomes visible after scrolling. While above the fold determines the first impression, below the fold is equally important: this is where you place in-depth content, social proof, features, and secondary calls-to-action. Modern users are accustomed to scrolling, especially on mobile. The trick is to make the above-the-fold content compelling enough that visitors want to keep scrolling. Use visual cues like partial images or arrows.
Bounce Rate
The bounce rate is the percentage of visitors who leave your website without further interaction. In Google Analytics 4, a bounce is a session shorter than 10 seconds, with no conversion and a maximum of one page view. A high bounce rate can indicate slow load times, poor UI, a mismatch between search intent and page content, or confusing navigation.
Breakpoint
A breakpoint is a specific screen width in CSS at which a website's layout changes. Commonly used breakpoints are 640px (mobile), 768px (tablet), 1024px (laptop), and 1280px (desktop). At each breakpoint, columns can redistribute, navigation can collapse into a menu, and font sizes can adjust. Modern frameworks like Tailwind CSS use mobile-first breakpoints: you design for mobile first and add adjustments for larger screens via media queries. Choose breakpoints based on your content, not on specific devices.
Breadcrumb
A breadcrumb is a navigation element that shows the hierarchical position of a page (for example: Home > Services > Web Design). Breadcrumbs reduce friction by allowing users to quickly navigate back without the browser's back button. They also improve the internal link structure for SEO — Google regularly displays them in search results. For websites with deep hierarchies, breadcrumbs are indispensable. Place them at the top of the page, below the navigation, in a small font size.
C
Card Design
Card design is a UI pattern where content is presented in visually contained cards with an image, title, description, and optionally an action button. Pinterest popularized the concept, and it has since become a standard pattern. Cards work excellently in responsive design because they easily redistribute across columns as separate blocks. They provide a consistent format for varying content and invite interaction. Use cards for portfolios, blog posts, products, or team members.
CLS (Cumulative Layout Shift)
CLS measures how much a page's layout unexpectedly shifts during loading. It is one of Google's Core Web Vitals and sits at the intersection of UX and SEO. A poor CLS score (above 0.25) means elements jump around while the user is reading or clicking — extremely frustrating. Common causes include images without dimensions, dynamically loaded ads, and web fonts that load late. Always give images width and height attributes.
Color Theory
Color theory is the framework for combining and applying colors in design. It encompasses the color wheel (primary, secondary, tertiary colors), color harmonies (complementary, analogous, triadic), and color psychology: blue evokes trust, red urgency, green calm. In web design, you define a primary color (brand), accent color (CTAs), and neutral colors (text, background). Always ensure sufficient contrast per WCAG guidelines — a minimum of 4.5:1 for normal text.
Component
A component is a reusable UI element used in multiple places across a website or app: buttons, cards, form fields, navigation bars, and modals. In modern front-end frameworks (React, Vue, Svelte), components are the building blocks of the interface. Each component has its own HTML, CSS, and logic. Component-based thinking promotes consistency, speeds up development, and simplifies maintenance. A solid component system is the backbone of a design system.
Content Hierarchy
Content hierarchy is the visual and structural arrangement of information based on importance. By varying size, color, weight, and position, you guide the visitor's eye toward the most important elements. The heading (H1) is the most important, followed by subheadings (H2, H3), body text, and supporting elements. A strong hierarchy ensures visitors understand what a page offers within seconds. Without hierarchy, a page feels chaotic, leading to higher bounce rates.
Core Web Vitals
Core Web Vitals are three performance metrics Google uses to assess the user experience of a page: LCP (loading speed), CLS (visual stability), and INP (interactivity). Good scores are: LCP under 2.5 seconds, CLS under 0.1, and INP under 200 milliseconds. Core Web Vitals are a ranking factor for SEO and directly measurable via Google Search Console, PageSpeed Insights, and Chrome DevTools. Improve them by optimizing images, minifying CSS, and deferring JavaScript.
CSS (Cascading Style Sheets)
CSS is the styling language that determines the visual appearance of a web page: colors, fonts, layout, spacing, and animations. While HTML defines the structure, CSS provides the design. Modern CSS offers powerful tools such as Flexbox, Grid, custom properties (variables), and media queries for responsive design. CSS frameworks like Tailwind CSS and Bootstrap speed up the design process. Inline styles, internal stylesheets, and external CSS files determine how styles are applied.
CTA (Call-to-Action)
A CTA is an element that prompts the visitor to take a specific action: "Request a Quote," "Start Your Free Trial," or "Download the Guide." Effective CTAs stand out visually through contrast color, whitespace around them, and activating copy that starts with a verb. Place your primary CTA above the fold and repeat it strategically throughout the page. A well-designed landing page has a clear CTA hierarchy with a primary and optionally secondary action.
D
Dark Mode
Dark mode is a color scheme where the interface uses predominantly dark backgrounds with light text, instead of the traditional light-on-dark approach. Dark mode reduces eye strain in low-light conditions, saves battery on OLED screens, and is aesthetically appealing to many users. The CSS media query prefers-color-scheme: dark automatically detects the system preference. When designing for dark mode, you need to adjust colors — not simply invert them — and carefully monitor contrast.
Design Sprint
A design sprint is a five-day process (developed at Google Ventures) to rapidly validate a concept. Day 1: define the problem, Day 2: sketch solutions, Day 3: decide, Day 4: build a prototype, Day 5: test with real users. The goal is to get answers to critical design questions in one week that would otherwise take months. Design sprints are ideal for new features, redesigns, or validating an entirely new product before committing to development.
Design System
A design system is a collection of reusable components, style guidelines, patterns, and principles that together ensure a consistent digital brand experience. It encompasses typography, colors, spacing rules, icons, UI components, and their behavioral rules. Well-known examples include Material Design (Google) and Human Interface Guidelines (Apple). A design system saves development time, ensures consistency across teams, and accelerates onboarding of new designers and developers.
Design Thinking
Design thinking is a human-centered problem-solving methodology with five phases: empathize (understand the user), define (formulate the problem), ideate (generate solutions), prototype (create a testable model), and test (validate with users). It is iterative: after testing, you return to earlier phases. Design thinking is widely applied in UX design, product development, and business innovation. Its power lies in breaking free from assumptions by truly listening to the end user first.
E
Eye Tracking
Eye tracking is a research method that records where a user looks on a screen, for how long, and in what order. Specialized hardware or webcam software tracks eye movements and generates heatmaps and gaze plots. Eye tracking reveals whether visitors actually see your CTA, whether your content hierarchy works, and which elements are ignored. Classic eye-tracking research demonstrated the F-pattern: users scan horizontally at the top, then lower, and subsequently scroll vertically along the left side.
Empty State
An empty state is the screen a user sees when no content is available yet — for example, an empty dashboard, an empty inbox, or search results with no results. A well-designed empty state is not empty but informative and motivating: it explains why it is empty, how to add content, and possibly includes a CTA. "No projects yet. Click here to start your first project." Empty states are underrated UX moments that set the tone for the user experience.
F
Favicon
A favicon is the small icon that appears in the browser tab, in bookmarks, and on the home screen of mobile devices. The standard size is 32x32 pixels (ICO or PNG), but modern browsers also support SVG. A recognizable favicon strengthens your brand identity and helps users quickly find your tab among dozens of open tabs. Preferably use a simplified version of your logo or a recognizable letterform. Don't forget to also add an apple-touch-icon (180x180px) for iOS devices.
Figma
Figma is a browser-based design and prototyping tool that has become the industry standard for UI/UX design. Unlike Sketch (macOS only), Figma runs on any operating system. Teams can collaborate in real time on the same files, making Figma ideal for design systems and developer handoffs. Figma offers vector editing, prototyping, auto-layout, component libraries, and developer mode. It was acquired by Adobe in 2022 but continues to operate as an independent product.
Fitts's Law
Fitts's Law states that the time to reach a target area depends on the distance to the target and its size. In UX design, this means: make clickable elements large enough and place them close to the expected cursor position. Buttons on mobile should be at least 44x44 pixels (Apple's guideline). Fitts's Law also explains why navigation menus at the edge of the screen are faster to reach — the screen edge acts as an infinitely large target area.
Flexbox
Flexbox (Flexible Box Layout) is a CSS layout model for distributing space and aligning items within a container, even when their size is unknown or dynamic. Flexbox works in one direction: horizontal (row) or vertical (column). It makes centering, equal heights, and responsive distributions straightforward without floats or positioning hacks. Flexbox is ideal for navigation bars, card rows, and forms. For two-dimensional layouts (rows and columns simultaneously), use CSS Grid.
Fold
The fold is the imaginary line on a web page that separates the visible portion (without scrolling) from the rest. Everything above it is above the fold, everything below is below the fold. The exact position of the fold varies by device, browser, and screen resolution. On desktop, the fold is typically around 600-800 pixels from the top; on mobile, around 500-700 pixels. The fold is not a hard boundary but a guideline for prioritizing content.
Footer
The footer is the bottom section of a web page, typically consistent across all pages. A good footer contains contact information, navigation links, social media icons, legal information (privacy policy, terms of service), and optionally a secondary CTA. The footer is also important for SEO: it provides additional internal links and can contain structured data. Despite its position at the bottom of the page, the footer is frequently visited — users consciously scroll there for contact information or legal pages.
G
Gestalt Principles
The Gestalt principles are perceptual rules that describe how the human brain groups and interprets visual elements. The most important principles for web design are: proximity (elements close together are perceived as a group), similarity (visually similar elements belong together), closure (the brain fills in missing shapes), and continuity (the eye follows lines and curves). UX designers apply Gestalt principles to create intuitive interfaces without explicit visual boundaries.
Golden Ratio
The golden ratio (1:1.618) is a mathematical proportion found in nature, art, and architecture that is perceived as aesthetically harmonious. In web design, the golden ratio is applied to layout proportions, typographic scales, and the positioning of focal points. For example: a content column of 640px with a sidebar of 395px approximates the golden ratio. While the scientific evidence for aesthetic superiority is limited, the ratio provides a useful starting point for proportional designs.
Grid (CSS Grid)
CSS Grid is a two-dimensional layout system that allows you to place elements in rows and columns. Unlike Flexbox (one-dimensional), Grid can manage rows and columns simultaneously. With properties like grid-template-columns, gap, and grid-area, you create complex layouts with minimal CSS. Grid is ideal for page structures, photo galleries, and dashboards. Combine Grid for the overall layout with Flexbox for alignment within individual components.
H
Hamburger Menu
The hamburger menu is a navigation icon consisting of three horizontal lines that reveals a hidden menu when clicked. It is the standard for mobile navigation, but not without controversy: usability research shows that hidden navigation leads to less interaction than visible navigation. The solution is often a hybrid approach — keeping the most important links visible in a bottom navigation bar while placing secondary items in the hamburger menu. The icon is named after its visual resemblance to a hamburger.
Header
The header is the top section of a web page, typically containing the logo, main navigation, and optionally a CTA button. A sticky header (that scrolls with the page) ensures navigation is always accessible but does take up screen space. Best practices: keep the header compact (60-80px tall), make the logo clickable to the homepage, limit navigation items to 5-7, and add a clear CTA. On mobile, the header typically collapses into a hamburger menu.
Hero Section
The hero section is the prominent top portion of a web page, directly below the navigation. It typically contains a large headline, subtext, a CTA button, and a supporting visual element (image, video, or illustration). The hero section is the first thing visitors see and determines whether they stay or leave. An effective hero communicates your value proposition within five seconds. On a landing page, the hero section is the most critical element for conversion.
Heuristic Evaluation
A heuristic evaluation is a UX assessment method where experts evaluate an interface against a set of usability principles (heuristics). The best-known set is Jakob Nielsen's 10 heuristics, including visibility of system status, error prevention, and recognition over recall. It is a quick, cost-effective way to identify usability problems without user testing. Three to five evaluators typically find 75% of the issues. It is not a replacement for usability testing but a valuable complement.
Hover State
A hover state is the visual change that occurs when a user moves their mouse over an interactive element — a color change, shadow, underline, or scaling. Hover states provide essential feedback: they confirm that an element is clickable. Note: hover states do not work on touchscreens. Therefore, always design with a mobile-first approach where the interface is understandable even without hover. Use the CSS :hover pseudo-class and keep transitions subtle (150-300ms).
HTML (HyperText Markup Language)
HTML is the markup language that defines the structure and content of web pages. HTML elements (tags) such as <h1>, <p>, <nav>, and <section> give meaning to content. Semantic HTML is crucial for accessibility (screen readers interpret the page based on HTML structure) and SEO (search engines understand the hierarchy). HTML5 introduced elements like <header>, <main>, <article>, and <footer> for better semantic structure.
I
Iconography
Iconography is the use of icons in an interface to visually communicate actions, objects, or concepts. Good icons are universally recognizable (magnifying glass = search, house = home, envelope = email), consistent in style, and large enough for touchscreens (minimum 24x24px visual, 44x44px tap area). Avoid ambiguous icons without labels — research shows that icons with text are understood 88% better than icons alone. Popular icon sets include Lucide, Phosphor, and Material Icons.
Information Architecture
Information architecture (IA) is the structuring and organization of content on a website so that users can intuitively find what they are looking for. IA encompasses the site structure, navigation systems, labeling, and search functionality. Methods like card sorting and tree testing help validate your IA. Good information architecture follows the user's mental model — not the internal organizational structure of the company. IA is the foundation upon which navigation, sitemaps, and wireframes are built.
Interaction Design
Interaction design (IxD) focuses on designing interactive elements and the way users communicate with a product. It involves defining behavior: what happens when you click, swipe, scroll, or type? Good interactions are predictable, consistent, and provide immediate feedback. IxD principles include visibility (show available actions), feedback (confirm what happened), constraints (prevent errors), and consistency (similar actions work similarly). Interaction design forms the bridge between UI and UX.
J
JavaScript
JavaScript is the programming language that makes web pages interactive. Where HTML provides structure and CSS determines appearance, JavaScript adds behavior: form validation, animations, dynamic content, API integrations, and single-page applications. Modern frameworks like React, Vue, and Svelte are built on JavaScript. Excessive JavaScript use can negatively impact load time and Core Web Vitals. Progressive enhancement is the principle that a page should function even without JavaScript.
Journey Map
A journey map is a visual representation of all the steps a user goes through when interacting with your product or service — from initial awareness to purchase and aftercare. For each step, you map the actions, emotions, pain points, and touchpoints. Journey maps help teams see the experience through the customer's eyes and identify opportunities for improvement. In web design, you use journey maps to determine which pages, content, and features are needed for each phase.
K
Kerning
Kerning is the adjustment of spacing between specific letter pairs to create an optically even distribution. Without kerning, letter pairs like AV, WA, and To visually appear too far apart due to their diagonal shapes. In web design, kerning is largely handled automatically by the typeface, but you can fine-tune it with CSS letter-spacing (for all characters) or font-kerning (for pair-wise adjustments). Kerning is especially important in large headings and logos where irregular spacing is immediately noticeable.
L
Landing Page
A landing page is a standalone page specifically designed for a marketing campaign or advertisement, with the goal of achieving a single conversion. Unlike a homepage, a landing page contains no distracting navigation and focuses on one CTA. Effective landing pages have a strong hero section, social proof, a clear value proposition, and minimal friction. The average conversion rate ranges from 2% to 12%, depending on the industry. Learn more about having a landing page built.
Lazy Loading
Lazy loading is a technique where images, videos, and other heavy content are only loaded when they appear in the viewport — that is, when the user scrolls to them. This speeds up the initial load time and saves bandwidth. In HTML5, you simply add loading="lazy" to <img> tags. Always load the first images (above the fold) immediately (eager loading) to avoid worsening LCP. Lazy loading is one of the simplest optimizations for better Core Web Vitals.
LCP (Largest Contentful Paint)
LCP measures how long it takes for the largest visible element on a page (typically a hero image or heading) to fully load. It is one of Google's Core Web Vitals and a direct indicator of perceived loading speed. A good LCP score is under 2.5 seconds. Common causes of poor LCP: oversized images, slow server response, render-blocking CSS/JavaScript, and missing preload hints for critical resources.
Line Height
Line height (also known as leading) is the vertical space between lines of text. Good line height significantly improves readability. For body text, 1.5 to 1.8 is standard; for headings, 1.1 to 1.3 is typical. Too little line height makes text feel cramped and hard to read; too much makes it difficult to find the next line. In CSS, set this with the line-height property. Preferably use unitless values (1.6) instead of fixed pixels, so the line height scales with the font size.
M
Micro-interaction
A micro-interaction is a subtle, animated response to a user action: a heart that fills in on a like, a button that briefly changes color, a form field that turns green on correct input, or a progress bar during uploading. Micro-interactions provide feedback, confirm actions, and make an interface feel more human. They consist of four phases: trigger (user action), rules (what happens), feedback (visual/auditory response), and loops (does it repeat?). Well-designed micro-interactions are barely noticeable but are missed when absent.
Minimalism
Minimalism in web design is the principle of "less is more": remove everything that does not directly contribute to the page's goal. Minimalist design is characterized by ample whitespace, a limited color palette, large typography, and few decorative elements. The result is a clean, clear interface that directs attention to the content and CTA. Apple and Google are well-known examples. The pitfall is going too far: overly minimal design can feel cold, unclear, or unengaging.
Mobile First
Mobile first is a design strategy where you design for the smallest screen (smartphone) first and then expand the design for tablet and desktop. This forces you to prioritize: on a small screen, space is scarce, so you keep only the essential content and features. Mobile first is not only a design principle but also a CSS approach: you write base CSS for mobile and add styles for larger screens via media queries. Since Google uses mobile-first indexing, it is also an SEO must.
Modal
A modal is an overlay window that appears on top of the current page and temporarily blocks the underlying content. Modals are used for forms, warnings, confirmations, and lightbox images. Good modals have a clear close button, close when clicking outside the window or pressing Escape, and are accessible via keyboard and screen readers. Bad modals are aggressive pop-ups that disrupt the experience. Google penalizes intrusive interstitials on mobile that hide the content.
Mockup
A mockup is a high-fidelity visual representation of a design that shows what the final product will look like, complete with colors, typography, images, and branding. Unlike a wireframe (structure) and prototype (interaction), a mockup is static but visually complete. Mockups are used to show stakeholders the end result and get approval before development begins. Tools like Figma and Adobe XD are standard for creating mockups.
N
Navigation
Navigation is the system of menus, links, and elements through which users move around a website. Good navigation is intuitive, consistent, and requires minimal cognitive effort. Main types include: horizontal top navigation, vertical sidebar, hamburger menu (mobile), breadcrumbs, and footer navigation. The 3-click rule (every page reachable within 3 clicks) is a well-known rule of thumb. Limit your main navigation to 5-7 items — more choices lead to choice paralysis (Hick's Law).
Negative Space
Negative space is a synonym for whitespace — the empty space around and between elements in a design. The term emphasizes that this space is not "empty" but actively contributes to the design: it creates breathing room, directs attention, and improves readability. Famous examples of clever negative space usage include the FedEx logo (the arrow between E and x) and Apple's product design. In web design, sufficient negative space is a hallmark of professional design.
O
Onboarding
Onboarding is the process of guiding new users through the first use of a website or app. Effective onboarding reduces churn, shortens time-to-value, and increases the likelihood of long-term use. Commonly used patterns include tooltips, guided tours, progress bars, checklists, and welcome screens. The best onboarding lets users learn by doing rather than overwhelming them with information. Keep it short (3-5 steps) and immediately demonstrate the core value of your product.
Overlap
Overlap in web design is the intentional overlapping of elements — text over an image, a card that extends beyond a section boundary, or a circle behind a heading. Overlap creates depth, visual interest, and a dynamic feel. It breaks the monotony of strictly gridded layouts. Technically, overlap is achieved with CSS position: relative/absolute, negative margins, or z-index. Use overlap sparingly and ensure it does not compromise readability and accessibility.
P
Parallax Scrolling
Parallax scrolling is a visual effect where background and foreground elements move at different speeds while scrolling, creating an illusion of depth. It can make a website visually more engaging, but overuse leads to motion sickness, slow load times, and accessibility issues. Use parallax subtly — for example, only on the hero section — and always provide an option to reduce motion via CSS prefers-reduced-motion.
Persona
A persona is a fictional profile representing a typical user or customer, based on research data. A persona includes a name, photo, demographic information, goals, frustrations, behavior, and a quote that characterizes the person. Personas help design teams develop empathy and test design decisions against real user needs rather than assumptions. Create 3-5 personas representing your most important user segments. Avoid stereotypes and base personas on actual research, not imagination.
Progressive Disclosure
Progressive disclosure is the UX principle of gradually revealing information rather than showing everything at once. Show the essentials first and let users dig deeper if they choose. Examples: a "Read more" link, an expandable FAQ item, or a form that shows additional fields based on previous choices. Progressive disclosure reduces cognitive load, keeps interfaces organized, and helps users stay focused. It is one of the most impactful UX patterns for complex products and content-rich websites.
Prototype
A prototype is an interactive model of a design that allows you to simulate and test click behavior, navigation flows, and micro-interactions before any code is written. Prototypes range from low-fidelity (clickable wireframes) to high-fidelity (pixel-perfect interactive mockups). Figma and InVision are popular tools. Prototyping saves costs: catching a design flaw early costs a fraction of fixing it after development. Always test prototypes with real users, not just colleagues.
R
Responsive Design
Responsive design is a design methodology where a website automatically adapts to the screen size — desktop, tablet, or smartphone. This is achieved through flexible grids, scalable images, and CSS media queries with breakpoints. Ethan Marcotte introduced the concept in 2010. Since Google uses mobile-first indexing, responsive design is not only a UX essential but also an SEO requirement. Always test your site on multiple devices and use Chrome DevTools to simulate different viewports.
Retina Display
Retina display is Apple's term for screens with a pixel density so high that individual pixels are invisible at a normal viewing distance (typically 2x or 3x standard resolution). For web design, this means images must be supplied at 2x or 3x resolution to remain sharp. An image displayed at 400px wide should be 800px or 1200px wide as a source file. Use the srcset attribute in HTML to offer different resolutions without burdening load times for standard screens.
S
Scroll Depth
Scroll depth measures how far visitors scroll down a page, expressed as a percentage (25%, 50%, 75%, 100%). It is a valuable UX metric: if 80% of your visitors drop off before reaching your CTA, you need to rethink your page layout. Google Analytics 4 tracks scroll events by default at 90%. For more detailed insights, use custom tracking or tools like Hotjar. Improve scroll depth with a logical content hierarchy, visual anchor points, and content that delivers on what the hero promised.
Semantic HTML
Semantic HTML is the use of HTML elements that describe the meaning of content rather than just its presentation. <nav> for navigation, <article> for articles, <aside> for sidebars, and <main> for the main content. Semantic HTML is crucial for accessibility (screen readers navigate based on semantics) and SEO (search engines better understand the page structure). Avoid overuse of generic <div> elements when a semantic alternative is available.
Sitemap
A sitemap is an overview of all pages on a website. Two forms exist: a visual sitemap (a diagram of the page structure, used during the design phase) and an XML sitemap (a file for search engines indicating which pages should be indexed). In UX design, the visual sitemap is an essential planning tool: it shows the information architecture, page hierarchy, and relationships between sections. Create your sitemap before you begin wireframing.
Skeleton Screen
A skeleton screen is a loading pattern where a simplified, gray version of the page layout is displayed while the real content loads. Instead of a spinner or empty page, the user already sees the outlines of where content will appear — rectangles for text, circles for profile photos. Skeleton screens feel faster than loading spinners because they create the illusion of progress. Facebook, LinkedIn, and YouTube use this pattern. Implement them for pages where content is loaded asynchronously.
Style Guide
A style guide documents the visual and communicative guidelines of a brand: colors (with hex codes), typography (typefaces, sizes, weights), spacing rules, icon style, photography style, and tone of voice. It is the predecessor of the design system and is still used for brand-wide guidelines that extend beyond digital products. A good style guide prevents inconsistency when multiple designers or agencies work on the same brand. At Searchlab, we recommend every business owner have at least a basic style guide.
T
Tab Navigation
Tab navigation is a UI pattern where content is divided across multiple tabs that the user can switch between without leaving the page. Tabs are ideal when you have related but separate content blocks — for example, specifications, reviews, and FAQs on a product page. Limit tabs to 3-7 items, make the active tab visually distinct, and ensure the content below the tab does not jump when switching. On mobile, tabs are often replaced by a vertical accordion pattern.
Touch Target
A touch target is the clickable/tappable area of an interactive element on a touchscreen. Apple's Human Interface Guidelines prescribe a minimum of 44x44 points; Google's Material Design specifies 48x48dp. Touch targets that are too small lead to mis-taps, frustration, and higher bounce rates on mobile. Enlarge touch targets with CSS padding without visually enlarging the element. Also pay attention to the spacing between touch targets — too close together increases the chance of tapping the wrong element.
Typography
Typography is the art and technique of arranging text: typeface selection, size, weight, line height, kerning, and hierarchy. In web design, typography is the most impactful design element — 95% of a website is text. A typographic scale (e.g., 16px base, 1.25 ratio) ensures harmonious proportions. Limit yourself to 2 typefaces: one for headings and one for body text. Use system fonts or optimized web fonts (WOFF2) to minimize load times. Minimum body font size: 16px.
U
UI (User Interface)
UI design focuses on the visual design of the interface: colors, typography, buttons, icons, forms, and layout. The goal is an aesthetically appealing and functional interface that intuitively guides the user through the product. UI is the visual layer on top of UX: where UX determines structure and flow, UI provides the look and feel. Good UI is consistent (the same button style everywhere), provides visual hierarchy (the most important elements stand out most), and feels familiar by following known patterns.
Usability
Usability is the degree to which a product can be used effectively, efficiently, and satisfactorily by its intended users. ISO 9241 defines it through five components: learnability, efficiency, memorability, error tolerance, and satisfaction. A website with high usability enables users to achieve their goal quickly without frustration. Usability is measured through usability tests, heuristic evaluations, and quantitative metrics like task completion rate and error percentage.
Usability Testing
Usability testing is a research method where you observe real users performing tasks on your website or prototype. A moderator gives assignments ("Find the return policy and initiate a return") and notes where the user gets stuck, hesitates, or makes mistakes. Jakob Nielsen's research shows that 5 test participants already uncover 85% of usability problems. Remote unmoderated testing via tools like UserTesting and Maze makes it scalable and affordable.
User Flow
A user flow is a visual diagram showing the steps a user takes to achieve a specific goal — for example, from the homepage to a purchase, or from an ad to filling out a form. User flows help designers map the shortest, most logical route to conversion and identify friction. Every decision point (choice, form, confirmation) is an opportunity for drop-off. Minimize steps, provide clear progress indicators, and make backward navigation possible.
UX (User Experience)
UX design encompasses everything that affects the overall experience of a user with a product or service: usability, accessibility, performance, information architecture, interaction design, and emotional response. UX goes beyond the interface — it begins with user research and ends with post-launch evaluation. Peter Morville's UX Honeycomb defines seven facets: useful, usable, desirable, findable, accessible, credible, and valuable. Good UX is the result of understanding the user, not of personal design preferences.
V
Viewport
The viewport is the visible portion of a web page within the browser window. On desktop, the viewport is the size of the browser window; on mobile, it is the screen width. The meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> is essential for responsive design — without this tag, mobile devices display the desktop version scaled down. CSS viewport units (vw, vh, dvh) make it possible to scale elements based on the viewport. For example: height: 100dvh makes an element exactly screen height.
Visual Design
Visual design is the discipline focused on the aesthetics and visual communication of a digital product. It encompasses color usage, typography, photography, illustration, iconography, and layout. Visual design differs from UI design in its focus: visual design emphasizes brand expression and emotional impact, while UI design focuses on functionality and interaction. Both disciplines overlap significantly. Strong visual design enhances credibility — research shows that 75% of users judge a company's trustworthiness based on its website design.
W
Web Font
A web font is a typeface loaded over the internet rather than installed locally on the device. Google Fonts, Adobe Fonts, and self-hosted WOFF2 files are the most commonly used sources. Web fonts give you full control over typography but affect load speed. Optimize by loading only the required weights and character sets, using font-display: swap (shows system font while loading), and preloading files. Consider variable fonts — a single file that combines multiple weights and styles.
Whitespace
Whitespace is the empty space between and around elements in a design. It does not have to be white — it refers to the absence of content. Whitespace is one of the most powerful tools in web design: it improves readability, creates visual hierarchy, gives elements breathing room, and directs attention. Apple is famous for its generous use of whitespace. Beginning designers fill every pixel; experienced designers know that empty space is just as important as filled space. More whitespace around a CTA increases its visibility.
Wireframe
A wireframe is a schematic blueprint of a web page that shows the structure and layout without visual design — no colors, images, or final typography. Wireframes use grayscale, placeholders, and basic shapes to determine element positioning: where does the navigation go, where the content, where the CTA? They are created after the sitemap and before the mockup. Low-fidelity wireframes are quick sketches; mid-fidelity wireframes show more detail. Wireframes speed up the design process and prevent costly adjustments in later stages.
Z
Z-Index
Z-index is a CSS property that determines the stacking order of overlapping elements — which element appears "on top of" which other element. An element with z-index: 10 appears above an element with z-index: 5. Z-index only works on positioned elements (position: relative, absolute, fixed, or sticky). In practice, z-index values quickly become chaotic. Use a scale (e.g., 1, 10, 100, 1000) for content, dropdowns, modals, and tooltips respectively. Document your z-index scale in your design system.
Z-Pattern
The Z-pattern describes the natural reading pattern on pages with minimal text: the eye moves from the top left to the top right, diagonally to the bottom left, and then to the bottom right. This pattern is typical for landing pages, homepages, and advertisements. Place your logo in the top left, a CTA in the top right, visual content in the center, and your most important action button in the bottom right. The F-pattern, by contrast, is observed on text-heavy pages: users scan the first lines horizontally and then scroll vertically along the left edge.
Friction
Friction is anything that slows down, confuses, or discourages a user from completing a task on your website. Examples: too many form fields, unclear error messages, mandatory account creation, slow load times, confusing navigation, or distraction from irrelevant content. In UX design, the goal is to minimize friction on the path to conversion. Not all friction is bad — a confirmation page for a payment is desirable friction that prevents errors. But undesirable friction directly leads to higher bounce rates and missed conversions.