ClickTap to zoom
The previews show your colour, and the files download in it: every SVG, and PNGs at 1×, 2× and 4×. Change it in your library whenever you like; the colours as drawn stay available too.
About this file
Front Steps is a set of eighteen scene illustrations for the screens every website and app has to design: the welcome, the sign-up, the inbox with nothing left in it, the search that finds nothing, the page that isn't there, the outage, the payment that went through. Each one is a real place with ordinary people in the middle of something: a grandmother opening her front door, a friend fixing a slipped bike chain, a student finding a letter at a garden gate. A small songbird hides in every scene.
Every scene comes three ways: the full 4:3 scene (1600 × 1200), a 16:9 crop for hero banners and slides, and a transparent cut-out of just the people and what they're using. That's 54 clean, editable SVG files with named groups, ready for any vector editor or straight into your code.
Pick your brand color on this page and the previews follow it; your downloads come in that color as SVG, or as PNG at 1×, 2× and 4×. Skin tones, hair and the neutrals stay as drawn, so the scenes hold up in any color from pale yellow to black. Each full scene and wide crop keeps a calm stretch of sky or wall for your headline.
The scenes: Welcome home · Choosing a key · A letter at the gate · The bell above the door · The seed library · Nothing left to do · The first box · Flashlight in the attic · Lost at the fork in the path · A slipped chain · No signal at the cabin · Repainting the sign · Paid and wrapped · The paper boat sets off · Setting a longer table · The suggestions box · Planting a seedling · Waving from the train.
What you download
55 files · 3.6 MB · TXT, SVG
- README.txt3 KB TXT
- front-steps-all-caught-up-cutout.svg32 KB SVG
- front-steps-all-caught-up-wide.svg111 KB SVG
- front-steps-all-caught-up.svg111 KB SVG
- front-steps-check-email-cutout.svg18 KB SVG
- front-steps-check-email-wide.svg82 KB SVG
- front-steps-check-email.svg82 KB SVG
- front-steps-create-account-cutout.svg59 KB SVG
- front-steps-create-account-wide.svg99 KB SVG
- front-steps-create-account.svg99 KB SVG
- front-steps-feedback-cutout.svg27 KB SVG
- front-steps-feedback-wide.svg59 KB SVG
- front-steps-feedback.svg58 KB SVG
- front-steps-goodbye-cutout.svg31 KB SVG
- front-steps-goodbye-wide.svg77 KB SVG
- front-steps-goodbye.svg77 KB SVG
- front-steps-invite-team-cutout.svg71 KB SVG
- front-steps-invite-team-wide.svg116 KB SVG
- front-steps-invite-team.svg116 KB SVG
- front-steps-lost-path-cutout.svg30 KB SVG
- front-steps-lost-path-wide.svg92 KB SVG
- front-steps-lost-path.svg92 KB SVG
- front-steps-maintenance-cutout.svg55 KB SVG
- front-steps-maintenance-wide.svg73 KB SVG
- front-steps-maintenance.svg73 KB SVG
- front-steps-no-results-cutout.svg34 KB SVG
- front-steps-no-results-wide.svg46 KB SVG
- front-steps-no-results.svg46 KB SVG
- front-steps-nothing-yet-cutout.svg30 KB SVG
- front-steps-nothing-yet-wide.svg53 KB SVG
- front-steps-nothing-yet.svg53 KB SVG
- front-steps-notifications-cutout.svg42 KB SVG
- front-steps-notifications-wide.svg84 KB SVG
- front-steps-notifications.svg84 KB SVG
- front-steps-offline-cutout.svg16 KB SVG
- front-steps-offline-wide.svg49 KB SVG
- front-steps-offline.svg49 KB SVG
- front-steps-payment-done-cutout.svg42 KB SVG
- front-steps-payment-done-wide.svg67 KB SVG
- front-steps-payment-done.svg66 KB SVG
- front-steps-pick-interests-cutout.svg46 KB SVG
- front-steps-pick-interests-wide.svg104 KB SVG
- front-steps-pick-interests.svg104 KB SVG
- front-steps-update-ready-cutout.svg37 KB SVG
- front-steps-update-ready-wide.svg87 KB SVG
- front-steps-update-ready.svg87 KB SVG
- front-steps-upload-done-cutout.svg41 KB SVG
- front-steps-upload-done-wide.svg92 KB SVG
- front-steps-upload-done.svg92 KB SVG
- front-steps-welcome-cutout.svg32 KB SVG
- front-steps-welcome-wide.svg79 KB SVG
- front-steps-welcome.svg79 KB SVG
- front-steps-went-wrong-cutout.svg44 KB SVG
- front-steps-went-wrong-wide.svg111 KB SVG
- front-steps-went-wrong.svg111 KB SVG
Details
- Shelf
- Illustrations
- Type
- Single file
- Formats
- SVG
- Style
- mid centuryminimal
- Topics
- 404 pageapp designbrand colorempty stateerror pageillustrationsinclusive illustrationslanding pageonboardingpresentationproduct designrecolorablesaassvg illustrationsui illustrationsvector illustrationsweb designwebsite hero
- Licence
- Standard — covers paid work
What the licence allows
Standard licence
- Use it in your own projects and in work you are paid for.
- Print it as often as you like, for yourself or for a client.
- Change it, crop it, recolour it, and combine it with other work.
- Keep using it after you stop buying from us. The licence does not expire.
- Resell or give away the file itself, or a lightly changed version of it, as a digital product.
- Share your download link or your account.
- Register it, or anything substantially it, as a logo or trademark.
- Put it into a dataset used to train a model.
Illustrations
