VectorPaint timeline: arrange five stages with descriptions of different lengths

English translation of the Chinese original, translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

Timeline dates are short while explanations vary in length. Five evenly spaced circles do not guarantee a readable sequence. This VectorPaint exercise creates a five-stage timeline for a fictional creative project, checking sequence, text ownership, and space.

Decide whether the timeline represents sequence or duration

Prepare five stages: concept, sketch, form refinement, color, and delivery. Give each a practice date and one-line explanation. Decide whether the graphic conveys sequence only or real proportional day counts. These require different spacing rules and should be distinguished at the start.

This example uses equally spaced stages and labels the diagram 'Stage schematic; spacing does not represent actual duration.' Create a 1200×700 px landscape canvas, reserving the middle for the main axis, the top for a title, and the bottom for notes. Verify dates for real projects; example dates are not publishable evidence of actual events.

Establish reading direction with one main line

Draw a horizontal open path with the line tool or pen, using a clear but not heavy stroke. The left is the start and the right the end. Begin with one consistent color. The line connects stages and need not overpower their titles.

Place five equal circles between the endpoints. Set the first and last positions, then arrange the middle three with distribution or manual references. Check center-to-center distances, not only gaps between circle edges. Keep all circles the same size and express importance in text for now, avoiding a second unnecessary encoding.

Arrange dates and stage names separately

Put dates above each node and stage names below, or reverse that arrangement consistently. Use a common date size and slightly stronger stage names. Create text objects separately, confirm their content, then position them.

Test space with the longest stage name, then adjust all node text areas. Do not squash only the long name's glyphs. Edit wording or choose a more suitable overall layout. Text must be close enough to show its node association without touching the main line.

Place longer notes in stable reading areas

Give each node a similarly sized text area despite differing note lengths, using consistent left alignment or centering. Left alignment usually helps with explanations longer than two or three lines. Limit each note to one stage's main point instead of letting one become a full project summary.

If neighboring notes collide, alternate them above and below with short leader lines to identify their nodes. Alternatively, use a vertical timeline with a wider explanation region per stage. Changing layout is more effective than shrinking all text beyond readability. Let content length guide the choice.

Keep explicit wording with status colors

For Completed, In Progress, and Not Started, use dark, accent, and pale colors if desired, but include text or clear symbols too. Color alone can lose meaning in monochrome print or low-contrast display.

Status and date are different information. A past date does not automatically mean completion. Verify real progress before changing node colors. For this fictional exercise, neutral colors can establish reading order first, with status coding added later.

Read it aloud from start to finish to find problems

Starting at the leftmost date, read each stage and explanation and see whether the next node follows naturally. If the third note's circle is unclear, change distance or leader lines. If one long title keeps pulling attention away, shorten it or reduce its visual weight.

Reduce the diagram to its actual display width. A horizontal timeline may be too long on a phone, shrinking all its small text. Create a portrait version with the same content rearranged if needed. Name horizontal and vertical versions separately instead of compressing the entire landscape image into a portrait ratio.

Keep an update reference and inspect exports

Organize the main line, nodes, dates, and notes clearly in the original. Group related stages for movement. Keep a text list as the update reference, changing content first and then checking that graphics and dates agree. Do not update only text in a PNG while leaving the editable original outdated.

After export, check cropping at both ends, dates and explanations for every node, and the intended five-stage order. For real project communication, state the date through which information is current. It should reflect actual content updates, not imply new progress every time a file is exported.

Frequently asked questions

Must all five stages be equally spaced? It depends on purpose. Equal spacing may express sequence if explicitly stated; actual durations require one consistent time scale. Do not let decorative spacing be mistaken for real elapsed time.

Can a long explanation be reduced to a few keywords? Extract its most important action and move detail into accompanying text. The short note must still explain the stage independently rather than becoming internal shorthand only its author understands. Reading it again after a break is a simple completeness check.

Check two stages occurring on the same day

If two stages in a real project happen on the same day, retain the shared date and explain their sequence or parallel relationship in the notes. Do not invent different dates just to make every node look distinct. In a version drawn in proportion to elapsed time, same-day node labels may need to be staggered vertically. In an equally spaced stage diagram, continue to make the meaning of the spacing explicit. Make the time information accurate first, then solve the label placement.