For his school embedded systems assignment, Nalizyon made a request for me to design the user interface for his drink dispenser assignment. I accepted the task and concluded with this result.

### **Desktop**

The desktop web interface is equipped with a dashboard, a drink ordering system with a modal to switch the position of each drink, and a settings panel.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2F0QcURgGl7OPTD74EeHOD%2F87b82627-cec1-42f6-bd66-9f48c67c5e33.png?alt=media&token=94c3bbb3-a04b-4cf5-bf9e-3358dbff40ba","id":"87b82627-cec1-42f6-bd66-9f48c67c5e33","width":1728,"height":1117,"filename":"Dashboard.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2F0QcURgGl7OPTD74EeHOD%2F5446d500-7755-48f6-9ab7-ce6249ca15a0.png?alt=media&token=2dba32d2-be88-47d9-aaf7-05917ef1bfa7","id":"5446d500-7755-48f6-9ab7-ce6249ca15a0","width":1728,"height":1117,"filename":"Drinks.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2F0QcURgGl7OPTD74EeHOD%2Fffa3a896-127f-43ff-9886-afccbe627329.png?alt=media&token=986f2276-419e-4a36-b927-483c61d0671a","id":"ffa3a896-127f-43ff-9886-afccbe627329","width":1728,"height":1117,"filename":"Drinks - Modal.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2F0QcURgGl7OPTD74EeHOD%2Fd2dd9791-2a76-43c4-b30f-e0677303abe5.png?alt=media&token=984d438e-c0ef-4781-b394-ce9cfc0b8405","id":"d2dd9791-2a76-43c4-b30f-e0677303abe5","width":1738,"height":1117,"filename":"Settings.png","type":"image/png","caption":"","border":false}]}
```

### **Mobile**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2F0QcURgGl7OPTD74EeHOD%2F3b2d9da2-c287-4969-8c15-69acc89cb472.png?alt=media&token=0bddf223-5f16-4f86-8df3-11832c27182c","id":"3b2d9da2-c287-4969-8c15-69acc89cb472","width":856,"height":1852,"filename":"Phone - Dashboard.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2F0QcURgGl7OPTD74EeHOD%2Fe949b61e-795d-4e76-99fd-62be42f3650b.png?alt=media&token=1283e59f-518b-4e27-b0a5-b0ca6642d45c","id":"e949b61e-795d-4e76-99fd-62be42f3650b","width":856,"height":1852,"filename":"Phone - Drinks.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2F0QcURgGl7OPTD74EeHOD%2F53792491-71a4-4813-8a18-814d82822ede.png?alt=media&token=6eb88fbf-ead7-40f4-82ca-25c81d7367be","id":"53792491-71a4-4813-8a18-814d82822ede","width":856,"height":1852,"filename":"Phone - Settings.png","type":"image/png","caption":"","border":false}]}
```

Drink Despenser for Nalizyon Catania

### During my years at San Andrea School I studied:

* Mathematics

* Physics

* Graphical Communication

* Science

* Robotics

* I.C.T

* Information Technology

* PSCD

* Art

* Environmental Studies

* Religious Education

* English Language

* English Literature

* Maltese Language

* Maltese Literature

* Spanish

* Italian

* French

### In my last year of secondary school I obtained the following O'Levels:

Level 3 in:

1. Mathematics

2. Physics

3. Graphical Communication

4. Information Technology

5. English Language

6. English Literature

7. Maltese

San Andrea School

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2Fg5jEUNIzNPGEZC8ia3Kx%2F5300fe30-21a4-4aa0-a255-f9f4e92e2c0e.png?alt=media&token=925d198a-1da9-427d-83d9-e8186258530e","id":"5300fe30-21a4-4aa0-a255-f9f4e92e2c0e","width":1600,"height":960,"filename":"Untitled.png","type":"image/png","caption":"","border":false}]}
```

## **What?**

When creating products that employ user profile pictures, it's hard to avoid using images of real people because it's so easy to do and doesn't really matter in the long run, though I see using stock photos of real people makes the product look very serious and strict.

Discord, on the other hand, took a more playful and inventive approach, creating their own graphics to show profile pictures on [their website](https://discord.com/).

Personally, I've become fond of Discord's illustrations due to their wonderful use of colour, so I set out to create Discord-related profile images that can be utilized in day-to-day projects to give a little more pop to your designs.

## **What I've done.**

After crawling through every one of Discord's illustrations, I've compiled a small list of profile pictures that contain each and every unique character from the vectorized illustrations from Discord's website.

There are already over 140 different characters to choose from, each with its own name, unique shape, colour scheme, and personality.

## **Future Plans.**

*~~At the moment, Discord only has about 53 characters that can be used as profile photos (due to their size and overall personification-nes).~~*

As Discord's website continues to grow and add new features, I'll be hunting for more potential profile images.

### **[Link To Project](https://www.figma.com/community/file/1047867725675331127)**

### The Profile Pictures Themselves:

```cv
figma
{"url":"https://www.figma.com/file/J2NmFkN4hxlkNwfUtiWIBj/🖼️-Discord-Profile-Pictures?node-id=0%3A1"}
```

Discord Profile Pictures for Designers

I found a way to make Apple's "Picker Wheel", fully editable in Figma, with strategically rotated frames and opposingly rotated nested text.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fed4f859a-ca98-45b7-b5d9-aa2bcf4f6d48.mp4?alt=media&token=b80e103e-5e0b-4b20-81f4-47f644f4ce34","id":"ed4f859a-ca98-45b7-b5d9-aa2bcf4f6d48","width":2236,"height":1258,"filename":"008602.mp4","type":"video/mp4","caption":"","border":false}]}
```

I got this idea after [@eugurlu\_](https://twitter.com/eugurlu_) came to me to show me a sneak peek of a slide from his upcoming presentation for [@cladeclub](https://twitter.com/cladeclub).

After being in awe of the idea, I was then disappointed to see how it was implemented, being a ruse made by flattened text, squashed down, to give the perception of rotation. Rendering the text uneditable.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F0fd1e4e2-2dd2-4466-8be7-51b61e930997.jpg?alt=media&token=c9d859be-5d07-4406-9014-fa751f5407cc","id":"0fd1e4e2-2dd2-4466-8be7-51b61e930997","width":2235,"height":1256,"filename":"GLkSyzPW4AAJtdd.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fca7535d1-838a-4cbc-9d43-a74fb9897ee7.jpg?alt=media&token=66c03609-c60c-4e49-8ad5-8e9bd801e9ce","id":"ca7535d1-838a-4cbc-9d43-a74fb9897ee7","width":2235,"height":1256,"filename":"GLkTGoNW4AAKVar.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Since I'm crazy and want everything to be non-destructive and have a semi-reproducible method of creation for such a cool effect, I wanted to take a snag at creating something that I could reuse without having to flatten text every time I wanted to create a new string.

---

First, we need to find how a "wheel" actually *feels* perceived from the front. While we can't get infinite angles of z rotation in Figma, we can get close. So after some iterating, I found what seems to be a good enough formula of sizes for our wheel which is split into 7 segments.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Faae7adf8-35c2-4a27-8a4c-690149091b9d.jpg?alt=media&token=91664552-9bfc-415c-b534-eea78d6dd073","id":"aae7adf8-35c2-4a27-8a4c-690149091b9d","width":2235,"height":1256,"filename":"GLkUP0TX0AIxBKN.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Next, we need to get the text to *look* like its that tall, from a front perspective. I'll be doing the top three and middle first just because we can then easily duplicate the top three for the bottom ones. Do note that these text elements ***are wrapped in frames.*** That will be important later.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Ffa96f42a-30ad-4ce4-ba9b-5bc40456c639.jpg?alt=media&token=5eae333f-d685-4d98-aa32-40131e159647","id":"fa96f42a-30ad-4ce4-ba9b-5bc40456c639","width":2235,"height":1256,"filename":"GLkUh-9XAAAHsKg.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Using "Skew It, Let's Do It", I granularly matched the heights of the text by adjusting the X rotation of the text's parent to a **negative** number that was visually accurate. I'm using "Skew It, Let's Do It" because its the only plugin out of \~9 that allow you to use the arrow keys to adjust the value, while also validating decimal points.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F6ab16f4f-8ffe-422b-9aa4-e78f1ebae9ac.jpg?alt=media&token=78c916c3-43dc-464a-bfef-2f8e46552fa7","id":"6ab16f4f-8ffe-422b-9aa4-e78f1ebae9ac","width":2235,"height":1256,"filename":"GLkUvj0XAAAWM_9.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F7c215278-3df6-4d51-85ca-30b6419a901a.jpg?alt=media&token=7cd79856-7d50-4881-8bb7-57d02d4dc878","id":"7c215278-3df6-4d51-85ca-30b6419a901a","width":2235,"height":1258,"filename":"GLkWVEyWsAAbNuK.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Here's the last "hard" part. Making the text look straight. By selecting the text inside the frame, and giving it a **positive** rotation on the X axis, you can make the text look straight. I used a regular version of each string and overlayed them to try match accurately.

There is no "perfect" way to mathematically get the angle needed, at least not one that I thought of within the 30 minutes it took to make this, so it's the only "eye-ball it" part of this method.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F273fb05c-5890-4081-891f-235370557f6d.jpg?alt=media&token=54e3f9cc-0461-4314-a464-e9ce118ea727","id":"273fb05c-5890-4081-891f-235370557f6d","width":2235,"height":1258,"filename":"GLkW5Z7XwAAcKFX.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Ffb934bde-83da-46bd-b08d-56d2d88c28b3.jpg?alt=media&token=4c317cb5-48ef-46db-84d5-15e30f198f3f","id":"fb934bde-83da-46bd-b08d-56d2d88c28b3","width":2235,"height":1258,"filename":"GLkXu_oXcAAYQt6.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Next is duplication. Just duplicate the top three elements, change the text, and centre for alignment with the soon to come full sentence.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fb4ca01ff-0cae-4d50-9d33-fe34c3d02d7e.jpg?alt=media&token=1338bfba-911b-48a5-8fb1-8c5e4bd1a048","id":"b4ca01ff-0cae-4d50-9d33-fe34c3d02d7e","width":2235,"height":1258,"filename":"GLkYF8EWEAEO-OR.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Lastly is alignment. As you can see, the start of each text element isn't actually aligned to the following item from the left side. There's no "automatic way" to have this adjusted, as it depends on the angles you use in the tiling process. So I made one.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F5c48576c-1d95-42f4-b793-c1f2d177e562.jpg?alt=media&token=0e144e74-d629-4f70-a358-6423242713f9","id":"5c48576c-1d95-42f4-b793-c1f2d177e562","width":2235,"height":1258,"filename":"GLkYcYLWsAApRWJ.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Using [@diagram](https://twitter.com/diagram)'s Automator Plugin, I've created an easy to understand script that gets the text within each of these options, retrieves its width, and frames the parent frame to that fixed width, allowing each option to be sized based on the contents, removing any extra padding.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F9105ba3d-df83-49bc-a236-1a413dbad7c5.jpg?alt=media&token=cf7d9f74-78a7-41a6-95d9-a9dc5d77feee","id":"9105ba3d-df83-49bc-a236-1a413dbad7c5","width":1002,"height":1032,"filename":"GLkZTYWXYAAs6yR.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Using said automation, you get the final result, text that's accurate in width and skewed in height! You can then add any effects you'd like, like a mask to make it fade to the background, adjust the gap between to taste, or anything else :)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fd88ac647-17dd-4cf5-8de4-b93dc2a31c54.mp4?alt=media&token=6de1aee1-82af-4627-8456-2c136f40eadb","id":"d88ac647-17dd-4cf5-8de4-b93dc2a31c54","width":2236,"height":1258,"filename":"008621.mp4","type":"video/mp4","caption":"","border":false}]}
```

[Inspect it here!!!!](https://www.figma.com/community/file/1363321758221736411/apple-picker-wheel)

How to make Apple’s Apple Picker Wheel in Figma

You ever see that scene, be in a TV show or a movie, where a baby falls, and then the mother picks up the child and holds them close and pets them on the head while telling them “it’s ok, it's ok. You're ok, it's fine, you're ok, it's ok”, even if the baby has no concept of what she's saying, what being ok means, or what she's trying to do.

Even if she's just doing it to get the child to stop crying or if it's to calm the baby down, since it's only a minor accident and the baby has no clue as to how easy it would be to fix. She does it to somewhat calm the baby down, because why would anyone want their close ones to feel pain, or to suffer, or to feel something they don't want to be feeling?

Now you might be asking where in going with this. I'm bringing this up because I've been doing that to myself for the past year. Not… not the petting part… the… the saying it's ok part. Specifically, the part where you say “it'll be ok”. Not, “it's fine”, not “it’s ok”. It'll. It will. It will be ok.

“It will”, meaning not right now, not in a little bit, but later. Later, it will be ok. Specifically, I like to say, in a year.

“In a year it'll be ok”, “you'll be fine in a year”, “it'll be fine in a year”. In a year. Not a week, not a month, but a year. A year is a good time between now and forever. A year is a time where many people can visualise what they'll be doing in. People trust one year so much that they make plans, make plans for what they'll be doing in a year; “what are we gonna do next Christmas”, “what are we gonna dress up as for next year's Halloween”, “I can't wait for our one year anniversary”.

Personally, I can't fathom what I'll be doing in a year. How do I know? I can't remember what I did last year. I couldn't tell you what I did for the entirety of last year, unless it was some big thing that lasted a long time, I wouldn't be able to tell you what I did, who I was with, or what I do with who. So if I can't remember what I did last year, I won't be able to remember what I did last November

So I think a year is the perfect amount of time to think forward to. It'll be ok, in a year. I won't remember this, in a year. All of this will be gone, in a year. And even if it doesn't, even if something worse happens in a year, even if I'm poor, homeless, no job, no friends. I still think it'll be better than it is now. Because I won't be thinking about this. I'll have other things to worry about. And whaddya know, maybe I'll be telling myself it'll be ok in a year, next year.

Maybe next year this little issue will be one of those thoughts that you keep in little boxes in the attic of your brain. You know, those little boxes that open themselves up right before you go to sleep, or right when you get in the shower. The little boxes that contain all the embarrassing things you did in class, or the times you got rejected, or the time you did something stupid in public. You know those little ones.

Some of them are hard to get into, to get the thoughts in their boxes. One of them took me three years to get in, but it happens. Even if it does take a while to get into its box, it does go there sometimes, like an Airbnb or something, and occasionally comes out when you look at something on the internet. But after a while, they stay there.

Or maybe it does get better, as it normally does. Maybe I'll forget about what happened and not even think about this. Either way, it works.

It's better to worry about a future that doesn't exist, than a future that doesn't change.

---

Well then the issue is if it doesn't change. If the same problem continues to bother me for a year, then that's a problem. And here's my little analogy for that:

Life is like a game, you've probably heard that before, but it's so much more than that. Even if you're awake, if you're asleep, you're still playing. Playing a game you can't get spoiled. Playing a game, trying to reach a goal of which you don't know the contents of.

Along the way, you get to face these little challenges, important or not, and you go through them one by one, while trying to get to the end of the game.

Unlike many games, this one is special. Most games let you skip certain challenges if they're not related to the story, unneeded for completion. The game will let you skip these, but not let you skip the ones that are important to the progression of the main quest.

Sadly, the game we play doesn't tell you which ones are important and which aren't. So you're there stuck trying to skip the ones you think aren't important, while also trying to accept the ones that you think are. All the way until you reach a certain section of the game, where you can't progress until you've completed a certain challenge.

Now, this is where the funny part comes in. This whole time, the most hilarious bit, the funny part, the kicker, the punchline, the hysterical part.

You've been playing a game, that you made, for yourself. You're the one telling yourself that you can't continue. This one issue, no matter how big or small, is stopping you, because you can't get over it.

It's not your fault, not at all, you're not to blame for the problems that you face. But nonetheless, you're still playing. You're still there unable to beat it. You're just there twiddling your thumbs being sad or heartbroken or depressed with the problem that you face, that doesn't let you progress.

---

So to go back. Yea. It'll be ok. It'll be fine. In a year.

We hope.

---