Module 27: AI in Design — Design & Code Foundations

09

undefined

Production Speed

Print

Manual creation

Hours to days

Traditional illustration/photography

Web

AI-assisted

Seconds to minutes

Rapid generation and iteration

Variation

Print

Limited options

Cost per version

Each variation requires work

Web

Unlimited options

Generate many

AI can create endless variations

Quality Control

Print

Crafted

Intentional

Every element deliberate

Web

Curated

Select + refine

Generate many, choose best

Originality

Print

Unique

One-of-a-kind

Original creation

Web

Synthesized

Trained patterns

Based on training data

10

undefined

How AI Generates

undefined

Hallucinations

undefined

AI Bias

undefined

11

AI in Design Practice

Responsible and effective uses of AI in design workflows.

100 Ideas in Minutes

Explore quickly, refine manually

Principles Identified:

Speed Generate many concepts quickly

Breadth Explore directions you wouldn't have tried

Selection Human chooses best directions to develop

Key insight: Use AI to explore widely in early stages, then apply human craft to refine selected concepts.

AI Backgrounds

Human subjects/products

Principles Identified:

Hybrid approach AI for backgrounds, human for subjects

Cost effective Skip expensive location shoots

Controllable Easier to get right than full scenes

Key insight: AI excels at environments and textures. Combine with photographed products/people for best results.

Draft, Don't Publish

AI draft → human edit

Principles Identified:

Starting point AI creates first draft quickly

Human voice Editor adds brand voice and accuracy

Fact-check Verify all claims and statistics

Key insight: AI copy needs human editing for accuracy, voice, and brand consistency. Never publish unreviewed.

12

AI Design Mistakes

Common errors when using AI in design.

Failure: Publishing Unreviewed Output

AI generates → Publish

Errors embarrass brand

Fix: Always verify before publishing

AI generates → Human reviews → Publish

Quality assured

Rule: Every AI output needs human review for accuracy, appropriateness, and quality before publishing.

Failure: Mimicking Living Artists

"In the style of [living artist]"

Ethically problematic

Fix: Use style descriptions, not artist names

"Minimalist, bold colors, geometric"

Style without copying

Rule: Don't use AI to copy living artists' styles. Describe aesthetic characteristics instead of naming people.

Failure: Hidden AI Use

AI-generated images

Presented as traditional work

Trust damage when discovered

Fix: Disclose when significant

"Backgrounds generated with AI"

Clear disclosure

Transparent and trusted

Rule: Disclose significant AI use. Hidden AI damages trust and reputation when discovered.

Failure: Ignoring Bias

Accept AI defaults

Reinforces stereotypes

Fix: Actively work for diversity

Specify diversity in prompts

Review for representation

Actively inclusive

Rule: AI defaults often lack diversity. Explicitly prompt for representation and review outputs critically.

13

AI Output Verification

Checklist before using AI-generated content.

01

Accuracy Check

Tests: Factual correctness

For text: verify all facts, statistics, and claims. For images: check anatomy, physics, spatial relationships. AI confidently produces incorrect information.

☑ Facts verified

☑ Statistics sourced

☑ Visual logic checks out

02

Brand Consistency

Tests: Style alignment

Does output match brand guidelines? Colors, typography, tone of voice? AI doesn't know your brand—you must verify alignment.

☑ Colors match palette

☑ Style matches guidelines

☑ Voice is appropriate

03

Ethical Review

Tests: Responsible use

Is the content diverse and inclusive? Does it avoid stereotypes? Would you be comfortable disclosing how it was made?

☑ Diverse representation

☑ No stereotypes

☑ Comfortable disclosing

04

Legal Clearance

Tests: Usage rights

Does your AI tool grant commercial usage rights? Does output too closely match identifiable copyrighted work? When in doubt, consult legal.

☑ Tool grants usage rights

☑ No clear copyright match

☑ Legal consulted if unsure

14

AI Workflow Patterns

Practical approaches for AI-assisted design.

/* Concept exploration pattern */

1. Start broad:
   "Website designs for eco-friendly brand"

2. Identify promising directions:
   "Minimalist, nature imagery, earth tones"

3. Refine specifics:
   "Minimalist SaaS landing page, forest green
    accent, large hero image of mountains,
    clean sans-serif typography"

4. Iterate variations:
   "Same but with warmer colors"
   "Same but with illustrated elements"

Exploration Prompts via CSS

Broad to narrow - Start wide, then focus
Identify winners - Note what works in early results
Iterate - Refine promising directions

Tip: Treat prompting like a conversation. Build on what works.

/* Disclosure examples */

Minimal (footer):
"Some images on this site were created with
 AI assistance and refined by our design team."

Detailed (process page):
"Our creative process:
 - Concepts generated with [tool]
 - Selected and refined by human designers
 - Final illustrations hand-drawn
 - All copy written by humans"

Per-image:
"Background: AI-generated | Subject: Photographed"

Disclosure Template via CSS

Be specific - Say what AI did vs human
Be visible - Don't bury in fine print
Be honest - Accurate representation of process

Tip: Match disclosure detail to AI contribution significance.

/* Before publishing AI content */

□ ACCURACY
  - Facts verified against sources
  - Statistics have citations
  - Visual logic correct (hands, physics)

□ BRAND
  - Colors match palette
  - Style matches guidelines
  - Tone appropriate for audience

□ ETHICS
  - Diverse representation
  - No stereotypes reinforced
  - Not mimicking living artists

□ LEGAL
  - Tool grants usage rights
  - No identifiable copyrighted material
  - Disclosure prepared if needed

Review Checklist via CSS

Systematic review - Don't skip steps
Document decisions - Note what you verified
When in doubt - Don't publish, get input

Tip: Create a team checklist so reviews are consistent.

/* Recommended workflow */

1. GENERATE (AI)
   - Quick exploration of concepts
   - Multiple variations
   - Background/texture creation

2. SELECT (Human)
   - Choose best directions
   - Identify what works
   - Flag issues to fix

3. REFINE (Human + AI)
   - Human art direction
   - AI assists with iteration
   - Human makes final decisions

4. VERIFY (Human)
   - Check accuracy
   - Ensure brand alignment
   - Review for ethics

5. PUBLISH (Human approval)

Hybrid Workflow via CSS

AI for speed - Generation and variation
Human for judgment - Selection and quality
Never skip verify - Always human-approved

Tip: The value is in selection and refinement—that's the design skill.

15

Self-Assessment

Test your understanding of AI in design.

Q1

Why should you focus on AI principles rather than specific tools?

Click to reveal

Q2

What is AI 'hallucination' and why does it matter for designers?

Click to reveal

Q3

When should you disclose AI use in design work?

Click to reveal

Q4

How should you handle AI bias in generated content?

Click to reveal

Q5

What's the recommended workflow for AI-assisted design?

Click to reveal

AI in Design

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

AI in Design Practice

Common Failures

AI Design Mistakes

Visual Tests

AI Output Verification

Accuracy Check

Brand Consistency

Ethical Review

Legal Clearance

CSS Implementation

AI Workflow Patterns

Self-Assessment

Self-Assessment

Key Takeaways