Whether you’re building your new website yourself (possibly involving some help from 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.
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.
A ratio defining the proportion of an image’s width vs. height. Square images are 1:1 and widescreen images are 16:9.
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)
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 and Squarespace—our personal favorite.
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.
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.
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.)
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
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.
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.
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 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.
The “menu bar” on your website, where visitors can navigate to other pages across your site.
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, etc.), and more.
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.
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.)
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).
In Squarespace, templates are the underlying structure of your site, governing the basic functionality and appearance of your site.
In Squarespace, a thumbnail image is a single image attached to and representing a specific page, blog post, event, or other collection item.
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
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.