How I Design Apps 10x Better (Free Course)
Scores
There are a bunch of mobile apps making 10K a month, 50K a month, 100K a month. And I've noticed that there's something in common with all of them. They stand out. So today's episode is a free course. Yes, it's free. And today we're going to teach you about animation, interactions, illustrations, iconography, widgets, and how you can come up with ideas to make a mobile app that is welld designigned, that is going to stand out, that is scroll stopping so that your mobile app has the highest probability of success. Today's episode is with Chris. He's a single developer and he runs a portfolio of cash flowing mobile apps. 2026 is going to be a massive year for coming up with vibecoded mobile apps. I want to see you build one that works. >> Chris Ro, he's back on the pod. It's been too long. Chris, by the end of the episode, what are people going to get out of it? >> Yeah, well, first, thanks for having me, Greg. I think the main thing I want them to get out is how to make apps that stand out because right now it's never been easier to make an app. There's hundreds of apps coming out every single day and I want to teach people how to make something that stands out from the competition. And we're not promising you're going to make 10K a month, 50K a month, 100K a month apps, but we are seeing an increase in the amount of people solo builders building these apps that are generating life-changing incomes. Um, and I think one thing that they have in common is they do stand out in some way. So, Chris, can you commit to me that by the end of the episode, you'll give us a few tips and that people can take away so that then when they build their own apps, they have a higher chance of success. >> Yeah, 100%. I can do that. >> All right, let's get into it. So, I'll give a re really quick intro just so people have context. So, my name is Chris. I build productivity apps. I document everything on YouTube. So, I've taught people how to build apps. Um, I've also built a bunch of different apps myself. The reason I'm sharing them is it's not to plug them on the channel or anything. I just want to show that these are pretty robust apps. And one of the common reactions I get from people when they see the apps is they're like, there's no way a solo developer built these things. Like, they are it has to be a team behind them. And I wanted to show you guys that it is definitely possible, but it is really only possible because of all the AI stuff that's happened. There is no physical way that a single person can develop and launch these and maintain them and keep growing them without the help of AI. So, um I just wanted to share this so you guys know that I do have experience. Um there's uh I think the biggest one right now is Ellie, which is a daily planning app. There's a couple thousand paid users that are using this. I think around somewhere between like 7 to 10,000 daily active that are using this. So, it's a pretty substantial app. And then right now, my newest app is called Amy, which is a calorie tracking app. And the reason I want to bring this up is there are thousands of calorie tracking apps that are probably coming out every single month. And what's fascinating about this calorie tracking app is it has actually gotten a lot of attention recently. And that's why I've decided to build it. And the reason it's gotten attention is because I have crafted it in a way that it has really stood out among the calorie tracking apps. And we're going to go into some of the details of why I believe it stood out and how you can apply it to your own apps. And everything I'm about to share, even if you don't have a technical background, you can 100% apply every single one of these things with AI with no coding experience. I'm very confident about that. might just take you a little bit extra time to learn and grasp some of the concepts, but if you take the time, you'll be able to do this stuff, too. Let's go into how I make these apps that stand out. So, the first the first thing um there's a couple things I'm going to share, but the very first one, which I think is probably one of the most important ones, is animations and interactions. And this is stuff to make the app feel more dynamic because again, coding has never been easier. Anyone can spin up an app in 24 hours and people are doing that. So that's why there's a flood of these apps, but a lot of them are very static. Like you can kind of tell that they're AI generated. They're they're they're vibecoded just like you can tell when an image is, you know, an AI image or a video. Consumers and users are also starting to spot when something was just a 24-hour vibe coded app. And so to stand out and one of the tells of that is or one of the tells that you can one of the things that you can see that an app is probably viodated is it's very static. It doesn't usually have a lot of life to it. And so a way to combat that is by having more animations and interactions. So I'll show you an example of what I mean by that. Sam Alman the co-founder of OpenAI just said that it is the era of the idea guy and he is not wrong. I think that right now is an incredible time to be building a startup. And if you listen to this podcast, chances are you think so, too. Now, I think that you can look at trends uh to basically figure out uh what are the startup ideas you should be building. So, that's exactly why I built ideaser.com. Every single day, you're going to get a free startup idea in your inbox and it's all backed by high quality data trends. How we do it? People always ask. We use AI agents to go and search what are people looking for and what are they screaming for in terms of products that you should be building and then we hand it on a you know silver platter for you to go check out. Um we do have a few paid plans that you know take it to the next level uh give you more ideas give you more AI agents and more almost like a chat GBT for ideas with it but you can start for free ideabrowser.com and if you're listening to this I highly recommend it. Um, so this is my calorie tracking app, Amy. And the way it works is it's kind of like Apple Notes where you just type what you ate just like you would in Apple Notes. And then on the right, the an AI is actually going to search and try to calculate the calories for you. And so again, this is a very interesting take on calorie tracking, but when I tweeted out this concept video, it absolutely blew up. There were so many incredible designers who were praising it. Um there I think about 800 people joined a wait list that I put up just from a single tweet and that was after like 20 hours. Like I just forgot to put the weight list up like put the link for the weight list. So even just on the tail end of that tweet 800 people joined the weight list which again is kind of crazy for a calorie tracking app because there are so many calorie tracking apps. It's like the stereotypical AI app to build right now. But this one did stand out and I think it was again because it was a bit of a novel concept. this pattern of Apple Notes meets calorie tracking, but also it's the animations and just the feel. When people saw this, it really did stand out to them. Now, I want to show you the a concept that I tweeted the day before of the exact same app. This one had like a,000 plus likes on it, like almost I think 3 400,000 views. This one had like seven likes on it. It's the same exact thing that I tweeted the day before. same concept like you know you just type in like Apple notes you see the calories on the right but there just wasn't as much attention to detail and the animations and interactions compared to the first one so you can kind of spot the difference here like if we go back to the first one you can see on the right it was a very conscious decision to have it say searching there's that little animation with the gradient the sources come down all of that stuff is available on the right I just didn't take the extra time to do it. But here it just says calculating and it kind of shows. There is a little bit of an animation where it kind of subtly there's like a little tint as well on the calculating, but it's just not as subtle or it's just not as good. Um, but that is the difference between, you know, a tweet that went pretty viral from my perspective versus one that didn't even though it's the same concept. And the difference between these two screens was about like it was literally 24 like less than 24 hours actually. I think I made the changes in like probably 6 hours. And again, just all vibe coded. Not a single line of code was written for this, but I think this is a prime example to show what happens when you go an extra mile with the animations and interactions. Um, here's another one for my budgeting app, Luna. This is Oh, sorry. >> Real quick on the calorie tracking one. I got to be honest, Chris, when I saw you tweeted this and I saw that you were going to the calorie tracking space, I was like, don't do it, Chris. No. you know, having seen, you know, so much competition. You have the Cali guys doing like $3 million a month >> and so many people copying it. But then I watched the video and it was just a like it was a it was a breath of fresh air. That's what it was. And I think that that's sort of the lesson I I took from this, which was uh even if you have a highly competitive space, like hyper competitive, you picked literally the most competitive space, if you can figure out a new way from a UI and interaction perspective to showcase that information and allow users to interact with it. Sometimes it's, you know, it can go viral Tik Tok X >> and that essentially becomes your MVP. Like you don't even need to like here you were actually building this app but like you could have theoretically just you know created the video posted on X see if people liked it and then went build it built it. >> Yeah. Yeah. 100%. I think you said it correctly like there's so much competition here and this is a really good way to validate it. The funny story is this was actually me validating it. So I I didn't even plan on building the app completely. I just kind of posted the concept. Uh this was just me for actually a a throwaway project in 24 hours for me to play with Apple's liquid glass. So I was kind of testing some things and it just so happened that people really resonated with it where I was like, "Okay, I guess I actually have to go build it." Um but yeah, that's exactly what I would do too is just if you have concepts, just throw them out. You'll be so surprised. Um, but the thing that does make things these type of things stick out, it is the interactions, the animation, those details. That's what's sticking out because anyone can code now. Like anyone can do it. So these details do matter. Um, do you want to move on to the next one, Greg, or is this even? Okay. So the next thing is um my budgeting app, Luna. Again, an insanely competitive space. The budget tracking space is so competitive, but people really like the app that I built because I spent a lot of time on the interactions, the feel, just everything. I'll play a short clip of just some of the interactions throughout the app, but if you kind of get a sense that there is some motion here, it does feel a little bit different. I wish I could also convey there's a lot of haptics going on. So, that's when the phone kind of subtly vibrates when you're clicking things. There's some page swipes there. Um, all of this stuff is really minor and and even when you're watching this video, it probably just doesn't look like a lot. You're just probably thinking, "Oh, this just looks like an app." But I'll I'll show some specific examples of the little details that went into this that I think really did add up and make for a better experience because people could have chosen another budgeting app. There's so many out there. But the reason people stick with this one and the things that I'm hearing over and again over and over again from users is this just feels different. This doesn't feel like a normal budgeting app. So here's an example of the level of detail I'm talking about. And it's something that again you could totally just vibe code and do yourself. It'll just take a few minutes. Um, so one thing I did was when you look at a lot of normal Apple apps and just default apps, when you transition between pages, usually it's just kind of an instant transition. Like if you're on your contacts app and you click between the pages, it's just going to instantly appear. Something that I wanted to do was add a little bit of motion when you're changing between the pages. So if you look closely here, you can see that the pages are actually swiping left and right. And it's really subtle, so a lot of users probably won't even notice that this is happening. I'll slow it down here so you can see exactly what I mean. But when you transition between the pages, there's this little bounce and the pages are kind of shifting over. That minor detail was something I saw in another app. I don't even remember what the app was, but I remember seeing that and I I thought to myself, what why does this just feel different? Like this doesn't something about this is just so nice. And I I spent a lot of time trying to figure it out. And then when I I literally had to record my screen and slow it down and I was like, oh my god, the pages are transitioning. like that is amazing. So this this is just one example of something in this budgeting app that I did. Um there's so many other things that I did here that kind of add to create this experience. This is the level of detail I'm talking about that I I think anyone can do. And again, the way that I did this was I literally just was dictating into cloud code and I I just told it, hey, can you make it so when we transition between pages, have it slide over. And then I just had to do a few more prompts to tweak it to tweak the speed, the bounciness. but all in plain English. This is something you can totally do as long as you know how to describe it. Um, another example is uh dictation. So, this is my daily planning app Ellie. We actually have this AI assistant and you can actually dictate commands to it. And something that I did was I added the ability I added a little bit more animation to the dictation. So now when you click this icon, you'll see that the the background turns black and kind of expands from the microphone. The icon here actually rotates from the send button to the check mark button. It's so small and subtle and like it needs to be slowed down to see it. But again, it's one of those things that when a user sees it and feels it and then compares it against another app, they will they might not know exactly what's happening, but they'll be like, why does this just feel better? And again, you do this across a hundred different things in your app, it will add up. People will remember these things. So they'll remember the feeling of using your app. And I think uh that this is just another example of a small detail. And same thing here. All I did to do this was I just told Claude Code, can you make a black background come from the microphone icon and can you rotate the send button into the check mark? I think this one was actually done completely in in one shot in one prompt. Like this one I was actually very surprised that it got it but it's because cloud code for example is very well trained at interactions and animations which might surprise a lot of people like it is very very good at this stuff. Apple has a great animation library that's very well documented and so it can actually do these custom animations if you know how to describe it. I think going back to that one. I think uh I think you're totally right on in the animation like it's smooth and it's fresh. But I also think there's a few other reasons why this resonate this whole concept resonated with people. One is you created a mascot which we're seeing that as a huge trend right now which is like especially with AI first apps like people see see it as like an animal a person you know someone they're talking to. So having that, you know, I think helped one, two, it's voice first. It's a voice first app. And I think that's there's a huge opportunity to look at, you know, I'm sure I'm sure there's a ton of planning my day apps, but you know, how many of them are legitimately voice first? I don't know. So I think you did that well. Third is you did you didn't just have a text box that said ask anything. You had contextual buttons. you know, to get people to actually engage, what's next, plan my day, etc., etc. And I think that's important because when users are looking at a blank screen, they don't know what to do. They There's a reason why Google has the I'm feeling lucky button on Google search, right? It's because they know that sometimes people show up to Google or whatever and they're and they just don't know what to type in. >> Yeah. Yeah. 100%. I I think that's something that if you're especially someone who's kind of just vibe coding for the first time or making an app, it's one of those things that's really probably overlooked. Like they probably would not put the chips here or or or understand the significance of this. But yes, that this is like a lot of thought went into putting these chips here when I coded this. A lot of thought even went into what specifically should I put in here. So I did study a ton of like Chat GPT, Claude. I I studied all of these apps to figure out what are they doing, why are they doing it. Um but yes, these details like it does actually not even for the feeling. It has a direct impact on the usage like people will probably click these things and um there's just a higher chance that they'll they'll use it more properly if you have this. Yeah. Yeah. Anything else on this one, Greg? >> Uh we're good. Cool. Okay. Sweet. Um one more. Cool. The next thing, um, I'm glad you actually brought up the the mascots and the illustration because that is going to be the next thing we're going to talk about to make it really feel like a more premium and just a different app. Um, but one two more examples on the animations interactions. Um, in the in the calorie tracking app that I'm building, another thing that I added was this streaks feature. So, this is where you can build a habit. Gamification exists in Dualingo, even in Snapchat, in a lot of different apps. Gamification is a very powerful way to build habits and increase retention. Um, I decided to actually add a streaks feature here and then for fun, a little badge that you can actually unlock as you start increasing your streak. And these were handdrawn by my fiance. So, very fortunate. But I'll also show you how to make mascots like this using AI because that that's what I was doing originally. But something that I coded which a lot of people were surprised that I I didn't write a single line of code for this was when you unlock the badge, you can actually click it and it's they're based off of cat memes, but you can actually drag along kind of like it's like a holographic sticker type thing. It's kind of based off of like Pokemon or just these holographic stickers that you can unlock there. This was completely done by Claude Code as well. And all I did was tell it, can you recreate a kind of holographic sticker where I can move my finger around and I can drag along the sticker? And I was so surprised that it was able to get this in, I think, two prompts. Again, because Claude is very well trained on Apple's technology, like this was using something called Swift Metal, but it is very well trained on this. So, it can make these really cool interactions, but I just don't see a lot of people doing it, which surprises me because I think I think people assume that it can't get it cuz this stuff does look very complex. But if you know how to say it, if you know how to break it down in plain English, it is able to get these things. So, this was another really cool example that I think stood out to a lot of people. Last one I'll show on the animations interactions is actually one that was created. I was not using cloud code or cursor for this. Um, there's another platform called anything. So it's I think create anything.com. I wanted to show that even if you're not using a tool like claude code, you can do this in stuff like anything and lovable and vzero if you know how to prompt it correctly. So this was just a fun 24-hour concept that I made. It was another food tracking app purely built with create anything.com. And I added a bunch of custom interactions and animations here. So here's here's one that appears. This date picker that appears that bounce that modal completely custom. This little sheet that says take photo gallery enter text. This is these are not components that create anything has. These are fully made by the AI and the animation of it popping up and kind of having a little bounce and a shadow full. That was fully custom. That was something I completely told it to do. Um and this was me trying to push it and see what it's capable of. Another thing very subtle is I have this mascot of my dog Luna looking at these foods. It's very subtle, but you can actually see that it's bouncing up and down a little bit. So that's another very subtle animation I was testing. But doesn't matter what platform you're using, you can do this in all the other platforms. But the important part is just understanding how to break this down in plain English. That's that's the important part. But I'm I'm pretty sure all of the platforms are capable of doing stuff like this. Um, so that's the animations and interactions that this is the probably the number one thing that makes app stands out. And again, if you're going to record demos or concepts, that is what shines in these demos and concepts. Like again, it's the difference between this tweet blowing up and then this one not is just it you do you add a little bit more polish? Is it a little bit more dynam dynamic? Um, to go on to the next thing that really makes apps stand out, it is as you mentioned Greg, illustrations, mascots. This is something I started doing in my apps because of AI, because I'm able to generate these things. And we actually talked about it in the other episode that we recorded before, and I have a whole video on my channel documenting how I build these things. But right now, what I'm using primarily is Chat GPT. I've noticed for some reason it's very good at making these kind of illustrations. And I think with the newest models with I think ChatgPT5, once it started with that, it got really good at following instructions for mascots. But my pro tip if you want to make mascots and and here for example is this uh AI meeting assistant app that I was working on and it had this mascot that people just absolutely love named Lily the ghost. Um and what's cool about having mascots and using AI you can make almost infinite generations and iterations on the same mascot. So here I took Lily the ghost and I made a variation where she has a magnifying glass and she's searching. So you can kind of see how in your app even an empty state. So this is like a state where typically there's nothing going on. It just it probably for most user or for most developers, they would probably just put a a a looking glass icon or something and it would just say type something to search or no results found. This is a great place to put custom illustrations to really give your app a lot more personality. So that's what I did here and I I just generated this in GPT5. But my pro tip for anyone who's doing this is actually to bring on or hire an actual artist to generate the first version or some sort of concept and then use that and feed it into ChachiPT or whatever you're using to generate as a reference and say, "Hey, can you kind of riff off of this style?" And that's actually what I did to generate Lily the Ghost. I didn't just directly say, "Can you make a ghost mascot with a flower on her head?" Not, I didn't do that. Instead, what I did was I fed in this, this was a handdrawn illustration that my fiance did of our dog Luna, and I told it, "Okay, can you use this as a reference and now make me a ghost based off of this?" It didn't actually follow the illustration style that closely, but I did notice that there were some elements that kind of was retained, like some of the shadow is kind of very similar. Um, but that is something that that's a little trick that I've learned is just if you pay someone for some original art, there's a high chance that the iterations that you get will just be a lot more unique because everyone is doing this right now. Like I'm I'm now seeing a lot of people using AI for illustrations. Like this is now becoming a more common theme. So to stand out, you will have to either be really creative with how you're generating these or again I would recommend commissioning an artist, getting some sort of first version done because then at least you know it is unique and it's actually cheaper than a lot of people would think. I think you can probably get an artist to do a very first version for you for like $2 $300 or something. Um but then and then obviously once you have the actual mascot you can make infinite iterations just like I did. >> Um oh yeah, sorry. Go ahead. >> Can we try something? I know this is sort of off script but >> yeah yeah yeah >> can we go to chat GPT and if we give it if we gave it a reference image of say the you know Snapchat ghost um you know the logo the Snapchat ghost logo >> I wonder if you know let's just say you know we want to create a um actually with maybe with the the tongue the tongue sticking out cuz has a little more personality. I always I always found this was pretty decent um in terms of like the brand and so let's just say we're we're developing an app um and you know we want to we're inspired by this. We want this sort of vibe but we want more of like a 3D you know kind of like how you had it like yours it feels well is yours 3D? Would you say it's 3D? Uh, it does have some shadow. So, it does it's definitely not like fully 2D. I think it is a little closer. Like has some depth. >> Okay. So, maybe we say like we like the Snap logo in terms of like its youthful, fun, fresh energy. Um, but I want to do like maybe a banana as a mascot. Let's say, you know, I'm creating a a a mobile app and I think a banana for whatever reason is interesting. And I wonder Yeah. I wonder just how you would prompt it to to get the most out of it. >> I think what I would do is I would say, can you create >> just follow the same vibe as the original image? >> Yeah. And let's just see what it does here. Um, typically I do have to do this a few times. So, I think to get the ghost mascot, I think it took maybe like 10 to 15 different prompts, and I think I had to tell it things like, can you make it less cartoonish? Can you make it more cartoonish? Can you remove these elements? So, we'll see what this comes up with. I have no I've never actually tried 5.1. This is, I think, new as of this week. So, >> yeah, >> I'm kind of curious how good it is. Um, it might surprise people, but I've found also that for coming up with novel mascots, ChachiPT is actually better than Gemini, better than Nano Banana from Google. Um, I think Nano Banana is very good if you want to make iterations. So, when you have the base mascot, but I am still finding myself making actual mascots like the first version in chatbt. Okay, let's see what it does here. And then let's see what it copies. Also, another pro tip when you're using chatbt for image generation, the more you ask of it, the harder or the worse it usually gets. So, it starts deviating and then you start getting that kind of chat gpt style that you see in a lot of chatgpt images. If you ask it to just do one thing really well, it's way better at following instructions. So, okay, let's see. It did come up with a banana. Um, I think it did kind of it did keep some of the shadowing that's here for sure. It kept the tongue. It actually kept also really the same style as the eyes. Even the lines. >> Yeah. >> Um are pretty similar. So I think it did a good job of keeping the style because that this is what we gave it. So it's like it does seem like it's kind of similar. Um but yeah, I mean we could keep riffing off of there's like a there's so many things you can keep riffing off of it. Like if I say >> let's let's do one more. >> Yeah. What do you want? >> Let's do one more prompt and see what happens. I I also like I kind of feel weird that we gave it like the Snapchat image brand and likeness but it was a place to start. So what would you do to make it like different but also you know unique and better and >> I think what I would do again my my advice is to if you can use original art somehow or a combination if you use like like actually let's just see what happens here. If I just feed in I have no idea what it's going to do if I do this. Like if I feed in both this handdrawn illustration of my dog and the Snapchat mascot of both the ghost and dog mascots. Um I've noticed also when you do combinations, you get very interesting results. So I I literally have no idea what it's going to do here, but it'll be cool to see because we at least know what's going to happen if we just did the ghost. Let's see what happens if we do both. Um, but this is actually a way too because I I think something that I'm really worried about when I I made a video explaining how I do this stuff, I explicitly was like, do not try to copy someone's style one for one. Like you need to be original here. So definitely if you're going to do it, make sure you just iterate a ton so it looks very different or again use original art or mash like three or four things and get the elements that you like from it to get something unique. That that's probably what I would do because I know that if someone's going to do this, the first thing they're going to do is just probably throw in the Dualingo owl or some logo that they really like. Um Oh my god, what is this? >> It's very different. Okay, I see that it's it's it Okay, it's more 3D already. >> Yeah, >> it looks like a lot more like you can tell it has a lot more depth. It's probably because it now has two references of something with a little bit more depth. Like this has a like some more shadows. here. Wow, that is insane. And it kept the bow. So now it has the tongue and it has the bow from my dog. Um, that looks insane. >> Greg, if you use this, I think I think you might get sued or something. This looks like >> Yeah, but it that's interesting. Oh, this is not No, this is not it. Um Oh, no. Here we go. Here was >> comment banana, you know, on YouTube if you like this logo. >> Yeah. Yeah. If anyone wants to use this as their logo, please feel free. You have my blessing to do this. But it is interesting to see the difference here when you feed in one versus two. >> Um it's it is already >> Yeah. >> I don't know if it's better, but it is it is not different. It's noticeably different. Like you do we got something way more unique when we mash these two together. So that's my recommendation is just use GPT5. Um just throw it in. Get really creative with it. Try to find something that feels like you. But again, don't don't copy. Just don't directly copy anything like try try to come up with a unique style that fits the app. >> Okay, we can move on to the next thing but I will say you were speechless when when when that banana came out. >> Yeah, that Yeah, that was that was something that was something. Yeah, feel free to anyone who wants to use it, feel free to use it. Um, okay. On a note for a a good mascot or a mascot that that there was a lot of thought into it. So, this one was not generated by AI, but I did also want to show the power of when you get a good mascot, what it can do to the end experience. So, this was something where um we actually applied the mascot uh myself and then again my fiance is the one who hand drew these illustrations and she animated them in Procreate. Um we threw them into the onboarding for my new calorie tracking app. And you can just tell that this onboarding has so much more character and life to it. And I have never gotten so much praise about an app onboarding. Like that's not a normal thing. People hate onboarding. But people after I I I think I've onboarded about 500 testers at this point. I've been working on the app for a month. This is the most praised part of the app. Every time I invite someone, they're like, "That was such a good onboarding experience." And there was actually one person who signed up twice. They told me, "Hey, I signed up twice because I I wanted to see it again. I hope you don't mind." And I was like, "Okay, that's insane." Like, I've never heard of anyone signing up twice. But again, imagine this onboarding if it was just static images or if there was no images cuz that that's what a lot of people do. Sometimes they just don't have anything cuz they're they just don't want to put in the time to to make custom illustrations for each of the steps. But it does really add a dimension where when you see these, you're kind of like, man, what is the next one going to be? Like, I'm so curious. Like, these are so cool. Um, here's another tip that I'll give if because I think the thing that made this stand out was really the the animation or just like how it wasn't just a static image. This is actually something you can achieve through AI. Uh, and specifically something that I've seen people do is they use midjourney for animations. So, that's something a lot of people don't know. A lot of people just think of midjourney as just pure image generation. Um, this is the logo for Amy the cat. And I wanted to show what this could look like if you animated it. So I just fed this into Midjourney. And I'll show you what what that looked like. But here's an animated version that it just did in one go. >> Wow. >> Like completely. And just imagine you're on the login screen or the splash screen and instead of just seeing a static Amy the cat, imagine if this is just looping and this is just moving already. That just feels like a whole that just does not feel like a vibe coded app. This feels like something way more premium. Um, and so let me show you actually kind of what this looks like and how you do it. So people don't know this, but when you're in midjourney, and this is what the midjourney UI looks like, you can actually feed in images as a starting frame or an ending frame. And so what I did was I just fed in this image of Amy the cat. And then I think I just said actually I don't even think I typed anything. I think I just I think I just like just clicked go. And then I was curious what it would come up with. And and this it did kind of get some there was some weird stuff that came out of it the first time I did it. But then this fourth one was actually really good. Like I I think I would actually use this now in the login screen. So when you sign up for my calorie tracking app, you might see this in there. Um but this is a pro tip that I've not seen anyone talk about. It's using MidJourney to animate very static characters or mascots. It's actually pretty simple. I don't know how new this feature is, but when I discovered this, I was like, "Okay, more people are going to take advantage of this for sure." This is a really cool one. Um, but yeah, that's it on the illustrations. I don't know if you have any thoughts, Greg, or any questions or anything, but it >> No, let's let's go to iconography. >> Nice. Okay, so another thing the next thing is iconography. This is something that I see a is just a that this is a huge tell for vibecoded apps because usually when you vibe code an app, you don't really think too much about the icon style, but it has a huge impact on the app's feel. So, I'll give you an example. This is my budgeting app, Luna. This is the best way to illustrate this. Um, look at the tabs on the bottom. I chose specifically lined icons, which means that they're not filled. These are filled icons on the right here. Um, there is a difference between these two and it's very subjective. Some people would prefer the left, some people would prefer the right, but the key rule though that I see a lot of apps making is they love to mix and match these things unnecessarily. So, here's on the right where we mix lined and filled icons. So, this is a lined icon and then the others are filled icons. Um, it's really small and subtle, but it is one of those things where if you look at all three of these, again, it's subjective. Some people actually might prefer this one on the very right, but personally I really prefer the one on the left and then the the the tab that's actually selected can have a filled icon instead. So these transition to the filled icons when they're clicked. Very very subtle thing, but iconography is one of those things where when you choose really good icons, it really does elevate an app. But more importantly, if you choose bad icons or you're incorrectly matching them or using different ones that don't match, they're from different sets, it really does decrease the quality of the app. So, this is another one that I wanted to point out that is such a quick fix for people and for people who are like, "Okay, well, where do I get these icons?" These are three really good resources to check out. Personally, I'm using Hero icons for this set. So, I'm pretty sure these are all from the Hero icon set. Completely free to use, I believe. Um, Font Awesome is another one that has really high quality icons. And then there's another one named uh called Nucleio that someone put me on to and it has a really good quality icons too. So if you're vibe coding and you're just getting started and you're like I don't know what to do like I'm just using the default ones that Claude is telling me to use. Seriously, just try these. You you will notice a tangible difference if you just swap out all the icons, make them consistent. It'll feel very different. So that's another that's another uh another small one that that actually has a big impact. >> And also typography very important. Yeah, >> similar thing. Small but big impact. The sizing of um titles and headers and subheaders, obviously the font you choose or fonts, right? >> Exactly. Exactly. Yeah. The the readability, legibility 100%. If you're just starting out and you've never done any of this stuff, just just read just watch a 5minute video on typography and when to use certain weights, when to use certain colors, how they mix and match, how to make something more legible. It goes a long way because people are going to be looking at your app thousands of times a month hopefully and so this stuff will it will actually impact their experience. They'll feel the difference. >> I mean there's the famous example I think of Steve Jobs going to calligraphy class right at at Reed College and that's what influenced um the Macintosh >> Mhm. >> whole font choices. Um, so >> I think um to me I put iconography and and typography in sort of the same boat, which is like it's an afterthought, but like it's such people notice it. Um, so thanks for bringing it up. Let's let's see what widgets. >> Yeah, for sure. Okay. And the other thing is widgets. Um, the reason I bring this up is because with AI, it has never been easier to create widgets or even an Apple Watch integration. It's It's never been easier to do this. And I'm actually doing this for all of my apps. And this is the widget for the calorie tracking app, Amy, that I have. So, we have a home screen widget. And again, this illustration was handdrawn by my fiance, but you can totally go generate this with AI. But again, it does really draw your attention to the widget. It's a It's a really nice illustration to have here and it makes it stand out. Same thing too with if you notice there's some background sketches there. Also just handdrawn on an iPad, but you can just generate these things. But in general, something that I'm surprised I don't see a lot of developers taking advantage of is making widgets because when you have them, number one, users are always very delighted when they see that. They're like, "Oh, amazing. They have a lock screen widget, home screen widget, or an Apple Watch app." I mean, think about the apps you use every day. You were probably so excited when you were like, "Oh, thank god they have an Apple Watch app." Like, "Oh, thank god they have this." It's one of those things that it's a it's a signal that this is a high quality app when the in the developers invested in a lock screen home screen or an Apple Watch widget. Um, same the other thing though that's a bonus if you are a developer for your widget is people don't understand what a retention boost having a widget is. Because when a user is using your app and they open their phone, there are a thousand other apps that are trying to get their attention, especially through notifications, through other widgets. Having a widget and taking up this much real estate on a user's device is literally a cheat code because now anytime someone opens their app, I mean just I I it's overpowering the other apps. Like I don't even look at the watch app or the fitness app. Like I'm very drawn to this. So if you are able to pull it off and get a widget on someone's home screen, the chances of them opening your app increase substantially, which increases your retention, which increases the chance of them building a habit. And then even further, if you can do a lock screen widget, this is the ultimate cheat code because only four apps max are allowed to be on a user's lock screen. And if you can get one of those positions, you're basically going to they're going to see your widget like at least 150 times a day. every time they look and they look at their lock screen, they're probably going to see your widget and then when they tap it, it'll do a deep link and open. It's just such a retention cheat code. So, it's a it's a win-win. Basically, it makes your app feel more premium when you have it, but also it just increases retention dramatically. I I've applied it to all my other apps. So, my daily planning app, we have this widget that shows how many tasks you have left. Again, custom illustrations done for all the widgets. And then same thing for my budgeting app, Luna, to see how much you're spending. There's a lock screen widget. When I implemented these things, retention, I think it more than doubled, I'm pretty sure, because of this, which which makes sense in hindsight. It makes total sense. Like people are just reminded of your of your app's existence. But huge huge one that I would do. And then the reason you can do it now is it took me probably four to five hours to make this these two widgets for this app because of cloud code. Um, it used to take me, I think this one is the only one I did without any AI assistance because I did it so long ago. I think it took me like maybe a whole week, maybe two weeks to do the widget. It was kind of painful to be honest. With AI, it just the AI is so well trained on Apple's documentation. Like people have been doing widgets forever. So, it can actually do these in less than a day. So, there is no reason not to do it. Take the extra time to do it. It's just a win-win all around. Yeah. I don't know if you have any questions on on this one or any thoughts. I mean, I'm a huge fan of this. I think a lot of people build apps, mobile apps, and they're like, "Yeah, I got to 50K M uh MR, 70K MR, but like the retention is so bad." And so, you know, you said it best, like, you know, these are this is a retention hack in so many ways. It puts it puts your app as a part of someone's daily workflow, daily use case. >> And I just think that for me, the first widget that really got my attention was the Locket app. >> Yeah. Yeah. >> I don't know. It's just super welldesigned. Um, producer Raph, I can put it up on screen so people can see it. Um, and then also like Jack Frics's new app. >> Yeah. >> What's it called? Love V. >> Lovely. Yeah, lovely. Yeah, that's a really good one. >> That's a really good one. Um, and so you're starting to see this resurgence of of the widget ecosystem and and I think people are are more and more open to downloading widgets now, which I think is also a big a big deal. >> Um, I actually while you were talking, I took a note of a startup idea that I want to create for that that one of those force slots. Yeah, >> like there's there's like there there's probably so few widgets that are that are accessible to that, you know, I just think there's a lot of opportunity in a lot of different verticals there. >> Yeah, 100%. Yeah. And again, it's so much easier to build a widget. Like it sucked building a widget before. It actually sucked. So this was such a if any reason to use AI, it's just to speed stuff up like this. like this is the difference between shipping something like this and not. So if you're on the fence about using AI to do this stuff, please do it just so you can ship stuff like this. >> Sounds good. Did you have one more category? >> I did. So the last thing is just um the most important thing I think if you want to level up your design and level up just the your ability to polish your apps is to be constantly exposed to good apps. So I just wanted to share some of the resources that I'm using when I'm just to get more design inspiration, understand it. Um so Mobin is a big one that I use. So basically it's this massive design library where oh here um they just have so many screenshots of different apps and I'm constantly just looking at this and I'm just trying to get inspiration because there's just such so many cool interactions and animations and little things. You can also get a good sense of like if you're on the fence of what icon should I use? Should I use thick or should I use the filled or should I use the lined or the filled icons? You can just go here and just see what are other apps doing. Does it look good? Does it resonate? Does it have the vibe you want? So, this is probably my number one design resource. Um, it is paid. Uh, I have a code. I don't know if I'm allowed to share it, but I have a code if you want to use it um for like I think 20% off the free plan of the year plan. But, um, 100% just browsing this you it's inevitable that you'll level up your design sense because these are just such good apps. Another one is called 60 fps. This has really good interactions. So, if you're trying to figure out interactions, animations, different things, like I mean, I just like love how just looking at this, like you can tell that when you tap things, the gradient changes. I've never seen an app do that. So, now I'm like, okay, maybe I'll go experiment with that in my app. And then the last one is called Spotted and Prod. It's the same kind of concept as 60 FTS. It just has a lot of really good animations from the top apps. And this is where I'm looking to get inspiration. And that's probably the number one question I'm getting is just what am I consuming? How am I leveling up my design? it's just the these three websites. Like that's the only thing you need. And then the last thing um the last resource that I have which um it's actually for screenshots. Um and that's kind of my last uh piece of advice. So there's a there's a Twitter account called Screenshot First Company. They basically just curate and show really good app store screenshots and they kind of show like like here's a nice before and after. Like this is what most app store screenshots look like for actually this is actually not that bad but this is how most app store screenshots look like for vibe coded apps typically for vibecoded apps the app store screenshot is it's like the last thing anyone wants to do um you're like I just spent you know a month or two months coding this app I don't want to do these screenshots but people don't understand how big of a deal the app store screenshot is because it is the first impression that a user has with your app when they go to the app store. And if you don't have a good first impression, that's the difference. Like there's no point in increasing retention if they're not going to download it. Um, for anyone who's doing YouTube, um, I equate this to the title thumbnail. It's literally the equivalent of if you have a bad title thumbnail, no one is going to watch your video. So any YouTubers or anyone doing content will understand this analogy, but um, level up your app store screenshots. So this is a great Twitter account. I don't know of any websites that showcase app store screenshots like this, but this is a really good one to follow. So th those are the four resources. Like this is the main stuff that I'm looking at. >> Also, startup idea, someone go build that >> honestly. Yeah. Yeah, that would be that would be I would I would pay for that. I I like genuinely I think I pay for all of these services. Like even Mobin like I have a discount with them, but I I literally still pay for them out of pocket because it's such a good such a good resource. >> I love it. >> Cool. Um so that concludes this concludes the you know how I make apps that stand out. It's really just a culmination of all these things. Chris, thanks so much for coming on. I need a I feel like I need a I need more of you. So, maybe we'll record another episode. Um I want to know about your AI workflow. I want to know more about it. >> I'll include links to where you can follow Chris uh on social um in the show notes. And uh Chris, thanks again for spilling the sauce on on the show. >> Yeah, absolutely. Thanks so much for having me, Greg. Appreciate it.
Summary
This video provides a free course on how to design mobile apps that stand out in a crowded market, focusing on animations, interactions, illustrations, iconography, and widgets, all achievable with AI tools without coding experience.
Key Points
- The main thesis is that modern mobile apps can stand out by focusing on high-quality design elements like animations, interactions, and illustrations, which are now accessible to solo developers using AI.
- The speaker shares real examples from his own apps, such as Ellie (daily planning) and Amy (calorie tracking), to demonstrate how subtle design details make a significant impact.
- Key design elements include animations and interactions (e.g., page transitions, dynamic buttons), custom illustrations and mascots, consistent iconography, and functional widgets.
- AI tools like ChatGPT, Midjourney, and cloud code platforms (e.g., Cursor, Claude Code) enable non-coders to create complex animations and designs by using plain English prompts.
- The speaker emphasizes that even small details like a bouncing mascot or a custom animation can make an app feel premium and increase user engagement.
- The importance of app store screenshots and onboarding experiences is highlighted as critical for first impressions and user retention.
- The speaker recommends specific resources for design inspiration, including Mobin, 60fps, Spotted, and Prod, to help developers level up their design sense.
- The video concludes with the idea that the era of the 'idea guy' is here, and anyone can build a successful app by focusing on unique, high-quality design.
Key Takeaways
- Use AI tools to create animations and interactions in your mobile app without writing code, focusing on subtle details like page transitions and dynamic buttons.
- Invest in custom illustrations and mascots to give your app personality and make it more memorable, using AI to generate variations based on original art.
- Ensure design consistency by using a single icon set (e.g., Hero Icons) and paying attention to typography and layout for better readability and user experience.
- Build app widgets and lock screen integrations to increase retention, as they serve as a constant reminder of your app and boost daily usage.
- Study high-quality app designs regularly using resources like Mobin and 60fps to improve your design sense and stay inspired.