Appearance

Common Web Design Terms ​

Understanding basic web design terminology helps you write clearer prompts. Here are the most common terms you'll encounter:

HTML, CSS & Javascript ​

A web page is made up of three parts:

  • HTML: What is it? Also called the markup
  • CSS: What does it look like? Commonly refered to as styling
  • Javascript What does it do? This is logic or interactivity part of the website.

Axes ​

  • x axis: This refers to the horizontal or left right direction of a web page
  • y axis: This referes to the vertical or up down direction of a web page
  • z index: This referes to the 'depth', and decides if to elements are overlapping, which ones will be shown on top.

Examples in prompts:

  • "Add some margin on the x axis, so the text deosnt stick to the sides."
  • "The icon and text are not centered on the y axis."
  • "make sure the popup has a higher z-index than the rest of the page."

Positioning

  • Sticky: This term is often used to describe something that is fixed in place when scrolling, useful for things that always need to be visible, like navigation menus or popups.

Examples in prompts:

  • "Add a Sticky buy button on mobile"
  • "Make sure the popup is sticky, so it's always visible on the page."

Examples in prompts:

  • "Make the CTA button sticky at the bottom of the page on mobile"
  • "Layer the badge above the image using a higher z-index"
  • "Absolutely position the icon in the top-right corner of the card"

Spacing ​

To describe spacing inside and around an element, we use different terms.

  • Margin: Space outside an element, between it and other elements. Use when you want to move an element away from others.
  • Padding: Space inside an element, between its border and content. Use when you want to add space inside a button, card, or container.
  • Gap: For elements aligned in a grid, the spacing between grid items is often referred to as gutters, or gaps.

Examples in prompts:

  • "Add more padding inside the button" (makes the button bigger internally)
  • "Add margin above this section" (creates space between this section and the one above)
  • "Increase the padding on mobile only" (makes content less cramped on small screens)

Alignment ​

  • Horizontal alignment: Left, center, or right. Use terms like "center this text" or "align the button to the right"
  • Vertical alignment: Top, middle, or bottom. Use terms like "vertically center the content" or "align items to the bottom"

Examples in prompts:

  • "Center the headline horizontally"
  • "Vertically center the button in the hero section"
  • "Align the trust badges to the right on desktop"

Other Common Terms ​

  • Responsive: Adapts to different screen sizes (mobile, tablet, desktop)
  • Above the fold: Content visible without scrolling (most important area)
  • CTA (Call-to-Action): Buttons or links that prompt users to take action
  • Hero section: The main banner area at the top of a page, usually containing the headline and primary CTA