made using Leaflet

Magic paper - designing for collage

!! early draft !!

I've noticed a design pattern in a few apps I've been using. I'm calling it magic paper. It's both aesthetic and formal.

Paper as a common metaphor in tech is nothing new.

But there have also been many missing features that we get with paper.

ease of drawing

separate tools and medium

freedom to fold, snip, move around

Paper doesn't have to worry about being "compatible". The medium is distinct from the content, but once they're joined it's usually permanent - that piece of media has all the firmware built in.

Aesthetics

Leaflet got me started thinking about this. The drop shadow on the leaflet makes it feel like a tangible scrap of paper, and the size makes it feel like it exists self-containedly within the editing environment. This leaflet was meant to travel!


UI also follows the drop shadow. Everything feels like it could be a paper cutout, making up a whole collage.


Also.... it is not responsive. Or at least, responsiveness is a last resort. A leaflet feels the same on a mobile or desktop. Not just the content. The document itself feels the same.


mmm.page lets websters create a page while skirting responsiveness by just stretching as needed - nothing actually moves. See this page for an example. (imagine the boxes have drop shadows)


I'm also so so motivated by the idea of web stickers. Something about being able to make a one-off little shape that can be reused in many places feels so exciting to me.


Here's sort of a direction I'm going:

The card is a discrete component - it could be lifted and placed just about anywhere a card like this could belong. It's also just a PNG, so it's about as easy and compatible as anything could be!


The first thing I want to call attention to about this card is that each element is sort of discrete - the cover has a little bed, the title/author are on a scrap, and even my little profile picture has some identity. There may be a number of reasons to sort these differently, but for now it looks alright and we get the idea.

The second thing is that this card was very easy to make. I used Excalidraw and it was about as easy as digital drawing gets. It could be super easy to make and share things like this... paired with some internet capabilities like mmm.page has, I really think that this could make internet software super duper easy to compose. See this page for an idea of what I mean on that front.

The third thing, that really makes this unfold for me is that you can copy



made using Leaflet