Design Systems

Lately I’ve been thinking about design systems.

  1. Creating
  2. Communicating
  3. Implementing
  4. Applying
  5. Extending

1. Creating

How can a design system be created to solve a specific problem? I find one-size-fits-all systems like Google’s Material Design too restrictive and too ambiguous at the same time. How can we develop a solution to the problem at hand?

  1. Define the problem
  2. Use our brains to solve it
    • Research
    • Test
    • Think real hard

2. Communicating

Assuming the person designing the system is not the person to implement it, how can the system be communicated completely?

3. Implementing

How can the system be implemented? What assumptions are made, and how are they documented? Who is the user of the design system?

4. Applying

How can the system be applied? How can it provide evidence of itself, its intended usage, and ultimately solve the problem it was created to solve? How can it make people’s lives easier?

5. Extending

How can the design system be modified and used in ways that were not originally intended? How can the intentions behind the system be encoded for future designers?

I made a dice rolling app!

There are two things on my mind at all times: D&D, and web development. Sometimes I get ideas for marrying the two. Like last year, when I made a D&D reference tool. And last weekend, when I finally made a web app for rolling dice.

I’d designed the app in March. But last weekend, I finally got my stuff together and made it.

What it even does

You use it to… roll dice. Fake dice. Digital dice.

You can click on one of the seven polyhedrals to roll it. Or type in a dice expression and press Roll (or enter) to roll that too! There are many, many options you can use in your expression.

You can do anything from 1d20 (roll a 20-sided die) to 4d6d1 (roll 4 6-sided dice, drop the lowest one, then add the rest together). All the options are documented on the app’s About page — accessible by clicking on the little question mark in the bottom right corner of the screen.

Put it on your telephone!

The site is responsive (a fancy way of saying it looks good on a mobile device). Also — and I think this is super cool — you can add the page to your home screen and it behaves like a native app.

I did it on iOS through Safari, and I imagine you can do something similar in Android as well. Here are some instructions I found.. They’re from 2014, but probably still relevant?

How you even make something like this

Step one: be a nerd.

Actually though, the first thing I did was draw some wireframes in my notebook.

My initial plan was to write a program that would parse dice expressions (like 3d6+1d4+2) and generate random numbers. But then I thought that would be hard. So I checked out npm for a library that would do that for me. I found some promising packages. initially used dice-typescript but it didn’t handle invalid input very gracefully (or at all). So I switched to rolldice instead, and modified it a bit to get the verbose roll breakdown I wanted.

Oh yeah, another important thing was to design the UI. I drew some dice in Illustrator, which was weirdly a thing I’d done before. Then I designed the rest of the interface in Adobe XD, following my initial sketch pretty closely.

I planned on using Angular and hosting the final thing on github pages, so… I did. I’m all about that.

That means the project is on github! There’s no readme and I’ll probably never update it, but if you have suggestions for improvement or anything, let me know.