The wiki · page 4 of 25

The reference desk for winning online.

Evergreen guides — kept current, backed by our own scan data, written in plain talk. Every article opens with the answer, not a preamble.

04 — Web Design

What Is a Website Color Palette?

A website color palette is the defined set of colors a site uses consistently across every page, typically built around a primary brand color, one or two secondary colors, neutral tones for backgrounds and text, and an accent color for buttons and calls-to-action. A cohesive palette makes a site look professional and on-brand, guides attention toward important actions, and, when contrast is planned properly, keeps text readable for every visitor.

UPDATED 2026-07-09 · READ →

What Is Typography Hierarchy?

Typography hierarchy is the deliberate use of size, weight, color, and spacing to rank text by importance so readers instantly know what to read first. On a website, it separates headlines, subheadings, body text, and captions into clear visual levels, guiding the eye through a page in a logical order. Strong hierarchy makes content scannable, improves comprehension, and steers visitors toward key information and calls-to-action without conscious effort.

UPDATED 2026-07-09 · READ →

What Is a Favicon?

A favicon is the small icon a browser displays next to a website's name in a tab, bookmark, or history entry, typically a simplified version of a company's logo. Short for 'favorite icon,' it helps users recognize and switch between sites at a glance. Though tiny, a favicon is a real branding element: a missing or generic one makes a business site look unfinished, while a clear, on-brand favicon signals attention to detail.

UPDATED 2026-07-09 · READ →

What Is a 404 Page?

A 404 page is the page a website shows when a visitor requests a URL that does not exist, named after the HTTP 404 'Not Found' status code the server returns. It appears after mistyped addresses, outdated links, or deleted pages. A good custom 404 page acknowledges the error, keeps the site's branding, and offers helpful next steps, like search or navigation, so a dead end becomes a recovery point instead of a lost visitor.

UPDATED 2026-07-09 · READ →

What Is Microcopy?

Microcopy is the small, functional text scattered throughout a website that guides users at the moment of action, button labels, form field hints, error messages, tooltips, confirmation notes, and placeholder text. Though brief, microcopy has an outsized effect on usability and conversions because it appears exactly where people hesitate or make decisions. Clear, reassuring microcopy reduces confusion and abandonment, while vague or generic wording quietly costs businesses clicks, form completions, and sales.

UPDATED 2026-07-09 · READ →

Mockup vs Prototype: What's the Difference?

A mockup is a static, high-fidelity visual of how a website will look, complete with colors, typography, images, and layout, but you cannot click through it. A prototype is an interactive version that simulates how the site will behave, with clickable links, transitions, and flows you can actually navigate. In short, a mockup shows the look; a prototype shows the experience. Most professional web projects use both, in that order, before development begins.

UPDATED 2026-07-09 · READ →

What Is Mobile-First Design?

Mobile-first design is an approach that designs and builds a website for the smallest screen first, then progressively enhances the layout for tablets and desktops. Instead of shrinking a desktop site down to fit phones, designers start with mobile constraints, forcing them to prioritize essential content and actions. Because most local-business web traffic and Google's indexing are mobile-based, mobile-first design has become the default professional standard rather than an optional consideration.

UPDATED 2026-07-09 · READ →

UX vs UI: What's the Difference?

UX, user experience, is the overall feel and usability of a product, how easily a person can accomplish a goal, while UI, user interface, is the specific visual and interactive surface they touch, the buttons, colors, typography, and layout. UX is the strategy and structure behind the experience; UI is the look and feel presented on screen. They are distinct disciplines that work together: strong UI on top of weak UX looks nice but frustrates, and strong UX with poor UI works but feels unpolished. Great products need both.

UPDATED 2026-07-10 · READ →

PNG vs JPG: What's the Difference?

PNG and JPG are two common web image formats that compress differently. JPG (or JPEG) uses lossy compression that discards some data to make photographs small, making it ideal for complex images with many colors. PNG uses lossless compression that preserves every pixel and supports transparency, making it ideal for logos, icons, text, and graphics with sharp edges or flat colors. As a rule, use JPG for photos to save file size and PNG when you need crisp detail or a transparent background.

UPDATED 2026-07-10 · READ →

SVG vs PNG: What's the Difference?

SVG and PNG are two image formats built on completely different principles. SVG is a vector format that describes shapes with math, so it scales to any size without losing sharpness and stays tiny for simple graphics. PNG is a raster format made of fixed pixels, so it looks perfect at its intended size but blurs when enlarged. Use SVG for logos, icons, and illustrations that must stay crisp at every size, and PNG for photographs, complex imagery, or detailed graphics that vectors cannot easily represent.

UPDATED 2026-07-10 · READ →

MP4 vs GIF: What's the Difference?

MP4 and GIF both display motion on the web, but MP4 is far more efficient. MP4 is a modern video format with advanced compression and audio support, producing small files even for long, high-quality clips. GIF is an old image format that shows short, silent, looping animations but stores frames inefficiently, so even brief GIFs become surprisingly large. For animations and video on a website, a muted, looping, autoplaying MP4 usually looks better and loads far faster than the equivalent GIF, improving page speed.

UPDATED 2026-07-10 · READ →

Custom vs Template Website: What's the Difference?

A custom website is designed and built from scratch to fit one business, while a template website starts from a pre-made design you customize with your own content. Custom sites offer complete control over layout, features, and branding but cost more and take longer. Template sites are faster and cheaper because the structure already exists, though they limit how far you can differentiate. Most small businesses do well with a quality template or lightly customized theme; custom builds suit unique needs and larger budgets.

UPDATED 2026-07-10 · READ →

Agency vs Freelancer: What's the Difference for Web Projects?

An agency is a team of specialists, designers, developers, project managers, and marketers, working together, while a freelancer is a single independent professional. Agencies handle larger, multi-skill projects with more structure, backup, and higher cost. Freelancers offer lower prices, direct communication, and flexibility but limited capacity and no built-in backup if they are unavailable. For a simple site, a good freelancer is often ideal; for complex, ongoing, or mission-critical work, an agency's depth and reliability usually justify the premium.

UPDATED 2026-07-10 · READ →

In-House vs Outsourced Web Design: What's the Difference?

In-house web design means employing your own designers and developers, while outsourced web design means hiring an external agency or freelancer to do the work. In-house gives full control, deep product knowledge, and instant availability but carries high fixed salary costs and requires enough work to stay busy. Outsourcing is flexible and cost-effective, giving access to varied specialists without payroll, though with less day-to-day control. Most small businesses outsource; larger companies with constant web needs justify an in-house team.

UPDATED 2026-07-10 · READ →

Figma vs Adobe XD: What's the Difference?

Figma and Adobe XD are both interface-design tools used to create website and app mockups, but they differ sharply in collaboration and availability. Figma is browser-based and real-time collaborative, letting several designers edit one file at once from any operating system. Adobe XD is a desktop app inside Adobe Creative Cloud, tightly linked to Photoshop and Illustrator. Since Adobe wound down active XD development after 2022, Figma has become the practical industry default for most web-design teams in 2026.

UPDATED 2026-07-10 · READ →

B2B vs B2C Website: What's the Difference?

A B2B website sells to other businesses, while a B2C website sells to individual consumers, and that audience gap changes almost everything about design and content. B2B sites serve longer, multi-person buying decisions with detailed information, case studies, and lead-capture forms rather than instant checkout. B2C sites optimize for fast, emotional, single-person purchases with prominent products, prices, and streamlined carts. The core difference is the buyer: rational teams evaluating over weeks versus individuals deciding in minutes, which reshapes goals, messaging, and calls to action.

UPDATED 2026-07-10 · READ →

What Is a Design Token?

A design token is a named value that stores one design decision, such as a color, spacing, font size, or border radius, in a single central place. Instead of hardcoding a hex color like #1A73E8 across dozens of files, designers and developers reference a token like color-primary. Because the value lives in one definition, changing it updates everywhere it is used. Tokens act as the shared vocabulary that keeps design tools and code in sync, making a brand consistent, themeable, and easier to maintain across a growing website or product.

UPDATED 2026-07-10 · READ →

What Is an Accordion (UI Component)?

An accordion is a user-interface component made of stacked, clickable headings that expand to reveal content and collapse to hide it, so only the sections a visitor wants are open at once. Named after the folding musical instrument, it lets a page present a lot of information compactly, showing titles first and full detail on demand. Accordions are common for FAQs, product specs, and mobile menus, where space is tight. Used well they improve scannability; used poorly they can hide important content and hurt accessibility if not built correctly.

UPDATED 2026-07-10 · READ →

What Is a Tooltip?

A tooltip is a small pop-up box of text that appears when a visitor hovers over or focuses on an element, offering a brief hint or explanation without cluttering the page. It typically clarifies an icon, a form field, or an abbreviated label, giving extra context on demand. Tooltips keep interfaces clean by hiding secondary help until it is needed. However, they rely on hovering, which does not exist on touchscreens, and they can create accessibility problems if built carelessly, so they suit optional hints rather than essential information.

UPDATED 2026-07-10 · READ →

What Is a Progress Bar?

A progress bar is a visual indicator that shows how much of a task or process is complete, usually as a horizontal bar that fills from empty to full. It reassures users that something is happening and how much longer it will take, whether a file is uploading, a form is submitting, or a checkout is underway. By making waiting visible and finite, progress bars reduce anxiety and abandonment. They come in two forms: determinate bars showing an exact percentage, and indeterminate ones that signal ongoing activity.

UPDATED 2026-07-10 · READ →

What Is Skeleton Loading?

Skeleton loading is a technique where a page displays gray placeholder shapes in the layout of content that is still loading, instead of a blank screen or a spinning icon. These bars and blocks mimic the structure of the coming text and images, so users see the page taking form and perceive it as faster. Once the real content arrives, it replaces the skeleton. Common on content-heavy sites and apps, skeleton screens reduce the feeling of waiting and make an interface feel more responsive.

UPDATED 2026-07-10 · READ →

What Is a Toast Notification?

A toast notification is a small, temporary message that appears briefly on screen to confirm an action or report status, then disappears on its own without requiring the user to click anything. Named for the way it pops up like toast, it usually slides in near a corner or edge, lingers for a few seconds, and fades out. Toasts are non-modal, meaning they never block the page or interrupt what the user is doing, which makes them ideal for low-stakes feedback such as Saved, Copied to clipboard, or Message sent.

UPDATED 2026-07-10 · READ →

What Is a Lightbox?

A lightbox is a web design pattern that displays an image, video, or other content in a large overlay centered on the screen while dimming the rest of the page behind it. Clicking a thumbnail opens the full item, focusing attention on it, and closing the lightbox returns you to the page underneath. The name comes from the photographer's lightbox for viewing slides. It is popular for galleries, product photos, and portfolios because it shows media at a generous size without loading a separate page.

UPDATED 2026-07-10 · READ →

What Is Infinite Scroll?

Infinite scroll is a web design technique that loads more content automatically as the user reaches the bottom of the page, so the feed appears to never end. Instead of clicking through numbered pages, the visitor keeps scrolling and new items stream in continuously. Social media feeds popularized it because it maximizes time on page and feels effortless. It suits open-ended browsing but works poorly when people need to find a specific item or return to an exact spot, where pagination usually wins.

UPDATED 2026-07-10 · READ →

What Is a Parallax Effect?

A parallax effect is a web design technique where background and foreground layers move at different speeds as the user scrolls, creating an illusion of depth and motion. The background typically drifts slower than the content in front of it, mimicking how distant objects appear to move more slowly than near ones. Borrowed from classic animation and video games, parallax adds visual drama to landing pages and storytelling sections. Used sparingly it feels immersive, but overused it can hurt performance, cause motion discomfort, and create accessibility problems.

UPDATED 2026-07-10 · READ →

What Is a Gradient in Web Design?

A gradient in web design is a smooth blend between two or more colors, transitioning gradually across an element rather than using a single flat color. Gradients add depth, dimension, and visual interest to backgrounds, buttons, and graphics without needing image files, since CSS can render them natively. Common types include linear, radial, and conic or mesh gradients, each blending color in a different shape. Used tastefully they feel modern and premium; overused or low-contrast, they can clash and hurt legibility.

UPDATED 2026-07-10 · READ →

What Is a Drop Shadow?

A drop shadow is a visual effect that adds a soft, dark shape behind an element so it appears to cast a shadow and lift off the page. In web design, drop shadows create a sense of depth and elevation, helping cards, buttons, and menus appear layered above the background. They also signal interactivity and reinforce hierarchy. CSS renders them with the box-shadow and filter properties, so no image is required. Used subtly they add polish; overused or too harsh, they look heavy and dated.

UPDATED 2026-07-10 · READ →

What Is Glassmorphism?

Glassmorphism is a design style that mimics frosted glass, using translucent panels with a background blur so content behind them shows through softly. Panels look like tinted glass floating above a colorful backdrop, with subtle borders and shadows adding depth. Popularized by Apple and Microsoft interfaces, it feels modern and premium when done well. The core CSS ingredient is backdrop-filter with a blur value. Its main weakness is readability: text over a busy, blurred background can fail contrast standards, so it must be used carefully.

UPDATED 2026-07-10 · READ →

What Is Neumorphism?

Neumorphism, short for new skeuomorphism, is a UI design style where elements look softly extruded from the background, as if pushed out of the same material. Buttons and cards share the page's background color and gain shape from a paired light and dark shadow, producing a soft, tactile look. It became popular around 2020 as a fresh take on physical realism. Its serious drawback is accessibility: because elements share the background color and rely on faint shadows, contrast is often too low, making controls hard to see.

UPDATED 2026-07-10 · READ →

What Is Dark Mode?

Dark mode is a color scheme that displays light text and elements on a dark background, the reverse of the traditional dark-on-light layout. Websites and apps offer it to reduce glare in low light, save battery on OLED screens, and suit user preference. Modern sites detect the visitor's system setting automatically and can also offer a manual toggle. Implementing it well means designing a second, coordinated color palette, not just inverting colors, and testing both modes. Done carelessly, dark mode produces muddy contrast, harsh pure-black backgrounds, and washed-out images.

UPDATED 2026-07-10 · READ →

Looking for news, case studies, and opinion pieces? That's the blog →