Parameters and Returns

1. Choose imagery for a job

Start by asking what the image needs to accomplish. A product photo may need to show accurate detail. A hero image may need to create atmosphere. An instructional graphic may need to make a process easier to understand. If you cannot describe the image's job, it is often being used only as decoration.

2. Image selection: relevance before beauty

A beautiful photograph can still be the wrong choice. Look for subject relevance, composition, resolution, lighting, visual tone and the amount of usable negative space. If text must sit beside or over an image, choose a photograph with a quiet area where the text can remain readable.

Also check whether the image matches the audience and context. A polished corporate page, a playful children's poster and a technical tutorial should not automatically use the same visual language.

3. Crop with intention

Cropping changes meaning. A close crop can increase emphasis and energy; a wider crop can provide context. When cropping a person or product, protect the important subject details and avoid accidental cuts through visually important areas.

4. Resolution and output size

Use enough source resolution for the intended output, but do not treat a huge file as automatically better. Oversized images increase loading time and storage requirements. Export an appropriately sized version for the actual placement and keep an original source separately when future editing is likely.

For digital work, inspect the final image at the size people will actually see it. Small details that look impressive while zoomed in may disappear on a phone.

5. Icons are a system, not a collection

Icons work best when they share a visual grammar. Decide whether the set is outline, filled, rounded, geometric or another consistent style. Keep stroke weight, corner treatment, proportions and visual complexity reasonably consistent.

A single icon can be attractive while still being wrong for the system. If five interface icons use thin outlines and one uses a heavy filled shape, the outlier can look like a different product or signal a different meaning.

6. Icon clarity and recognisability

An icon should communicate its intended meaning quickly. Prefer familiar symbols when the action is familiar. If a symbol could be interpreted in several ways, pair it with a label instead of forcing users to guess.

Test icons at their smallest intended size. Details that are visible at 64 px may turn into noise at 16 or 20 px. Simplify rather than adding more detail.

7. Consistency with the rest of the design

Imagery should connect with typography, colour and layout. For example, a restrained brand palette paired with extremely saturated stock photography can create a visual conflict. Similarly, highly detailed illustrations may overwhelm a layout designed around generous whitespace.

Create simple rules for a project: preferred image treatment, corner radius, icon style, aspect ratios, background treatment and spacing around visual assets. These rules make later designs faster and more consistent.

8. Accessibility and meaning

Important information should not depend only on an image. Provide meaningful text alternatives where the platform supports them, keep essential instructions visible as text, and avoid using decorative imagery as a substitute for a required label.

For icons, do not assume a symbol is self-explanatory for every user. A tooltip, accessible label or visible text can remove ambiguity, especially for less familiar actions.

Real-world example: a course landing-page hero

Imagine a graphic-design course page. Choose an image that shows a believable design workspace rather than a generic decorative photo. Reserve a calm area for the headline, make sure the crop works on both desktop and mobile, and use one consistent icon style for the course benefits. The image establishes context while typography and layout deliver the actual information.

Practical exercise: build a small visual kit

1. Choose one project, such as a course page or social campaign.
2. Select three images that could serve different purposes: hero, supporting detail and proof/example.
3. For each image, write one sentence explaining why it belongs in the design.
4. Create a set of four icons using one consistent visual style.
5. Place the images and icons into a simple layout using the grid and hierarchy principles from earlier lessons.
6. View the result at thumbnail and phone sizes and remove any visual asset that does not add useful information.

Asset checklist

Common mistakes

• Choosing an image because it looks attractive without checking its communication purpose.
• Using low-resolution assets and trying to rescue them with sharpening.
• Ignoring how a crop changes when the same design is viewed on mobile.
• Mixing unrelated icon styles in one interface or graphic.
• Adding icons everywhere until the visual hierarchy becomes noisy.
• Using an icon as the only explanation for an unfamiliar action.
• Forgetting usage rights, attribution requirements or the source of an asset.

Quick self-check

1. What is the difference between decorative imagery and functional imagery?
2. Why should a crop be tested at the final aspect ratio?
3. What visual properties should remain consistent across an icon set?
4. How can an icon become unclear at a small size?
5. What information in your design would still need to work if the image were removed?

Key takeaway

Choose visual assets for communication, then make them fit the system. Relevant imagery, deliberate crops, appropriately sized files, consistent icons and accessible labels make a design clearer without adding unnecessary visual noise.