Contact
November 17, 2016 | Melanie Chandler

Web Design Terms for the Uninitiated

If you don't have a background in web design and development, some of the web design terms

Working with an agency to create a website for your business can be intimidating, but we do everything we can to help our clients every step of the way.

If you don't have a background in web design and development, some of the web design terms you may hear during the website process can seem like a foreign language, but we don’t want you reaching for a dictionary or attempting to turn on the subtitles.

Before you meet with your design team, you may want to read through these terms, as well my blog post on preparing for your website design consultation to make the most of your new website!

Here are some web design terms we use frequently:

Design Consult

If the agency you're working with is worth their salt, they'll initiate a design consultation to identify exactly what you need and want. In this meeting, you'll discuss how you want your website to look and feel, as well as your frustrations with your current website, any ideas you have, and what your business goals are for your new site.

Learn more in our post How to Prepare for a Website Design Consultation.

Responsive Design

In short, responsive design refers to websites that are created to respond to the size of the device you're viewing them on. There's no separate mobile website or anything like that; it's the same website and the same content. The code that controls the site simply changes based on the details of the viewing device. This goes much further than just changing the size of elements on the page; it frequently includes changes to the navigation (menu), main images, and other parts of the website.

Learn more in our post What Is Responsive Design?

Buyer Persona

Buyer personas are fictional but data driven profiles of your ideal or actual customer or customers. You may be familiar with buyer personas from your marketing, but they should play an essential role in your website design process as well. If you don't know who you're targeting, how will you know what they're looking for and what they care about? 

Learn more in our post What Is a Buyer Persona?

Mockup

After the design consultation, your designer will create a "mockup" of the design of your website homepage. A mockup is a static image (like a screenshot) of what a page will look like. Fight the urge to click on anything; it’s just an image!

Conversion

The word "conversion" has two meanings in the context of web design:

1) The stage of the web design process when our development team turns the mockup of your website into a working website in what we call a "dev environment"—a.k.a. "converts" it.

2) What happens when a website visitor takes the desired action and "converts" to the next stage of the sales funnel or buying process. This may be a conversion from visitor to lead by filling out a form to subscribe or contact you, or it may refer to when someone buys a product in your ecommerce shop. Conversions are just desired actions taken by visitors.

Header & Footer

The header and footer are the areas at the top and bottom of your website that remain fixed regardless of what page you're on. 

vieo-website-header.png

As you can see in the image of our header above, the header often contains things like the name of the website, the logo, primary navigation, and maybe contact information. Likewise, the footer often contains more navigational options and contact information. Here's ours:

vieo-website-footer.png

Menu

Most often, when your designer refers to the menu, they're referring to the main navigation. However, it's important to remember that there's more than one tool to help visitors navigate your website. Your site map includes all the pages on your website, the main navigation helps visitors find the most important parts, footer navigation makes it easy for them to find quick links without having to scroll to the top, and CTAs, attracts, and links throughout the site are also a part of navigation. 

Homepage

The homepage is the page that comes up when people type in your website address (root domain)—ours is www.vieodesign.com. It should present a general overview that will be useful to most people and help them orient themselves to who you are as a brand and what you're offering.

Site page

Site pages are all the other pages of your website, from the basic informational pages to fancier "high-design pages" and lead-capturing "landing pages."

Favicon

You know the little image that appears to the far left of each browser tab? That's the favicon (pronounced FAVE-icon). It will usually be a version of the company's logo or branding. Once again, here's ours:

vieo-favicon.png

Hero Area

The "hero" area is a strong visual element featured prominently on a page, usually an image or an image rotator near the top of your homepage that will engage your visitors and direct them to important content. Whether it is static or takes the form of an image rotator, the hero area is designed to catch the visitor's eye when they first arrive on a website.

Below the Fold

Borrowed from newspapers, this term refers to the area that visitors will have to scroll down to see after the page loads. The "fold" is essentially the bottom of the browser viewing area, and "below the fold" is anything out of view. In the era of mobile-first websites that are designed for scrolling, this is becoming less important.

Calls to Action (CTAs)

CTAs are clickable images or links that direct visitors to important pieces of content or places where they can take action, like an ecommerce store or contact form. Common examples would include buttons that read "Contact Us Today," "Learn More," "Download Ebook," and "Free Trial,” and "Shop Now."

Learn more in our post The Anatomy of a Call to Action [Infographic].

Attracts

An attract is a prominent design element that is a call to action, usually featured on the home page below the showcase or hero image. The "primary attracts" would be among the first things a new site visitor comes across, and they would likely direct him or her to the most important parts of the site. "Secondary attracts" may appear further down the page to offer additional options to people who didn't click on any of the primary attracts.

Here's an example from our website:

vieo-website-attracts.png

SEO Paragraph

"SEO" stands for search engine optimization. Search engines use the text in your website to rank your website in people's search results. If a page of your website doesn’t contain enough text (for example, if most of your text is in images), search engines will have difficulty ranking your site pages in search results. As a result, we highly recommend having a keyword-rich paragraph of text on your home page—what is often called an "SEO paragraph," even though it's as much for human visitors as for search engines.

Vector Image

You may hear us refer to vector images when we ask for important files like your logo. Vector images use points, lines, curves, and shapes instead of pixels to represent images, and allow us to use elements of the image at any size, so the image will always look crisp. Vector images have file extensions like .ai, .eps, or .svg.

High Resolution Image or High Res Image

For images on your website, you don’t want your visitors seeing pixels. When it comes to any images that will be on your website, we ask for the largest file you can get your hands on or the original digital photo. Need help with choosing the right image resolution? Check out one of my other blog posts to eliminate your pixelation problems.

PSD

When you hear us say “We will provide you will a PSD,” we are referring to a Photoshop Document, which you or a member of your team can easily edit and reuse. That way, if you want your branding in a different color to print t-shirts or something, you can easily make those changes yourself.

Development Environment

A development or "dev" environment is a virtual environment where we build, or "convert," your website. It feels and acts like a functional website, but it is not live at your final domain. Your designer may send you something to review that seems like a live website but isn't at the correct web address; that's the "dev site."

CMS

CMS stands for "content management system" and refers to platforms like WordPress and HubSpot. The CMS acts as the interface between you and the technical side of your website—it lets you add and change pages, posts, images, and more without ever touching the basic code that determines the appearance of your website.

Plugins

In an open-source CMS like WordPress, plugins are tools that let you expand the functionality of your website. Created by independent developers to add to what WordPress can do, these add-ons are sometimes free and sometimes paid.

Back End

The "back end" refers to where you will log in to your website to add and make changes to content. It's your website's dashboard.

Unfamiliar fields and new projects always come with new, unfamiliar terms to learn. After reading this list, hopefully our Klingon seems a little more like English, and you’re no longer thinking, “I don't understand the words coming out of your mouth!” (Never seen the Rush Hour movies? Watch the clip here.)

Want more help getting started on a website redesign?

 

VIEO Design Free Website Assessment

Editors note: This post has been updated. It was originally published on 3/27/2014.

Melanie Chandler

Melanie Chandler

As design director, Melanie Chandler leads the design team and works with them to create consistently compelling and engaging website designs, images for digital marketing, and other visual content to communicate corporate identity and drive traffic on websites and social media.

Related Post: