Visual style glossary for non-designers
Plain-English definitions of the image and design terms you'll run into when choosing website visuals. No jargon, no design degree required — just what each term means and where you'd actually use it on a site.
Who this is for
This page is written for people who build or commission websites but don't think of themselves as designers: solo founders, local business owners, coaches, marketers, and anyone choosing images for a page and wanting to understand what the words mean. If you've ever read "negative space" or "royalty-free" and quietly nodded along, this is for you.
You don't need to read it top to bottom. Skim to the term you're stuck on, get the one- or two-sentence definition, and follow the links when you want examples or more depth.
Image style terms
These describe what an image looks like and how it behaves on a page. Knowing them makes it much easier to pick the right picture — and to say what you want when something looks off.
Editorial / lifestyle photo
A photo that looks candid and natural — people doing real things in real settings — rather than posed and obviously staged. Where you'd use it: an About page or a homepage section where you want the site to feel human and approachable.
Flat-lay
An image shot straight down from above, with objects arranged neatly on a flat surface. Common for products, tools, and food. Where you'd use it: product or shop pages and clean backgrounds — see product photos vs free lifestyle images.
Negative space
The empty area around the main subject. It gives the eye somewhere to rest and leaves room to drop text on top. Where you'd use it: any hero or banner where a headline needs to sit over the image and stay readable.
Bokeh / depth of field
"Depth of field" is how much of a photo is in focus. A shallow depth of field blurs the background into soft circles of light — that blur is called bokeh. Where you'd use it: a portrait or product shot where you want the subject sharp and the background gently out of focus.
Gradient background
A smooth blend from one color to another, with no subject to compete with. Calm, modern, and easy to put text on. Where you'd use it: section backgrounds and hero areas — see why gradient and abstract backgrounds work.
Hero image
The large, attention-grabbing image at the top of a page — usually the first thing visitors see, often with a headline over it. Where you'd use it: the top of a homepage or landing page — see five homepage hero image mistakes.
Overlay / scrim
A semi-transparent layer of color (often dark) placed over an image so text on top stays readable. A "scrim" is the same idea — a tint that dims the picture just enough. Where you'd use it: any hero where your headline would otherwise get lost against a busy photo.
Aspect ratio
The shape of an image — its width compared to its height, like 16:9 (wide) or 1:1 (square). Match it to the slot or the image crops badly. Where you'd use it: picking a wide image for a banner versus a square one for a card or social preview.
Resolution / DPI
Resolution is how many pixels an image has (its detail). DPI ("dots per inch") matters for print; on screens, what counts is having enough pixels so the image looks crisp at the size you display it. Where you'd use it: checking a hero is large enough to stay sharp on big screens without looking blurry.
Vector vs raster
Raster images are made of pixels (photos, JPG, PNG) and blur if pushed too large. Vector images are drawn from math (SVG) and stay crisp at any size — best for logos, icons, and simple shapes. Where you'd use it: a vector for an icon that must look sharp everywhere; a raster photo for a realistic hero.
Illustration vs 3D render
An illustration is drawn or painted (flat or hand-styled). A 3D render is built in software to look like a three-dimensional object with light and shadow. Both are non-photographic, but they feel different. Where you'd use it: choosing the look that fits your brand — compare them on photo vs illustration vs 3D.
Not sure which look fits your site? How to choose a visual style for your website walks through choosing a consistent style for every page.
Licensing terms
Licensing language is where a lot of people get caught out, because the terms sound similar but mean different things. Here's what they actually mean — and how Picdrome words its own terms.
| Term | What it means in plain English |
|---|---|
| License | The rules that say what you're allowed to do with an image — who can use it, where, and any limits. You always use an image under some license, even a free one. |
| Attribution | Crediting the source, usually with a line of text or a link. Some licenses require it; some don't. Always check before you assume. |
| Royalty-free | You pay (or qualify) once and then don't owe a per-use royalty each time you use the image. It does not mean free of cost, and it does not mean "no rules" — there's still a license. |
| Public domain | Work that is no longer (or never was) under copyright, so anyone can use it freely. This is a specific legal status — most "free" images are not public domain. |
| CC0 | A specific Creative Commons tool a rights-holder uses to waive their rights as far as the law allows, putting work close to public domain. It's its own thing — don't assume an image is CC0 unless it says so. |
| Commercial use | Using an image for business purposes — your company website, a client site, marketing, a product you sell. Some licenses allow it; some limit it to personal use only. |
| Model / property release | A signed permission. A model release is from a recognizable person whose likeness appears; a property release is from the owner of private property or a distinctive object shown. Releases are what make it safe to use such images commercially. |
These three get mixed up constantly, so it's worth being blunt: free is not the same as royalty-free, and neither is the same as public domain. "Free" describes cost. "Royalty-free" describes how you pay. "Public domain" describes copyright status. An image can be free to use and still come with a license and rules. We unpack the difference in free vs royalty-free vs public domain.
How Picdrome words it. Picdrome originals use the Picdrome License; images from other sources keep their own terms. We never call an image "public domain", "CC0", "royalty-free", or "unrestricted" unless its source says so — those terms mean specific things. For any image you use, read the current license at its source. This page is a plain-English guide, not legal advice.
When to use this
Reach for this glossary at the moment you're choosing an image and hit a word you're unsure of — in a category page, a brief from a designer, or a stock site's license. Read the definition, follow a link if you want examples, and get back to building. You'll mostly need it in the early "what should this look like and am I allowed to use it" stage.
Next steps
- Choose a visual style for your site
- Image categories and styles
- Free vs royalty-free vs public domain
FAQ
What is a hero image?
The hero image is the large, prominent image at the top of a page — usually the first thing a visitor sees, often with a headline and a button over it. A good hero leaves room for that text and stays sharp on big screens. See five homepage hero image mistakes.
What does flat-lay mean?
Flat-lay means the photo is taken straight down from above, with objects laid out neatly on a flat surface. It's common for products, tools, and food, and makes for clean, organized images. Examples are in product photos vs free lifestyle images.
What is negative space and why does it matter?
Negative space is the empty area around the main subject of an image. It matters because it gives the eye somewhere to rest and leaves room to place a headline or button on top without crowding the picture — which is exactly what you want in a hero or banner.
Is royalty-free the same as free?
No. "Royalty-free" means you don't owe a per-use royalty each time you use an image — but it can still cost money up front and always comes with a license and rules. "Free" just means no cost. They're different ideas, and neither one means "public domain." More in free vs royalty-free vs public domain.
What is a model release?
A model release is a signed permission from a recognizable person to use images of them — important for using such photos commercially. Check whether a stock or photo source holds releases for the people shown. An AI-generated image can still resemble a real person, so if one looks like someone identifiable, choose a different image.
In plain language
This is a glossary of image-style and licensing terms for non-designers, each explained in one or two sentences with a real website example. Style terms cover things like hero images, negative space, flat-lay, gradient backgrounds, aspect ratio, and the difference between vectors, photos, illustrations, and 3D renders. Licensing terms cover license, attribution, royalty-free, public domain, CC0, commercial use, and model/property releases — with the key point that free, royalty-free, and public domain are three different things. Picdrome also offers original AI-generated images; for any image you use, the current license at its source controls. This is a plain-English guide, not legal advice. To go further, choose a visual style or read about image categories and styles.