Articles in this category

GOOD STUFF!

Webpage Anatomy

Andrija Krstic Updated by Andrija Krstic

This article explains the terminology and critical components of subscription-first site. It will help the customer understand what they need to incorporate in their builds, and will help the user to be better at prompting the agent.

General design terms

Border - A visible line surrounding an element (such as an image, button, or container). Borders help define the edges of an element and can be customized in color, width, and style.

Border Radius - Controls how rounded the corners of an element appear. A higher border radius value results in softer, more circular corners.

Padding - Space between an element’s content and its border. Increasing padding adds more internal spacing within the element.

Margin - Space outside an element’s border, creating distance between that element and others on the page.

Container - A structural block that groups related elements together. Containers help manage layout, spacing, and responsiveness.

CTA (Call-to-Action) Button - A clickable button designed to prompt a specific action, such as “Buy Now,” “Subscribe,” or “Learn More.” CTAs are usually styled to stand out and guide visitors toward key goals.

Hero Section - Large, visually dominant area at the top of a page, typically containing the main headline, a supporting message, and a CTA button. It’s the first impression users get of your website.

Banner - Wide, horizontal section used to highlight important messages, promotions, or announcements. Banners can appear at the top, middle, or bottom of a page.

Above the Fold - Portion of a webpage visible to users before they scroll. Content placed above the fold is most likely to capture immediate attention.

Below the Fold - Content that becomes visible only after scrolling down. This area is useful for supporting details, testimonials, or additional product information.

Font Family - Refers to the style of typeface used for text (e.g., Arial, Roboto, Times New Roman). Font families influence the tone and readability of a site.

Font Size - Determines how large or small the text appears. Proper sizing ensures legibility and visual hierarchy.

Typography - Overall design and arrangement of text on a website, including font choices, spacing, and line height.

Color Palette - Set of colors used throughout the website for consistency and branding. It usually includes primary, secondary, and accent colors.

Visual Hierarchy - Way design elements are arranged to direct a visitor’s attention. It ensures users naturally notice the most important information first.

Responsive Design - An approach that ensures a website adapts seamlessly to different screen sizes and devices (desktop, tablet, mobile).

Grid Layout - A structured system of rows and columns used to organize content neatly and maintain alignment.

Whitespace (or Negative Space) - Empty space around or between elements that improves readability and prevents clutter.

SEO (Search Engine Optimization) - Practice of optimizing website content, structure, and metadata to improve visibility in search engine results.

Meta Tags - Snippets of code in the website’s header that provide information about the page (like title, description, or keywords) to search engines.

Alt Text - Descriptive text added to images to improve accessibility and help search engines understand image content.

Favicon - Small icon displayed in the browser tab next to the page title, typically representing the brand or website.

URL Slug - Part of a web address that identifies a specific page, appearing after the main domain (e.g., example.com/about-us).

Breadcrumbs - Navigation links that show the user’s location within the site’s hierarchy, improving usability and navigation.

Common website sections (Webpage anatomy)

Use this list to get inspiration if you're struggling on what else to include on your site build. These are the most common sections included on subscription-first sites.

Header - Top section of a website, usually visible on all pages. It often contains the logo, navigation menu, and sometimes search or contact links.

Footer - Bottom section of a website. It typically includes links to key pages (About, Contact, Privacy Policy), social media icons, and copyright information.

Hero Section - As mentioned earlier, the main introductory section at the top of the homepage—used to make a strong first impression and direct users toward primary actions.

About Us Section - A section that introduces the company, brand, or individual. It often includes the mission statement, background story, and team information to build trust and credibility.

Products or Services Section - Highlights what the business offers, often with images, descriptions, pricing, and CTAs leading to product pages or checkout.

Subscription Section - Encourages users to sign up for newsletters, memberships, or subscription boxes. Usually includes a form and a compelling CTA.

Testimonials Section - Displays feedback, reviews, or quotes from satisfied customers to establish trust and social proof.

FAQ Section - A list of common questions and answers designed to address customer concerns quickly.

Gallery or Portfolio Section - Showcases visual work, case studies, or product photos, often in grid or carousel layouts.

Blog Section - Features articles or posts aimed at educating, informing, or engaging the audience while supporting SEO efforts.

Contact Section - Provides ways for users to reach out—usually includes a contact form, email address, phone number, and sometimes a map.

Call-to-Action Section - A standalone area designed to prompt an immediate response, such as signing up, booking a call, or making a purchase.

Social Proof Section - Highlights logos of partners, media mentions, or customer counts to build credibility.

Footer CTA - An optional call-to-action placed at the very bottom of the site to capture attention from users who scroll through to the end.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free