I Redesigned Apps to Look Like Their NAMES

You ever think why Blender is called Blender? They say it's taken from the name of a song, but I'm not buying it. If I search for a blender, Blender comes up. It's clearly a blender. Blending the model with the textures and stuff. That's got to be it. So, instead of this, why doesn't it look like a blender? I'm talking about putting the whole workspace in a cylinder shaped glass like a real blender. Well, cubic in this case. Then, we should make sure nothing stays inside the blender because we don't want this to happen. So, let's bring them down here on the Blender base. First, the toolbar items come down in the shape of buttons. Then, we bring out everything that you can toggle like snapping or gizmo, and we turn them into, you guessed it, switches. Another important option is the viewport shading with options like wireframe or material view. Yeah, they do look like toggles, but they're not. So, let's bring them down and turn them all into one big slider that you can move through. Finally, for the view modes, edit, object, pose, or others, we will turn them into one dial button. But that's not all. Are we just going to ignore all the stuff over here and on this side? Let's expand the top of the blender to have some extra options for the top bar and turn the outliner into measuring lines on this side of the glass. And do the same for properties on the other side. They could each open in a little menu. I'm so excited to actually use this now. But Jucks, Blender is all about shortcuts, not just UI. Well, yeah. And we can have both. Let me show you. I'm going to delete this cube. Click on add. Create a little ball. Make it a little smoother from the properties. Then shift D to duplicate, S to scale, and G to move it around. Then again add a sun. Press R and X to rotate it upwards on the X-axis. Switch to rendered view. Change the color and intensity from the properties and create a handy dandy render button. I mean blend button. Let's click on it and wait for it to blend. And yes, I did steal this animation from my own Blender. And it's done. Taa. What? Okay, fine. It's not realistic, but now it's an actual Blender and it's fun. And you know what? I'm going to do this to other apps now. Actually, this cloud reminds me of another app. SoundCloud can't get any simpler than that. It describes where I am when I'm listening to music on it. Wait, or maybe they sound on the cloud, as in the internet. Hm. Well, it doesn't matter. We're going to do our own thing, which is making a cloud with a sound. First, I have to choose a cloud type. I made a bunch of options in Blender, going from cartoonish to realistic. I'm honestly okay with all of them on their own, but the realistic ones are too random and too crowded for UI. This one looks uncanny and this is way too unrealistic. Something cartoony like this is just the perfect middle ground. We got to put the song UI somewhere on the cloud. First goes the cover art. We can add a mask on it and then blur the mask to get this faded look. Add the song title and artist name and a little cloudy icon. Now, here's a cool idea. What if the cloud shape actually matched the waveform? This way, there would be so much variation and then I can put them all in one screen so you could scroll up, scroll down, and listen to a song. for the search. What if you could do a quick hand gesture and clear the screen for the search box? The rest of the process should be pretty obvious. And this is exactly how I like my SoundCloud. The next app with an obnoxiously realistic name is yes, 7zip. I mean, why is it called 7zip? Let's see. So, in 2006, the creator said, "Now, I don't remember the reasons for such a name. It was in 1998. Maybe there was a thought that starting from seven allows it to be in first places and lists sorted by name." Hm. Maybe it also has to do with the 7z file format. But it doesn't matter because where is a seven? Hm. Where's the zip? We need a zipper. I have no idea how to design a functioning zipper, but let's see. I guess I need some references of how a zipper actually looks cuz I've never seen one. I actually never leave my room. Basically, just a bunch of rectangles moving from here to here. And all we got to do is line them up. Move one a little higher. And now animate every single one with a little delay. H. This is going to take some time. Okay, so far so good. The last detail is the zipper pull, which should just be a simple drawing. One zipper is looking nice, but what if there were seven? That's the whole point, right? You want to see seven zippers zipping up one by one, like a progress bar when something is being compressed, or unzipping all of them when you're extracting something. Of course, this only makes sense if you're extracting something large, but we don't question the name. We simply follow it. For example, I'm not going to ask why it's called steam. It just is. And we're going to redesign it as exactly that. Steam valves and pipes. First thing I'm going to do is change the background to a metallic color. Then I'm going to apply a metallic texture on it. I think the obvious next step is adding pipes. And I'm not trying to make the lighting too realistic here. Now this just looks like two lines. It's not really giving pipe. So what if I added a horizontal pipe and connected it with what are they called? I'm just going to try to imitate the lighting here. And considering the lighting is coming from this side, then this one should definitely look different. Then I'm going to make a large frame and style it kind of like a metallic sheet. Let's bolt it to the pipes. One, two, three, and four. It's still too flat, so let me make a rusty texture on it and a darker but like larger one to make it have some irregular depth here and there. The next obvious step is making the text more steampunky. So, let's change the font. Maybe this or this. Or this one. Yeah, I think that looks good. Then I want to make a metallic sign that's kind of pushed inward and bolted into the bigger frame. And that's the search box. I'll duplicate the same for the button, but flip the lighting so it looks like it's popping outward instead. And that's the menu bar. Down here, I think we could take the same formula and replace the featured sections background with a metal panel. And then create a bunch of bolts to imitate a riveted panel. Though, I want the bolts to be kind of random. So, let's delete a bunch here and there. And that looks good. Now, let's put the texture back on this panel, too. And place all the pictures and add all the text in our new font. For the corrosal control, instead of these soulless rectangles, we can use tiny gears. And finally, for the left and right buttons, I have an idea. What if we replace them with valves like the one on the valve logo? It's just a big hollow circle with a bunch more small circles around it and one in the middle. The idea is for the valve to turn and change the content here. Let's see if it works. Huh, not bad. We could do the same exact thing down here, too. Make three panels instead of one. Add in the pictures, the discounts, and the pipes and valves. Now, just so the background isn't empty, I'm going to add some cogs and gears, but like really faded. And I'm going to make them match each other. Like actually make them look like they're turning in sync. What else are we missing? All right, the steam. I don't know if I can make steam in Figma, but let's try just making a texture and adding a gradient so it's faded. No, that doesn't look right. I actually don't think this would work. We are probably going to have to get the steam from somewhere else. But what? You're telling me the radial gradient did that? Okay, that's that's crazy. But we welcome crazy. I swear it's always the random experiments. Let's just copy it here and there. And I think we're done. Here's a steamy hot steam store. Recently, I started using a great software called Obsidian for taking notes and writing scripts like this one and thought the name was too literal. So, I looked up the Y. Apparently, it's a metaphor. If your raw unstable thoughts are lava, then obsidian is well, obsidian. It is your crystallized and beautiful knowledge. And yes, it is a little related to Minecraft. Don't you just love it when names have a story behind them? Before reading the story, I would have probably just put an obsidian texture on the software. But what's the fun in that? Let's put Minecraft in it. If the empty page is lava, then every word you type down is obsidian. It has to be blocky, and every block has to have a fixed size. So, as you type each word, it would solidify one more block of lava. Is it just me or is this too wide? Let's make it a bit narrower. The lava looks okay, but it's too unrealistic. Like, why isn't it flowing? Let's try a gift to see if it will look better. That looks nice and all, but I don't like the scaling. It's kind of giving me a headache. Let me try to scale everything up a little. I mean, I know each text block is now not one full obsidian block, and it's a smaller part of it instead, but I honestly like it way better. Plus, now it's closer to the scale of a sign, so it's not all bad. The next step is finding a better font for this that matches the aesthetic. There's actually a really cool font called Mono that's perfect for this. It's pretty fun to type in this, but still it's so lifeless. What am I forgetting? Smoke, of course. Let's create some quick smoke and make it float upward as you make new obsidians. Uh, okay. Float downward. Yes. Yes. Yes. And we've got ourselves an obsidian made of obsidian. Speaking of elements and chemistry, I thought it'd be cool to make chrome or chromium look like, well, chromium. like literally the browser. You might ask where where am I going to work with this tiny bar? I don't know. This is a random idea. Okay, I could probably make it in Blender, but what's the challenge in that? I'm trying to work on my lighting, too. So, this is the perfect opportunity. First of all, let's clean up the space and expand the edges because we need some volume. I'm going to give it a darker metallic color just for the base and get the tabs in address bar out of the way. And now, let's say the light is coming from this way. So, this side will be dark and this side bright. Just to exaggerate this side a bit more, I'm going to add more shiny lines. I'm going to do the same thing on the inside. Now, let's add the tabs back and make them a bit brighter. Now, we can add some lighting and shadows around one of them and make them look like it's the current tab. Finally, for the address bar, I think we can make it have more depth, but it's not just going inward. It also has a tiny bump. The final product might not look like actual Chromium, but guess what? It also doesn't look like Chromium. So, win-win anyway, right? The next app with a literal name is Brilliant because it's literally brilliant. And so are you. You're a problem solver. You want to get creative. Let me tell you how Brilliant, today's sponsor, helps you become a better problem solver and excel in computer science or math visually, interactively, on your own personalized path, and at your own pace. You're going to build genuine understanding of the subjects. Believe it or not, most of the stuff I've designed in this video are tied to math. And with Brilliant, you're going to work with math concepts hands-on until they click. And that is why I love the programming with functions course. It helped me bridge the gap between design and the technical aspect of things to achieve the ultimate creativity. And the best part is you can learn on Brilliant for free. Just go to brilliant.org/japost, scan this QR code, or click on the link in the description. You'll also get 20% off an annual premium subscription, which gives you unlimited daily access to everything on Brilliant. Our next apps are from mobile because I've paid too much attention to desktop. Let's start with the messaging app that has a creative and pretty generic name, Telegram. Seriously, Telegram's UI is clean and for the most part intuitive, but who cares about intuitiveness when it's the 1800s and you just need to tell your friend about the latest Steam Machine. I have a bunch of Telegrams here for reference. I think this format would perfectly match a messaging app, too. First goes the emblem. Something abstract like this would do. Then we got to add the name. The thing with this text right now is that it's too perfect. It needs to look a bit squiggly to show the print quality. Barely noticeable, but that's the point. Then we're going to add some lines around it and write the last scene status underneath. For the actual messages, I'm going to use monospaced font straight from a typewriter. I also just learned that Telegram messages were actually narrow strips of paper taped on the template. So, it's perfect that we can imitate that for our messages to distinguish them. Next, I'm going to add a random message box down here. It might look weird, but it gets the job done. This is just the message lock, and we actually need a homepage, too. So, let's go back and add a bunch of chats with different friends in the same style. On the top, I'm going to add the Telegram menu, and also make the chat categories more paperlike, as if you're actually filling them in. This still doesn't look good. It looks fine. If the animation showed a message being opened and wrapped up again, it would be way cooler. But again, this is too synthetic. What if you went frame by frame and made it look like an actual paper being folded? That is much better. One sec, let me see what my friend sent me. It's a Tik Tok. Wait, tick tock? Crazy that a doom scrolling app is literally named after the passage of time. But you don't really feel a passage of time on it. So why don't we add that in? Not just the sound, the actual time, too. like a giant clock on top of the screen that yells the time you spend watching Tik Tok in seconds, minutes, hours, days, months, and years. And not just plain and unprovoking like this. I mean, it has to match Tik Tok's branding, but on top of that, it's always there and it's always counting, reminding you of every second you spent on it. And yet, you stay there staring at the number going up. You should really get off of it. After all, there are better ways to spend your time, like by watching a movie. Have you watched Stranger Than Fiction? Great movie, by the way. Let me just add it to my movies and rate it on this little app called Letterboxed. What? Why is it called letter boxed? Good question. Letterbox is a social network for film discussion and discovery. I kind of like to think of it like Steam, but for movies and shows. Not really, but you get the idea. But apparently, letter boxing is the practice of transferring film shots in a widecreen aspect ratio to standard with video formats while preserving the original aspect ratio by adding black bars above and below the picture area. So basically like adding black bars above and below the app's desktop version so it would fit on mobile, right? But wait, this link goes to letter box, not letter boxing. Is this a sign for me to redesign this app literally? As if the movies came to me in a letter box. So if the app is literally an envelope, then the movies are stamps. I'm just going to cut the paper all around like an actual stamp. For the movie poster, I want to make a gradient map so it uses fewer colors. Let's add the name and everything over here and just create a bunch more stamps. This would be a basic diary page. And down here, I'm just going to add the menu bar. Actually, why don't we create an envelope shape and turn the add icon into a wax stamp? Is this too bright? Let me try the dark mode. Wait, dark mode stamps? Eh, why not? This is still pretty bare bone and there's no way to filter the movies by month anymore. What if every month is an envelope here as you zoom out? This way you could see a big overview of your whole journey. You could see which months you've watched more stuff, which ones you were busier in real life, and you couldn't really watch a lot of stuff. It's not linear anymore, which I think in a lot of ways is more human. And this whole thing, it's your letter box, your blender, your Telegram, your Tik Tok clock, your zipper, the cloud you're on when you're listening to good music, your steam engine with tiny red valves, and every little item you might or might not have in your house. And the one thing I learned from this adventure is there are a lot of items around us that could make for a really cool bunch of pixels. Well, that's all for this video. If you liked it, make sure you do your magic down below and see you on the next one.