◆ Illustrator · layout

UI Mockup

Lay out a mobile-first UI mock on a phone-sized artboard so the PM can validate content hierarchy — set up a 375×812 a…

2heights
2tasks
1roles do it
See the prompt↓More layout workflows

The same job, four prompts

do it · improve it · decide · become
AExecute — “help me do it”Lay out a mobile-first UI mock on a phone-sized artboard so the PM can validate content…+
Lay out a mobile-first UI mock on a phone-sized artboard so the PM can validate content hierarchy — set up a 375×812 artboard, use guides and a 4-column grid, place headline, body copy and primary CTA for testing.
when the reply comes backPush once: ask it to sharpen the weakest part, and to say what it assumed.
BImprove — “do it better”Before the usability session, tighten the mobile mock so feedback focuses on hierarchy — make…+
Before the usability session, tighten the mobile mock so feedback focuses on hierarchy — make the CTA visible without scrolling, use realistic copy, annotate expected scrolling behaviour, and flag any cramped vertical spacing that would confuse testers.
when the reply comes backPush once: ask it to sharpen the weakest part, and to say what it assumed.

How to do it

the tool · the steps · what to avoid
The tool
Artboards Panel

The Artboards panel helps you manage multiple design canvases within a single Illustrator document.

  1. 1

    Select Window > Artboards to open the panel.

  2. 2

    Select the Artboard Tool from the Toolbar.

    NoteYou can also press Shift+O to activate the Artboard Tool.

  3. 3

    Drag on the canvas to create a new artboard.

  4. 4

    Click the New Artboard button in the Artboards panel to add a new artboard.

  5. 5

    Double-click to the right of an artboard's name in the panel to center it on your screen.

  6. 6

    Drag artboard names in the Artboards panel to reorder them.

  7. 7

    Select Rearrange All Artboards from the panel menu.

    Best practiceTo avoid artboard numbering issues, periodically close and reopen Illustrator, especially after long sessions or many tabs.

  8. 8

    Select desired options in the Rearrange All Artboards dialog.

  9. 9

    Click OK to apply the arrangement.

Use the Artboards panel to name, reorder, and navigate your artboards efficiently.

While Illustrator's scripting capabilities allow for some artboard manipulation, direct panel interactions are typically manual.

Glossary

words on this page
Rearrange All ArtboardsAn option to automatically organize and space multiple artboards on the canvas.ExampleYou click Rearrange All Artboards to neatly align and space out all your design variations.
Artboard ToolA tool used to create, resize, and reposition artboards within your document.ExampleYou grab this tool to make your poster design area wider or move it to a new spot.
Panel menuA menu within a panel that provides additional options and commands specific to that panel's functions.ExampleClicking the small icon in the Brushes panel reveals options like 'New Brush' or 'Delete Brush'.

The real tasks

1 of them
Quickly lay out a mobile-first UI mock so the PM can validate content hierarchy with users.

Who does this

1 roles
Web Designer

Questions people ask

honest answers

Because you rarely think 'I want the redaction tool'. You think 'I have to share this without leaking the client's details'. Start from the need, and the feature finds you.

Real. Every job here was drawn from what people in real roles were actually seen doing in Illustrator — not a feature checklist.

No. Each page gives you a ready prompt you can paste into an AI assistant, plus the plain steps to do it yourself. Start with either — the goal is the finished job, not the tool.