@@ -9,6 +9,7 @@ image ="https://media.urbit.org/site/posts/essays/sigils3.png"
99+++
1010
1111<!--  -->
12+
1213
1314One of the basic building blocks of Urbit is Urbit ID, our naming and identity system. Your Urbit ID is a short, recognizable name that’s also a network address for your Urbit OS instance. (You can find a complete, high level description of Urbit ID [here](https://urbit.org/understanding-urbit/urbit-id/).)
1415
@@ -16,17 +17,17 @@ Your Urbit ID is meant to feel a bit like a secret code name. It doesn’t leak
1617
1718From a design standpoint, some of this is accomplished simply by having a system for the names themselves. Under the hood, Urbit IDs are actually just numbers. There has always been an algorithm for turning these numbers into pronounceable names like `~tacryt-socryp` (13,304,832) or `~litzod` (1,280) or `~nes` (212).
1819
19−While the names are great, they’re not quite enough. Especially in a rich interface. Each Urbit ID really needed some form of visual representation, image, or crest. A digital identity needs to be something you can really attach to, both yours and those that belong to your friends.
20+While the names are great, they’re not quite enough, especially in a rich interface. Each Urbit ID really needed some form of visual representation, image, or crest. A digital identity needs to be something you can really attach to, both yours and those that belong to your friends.
2021
2122There are 2<sup>32</sup> or 4.2 billion unique Urbit IDs. Clearly there’s no way that we were going to do this by hand. And purely algorithmic solutions can often produce disappointing, undifferentiated output.
2223
23−Regardless, we set out to tackle this problem. In the end, every Urbit ID got its very own ‘sigil.’
24+Regardless, we set out to tackle this problem. By the end of this process, every Urbit ID got its very own ‘sigil.’
2425
2526In this post we’ll walk through how we thought about the problem, iterated through possible solutions, and the toolchain we used to arrive at the final result.
2627
2728## Background
2829
29−What are the basic primitives of visual language? There aren’t any completely authoritative answers to this question, of course. But we knew, at first, that to produce such a large number of visually distinct items we’d need some way to reason about form that’s closer to letterforms.
30+What are the basic primitives of a visual language? There aren’t any completely authoritative answers to this question, of course. But we knew that to produce such a large number of visually distinct items we’d need some way to reason about form that’s closer to letterforms.
3031
3132So we started by collecting influences.
3233
@@ -68,7 +69,7 @@ You can see the whole collection of our visual research [here](https://www.are.n
6869
6970Ultimately, we didn’t specifically draw on any of these influences very consciously. The goal of visual research is to get a sense of the territory, what has been tried, and what works. We think these threads of prior work are evident in the final result — you can *feel* them, but it’s tough to point to them individually.
7071
71−## What’s in a name?
72+## What’s in a Name?
7273
7374> *“Lev’s sigil appeared, strobing, as Netherton was getting out of the cab in Henrietta Street. “Yes?” Netherton asked.”*
7475>
@@ -82,7 +83,7 @@ Sigil won, ultimately, because of the way that it’s personified in William Gib
8283
8384While we can’t point to any specific parts of our visual research that reappear directly, sigil is lovingly borrowed.
8485
85−## Experiments + iterations
86+## Experiments + Iterations
8687
8788So, how did we actually end up making these things?
8889
@@ -90,17 +91,17 @@ We iterated through plenty of possibilities before landing on our final approach
9091
9192<br /><br />
9293
93−
94+
9495
95−The first attempt was a series of images in the style of Karel Martens. Overall this technique was just too cluttered and difficult to parameterize in a predictable way. We kept iterating.
96+The first attempt was a series of images in the style of Karel Martens. Overall this technique was just too cluttered and sometimes difficult to parameterize in a predictable way. We kept iterating.
9697
9798<br /><br />
9899
99−
100+
100101
101−Just like the previous example, the main idea was that we could take a set of geometric primitives and combine them, but alter their appearance along a set of parameters, like color, rotation, and size.
102+Just like the previous example, the main idea was that we could take a set of geometric primitives, combine them, then alter their appearance along a set of parameters, like color, rotation, and size.
102103
103−But also just like the previous attempt, the technique of overlapping symbols made the images too difficult to read and differentiate. We wanted to create sigils that were not just great to look at, but visually ordered. Since overlapping elements didn’t seem to quite hit the mark, on we went.
104+But also just like the previous attempt, the technique of overlapping symbols made the images too difficult to read and differentiate. We wanted to create sigils that were not only great to look at, but visually ordered. Since overlapping elements didn’t seem to quite hit the mark, on we went.
104105
105106## Closing in
106107
@@ -112,29 +113,33 @@ Thinking in terms of syllables greatly reduced the complexity of the problem, bu
112113
113114<br /><br />
114115
115−
116+
116117
117118At first, we thought about using a 4 x 4 tile grid, as shown here. These designs were tricky to implement because of the detailed lines and arcs spanning across individual tiles. In order to generate a result that matched these mockups, a program would have to generate a data model that knew about which tiles touched which other tiles.
118119
119−We felt this was too complicated and had an unknown performance profile. Plus, they proposed a deterministic color scheme and we felt strongly that color is personal, not to mention hard. In the end we thought it better to create something that had the potential for user customization.
120+We felt this was too complicated and had an unknown performance profile. Plus, they proposed a deterministic color scheme and we felt strongly that color is personal, not to mention hard to parameterize. In the end we thought it better to create something that had the potential for user customization.
120121
121122<br /><br />
122123
123−
124+
124125
125126Around this stage, we were thinking a lot about how architectural plans aren’t unduly constrained by the fact that they’re only one color. We had a feeling we could make the grid smaller and assign details to the tiles individually.
126127
127−So, we scaled it down to a 2 x 2 grid and stuck with it. It’s simple to implement, visually unique, consistent, and the color scheme is black and white so users can customize their sigil. Not a bad start. Now all we had to do was manually draw 512 unique but consistent individual ‘phonemes’.
128+<br /><br />
129+
130+
131+
132+So, we scaled it down to a 2 x 2 grid and stuck with it. It’s simple to implement, visually unique, consistent, and the color scheme is black and white, leaving room for user customization. We felt we had reached a semblance of a final result. Now all we had to do was manually draw 512 unique but consistent individual ‘phonemes’.
128133
129134<br /><br />
130135
131−
136+
132137
133−As it turns out, drawing 512 consistent, abstract elements by hand isn’t easy. We had to strike a balance between authorship and automation — we wanted each tile to look well-made, but not too authored. To do so, we turned to Figma’s web API which helped us design in SVG but iterate programmatically.
138+As it turns out, drawing 512 consistent, abstract elements by hand isn’t easy. We had to strike a balance between authorship and automation — we wanted each tile to look well-made, but not too authored. To do so, we took advantage of Figma’s web API which helped us design in SVG but iterate programmatically.
134139
135140## Final Process
136141
137−
142+
138143
139144We took a look at our hand drawn mockups and drew each individual visual building block of the tiles separately. Then we loaded the SVG elements into a script that programmatically combined them to create trillions of layered symbols. This way, we were able to easily select candidate phoneme symbols that worked visually.
140145
@@ -142,7 +147,7 @@ We eventually added a rule system to find higher quality phoneme symbols — but
142147
143148<br /><br />
144149
145−
150+
146151
147152The final step, using the tool we built, was to hand select individual phoneme symbols and create a complete index.
148153
@@ -160,4 +165,6 @@ Once we had selected the final set, we went about compiling the `sigil-js` libra
160165
161166We think sigils are pretty successful. They look nice in our native Urbit interfaces, people have made them into shirts and posters and cards, even laser-cut them to make stamps.
162167
163−Urbit ID and the sigils are components of Urbit that are totally separate from the OS — you can use them on their own and potentially even extend their functionality. We’re happy with what we’ve done with them so far, and hope that people will experiment with what’s possible with this naming and identity system as time goes on.
168+Urbit ID and the sigils are components of Urbit that are totally separate from the OS — you can use them on their own and potentially even extend their functionality. We’re happy with what we’ve done with them so far, and hope that people will experiment with what’s possible with this naming and identity system.
169+
170+