An article illustration earns its place when it helps a reader understand something specific: where a process stalls, why two choices differ, or how one action changes the next.
That gives the production workflow a useful starting point. Before choosing colors or generating images, finish this sentence: “After seeing this image, the reader should understand ___.” If the answer is just “the topic,” the brief needs more work.
The public repository helloianneo/ian-xiaohei-illustrations describes a method built around this discipline. Its workflow identifies cognitive anchors in an article, creates a shot list, gives each image one visual structure and metaphor, generates images individually, and checks the results. It pairs that method with a distinctive visual identity for Chinese-language articles.
The transferable idea is the sequence of decisions. Whether illustrations improve comprehension enough to justify their cost remains a question to test.
Give each image one explanatory job
Start with a stable article draft. Mark passages where readers must understand a relationship, transition, constraint, or decision.
Good candidates include a process with a hidden dependency, two options that are easy to confuse, or a feedback loop whose consequences appear later. A paragraph that already communicates a simple fact may need no image.
For each candidate, write a one-sentence explanation of what the image must teach. For example, an article about acquisition might need to show that increasing incoming demand can expose a constraint later in the funnel. That is an illustrative brief, not a claim about a particular business.
Then decide whether a metaphor helps. A queue can make a capacity constraint visible. But it could also imply that every customer follows the same linear path. If correcting the metaphor takes more explanation than the original concept, use a direct diagram or keep the prose.
Write the shot list before generating
A shot list makes the work reviewable before you spend time producing images. Give each proposed illustration five fields:
- Placement: The exact passage it supports.
- Reader takeaway: The single relationship or decision it should clarify.
- Visual structure: A sequence, comparison, loop, hierarchy, or other appropriate arrangement.
- Action: What visibly happens in the scene.
- Annotation: The minimum wording needed to prevent ambiguity.
The source uses a recurring character that performs the central action. A different visual system can use objects or diagrams. The useful constraint is that the scene should express the idea through its structure and action.
Review the shot list as a whole. If several images teach the same thing, remove the duplicates. If an image requires a paragraph of labels, simplify it or divide the explanation into separate steps.
Avoid choosing an image count just to make the article feel substantial. Every additional image creates production work, page weight, and another opportunity to confuse the reader.
Separate visual consistency from explanatory accuracy
A reusable style brief can specify background, line weight, color use, spacing, typography, and annotation rules. These choices reduce repeated decisions. They do not guarantee that an image explains the right thing.
Use an original visual identity suitable for your audience. The source’s language, character, and aesthetic choices are context-specific; their effectiveness should not be assumed to transfer to English-language growth content.
Generate and review one image at a time. Keep the relevant passage beside the output and apply a short acceptance checklist:
- Does the image communicate the intended idea without introducing a false relationship?
- Are sequence, direction, labels, and emphasis accurate?
- Can a reader interpret it at the size shown on a phone?
- Does it follow the visual brief?
- Does the surrounding text preserve essential information for readers who cannot see it?
Write useful alternative text and avoid making color the only way to distinguish meaning. Where practical, put important labels in editable page text so corrections remain straightforward.
Record rejected attempts and review time. A fast first generation can still lead to an expensive finished asset.
Test arrival at the same passage
Choose one concept-heavy article for a pilot. Create an illustrated version and an otherwise identical text-only version. Randomly assign eligible readers, keep their assignment consistent, and hold the copy, promotion, comprehension question, and call to action constant.
Use the same article passage as the reading checkpoint in both versions, such as the final substantive paragraph before the comprehension question. Define arrival using the same visibility rule for that passage.
Percentage scroll depth is a poor comparison here: images change page length. Reaching 75% of two differently sized pages can mean reaching different parts of the argument.
Place the same short comprehension question after the shared checkpoint. It should test the concept the illustration is intended to explain. Decide the correct answer and scoring rule before traffic enters the test.
Report distinct measures with explicit denominators:
- Passage arrival rate: Assigned eligible readers who reach the shared checkpoint, divided by all assigned eligible readers in that variant.
- Question response rate: Readers who submit an answer, divided by readers who reach the checkpoint.
- Accuracy among respondents: Correct respondents divided by all respondents.
- Demonstrated comprehension rate: Readers who reach the checkpoint and answer correctly, divided by all assigned eligible readers.
Use demonstrated comprehension as the primary outcome if the goal combines reading progress and understanding. Nonresponders count as not demonstrating comprehension in that measure; they are not evidence of misunderstanding. Accuracy among respondents needs separate interpretation because the two variants may attract different subsets of readers into answering.
Set the adoption decision before testing
Before launch, write down the smallest improvement that would justify the extra production effort, the maximum acceptable cost per article, and acceptable changes in load performance and CTA conversion. Choose these limits from your own constraints. The source provides no benchmark for them.
Also specify the analysis method, required sample, and stopping rule. If available traffic cannot support a useful comparison, treat the pilot as a feasibility exercise and use reader feedback to improve the images. Keep that evidence separate from a causal performance claim.
A practical decision rule is to expand to a second article only when the result supports the predeclared minimum improvement, production cost stays within budget, and guardrails remain acceptable. An inconclusive result calls for more evidence or a narrower use case. If readers notice the artwork but miss the intended concept, revise the brief before generating more.
Even a positive result on one article supports a limited next step. It does not establish that every article needs illustrations.
Evidence and limitations
This workflow draws on the public README of helloianneo/ian-xiaohei-illustrations, particularly its cognitive-anchor selection, shot-list planning, single-concept images, consistent visual language, and quality checks.
The repository documents a creative method. The available evidence does not include controlled comparisons showing improved comprehension, conversion, retention, or brand recall. Examples demonstrate outputs, not audience effects.
The measurement definitions, adoption rule, accessibility guidance, and production-cost checks above are operator recommendations. Their purpose is to make the method testable. No results from the proposed pilot are available.
Source basis
- Public README for helloianneo/ian-xiaohei-illustrations describing concept selection, shot lists, visual metaphors, image generation, and quality checks.
- Original implementation and pilot recommendations; no measured audience or business outcomes are established by the source.