Stamps are miniature artwork items that inform tales; they showcase locations, individuals, and moments by means of the meticulous meeting of typography, illustration, and images, all inside a tightly constrained format. We needed to pay homage to the craft of designing and accumulating stamps (philately) by bringing stamps on-line for a brand new viewers to take pleasure in.
After we began constructing the positioning, we knew we didn’t desire a common picture gallery. The undertaking was impressed by an actual stamp album, so the web site wanted to retain a few of that feeling too: calm, tactile, and made for inspection.
The primary circulation is easy. Flick thru a unfastened discipline of stamps, choose one to convey it into focus, and examine it with a loupe. You too can be taught extra about every stamp, and if you’re completed, you’ll be able to even ship us a message within the type of a postcard.
This text is a case research of how we made it: the story behind the undertaking, the design course of, the technical selections, and some of the interactions that give the positioning its character.
How the gathering began
by Marijana PavlinićÂ
The gathering began earlier than there was any web site in any respect. Throughout the lockdowns, I used to be looking for a handy private facet undertaking to assist me follow digital drawing. I needed a undertaking with a transparent thought, however sufficient room to discover totally different types.
On the time, I discovered a stamp album that had been handed down by means of my household from my grandpa, and the stamps inside it felt like the right supply of inspiration. His assortment was filled with surprising compositions, patterns, and typography, so I began inspecting and recreating them as vector drawings, not as actual copies, however as reinterpretations. The early ones had been monoline, and over time I launched texture and extra complicated typographic layouts as I realized new software program.
As the gathering grew, I realized rather a lot about digital drawing and philately. I had an thought of turning it into one thing extra, but it surely stayed that means for some time.
Virtually 5 years later, I got here again to it with my companion, and we began constructing the total expertise. The problem was not how one can present the recreated stamps, however how one can protect the sensation of the unique album.
- How can we present the connection between the unique stamps and the recreations?
- How can we ensure that we’re highlighting the unique stamp as properly?
- How can we make it really feel archival, enjoyable, and exploratory?
That turned our filter: does this really feel like a part of a stamp album, or only a web site displaying photographs?
The primary interactions
Most of our time was spent on two specific interactions: the glass loupe and the suggestions postcard. The entire portfolio is open supply on GitHub, so we’ll preserve this centered simply on the principle concepts.
Constructing the loupe
As soon as a stamp is chosen, the loupe turns into obtainable. That is the place the expertise shifts from shopping to inspection.
A standard zoom impact would have labored, but it surely felt too flat for this undertaking. We needed it to really feel extra like an actual object sitting on high of the stamp: a small glass device with a body, edge distortion, and a zoom management.
The loupe consists roughly as follows:
<Loupe>
<Lens>
<Canvas>
<LensScene>
<ScreenQuad>
<lensMaterial />
</ScreenQuad>
</LensScene>
</Canvas>
</Lens>
<Dial>
<enter sort="vary" />
<svg />
</Dial>
</Loupe>Reconstructing the scene
The loupe doesn’t zoom the unique picture immediately, and it doesn’t seize the dwell DOM.
As a substitute, it reconstructs the centered scene in an offscreen canvas. It attracts the identical background grid, masses the bigger stamp picture when obtainable, provides the shadow, and renders the centered stamp within the middle. Utilizing smaller photographs for the draggable stamps improved efficiency, whereas utilizing the bigger picture just for the loupe allowed us so as to add extra element to the zoomed view, such because the paper grain texture.
That canvas is then handed to the lens shader as a texture. This fashion, the loupe magnifies the composed stamp scene fairly than simply the unique picture file.
Creating the glass impact
The shader samples the feel in another way throughout the lens.
The middle stays clearer, whereas the perimeters warp extra. The crimson, inexperienced, and blue channels are sampled with barely totally different offsets, which creates a delicate chromatic aberration impact across the rim.
That coloration separation, along with rim shading and highlights, makes the loupe really feel extra like glass and fewer like a round crop.
The shader just isn’t attempting to be bodily correct. It simply must really feel plausible in movement, particularly across the fringe of the lens.
Interplay and accessibility
Dragging is dealt with with a movement drag controller. Because the loupe strikes, its middle place is transformed into native coordinates and handed to the shader as uniforms. The shader makes use of that place to find out which a part of the canvas texture ought to seem beneath the lens. It will also be moved with the keyboard. The arrow keys transfer it across the chosen stamp, and holding Shift strikes it sooner.
The visible body is an SVG. It offers the loupe its form, edge marks, highlights, inscription, and small dial particulars.
The zoom knob is backed by a component, giving it native keyboard conduct.
Accessibility was vital to us as a result of the loupe isn’t just a visible impact; it’s a part of the best way you examine the stamp.
Turning suggestions right into a postcard
The suggestions dialog began with a easy thought: if the undertaking is about stamps, suggestions ought to really feel like one thing you ship again.
The postcard has two sides. The entrance includes a customized illustration, and the again comprises the shape. You flip it over to write down suggestions, identical to turning over an actual postcard. One early thought was to make use of the at present chosen stamp on the shape, however later Marijana created a separate stamp for the postcard, that includes the 2 of us and impressed by the primary stamp ever, the Penny Black.
We imagined the particular person writing the suggestions and tried to seize them within the second of writing it. For this reason the illustration modifications based mostly on display screen dimension: on cellular, the particular person is holding a telephone; on desktop, they’re typing on a keyboard.
The postcard is constructed as an accessible Radix dialog. The customized illustration, flip animation, and shader transition sit on high of that basis. The element consists roughly as follows:
<GenieDialog>
<GenieDialogOverlay>
<GenieBackdrop />
</GenieDialogOverlay>
<GenieDialogContent>
<FlipCard>
<FlipCardFront>
<Picture />
</FlipCardFront>
<FlipCardBack>
<FeedbackForm/>
</FlipCardBack>
</FlipCard>
{...}
</GenieDialogContent>
<GenieDialogTrigger />
</GenieDialog>This fashion, the dialog nonetheless retains the anticipated accessibility options: focus administration, keyboard assist, and escape to shut. The visible layer will be playful, however the underlying interplay stays acquainted.
Constructing the genie impact
We didn’t select the genie impact as a result of it was immediately associated to stamps. We principally needed to strive it as a result of it felt enjoyable. Nevertheless it ended up becoming the undertaking properly: the postcard looks like a small paper object being pulled out of the web page, stuffed in, and despatched again.
The vital technical element is that the true dialog just isn’t being bent within the DOM. As a substitute, the animation makes use of a short lived shader layer.
When the dialog opens, the true postcard is mounted however saved hidden. We seize the seen facet of the postcard with snapDOM, draw that seize into an overlay canvas, flip it right into a WebGL texture, and animate that texture with the shader. When the animation finishes, we cover the shader layer and reveal the true dialog.
When closing, we do the reverse. We seize the present facet of the postcard, cover the true dialog, animate the shader texture again out, after which unmount the dialog.
That additionally means the shut animation at all times makes use of the present state. If the customer is viewing the illustration facet, that facet will get captured. If they’ve flipped to the shape facet, the shape facet will get captured.
Particulars that made it really feel like an album
As soon as the principle interactions labored, it was time to sweat the main points.
The gathering tabs seem like binder dividers. The metadata is handled like a catalog card, itemizing the nation, challenge date, catalog codes, unique stamp designer, and reference stamp. It makes use of a monospaced font and a typewriter-style textual content animation, which provides it an archival really feel.
There are small collector references all through. The weather on the suitable facet resemble a Leuchtturm album utilized by stamp and coin collectors. Many of the grid controls and empty states use Marijana’s handwriting, which makes them really feel extra like annotations in an album than customary UI controls.
The suggestions postcard includes a stamp impressed by the Penny Black. The loupe has small edge marks, highlights, and an inscription, so it feels extra like an object from the identical world than a generic zoom management. The colour palette and grain texture work collectively to imitate the look of actual paper.
All these particulars assist make the album idea really feel extra full.
Messages despatched again
One of many nicest elements of launching the positioning was studying the messages individuals despatched by means of the postcard dialog.
That was a candy reminder of why we take pleasure in sharing our work on-line. You set one thing private on the market, and typically it reaches individuals in methods you didn’t count on. It may well result in variety messages, conversations, new connections, and even alternatives.
For a undertaking about stamps and postcards, that felt particularly becoming. We made a small digital expertise about accumulating and sending, and folks despatched one thing again.
Reflecting again
The undertaking turned a superb instance of why we take pleasure in making facet initiatives collectively.
As a result of we sit subsequent to one another, the loop (pun meant) between design and growth may be very brief. A visible thought can develop into a prototype rapidly. A technical limitation can develop into a brand new design course. A small interplay will be examined, modified, and polished with out turning it into a significant handoff.
Probably the most pleasant half was discovering locations the place the theme may form the interplay with out turning into too literal. Some concepts begin as experiments, however they nonetheless must earn their place. The loupe belonged immediately as a result of it matched the act of inspection. The genie animation began as one thing enjoyable to strive, however as soon as it was tied to the postcard, it felt far more at house.
In the long run, the illustration, interplay, accessibility, and shaders all needed to work collectively. None of them may carry the expertise alone.
