Web Designer Terms

Jumping into new territory without knowing the basic language and vocabulary used there can be a scary thing to do.  

If you’re dealing with a web designer, or you’re new in the field, you may find yourself faced with some communication challenges. To avoid these potentially awkward situations, it’s important to become familiar with the jargon and vocabulary frequently used by designers.

In this article, we’ve developed a list of terminologies that are common in the web design field.  Regardless of whether you’re an aspiring web designer, or you simply work with web designers, this information should be useful for you as you progress your career.

Accessibility in Web Design

Accessibility refers to how well a website is designed for people with disabilities. Some of the common disabilities that impact web design are visual impairment and hearing impairment. If the website doesn’t have high accessibility, it means that people with disabilities may not be able to use it.

Making a website accessible is essential, especially in cases where a website provides information for people with disabilities. Accessibility is a crucial term to understand in the web design space.

AJAX

AJAX stands for Asynchronous JavaScript and XML. It's a set of techniques primarily used to create fast and interactive web applications.  

Without AJAX, every time a site needs to communicate with a server, or the page needs updating, the site must be reloaded in the browser. AJAX allows web designers to create sites that don’t require the user to hit the refresh button.  

Here are some examples of AJAX in action:

• A live news feed that automatically updates events in real-time
• A map site like Google Maps, that adds more detail as the user zooms in
• An email client that instantly notifies the user when a new email is received

Alt Attribute

Also known as alt tags or alt text, the alt attribute is used to describe a site image. It’s important for a couple of reasons:

• If a site image can’t load because the file is missing, the path is wrong, or the connection is too slow, the alt attribute is displayed instead. It helps the user understand what should have been loaded.  
• Visually impaired people use screen readers. This software provides an audio narrative of the page and can’t interpret images. The alt text can be read by screen readers making the site more accessible.  
• Alt text can be read by search engine crawlers. This can have an SEO (search engine optimization) benefit and help the site rank for relevant keywords.

Analogous Colors

Analogous Colors refer to the group of three colors that are next to each other on the color wheel. Web designers often use analogous colors to create a cohesive website.

Backlink

Backlinks are links from other sites to your site. If a website has a high number of relevant backlinks, it’s a strong signal that it’s a valuable and authoritative source of original information.

Search engines use backlinks in their ranking algorithm. A major part of SEO is building backlinks to improve site rankings in search results.

Breadcrumb

Breadcrumbs are the tracks that reveal the location of a user. Through breadcrumb, the users can trace their path back to the landing point. The term is derived from the story of “Hansel and Gretel” where the characters drop breadcrumbs to create a trail. It functions in somewhat of a similar way in the web design and development world.

Cache

The term ‘cache’ refers to a temporary space for storing data. It also helps reduce the lag time of a website. This is done by storing important data on the computer of a user whenever they visit a website for the first time. Next time the user visits the same website, the browser will recover all relevant data from the cache. Web designers often need to be aware of a site’s load time, so cache is a concept every designer should understand.

Call to Action

Call to Action refers to a piece of content, which can be a text, an image, a banner, or a button used to encourage the visitor on a website to act. Web designers often make the Call to Action a prominent feature of every page.

CSS

CSS (cascading style sheets) is used to define themes and styles on a website. Its purpose is to separate the content from the presentation.

CSS can be used to set colors, fonts, margin sizes, text alignment, image properties, and headers. By  using CSS, you don’t need to individually style each element of a web  page. Instead, you can create global rules that apply across the entire  site.  

CMS

CMS stands for Content Management System. CMS is a software application that allows users to manage the content of a website; in many cases, these programs allow non-experts to build professional websites, even without a background in web design. You don’t necessarily need to have knowledge of programming languages, like HTML and CSS, to work with a CMS. CMS usually has two components – Content Management Application (CMA) and Content Delivery Application (CDA).

Common File Types

File extensions help in differentiating the files. By looking at the extension, you will get to know how a certain type of file is used and how to access it. Some common file types used in web designing are:

•.ai – This is used for Adobe Illustrator. What makes it special is that it can be resized to infinite size and there is no data loss in the process.

•.psd – This is the Adobe Photoshop file format. It is used for working with images. .eps – This is for Encapsulated PostScript. You can change the file size without impacting its resolution and quality.

•.png – This stands for Portable Network Graphics. Images in the PNG format have transparent backgrounds, but it does not support animations like GIF.

Fixed Width Layout

Today, web designers rarely build sites with a fixed width layout. Fixed Width Layout is a kind of a layout where the width of the page is restricted or fixed. If the width of the browser window or the screen resolution changes, the layout does not change with it. It allows the minute details in the design to remain the same. This is helpful for the designers in controlling the layout and appearance of their designs.

Hero

This term is used for the main image on the homepage. It’s usually the first image the visitors see on the page or site. The purpose of the hero image is to immediately grab the attention of the audience. Web designers may design certain pages with a specific hero image in mind.

Input Field

This is a space on the website or the web page where the user enters text-based information. Web designers may need to build input fields that are user-friendly and easy to read.

Lorem Ipsum

Lorem Ipsum, in simple words, can be called the dummy text which is used by the desktop publishing industry when the actual text is not available. This text doesn’t mean anything; it’s a placeholder. Web designers may use Lorem Ipsum text to visualize how their layout will look once it’s full of content.

Metatag

The metatag is a snippet or an HTML tag that contains information about the webpage such as author name, copyright, description, and other details. This information is used by various search engines to categorize the content of a website. Web designers may be tasked with adding metatags to the backend of a site.

Responsive Design

Most web designers strive to build responsive websites. Responsive design impacts the orientation and screen size of a website. It creates fluid width layouts that are usable for any size of screen such as mobile phones or tablets.

Slider

A slider refers to the slideshow that’s usually on the homepage of a website. Web designers may design a slider from scratch, or use a template. It’s generally used to display products or photos. The purpose of the slider is to give a peek into the line of products or services offered on the website.

Usability

Usability refers to how convenient it is for users to engage with a website. It’s an important standard for web designers to gauge the success of their layout. User-centric design is crucial for ensuring usability. Better usability means that the website is efficient and easy to use for the users. The users should be satisfied with the user-friendliness of a website.

White Space

White space is the blank space around the text, image, or anywhere else on the page. Professional designers are well aware of the value of white space. The white space improves the readability of the text and the page.
Wireframe A wireframe is a visual representation of the functional elements like layout, directions, location, content, and style of a web page. It is commonly called the roadmap of the development.

Next Steps to Learn Web Design

Becoming familiar with these terms will help you feel more confident within the web designing world. If you’re interested in learning more about web design and web development, then it’s time to explore a career in UX design.