The Web Design Dictionary

A Non-Designer’s Guide to Web Design Terms

Working with a web designer for the first time can be extremely overwhelming, especially when you start hearing terms like layout, mockup, and responsive design. Designers have a language of their own, and it’s a language that most people aren’t fluent in.

It’s extremely difficult to communicate your wants and needs to a designer when you don’t know how to talk the talk, and today’s post is designed to teach just that.

This is the first post in a series that will explain the most commonly used web design and development terms in straightforward, non-technical language. Consider this dictionary your crash course: the essential–and only the essential–terms you need to know to communicate with your web designer.

Related: How to craft useful feedback your designer can use

This week I’m tackling design terms, but I’ll also be talking about the terminology of web development, WordPress, and SEO over the next few weeks.

Alignment

You’re probably familiar with alignment as term to describe the positioning of text: left, right, justified, and centered. Alignment can apply to any element on a web page, not just text.

Branding

Many people think branding is just a logo. Branding is also communicated through your website, business card, product packaging, and any other promotional materials used in your business. Your branding describes what your businesses is and what it stands for. It is important that your web designer understand your brand in order to maintain a consistent image.

Color Scheme

A color scheme is a selection of colors to be used together in a design. Colors within a scheme should look appealing together. While there is no hard and fast rule for how many colors you should choose, the more colors you use the harder it is to created a cohesive design. The color scheme of your website should match the color scheme of your overall branding.

Copy

Copy refers to the text content on a web page and includes the main text as well as any headlines or captions.

Fold

Fold is a term with origins from the days of printed news, referring to the fold in a newspaper that separated the top of half that was visible when folded (above the fold) from the bottom half (below the fold). In web design, “above the fold” refers to the content that is visible at the top of a web page without any scrolling. Anything “below the fold” is content that the user cannot see unless they scroll down the page.

Hero Image

This term is commonly used to describe the main image on the home page of a website. A hero image may be part of a rotating image slider, or it may be a large static image.

Layout

The layout of a website is the arrangement of all visual elements on a page. This includes the position of the logo, navigation, text, and images. The layout is the the foundation of a website’s design and is used to guide the user through the page.

Lorem Ipsum

Don’t be alarmed if your designer hands over a mockup filled with Latin-looking text. Lorem Ipsum is filler or dummy text often used in design mockups to demonstrate a font or to hold the place of actual copy if that copy isn’t ready.

Mockup

A mockup is a non-functioning graphic representation of a website. They are often built in Photoshop and are used to determine how a website will look before development begins. By establishing a website’s design through static mockups, rather than fully-functional coded pages, it is easier to make adjustments to fonts, colors, etc. This saves time and money on a web project.

Navigation

A website’s navigation is a collection of links that allow users to “navigate” to other pages of your website. Your website’s navigation can also be called a “menu.” Your primary navigation, or main menu, is generally located near the top of a web page.

Placeholder

A placeholder often refers to images used in the design or early development stages of website for position only. Its purpose is to fill the space of an image on a web page or design mockup until the final image is ready. Placeholder can also refer to text, though this is usually referred to as “dummy text” instead.

Responsive Design

Responsive design solves the problem that was created when smart phones and tablets became popular. Traditional web sites were fixed-width and designed for computer monitors only. Fixed-width sites create lots of usability issues on phones and tablets, which is why people started creating separate mobile sites.

Responsive design solves this problem by using fluid-width layouts instead of fixed-width layouts. Responsive websites adjust to different sized screens and display properly on any device. This eliminates the need for dedicated mobile sites.

Typeface

Arial and Helvetica are typefaces. You probably know these as “fonts.” Technically, there is a difference between the two, but this distinction is only critical to professional type designers. In web design, the terms typeface and font are often used interchangeably, and your web designer may use either one.

White Space

White space is the empty areas on a page. Proper amounts of white space create balance between elements on a page. It is important not to cram things too close together on a web page. White space can also be used to bring focus to elements like images and blocks of text.

Read the Whole Series

• Part 1: The Web Design Dictionary
• Part 2: The Web Development Dictionary
• Part 3: The WordPress Dictionary

Is there anything I missed? Any other terms a web designer has used that went right over your head?