Illustration
Eighty paintings in one style, Rasi: a dot of gouache is a person, and a pull of brush ink between two dots is a meeting.
Rasi
#Ilustrasi Patepang is one family of 80 pictures in one style, Rasi, a word for a constellation. A dot of gouache is a person, and a pull of brush ink from one dot to another is a meeting. Everything else follows from those two.
Each picture is painted on a sheet of 400 × 300, once, as code. The picture for light paper and the one for dark paper are read from the same painting, so they cannot differ in shape.
Three materials
#Three materials, and nothing else. Gouache for the dots: a body, two tones, and the dry end of the brush. Brush ink for the lines: pressure that changes, a pull that dries. Thin watercolor for the washes.
There are no outlines, no gradients and no shadows. Texture is part of each shape.
The vocabulary
#Every picture is put together from the same few words. Knowing them is enough to read any picture, and to say what a new one should show.
| Word | Means |
|---|---|
| noktah (dot) | A person. The soft blue dot is always you; other people are forest green, amber, leaf or light blue. |
| sambung (join) | A meeting: one pull of ink from dot to dot. A pull that dries before it arrives means not yet, no, or failed. |
| bekas (trace) | A thin trail: an old join, one that is fading, or one not yet certain. |
| cincin (open ring) | What is not there yet: a ring the brush left open. Small where a dot, a message or a figure should be; large when what is missing is the content of a place. |
| lingkar (thin circle) | A thin closed line around something: a circle of people, a place, the orbit of a year. |
| tutup (thick ring) | Locked: a thick ring, fully closed. |
| nyala (glow) | Short rays around a dot: born, back, or done. |
| hari (day) | Time passing: the sun on the arc of its day. The arc behind it is inked; ahead of it, only touches of the brush. |
| riak, goyang (ripple, shake) | Sound and calls; the shake of a tempel. |
| manik (bead) | A message between two dots. An empty bead: a message not there yet. |
| hp (phone) | A phone: a block of ink with round corners. Your account lives inside it. |
| palang (bar) | A limit that cannot be crossed, or a sweep of ink that covers something. |
| bingkai, sudut, kode (frame, corners, code) | A card, a photo or a container; a camera’s finder; a code to scan. |
| surya, bulan, bintang (sun, moon, star) | Today; the day done; the night sky. Only a few stars, and only in a sky. |
| jejak (trail) | A journey, a plan or a search: a row of brush touches. |
| sapu (stroke) | One wide wet pull of the brush. A sky is two of them behind a scene, the ground one under it, a page several side by side. |
| sapuan (wash) | A pool of thin paint: the inside of a ring, light around a dot, water. |
| kabut, percik (fog, spatter) | What covers: offline. What failed. |
Rules
#What holds across the family
- A wash means something: sky for a scene outdoors, ground to stand on, a page for what is written, a room for an event, warm light for what is alive. No scene gets a sky only to fill the sheet.
- People are always dots. No faces, no hands, no bodies.
- Soft blue is for you alone, the blue of the app icon. Two blue dots appear only when both are you: two of your devices, your backup.
- A ring has three forms and three meanings: open is not there yet, thin and closed is a circle around something, thick and closed is locked.
- Time is the sun. No clock, and no ring that fills up.
- Apricot is for moments alone.
- No letters and no figures, so the same picture serves a page in Indonesian and one in English.
- One idea to a picture, and no mark too small to read at 240 px.
Do not
- Draw a padlock or a shield: a picture must not promise more safety than the words beside it.
- Borrow the marks of an interface: a check, a cross, a clock, a magnifier, a text cursor, a line through a circle. Those are the icons’ language.
- Recolor a picture, crop it, or set it on a ground of another color.
- Let a picture carry a meaning alone. The three pictures of the service’s state always stand with the name of the state.
Twelve pigments
#Twelve pigments, every one a color the product already has or a mix of them. Each is also used a little lighter and a little darker for the sweep of gouache.
On dark paper a picture reads like a painting on black paper: the strong pigments stay, the ink turns ivory, and the thin washes turn into dark ones.
| Pigment | Light paper | Dark paper | Paints |
|---|---|---|---|
tinta | #18273A | #F2EFE8 | Lines, rings, a code |
badan | #18273A | #3F4D62 | Large masses of ink: a phone, a bar |
langit | #61A8DC | #61A8DC | You |
langit2 | #A9CBEA | #3A6C9C | Other people, the moon, traces, fog |
langit3 | #DCE9F5 | #1E3550 | Sky, a page, the inside of a ring |
hutan | #1F5F4F | #2E7A66 | Other people |
daun | #5DA78B | #5DA78B | Other people |
pupus | #CDE5DA | #24413A | The ground, a circle of people |
amber | #F0C468 | #F0C468 | Other people, the sun, the moon, a glow |
amber2 | #F8E3AE | #5A4A22 | Warm washes: daytime, paper, light |
aprikot | #E7956C | #E7956C | Moments only |
bata | #A0461E | #C4673E | Moments only: the empty ring |
Sizes
#A picture sits in the middle of its sheet, at least 6 units from the edge, with nothing behind it.
In the app, a screen’s state is 200 to 240 px wide. On a site’s page, 320 px. The least is 120 px; under that, an icon does the job.
There is no simpler drawing for small sizes: one picture serves every size.
For those who do not see it
#Beside a title, a picture is decoration: the title and the line under it already say what happened. So the components hide it from screen readers unless it is given a label.
Where a picture stands alone, it has a sentence ready in Indonesian and in English, written with the picture. The gallery below shows it under each one.
Every picture
#All 80, in the family’s ten groups, on the paper you choose.
Starting
welcomeA blue dot and a green dot joined by one pull of ink, under a morning sun; one empty ring waits in the distance
welcome-privateA blue dot inside a phone painted as a block of ink; two other dots are joined straight to that phone, under a crescent moon
nicknameA blue dot beside a page; on the page one line of ink writing with a line under it, like a name just written
pinA blue dot inside a ring; below it four places for digits, three already filled
biometricArcs of ink stacked like a fingerprint, with a small blue dot at the centre
home-regionThree pale washes like islands; the blue dot sits on the island that is circled
first-friendAn empty ring on the left, a green dot on the right, and a trail of brush touches between them
account-bornA pull of ink from a green dot reaches a ring; inside the ring a small blue dot begins to glowTempel
tempelTwo dots drawing near, not yet touching; small ripples between them
tempel-scanA camera viewfinder frames a code; the blue dot waits beside it
tempel-shakeTwo dots side by side, shaking together; the ripples of the shake spread out on both sidestempel-connectedTwo dots of the same size touching at exactly one point
tempel-failedTwo dots; the pull of ink between them breaks in the middle and splatters
tempel-pendingTwo dots joined by a trace still thin as water; above them the sun is a third of the way along its arc
tempel-retapAn old, fading link drawn again with fresh ink from the blue dot
permission-deniedA camera viewfinder that frames only a closed ring of ink; the blue dot waits outside itPeople
orang-emptyThe blue dot alone; three empty rings mark where people not yet met would be
orang-fadingThe blue dot and a dot whose colour is paling, joined by a thin trace
orang-disconnectedTwo dots; the pull of ink from each stops before they meet
want-to-meetA thin line of ink arcs from the blue dot to a green dot, with one star at its top
meeting-bookThree rows like a page of a book: two dots with lines of ink, and one ring with a line that is still thin
birthdayA green dot with one small candle on top and touches of colour on either side
locationThe blue dot at the tip of a stem, standing on the ground with two circles around it
device-changedThe blue dot joined to a green dot; near it a ring that does not fit, and a small cluster of codeCircles, groups and events
circlesThe blue dot at the centre of an ink circle; four other dots sit on that circle
ask-circleThe blue dot at the centre sends three beaded pulls of ink to the dots on its circle
groupFive dots joined to one another in a ring
events-emptyAn arch of ink like the door of a room that is still empty; the blue dot outside it
members-onlyThree dots inside an arch whose door is barred; the blue dot outside
birth-pointsA green dot at the tip of a stem marks a place; around it three rings with small newly born dots inside, one of them blue
needs-20Twenty places in four rows: seven already hold a dot, the rest are still rings
calendar-emptyTwo rows of dates as pale washes; one is circled and empty, two others are marked with a dotUpdates and moments
kabar-emptyThe sun above one line of ink that is still empty; the blue dot sits at the end of that line
kabar-doneFour dots sit in a row on one line; at the end of the line the sun is half set, and a crescent moon has risen
kabar-composeA blue dot and a page with three lines of ink writing; the last line is unfinished and its end is still wet
pausedThe blue dot rests on the ground, under a pale crescent moon
expiredA pale wash where something used to be, under a day's arc inked all the way; the sun has reached its end
momen-newTwo dots joined under a night sky; in the middle of their link an apricot dot glows
momen-emptyTwo dots joined; in the middle of their link there is only an empty ring so far
momen-anniversaryThe circle of a year with one apricot dot at its top; at its centre two small dots that are joinedMessages and plans
chat-emptyTwo dots; between them three small rings, where messages not yet written would be
chat-lockedThree message beads inside a fully closed ring of ink, between two dots
media-emptyTwo photo frames, one over the other; the front one is still empty but for a single ring
voiceThe blue dot with ripples of ink widening towards another dot
callTwo dots sending ripples to each other that almost meet in the middle
plans-emptyTrails of brush touches rise from two dots towards one ring: a meeting place not yet decided
queuedMessage beads from the blue dot stop in front of one upright wash; above it the sun is halfway along its arc
hiddenThree dots whose middles are covered by one wide sweep of inkAccount
notifications-emptyA large blue dot with one empty ring at its shoulder, under a crescent moon
app-lockedThe blue dot inside a fully closed ring of ink; below it four places for digits, still empty
emergency-lockThe blue dot inside two closed rings; pulls of ink from three other dots stop before they arrive
guardiansThe blue dot at the centre, joined to three small dots around it
recoveryTwo dots draw ink towards a ring; inside it a small blue dot is alight again, while the sun is still on its way along its arc
devicesTwo phones painted as blocks of ink side by side, each holding the same blue dot, joined by one pull of ink
exportBeads fall from the blue dot into a bowl of ink that already holds three small dots
storageA wide frame holding several stacked dots; one small blue dot is coming in from aboveLimits and leaving
travel-modeThe blue dot at the top of a curving trail; on the ground, three small dots are covered by one sweep of ink
reportThree message beads between two dots; from the middle bead a trail rises to a card holding one bead and a line of writing, beside a third dot
blockedA blue dot in front of an upright bar of ink; its stroke stops at the bar, and two other dots are on the far side
group-leftThree dots joined to one another; the blue dot stands apart, and the pull of ink towards it stops halfway
device-revokedThe blue dot on the left; on the right a phone painted as a block of ink now holds only an empty ring, and the pull of ink towards it is cut off
delete-scheduledBeads of ink growing smaller from the blue dot towards a pale ring; above them the sun is past the middle of its arc
account-deletedAn empty ring and a faint blue trace where the blue dot used to be; pulls of ink from three other dots stop before they arrive
backupThe blue dot and its thin copy, shifted a little behind itGeneral states
emptyOne large empty ring, and a small blue dot outside it
doneThe blue dot alight: amber rays all round it and touches of colour above
loadingA small blue dot under a day's arc; the sun is past halfway
offlineTwo dots; the pull of ink between them disappears behind a wash of fog
errorA pull of ink from the blue dot breaks and splatters before it reaches a ring
search-emptyA trail of brush touches from the blue dot circles round searching, and ends at one empty ring
lockedTwo small dots inside a ring of ink closed all the way round; the stroke from the blue dot stops before it reaches the ring
update-requiredTouches of the brush climb from the blue dot to a ring that is alight above itSites
not-foundThree coloured dots joined by pulls of ink; the last pull runs dry before it reaches an empty ring
maintenanceThe link between two dots is being drawn again: half of it is ink already, the rest is still a thin trace
prelaunchThe sun half risen above one line; in the sky, three rings and thin traces mark a constellation not yet lit
status-okFour dots fully joined in a ring, with a small sun at its centre
status-degradedFour dots; three of their links are whole, the other is only a thin trace with a pull of ink cut short
status-outageFour dots; all their links are only thin traces, and every pull of ink stops before it arrives
downloadThe blue dot comes down a trail of brush touches towards a phone painted as a block of ink, where a ring waits for it
helpThe blue dot half sunk in pale waves; from above, a green dot pulls ink all the way to itIn code
#In code a picture is one import, by its name. On a site it follows the page’s scheme by itself; in the app it is told the scheme.
// patepang.com: follows the page's scheme through illustrations.css
import { NotFoundIllustration } from '@patepang/illustrations/react/NotFound';
<NotFoundIllustration />
// the app
import { OrangEmptyIllustration } from '@patepang/illustrations/native/OrangEmpty';
<OrangEmptyIllustration width={240} scheme={theme.scheme} />The package is for Patepang’s own products; the files are not offered here.
Before it is final
#Version 0.3 is being tested. Before it is final:
- It is installed in the app, whose states still draw a large icon today.
- Every picture is looked at on real phones, and its drawing speed is measured on a modest Android phone.
- Which picture goes with which screen, still a proposal, is agreed.
- Its license, still a draft, is reviewed by a lawyer.
The pictures do not move, and there is no mirrored set for right-to-left scripts.