Top Design Terms to Know as You Build Your Website

Whether you’re building your new website yourself (possibly involving some help from our handy DIY web design resources 😉), or you’re working with a web designer to create the site of your dreams, it’s helpful to know and understand the most commonly used web design terms.

Web design terms & definitions

Above the fold

Originally a newspaper term referring to the content visible on the top half of the page (“above the fold”), in web design this refers to content that’s visible on the initial screen view—in other words, content a viewer does not need to scroll down the page to see.

Alt-text

Also sometimes referred to as alt-tag, this is descriptive text attached to an image file—it may display while an image is loading, and it helps with SEO, as it helps search engines understand keywords that describe the image.

Aspect ratio

A ratio defining the proportion of an image’s width vs. height. Square images are 1:1 and widescreen images are 16:9.

Code

Code isn’t a secret language (though it may feel like one!), but logical commands that tell websites how to function and appear. Some of the most common coding languages we work with in Squarespace are:

HTML: (Hypertext Markup Language) tells a web browser how to display text, images and other multimedia on a webpage
CSS: (Cascading Style Sheets) describes how HTML elements should be displayed (it saves a lot of work by controlling multiple webpages at once)
JavaScript: used to create interactive effects on a webpage, for example a countdown timer for a product launch

Color code

Color codes are alpha-numerical descriptors that specify specific colors in a way that a computer can interpret and display. Some of the most common color code formats include:

Hex: 6 digits representing the intensity of red, green and blue respectively (black, the absence of color on a screen, is #000000)
RGB: similar to Hex codes, but displayed as RGB(0, 0, 0)
HSL: composed of three values representing (Hue, Saturation, Lightness)

Content Management System (CMS)

Software systems used to edit content on your website. Some examples include WordPress, Wix, Weebly and Squarespace—our personal favorite.

Design brief

Also sometimes called a creative brief, this is a document that outlines all the essential project details: scope and goals of the project, website audience, pages, design elements and tone, etc. The purpose of the design brief is to set deliverables and timelines for the project, as well as to ensure the designer(s) and client(s) are on the same page about what’s being produced. Many designers will not move forward until all parties have signed off on the design brief.

Domain

Essentially, the name and location of your website. For example, our domain is fivedesign.co and all pages on our site build off of this central location.

Favicon

This is the small icon that appears in your browser, specific to your website. Favicons also show up in your browser’s bookmarks bar, browsing history and other places across the web. (Here’s the step-by-step process to customize your Squarespace website’s favicon.)

File format

Website images are stored in different file formats, each of which has its own benefits and drawbacks. Though there are plenty of other image file formats as well, Squarespace image blocks only upload .png, .jpg, or .gif files. Here’s the difference between them:

JPG: probably the most common file format for use in web design, because it has a fairly small file size, which results in faster loading but a little bit of quality loss
PNG: larger file size than .jpg, but allows for transparent backgrounds; also doesn’t lose image quality, so is best for screenshots
GIF: can be animated

Font (& typeface)

Technically, font & typeface are two separate terms with distinct meanings, but they’re often used interchangeably these days. For most purposes in web design, we can just stick with “font.”

There are two types of font families:

Serif: have small lines at the end of their characters (like THIS)
Sans serif: don’t have small lines at the end of their characters (like THIS)

In general, sans serif fonts/typefaces are easier to read for smaller blocks of text and serif is favored by the eye for larger bodies of text.

There are a few other terms you may come across in describing font:

Helvetica is a font family
Italic is a font style
16px is a font size

GDPR

GDPR is short for General Data Protection Regulation, an EU law that went into effect in May 2018 and governs how you collect, use and process personal information from people living in the EU. (Learn more about how this affects your website Privacy Policy below.)

Headings

Web design is typically built off of three heading styles: Heading 1 (h1), Heading 2 (h2) and Heading 3 (h3). In Squarespace, you’ll see these heading options listed in your Text Block toolbar. Squarespace 7.1 sites will have a fourth style, Heading 4 (h4).

High resolution image

High resolution (or “high-res”) images are at least 300 pixels per inch (ppi). Typically, images used in web design can be of a lower resolution than images used for printing, but new retina displays necessitate high resolution images on websites as well.

Internal linking

Linking to your own content throughout your site. For example, we’ve discussed how internal linking can be a beneficial strategy for improving your website’s SEO. ← That’s an internal link!

Metadata

Metadata is information about your content. For example, blog post metadata includes the post title, publication date, author, categories and tags.

Mobile responsive design

Mobile responsive design refers to web design that adapts to the size of the screen it’s being viewed on. This is increasingly important as a larger percentage of global internet traffic and online searches now take place on mobile devices than on desktop computers.

Navigation

The “menu bar” or “nav bar” on your website, where visitors can navigate to other pages across your site.

Opt-in

An offer on your website for visitors to “opt in” to your mailing list by providing their email address. Opt-ins can include newsletter subscribe boxes, free gifts (like ebooks, video trainings, resource libraries, etc.) and more.

Parallax scrolling

A visual effect in which a background image on your website moves slower than the content in the foreground (typically text), creating a sense of depth and layering. Many Squarespace templates are built with parallax scrolling capability on their banner images. (Though Squarespace 7.1 sites currently do not support parallax scrolling.)

Privacy Policy

If you collect any personal information on your website (such as email addresses on your opt-in form), you’ll need to have a privacy policy posted in a visible location (we suggest linking to it in the footer), letting your website visitors know how you collect and use their information. Your website privacy policy is even more important since the EU’s General Data Protection Regulation (GDPR) went into effect in May 2018.

Search engine optimization (SEO)

Search engine optimization is the process of maximizing your website content’s visibility in search engine rankings. (Learn more about SEO and how to improve SEO on your Squarespace website.)

Slider

A rotating banner of images. A slider can usually be configured to transition between images automatically, or to display arrows for manual transition.

Social Sharing Logo

In Squarespace, your website’s Social Sharing Logo is the image that will be used on social networks (like Facebook) when you share a URL from your site. The Social Sharing Logo does not apply to collection items like blog posts and products, which use their own thumbnail image instead. (Learn more about customizing your Social Sharing Logo).

Template

In Squarespace, templates are the underlying structure of your site, governing the basic functionality and appearance of your site.

Thumbnail image

In Squarespace, a thumbnail image is a single image attached to and representing a specific page, blog post, event, or other collection item.

URL slug

A URL slug is the exact address of a specific page or post on your website. For example, the URL slug of this post is https://www.fivedesign.co/top-design-terms-to-know-as-you-build-your-website. In web design, we often speak of URL slugs by only their “unique” portion—i.e. /about or /top-design-terms-to-know-as-you-build-your-website.

Website Terms & Conditions

Just like your Privacy Policy, your Website Terms & Conditions is a legal document that outlines the specific terms visitors must abide by when visiting and using your website or downloadable materials that can be accessed through your website. We recommend linking to your Website Terms & Conditions in the footer of your website.

Wireframe

This simple mock-up shows the basic outline and structure of a website, denoting where content will appear on a webpage, but not specifically how it will look.