# 1 · Brief: whether, why, and from where Most bad images were never needed, or were made before anyone said what they were for. A designer asks three things before opening any tool: does this need a picture, what is the picture for, and where does it come from? You skip all three because an image is one tool call away. Do these before you generate, search or draw anything. --- ### B1 · Decide whether it needs an image, and name its one job **Rule:** Before adding any image, name the one job it does for the person looking at it. There are four: | Job | It's there to | What good looks like | |---|---|---| | **Explain** | Make something easier to understand than words alone: a step, a structure, a comparison | A diagram, a screenshot with one thing marked, a simple chart. Clear, labelled, legible at its size (`3-kinds.md` I6) | | **Show** | Let people see the real thing: the product, the place, the team, the food | A real screenshot or photo. Accurate above all (B4) | | **Set a mood** | Make people feel something the brand stands for, usually behind or beside a headline | A photo or illustration that fits the brand and stays quiet behind text. Consistent with the rest of the set (`2-generate.md` P2) | | **Identify** | Help people recognise something fast: a logo, an avatar, an icon, a favicon | Simple shapes that still read at small sizes (`3-kinds.md` I1, `4-place.md` F4) | "Fill the space", "make it less plain" and "landing pages have a hero" are not jobs. If the only reason is one of those, leave the image out and fix the layout or the words instead (`pro/ui-design/4-taste.md`, "It feels empty"). **Why:** Every image costs the person something: scroll, loading time, data on a phone plan, and attention pulled from the words. An image with no job pays none of that back, and a page full of them teaches people to skip pictures, including the one that matters. **Agent trap:** adding an image to every section because the layout has a slot for one. For example, a generated illustration of a person at a laptop above a password reset form: it explains nothing, shows nothing real and pushes the form below the fold on a phone. **Check:** for each image, write its job in one word from the table. Cover the image: does the page lose anything? If not, remove it. ### B2 · Write the brief before you make or pick anything **Rule:** Write a short brief for each image, or one for a set, before you start. Fill every line; mark guesses as assumed. ``` Job: explain | show | set a mood | identify (B1), plus one line on what it must get across Subject: exactly what's in it ("our dashboard's invoice list with 3 overdue rows", not "a dashboard") Slot: where it sits, its shape and its displayed size on phone and desktop ("hero, right half on desktop, full width on phone, 4:3, 560px and 375px wide") On top: anything placed over it (a headline, a button) and where, so that area stays quiet Style: where the look comes from: DESIGN.md, existing images on the site, brand guide, or your proposal Palette: the brand colours it must sit with, by token name Source: real, made by you (SVG, diagram), licensed stock, or generated (B3) Needs: transparency? dark-mode version? a file-size budget? ``` For a small job, three lines are enough: job, slot, style source. **Why:** The slot decides almost everything else: the shape you generate, the crop, the file size, where text can go. An image made without one gets cropped, stretched or regenerated, and the person waits while you guess again. **Agent trap:** generating a square image because that's the tool's default, then dropping it into a wide 16:9 banner, where `object-fit: cover` cuts off the top and bottom, including the subject's head. **Check:** does the brief name the displayed width and the shape? Does the image you made or picked match both? ### B3 · Real beats made: choose the source in this order **Rule:** Use the first source on this list that can do the job: 1. **The real thing.** A screenshot of the actual product, a photo the human has of their place, product, team or work. Ask for it once if you don't have it (`modules/working-with-humans/2-ask.md` Q1: look in the project first). 2. **Something you can make exactly.** A diagram, a chart, a simple shape or pattern, an icon from the project's set, built as SVG or HTML. 3. **Licensed stock**, when it truly fits the subject and isn't one of the generic scenes in `pro/ui-design/7-avoid.md`. 4. **A generated image**, for moods and illustrations where nothing real exists or could exist. Then follow `2-generate.md`. If the real photo isn't available yet, leave a clearly marked placeholder (a neutral box with the slot size and "Photo of the shop front, 1200×800") and say so in your report, rather than filling it with something invented. **Why:** People come to see this product, this café, this person. A real picture, even an ordinary one, answers their question. A made-up one looks like every other site and makes them wonder what the real thing looks like. **Agent trap:** generating "a cosy coffee shop interior" for a real café's website because it's faster than asking for a photo. The page now shows a place that doesn't exist, and regulars notice at once. **Check:** for each generated or stock image, name why sources 1 and 2 couldn't do the job. ### B4 · An image must not lie **Rule:** What an image shows, or seems to show, must be true. In particular: - **Product screenshots** are of the real product. A design or concept that doesn't exist yet is shown as a mockup that looks like one (a frame, a sketch style) or is labelled ("Concept", "Coming soon"). - **People** shown as customers, reviewers, team members or users are real people who agreed to it. Never put a generated face next to a testimonial, a name or a job title. - **Logos** of real companies ("Trusted by", "As seen in", integration partners) come from those companies' own brand pages, and only when the claim is true. Never generate or redraw a real company's logo. - **Photos of the product** (food, rooms, results, before and after) aren't edited or generated to look better than what people will get. - When a generated image could be taken for a photo of something real (documentation, news, a real place or event), say it's an illustration. **Why:** People decide whether to trust the person you work for from these images. A fake customer or fake screenshot found out once makes every real claim on the page look fake too, and in many places it breaks advertising and consumer law. **Agent trap:** "making the testimonial section feel real" by generating three smiling headshots for quotes you also wrote. Or rendering a polished dashboard "screenshot" for a product whose real interface looks different. **Check:** for each image, ask: if a visitor learned how this was made, would they feel misled? If yes, change it or label it. Invented quotes and numbers are covered in `pro/ui-design/7-avoid.md`. ### B5 · Know where every image came from and that you may use it **Rule:** Use only images you have the right to use, and record where each came from: - **Stock:** check the licence allows this use (commercial, web, no "editorial use only" in marketing). Check that photos of identifiable people have a model release for commercial use. Give credit where the licence asks for it (Creative Commons "BY" licences do). - **Found images:** never take an image from a search result or another site. "It was on Google" is not a licence. - **Generated images:** follow the image tool's terms. Don't prompt with a living artist's or illustrator's name ("in the style of ") for commercial work; describe the qualities instead (P1). Don't prompt for characters, logos or products owned by others. - **Icons and illustration packs:** check their licence too; some need credit or forbid use in logos. Keep a short credits list next to the images or in `DESIGN.md`: file, source, licence, credit line if needed. **Why:** The person you work for carries the risk, not you: takedown notices, invoices from stock agencies, an angry illustrator who finds their style copied on a competitor's site. They can't check what they don't know about. **Agent trap:** prompting "flat illustration in the style of " because it gets a good result fast. Instead: ``` Weak: people working together, in the style of Strong: two people sorting parcels at a long table, flat illustration, thick uneven ink outlines, limited palette of terracotta, ochre and deep green, visible paper grain, no gradients ``` **Check:** every image on the page has a line in the credits list. If you can't name a source and a licence, replace it. **Limit:** when you're unsure whether a use is allowed, it's the human's call: say what you found and ask, with your recommendation.