@@ -9,6 +9,7 @@ image ="https://media.urbit.org/site/posts/essays/sigils3.png"
11<!--  -->
11<!--  -->
12+
13One 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/).)
14One 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/).)
@@ -16,17 +17,17 @@ Your Urbit ID is meant to feel a bit like a secret code name. It doesn’t leak
17From 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).
18From 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).
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.
21There 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.
22There 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.
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.’
25In 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.
26In 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.
27## Background
28## Background
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.
31So we started by collecting influences.
32So we started by collecting influences.
@@ -90,17 +91,17 @@ We iterated through plenty of possibilities before landing on our final approach
91<br /><br />
92<br /><br />
93−
94+
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.
97<br /><br />
98<br /><br />
99−
100+
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.
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.
105## Closing in
106## Closing in
@@ -112,29 +113,33 @@ Thinking in terms of syllables greatly reduced the complexity of the problem, bu
113<br /><br />
114<br /><br />
115−
116+
117At 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.
118At 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.
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.
121<br /><br />
122<br /><br />
123−
124+
125Around 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.
126Around 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.
130+
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’.
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’.
129<br /><br />
134<br /><br />
131−
136+
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.
135−## Final Process
140+## Final process
137−
142+
139We 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.
144We 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.
@@ -142,13 +147,13 @@ We eventually added a rule system to find higher quality phoneme symbols — but
143<br /><br />
148<br /><br />
145−
150+
147The final step, using the tool we built, was to hand select individual phoneme symbols and create a complete index.
152The final step, using the tool we built, was to hand select individual phoneme symbols and create a complete index.
149<br /><br />
154<br /><br />
151−
156+
153This allowed us to start looking at possible combinations and selecting phoneme symbols based on their interplay with others.
158This allowed us to start looking at possible combinations and selecting phoneme symbols based on their interplay with others.
@@ -160,4 +165,6 @@ Once we had selected the final set, we went about compiling the `sigil-js` libra
161We 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.
166We 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.
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.
170+