Glossary

Hero Image

The Hero image is the first image or banner that greets you when you visit a website landing page. The image is commonly placed at the front and center of the website landing page. It generally covers the complete width of a webpage and leaves only space for navigation bars and CTAs.

The Hero image can consist of an image with added text or can be dynamic ( carousel images, f.ex.)  or static. This is the image that every visitor sees before he starts scrolling down the landing page or visiting site menu links. It’s the business card of the website of your company.

The placement of Hero images gives you visual appeal, readability, interactivity, and storytelling advantages.

Every company only has a few seconds to leave a positive impression or spark the visitor's interest with a presumably short attention span; that’s why a hero image's resolution and overall aesthetic quality must be outstanding. A compelling Hero image lets people remain on your site and possibly turn them into future customers.

HSB

In color theory and graphic design, HSB stands for hue, saturation, and brightness. Sometimes, it is HSV (hue, saturation, and value) or HSL (hue, saturation, and lightness).

Hue

The hue is the main property of color, a number between 0 and 360. Hue is the color it most resembles on the color wheel, from 0° to 360°. As an agreement, the hue for red is set to 0° for most color spaces with a hue. The hue is measured in degrees on the color wheel. In painting, the hue is the pure color pigment without added white or black pigment.

Saturation

Saturation is the richness and intensity of a color. The saturation of a color can be measured with a number between 0 and 100.

100% is the richest, most saturated version of a color, 0% will be a light gray for light colors and a dark gray for dark colors.

Brightness

The brightness of color can be measured with a number between 0 and 100.

0% brightness is defined as pure black, and 100% brightness is defined as pure white.

In graphic design programs, the HSB values are generally organized with three sliders:

In Linearity Curve (formerly Vectornator), you can access the HSB sliders in Curve by clicking directly on the Sliders Menu in the Color Widget.