19 Design-related Terms You Need to Know as a Web Dev

Although web developers are not designers, there is some basic product design vocabulary that they should know by all means. Take a look at the list below and familiarise yourself with them.

Action Button

Action buttons, also known as Call To Action (CTA) buttons, are the buttons that grab users’ attention and encourage them to click. Web pages usually have multiple CTAs, so it is necessary to distinguish between primary and secondary actions. Examples include: “Download”, “Sign up”, “Join now”.

Blur

This effect is widely used to reduce image noise, hide detail, change focus or simulate motion. That is why it has various applications not only in web design but also in photography. “Blur it till you make it!”.

Breadcrumb

In the offline world, a breadcrumb is a speck of bread, but this is not the case in the world of product design. Breadcrumbs help users by displaying the position of the page the user is on with respect to the website’s hierarchy, e.g. Homepage > Services > Product Review.

Breakpoint

Ever wondered what the screen size is that tells responsive websites to start behaving differently? Breakpoints stand for points that let you define where the page layout should be adjusted.

Carousel Pattern

This pattern allows multiple pieces of content to occupy the same space on a website. Photo slideshows often come in the shape of a carousel.

Dashboard

Dashboards can be treated as control panels for websites. They are developed to present data in a creative way. A good dashboard prevents users from drowning in a sea of information.

Filtering

Often confused with sorting, filtering facilitates keeping the avalanche of data in check by refining search results. If you want to obtain results that belong to certain categories, use filters. If you want them to appear in ascending or descending order, use sorting.

Grid

A grid is a set of guidelines – both vertical and horizontal – that define how elements should be positioned within a layout. It is also the #1 designer’s excuse for legitimately slacking off: “I am busy now, checking the grid”.

Hero Image

Bored of implementing the carousel pattern? You can experiment with a hero image! A hero image is a large graphical component, often the first one a visitor encounters on the website.

Hamburger Menu

“What does the icon with three parallel lines mean?”. The icon with three parallel lines means that if you click on it will reveal a menu, which saves a lot of space. This kind of an app menu is called a hamburger menu.

JPG

JPG is an image format often used in web design. Is finding an appropriate format troublesome to you? Keep this golden rule in mind: “Use JPGs for photos and pictures, and PNGs for layout images”.

KPI

Key Performance Indicators (KPIs) measure how effective the website is in terms of usability or trends. They provide a good way to check if the design works the way the designer expects it to.

Long Scroll

Websites with more content tend to have larger homepages – this is when long scroll becomes handy. A long scroll facilitates seamless storytelling – with every mouse wheel movement, the user receives another part of the presented story. Spinning the mouse wheel has never been so exciting!

Microinteraction

Have you ever wondered what is the name of these fancy animations that appear when you click on a button or like your friend’s status? We call them microinteractions. They are designed to do small tasks that contribute to a pleasant user experience and are good for engaging users.

Navigation

Navigation is designed to help users find their way around. It reduces the number of steps needed to get to a higher-level page. Breadcrumbs are an excellent example of a navigation scheme.

Opacity

In simple terms, opacity specifies how transparent the element is. Apart from photos, it can become useful when implementing progress bars or defining background colours.

Parallax Scroll

Parallax scroll is a technique in which background images move more slowly than foreground images. When properly designed, it adds a touch of depth to your website.

Stock Images

A stock image website is the place where all these funny mockup photos come from. Stock photos are available for online licensing and are often used instead of hiring a professional photographer.

Wireframe

A wireframe is a page schematic that defines the skeleton of the website. It is used in the process of design and prototyping to show the arrangement of elements that contribute to a certain action.

I hope you’ve found my list useful. Let me know in the comments below if there are other product design-related terms that I should add here for the benefit of all web developers collaborating with design teams.