Unit 4 / 11

Slide Design and Visual Production: Layout, Color, Icon and Artificial Intelligence Visuals

Gains:

  • Ability to create readable slides with layout, contrast, typography and color principles and receive accessible palette and design suggestions from artificial intelligence
  • Ability to produce appropriate backgrounds, illustrations and consistent icons with visual-generating artificial intelligence and apply practical limits such as 'not printing text on the image'
  • Not representing fake images as real, and being able to respect design ethics and accessibility limits such as copyright/trademark and color blindness.

The right content gets lost in the wrong design. Small font, clashing colors, messy alignment; It weakens even the best message. In this unit, we will use artificial intelligence in two jobs: (1) as an advisor on slide layout, color, and typography decisions; (2) producing the images, icons and backgrounds you need with visual-generating artificial intelligence. The goal is to produce consistent and readable slides, even without a designer.

Three pillars of design: layout, color, typography

A few concepts. Layout is the arrangement of elements on the slide. Typography is the choice of fonts and sizes. Contrast is the distinction between text and background; low contrast is not readable. White space is the breathing space between elements; Don't be afraid of emptiness, it brings clarity.

Practical starting rules:

  • Alignment: Align elements in a virtual grid; Don't let it swing left or right.
  • Contrast: Dark text on a light background or vice versa. There is no gray on grey.
  • Typography: Up to 2 fonts; the title is big and bold, the body is a readable size (≥24 point is a good base in a salon).
  • Color: 1 main color + 1-2 highlights + neutrals. If you have a brand color, stick to it.
  • Repetition: Same elements in the same place and in the same format on every slide.

principle

Misapplication

Correct application

contrast

White text on a light gray background

White text on a dark blue background

Number of colors

7 different vibrant colors

1 main + 2 highlights + gray tones

typography

4 different fonts

1 headline + 1 body font

space

Full slide from edge to edge

Margins and breathing room

Caution: Color blindness is common (about 8% of men). Don't just separate information into red/green; Also add shapes, labels or textures.

Design consultancy with artificial intelligence

The model is not a design program, but it is a good design consultant. The color palette, layout idea, and typography match suggest:

Your role: presentation design consultant.Brand primary color: [#hex or “dark navy”]. Sector: [ ... ].Tone: [corporate / warm / technological]. Task:1) Suggest an accessible color palette: 1 main, 2 accent, 2 neutral (hex code for each and where to use it).2) Suggest 2 compatible fonts for title + body (common, free).3) Describe a simple layout for a "content slide" (where is the title, where is the image, where is the text). Make sure the contrast ratios are readable.

To critique a ready-made slide (by uploading a screenshot):

Critique this slide image through the eyes of a design editor. Write down the problems in terms of contrast, alignment, text density, number of colors, and readability, and suggest a concrete fix for each. I aim for clarity, not embellishment.

Image generating artificial intelligence: for what, how?

Image-generating artificial intelligence (e.g. tools that generate images from text) turns the recipe you write into a visual. It works well for background, conceptual image, illustration and icon idea in presentation. A good image prompt includes: subject + style + composition + color + proportion + intended use.

Produce a presentation cover image. Topic: technology in sustainable agriculture. Style: simple, modern, flat illustration, not realistic photography. Composition: leave empty space on the right side (the title text will go there). Colour: green and earth tones, calm. Ratio: 16:9 horizontal. ADDING text/text (I will put the text).

For the icon set:

Generate a coherent icon set idea for a presentation. Need: speed, security, savings, team, automation (5 concepts). Describe a simple, line-style, monochrome icon for each. Let them all be in the same visual language and thickness.

Tip: Do not put text on the image. The text in the images produced is often distorted/erroneous. You add the text in the slide program.

The limits and ethics of visual production

  • Fake looking real: Presenting a manufactured image as a "real photo/real person" is misleading. News is not a substitute for evidence or testimony.
  • Copyright and trademark: Saying "imitate" an existing brand's logo, character, or the style of a particular artist can lead to copyright and trademark issues.
  • Person image: It is unethical to produce an image that resembles a real person and have him say something from his mouth.
  • Accuracy: The “data visual” produced is not actual data; It does not replace graphics. For the graph, use the plot produced with real data (next units).

three mini cases

Case 1 — Contrast correction. One teacher's slides were prepared in light blue text on a light gray background; The students in the back row couldn't read. AI suggested dark background + white text and font size increase. The readability complaint from the backstage is completely over.

Case 2 — Consistent icons. A product team was using 9 different styles of icons in the presentation (some filled, some lined). He had the AI ​​describe a set in one style; all brought to line style. The presentation received the feedback "it looks professional", even though no designer was employed.

Case 3 — Return from fake image. A marketer would place a generated AI portrait with the title “our happy customer” as a real customer. The team realized this was misleading; instead used a real, authorized customer photo or opted for an abstract illustration. Thus, the trust risk was eliminated.

Weak prompt / Strong prompt

Weak:

Produce a beautiful presentation background.

No style, no proportion, no color, no space, no purpose; The result is random and often useless.

Strong:

Generate 16:9 presentation background. Topic: financial growth.Style: minimal, abstract geometric, solid color. Colour: dark navy blue, gold accents, very few details. Leave the left third empty (the text will go there). Adding text/numbers. Get a high-contrast, text-readable background.

The second gives critical details like ratio, free space, color, and "text insertion"; The output can be used directly.

Common mistakes

  • Excessive colors and fonts: Turning the slide into a rainbow is distracting.
  • Low contrast: Light on light, unreadable text.
  • Printing text on an image: The text produced is distorted; add the text in the slide program.
  • Presenting the fake as real: Using the produced person/photo as if it were real.
  • Distinguishing by color alone: ​​Excludes the colorblind viewer; Also add shapes/labels.
  • Imitating the brand style: It creates copyright and trademark risks.

In summary

The three pillars of design are layout, color and typography; Alignment, contrast, low color/font and spacing determine readability. AI is a good advisor in recommending color palette, layout and typography; Artificial intelligence that produces visuals produces background, illustration and icon ideas. But do not write on the image, do not present the fake as real, and be careful about copyright/brand and color blindness. It is in the service of aesthetic honesty and readability.

Application task

Select one of your slides. (1) Have the AI ​​generate an accessible color palette (1 main + 2 highlights + neutral) and 2 fonts. (2) Screenshot the slide, critique contrast/alignment, and apply at least 2 corrections. (3) Generate a conceptual image with image-generating AI; Put rate and "add text" rules in the prompt.

checklist

  • [ ] I use at most 2 fonts and a limited color palette.
  • [ ] Text-background contrast is high; It is read from the back row.
  • [ ] I separated the information not only by color but also by shape/label.
  • [ ] I did not print any text on the generated image; I added the text.
  • [ ] I do not present the fake image as real; I checked the copyright/trademark risk.
  • [ ] Items are aligned in a grid, there is sufficient space.