How I Build Prototypes in Figma (Plus Live Website Feedback)

Charles Postiaux builds an interactive loading screen in Figma, scaling icons and layering animations to create depth and reassure users. He shows how prototypes tell a story to stakeholders and engineers, then reviews live submissions from the community.
Chapters
All right. Are we live, everyone? Let me go to Figma right here. Let me know if it's all good, if we're live, if you can hear me well. Yeah, I think today I have some interesting stuff I kind of planned, and yeah, I think this would be good. I wanted to make because always the problem sometimes with my content is that it's difficult to transfer an idea or like a theme or something I want to teach and make it entertaining as well. And so I'm wondering actually I'm looking at the I'm looking at the live right here, but actually the camera is right there. Oh, it's weird. Okay, that's strange. Let me— does it work better like this? Is it because I'm far away? Oh, we're getting some...
Okay, is it better? Oh yeah, is it better like this? Does it work? I think I, I just had the wrong— yeah, I had the wrong mic. Okay, nice, cool. Thanks a lot for the feedback. There has to be something to go wrong at some point, but yeah. Okay, cool. Thanks a lot, everyone. I appreciate it. Nice. Okay. I'm writing it for myself for next time, like double-check the mic input. But yeah, cool. So yeah, as I was saying, welcome, welcome everyone. Welcome Samir. Welcome Danny. Welcome Kendrex. So I was saying the problem sometimes with content is that I have to like really create like a script and make it entertaining and then edit everything. And so I'm wondering if during this kind of streams— I don't— I'm not sure actually when I want to do them. I tried Wednesday, I'm trying Saturday. I want to see, like Saturday is pretty cool because it's like, you know, you can maybe work 1 hour, 2 hours, and the weekend feels a lot better as well. I need that wallpaper from your live soon screen. I actually created it for for myself, but I used Midjourney for this. But I could I could try to find a way to like to share it. But yeah, I really like that that design as well. But yeah, I'm trying Saturday. I want to see how it goes, if it works well. And you know, like one hour, two hours of work, and your weekend feels a lot better as well. So it's like you know. Why not try it? Maybe it's going to motivate you as well. It could feel productive, like you're learning design. So to kick off your weekend, I think that's a pretty nice way to do it. But yeah, so I want these streams to be like, to be like maybe teaching a little bit or not teaching, but like showcasing the work that I've done and trying to like have some specific themes and stuff. And so here, for example, it's one of the prototypes that I've done for Trustworthy and for the case study on the website. And I just want to walk you through kind of like how I approach prototypes and like some ways to practice as well. And then after that, we have 2 submissions for the design review, one from Samir and one from Danny. I think it's Danny with the 7. I saw you guys on the chat as well, so I appreciate submitting it. And yeah.
Hi.
And then maybe a little FAQ to end the stream. It's probably going to be an hour stream, something like that. And yeah, let's get started on this. So for example, on this one, maybe I can keep this, whatever. Yeah, let's keep it like this so it's clean and nice. But pretty much the way— this is kind of like the design that I landed on for Trustworthy and that we Or like, that's a cool little design. But the problem with like prototypes in general, the way I like to use prototypes is, first of all, is to kind of like tell a story, right? Because when you see a static screen, it's super difficult to, to like, first of all, as a designer, understand what's the story behind it and how do we get there. But also for engineers, like, how do I actually come up with the interface like this? How do I design that? How do I design the experience? And it's also a really good, really good way to be strategic as a designer when you present. For example, on big projects, I usually have like a slide deck to outline the design, to outline the decision-making and the rationale behind a specific design. And so being able to just have that story on like, this is the rationale behind that and how the user can go from point A to point B. That really helps, in my opinion, drives home the design. And it's a lot easier to sell as well, sell for the stakeholders, but also sell in terms of marketing. Because you imagine that, and I see it on many websites when you have like the homepage and you see features, usually you have some interaction as well. And so that prototypes achieve a lot more than just telling a story and being in a sales deck. And so that's why I think that it's really important as designers to have this kind of process. And, you know, it looks— I think it looks cool as well compared to like a static screen when you have a portfolio. It impresses people. So for me, that's the rationale. So how do I like get started on a project and how do I get started on a prototype? Again, I'm starting with the design, the static design, and then I think, okay, This is the end result, but how do we get there? And so this is for complex prototyping, it's pretty much reverse engineering the whole experience. So you start from the end and you go back step after step to that first screen, that beginning. And so in this specific case, the goal here is to create some depth, right? It's a loading state, it's a loading screen. So we have to think about multiple things here. We have to think about giving transparency for the user, showing what's happening, what's going on. It's like, to think it's an AI scanning your documents and sorting them, it's a pretty worrying experience for the first time. And so we want something that reassures people and that shows them that something is happening and it's doing it the right way. It's like, oh, I've actually uploaded finance, I've actually uploaded property. Right. Documents, and so we want. I wanted to create some depth on this, and so the way I did this was very simply design this kind of like folder thing, and you just scale down the image and add a little layer blur here. And so you know that's super simple and a nice little aesthetic to do. But how do you actually engineer that or reverse engineer that so that you can create a prototype on this? The thing that I've created is you want the kind of the first design on this to be behind you. And so to achieve that effect, all you have to do is pretty much scale it a little bit further, bring it down and remove the opacity, and then everything is going to come into place. So pretty much just lowering the layer blur on this one at a time. And I have these guides to figure out like, okay, what is the actual size of the of the folders. And then again, all I have to do is step by step bring them down one at a time. And you end up with a cool little effect. Yeah, you can see it here. Where it's step by step bring it in. And yeah, I think the thing is there is no real shortcut with prototyping in general. It's mostly just like the way I usually do it is just very granular details and go with the flow, see if something feels right. Because again, you have to transmit that to stakeholders, you have to transmit that to engineers. Ultimately, this is what's going to be seen and experienced by the users. And so you have to create something that feels human and organic. Also here, a little tip for spinners, because I've always struggled with Making spinners that actually spin, and so the key is to create a rotation. You just angle it inside of it, and so this way, and then you you can have just one delay and then linear, so that linear is going to make it so that it rotates smoothly, and that's a nice way to do that. So that's kind of like how I usually prototype stuff. And so you can imagine this is one prototype, for example, like that would be like the, again, the transition between creating an account, signing up, and getting into the product. Obviously here in this step specifically is going to be, you're going to see kind of like the documents and the elements. After this loading state has been completed. And so you have this making sure that what you've actually been waiting for is correct before jumping into the product. But it's just one step on the whole thing. Usually, it depends on the projects, but I don't usually design every— I don't prototype each step. In this much detail everything. It depends again on the scope and the project, but this is more like specifically for this. And also you can see here the difference is that this is mostly made for the case study. Like you don't have to stay stuck with your, with like the product that you have. You can really like, you can see on my website as well on the, on like Circle, the case study there, like it's sometimes just one card. that you can zoom in or like just a chat interface. So it's really nice and fun to like, you can see here the frame is the one I use in redesign projects as well. So you can be really free with that, but all you care about is like the storytelling and what it can bring to the rational and the strategic approach that you have with the designs. Love your designs. Thanks a lot. Yeah, and the way like one thing that I because it's really difficult to be like okay this is the design that I have how do you actually do that? This is one example that I have here that I've copied from that I've copied from or trained from Cash App because under mobile design and prototypes I don't know if they do it on Figma or After Effects but. They usually have this, like, you don't see the cursor, you don't see someone tapping, you just see that button activating. And it was so cool to see that. And I'm wondering, how do we actually make that? And so the key here is, you can see here, it has that, like, I don't know how to say it, but it feels very human, like you tap on it. And so all it comes down to is just What kind of how deep does it go down? For how long? You can see here the delay, the curve, the duration. Same thing here. How long does it stay down and go up? How how fast does it go up? And that's kind of like what I'm trying to say here is the key is just to figure like to you don't have to copy the actual thing. You can just understand the principles. that come from it and apply that to your designs, right? It's like this kind of process of being human and having that slow progress to go down and then a lot faster to go up. You can reuse that same strategy for— yeah, it's like a tactile feedback.
Yeah, exactly.
And so you kind of create this tactile feedback. You don't tap it, you don't see nobody tapping on it. And that's kind of the point here. And same with prototyping as well. From here, it has to feel natural. It has to feel human so that it creates this sense of— like, it creates a sense of being organic. Hey, I have a question. How do you choose the combination of colors so soothing and great? It depends. Like, sometimes it can come from, like, you know, like I usually do where I take, like, inspiration from other products. Especially for like colors, it can be typography, it can be like typography can be for like, you know, like posters. It can be from any medium that has some graphic design on it. Here the thing is I wanted to, it's a bit more difficult or not difficult, but specific here because it's a folder that has this like glass texture. But the key is that there is a, I usually stack a lot of things. So here you can see like background blur. So it actually feels real. On top of that, you have also like a grain or noise texture on it. The actual gradient is like super subtle blue and very like very light blue as well. And then you have some inner shadow and a little drop shadow so that it stands out. But I think it just comes from Just consuming a ton and ton of design. I know it's a not super practical answer, but I just look at a ton of designs. And you know, like every time you see like a cool, again, cool graphic, cool visual, cool design, you just grab it, put it on like a Figma page, like inspiration slash mood board. And it's a lot easier then to just grab it whenever you need it. Usually it's like, oh, I remember this texture. I remember this design. I remember this color. From something I see, I saw there, and I just go there and pick it, and then I can, you know, iterate and experiment with it. So hopefully that, that helps as well. What I've learned is that usually for me, the best kind of colors and, uh, that those combinations, they come from like the lightness. It needs to feel light. Maybe it's because it's a black screen and it's not like, you know, gaming or crypto where it's a lot more saturated colors. Um, but actually, like, there is some great contrast here. It's very saturated, but it's like a— I don't know, like a movie, like a photo. Um, you need to work a lot on the colors as well. That's why design is pretty complex. You don't— you just— it's not just about UX, it's not just about experience or prototyping. And that's why sometimes you have multiple people in the team, but The best designers, like I always say, they have to be like market-level great at many things. And so colors is one of them. It seems a little obvious, but it's really tough sometimes to like work with good colors that feel light and professional. But like, yeah, I think it comes from experience and iterating a ton, like I always do, because I have some other designs that are not— they're not good. They're too Too much of not the right things. But yeah, that's pretty much it on the prototype. It's a little messy. It's the first time I'm trying this kind of thing. I don't know if you guys found it interesting or valuable to some extent. Um, yeah, I'm trying to share a bit more about the process and again the strategy because in my opinion, like, and it goes back to what Amit just said, And what I'm trying to say here as well is just like, as a designer, if you really want to stand out and you want to like succeed, or yeah, stand out, succeed, last a long time as a designer, you need to have great taste and you need to have— you need to be strategic. You almost need to be both. Like, as a designer, you need to have some of that graphic design skills and at the same time some product manager skills. And being able to have this like 2 combination on top of your actual product designer or UI/UX designer, web designer skills is going to make you really complete as a designer and create a lot more value than what people would expect from just a designer. It's like, wow, he has that rationale, he has that strategy on top of it, and I understand why the product would be better off like this. Or wow, the colors, the typography, the spacing—they work so well, and that creates something really cool. I found it—I found it interesting. Thanks. Thanks a lot, Daniel. I appreciate it. Yeah, in the age of AI, taste is becoming increasingly more important to stand out from the mass. Absolutely. Yeah, absolutely. Especially since you can pretty much craft like people can just enter a prompt now, and you can have like a working. Website, working product. Um, so it's like, it's not about the options, it's about why these specific options and how to use that to make it better. Because otherwise you're just, you're just average. And I think you— we can see it a lot more now with like web apps, with mobile apps especially, this like uniqueness in the like app icons or the interfaces, right? They're a lot bolder in the way they are and look just because of that, because they stand out more, they are unique, and that creates so much more value to, to everybody. It's a lot easier to sell, it's a lot easier to onboard, it's a lot easier to keep people and to have that premiumness to the product. Have you tried Claude Code for animations or prototyping? No, I have not. Usually prototyping for me, it's mostly, or actually 100% of the time, it is Figma. I just use Figma prototype. I think it works well for me, especially for the kind of project that I work on. I don't really, I don't work on like implementing. I help with like the handoffs and especially prototyping for engineers, but I don't like code anything. Have you tried it? Is it like, uh, am I missing something really cool? But yeah, that's pretty much it for this one. Maybe I will try more with maybe other prototypes or like other projects. There is one other one that I, that I think was cool to— let me transition— that was cool to on my website. Wait. I think it was— yeah, it was this one. Yeah. Where pretty much on the static version of this, it was this screen, like a float, this screen, and then you transition into that screen on another, again, static design. But You have to make that transition on a prototype. So how do you transition it? And so my strategy behind it and positioning with this whole prototyping experience was let's make this booking experience just one screen. You don't change pages or visually you don't change pages. Because the problem with travel and booking trips is that you always have like 20,000 tabs open at the same time comparing stuff. And so that was part of the rationale behind it. And so being able to transition from this page and booking itinerary page into this create your account and onboard yourself and pay, all of this goes into this one-page experience. But the technicality here was actually layering that itinerary page frame on top of the booking frame so that when it goes into that second, like that half of the screen, it doesn't look like weird and stuff. But it took a while. Like it took probably more than 2 hours probably to like come up with something that actually feels right. And so once you like, it's you just like any, you know, like I can imagine movie, I can imagine like a design or like A drawing, you start with like the rough sketch, with the wireframe, with the idea, and then you refine once you get that like the right stuff. So yeah, I think that was pretty cool as well. So that's about it on this. I don't know if you guys have other feedback on this. In recent months, there have been— there are many more new AI websites and are improving more and more. So actually, there are one more competitors of designers, how to deal with them, because every day One came. Yeah, I think we're at the moment where everybody, I think everybody can actually create a product now. It's not so much about— I think everybody has a shot. Just like social media helped with content and anybody could be an influencer and create content. It's not as bad or as good as we usually think it is. It's pretty much in the middle. And so it's going to be a difficult— not difficult, but something I've realized online is so many people are like, it's never been easier, it's never been simpler to stand out, to succeed. But it's actually not really true. I feel like it's always tough no matter what. The benefit with that is there is so much more money. I don't know if you see it, but AI startups, they raise a ton of money. Every time I look at fundraising news, it's like, this company has raised $250 million, this company has raised $50 million. And so you could tap into that, right? If you position yourself well, if you're able to get people's attention, if you can show your expertise, and that's why I'm trying to teach you about positioning and strategy and having a good taste and prototyping and storytelling, all of that stuff. If you can position yourself well enough in something specialized in that element for AI companies, one way or another, it doesn't have to be something I'm saying here, but you could tap into some of that money. That's something worth considering. So in one way, yes, there's a lot of competition. But on the other end, it means that there is a lot of money. People would not do— people would not create websites and AI products if there was no money to be made. We're not running some charity events here. It's all about making a lot of money. And so if we can position ourselves in a way with our skill sets and the way we brand ourselves and present our work, it's possible. It's very, very possible. So I hope it can resonate and help you guys on that. Okay, cool. So now let's review the websites and work from that was submitted for the design review, which I think would be fun. So there is Hinabi from Danny, right? So he said that I'm working on a language learning progress tracking app. It should be friendly but also professional so that users feel welcome and happy to visit, but it should also feel sophisticated. My inspirations were Arc, Dia, Compound. I tried to emulate their polish and friendliness, so I don't want the site to be boring. However, no matter what I try, the site still feels unpolished. Still early development. Would appreciate any suggestions on develop this site design. Okay, cool. So does the website? Is it? Is that it on in terms of like the content itself, the copy? Or do you plan on adding more stuff on this? I tried Claude Code for standard microinteractions, but not for animations like the ones you are making. Okay, cool. Yeah, I think I've talked with another designer also kind of doing that. And honestly, like whatever tool or skillset you can have to like stand out and set yourself apart could really be good. I would still think that if you work with a team, for example, if you're part of a company or part of like a design agency, try to match kind of like their tools and toolkits. For passion projects and like improving yourself, that's still like really, really cool. I know Figma has like Figma Make, Figma AI. But yeah. Would you be open to doing portfolio reviews? We'd love to hear what you have to say. Yeah, definitely. I mean, that's what the stream design review was about. It's like reviewing your portfolio, reviewing like— portfolio can take a while. So it's more probably be like one piece of design, one case study, something like that. But yeah, definitely. I might— I'm not sure exactly how I want to do that. Like if I want to have like a form per stream or if it's just like one form. Not sure yet. But yeah, that's kind of like the plan with all of that. So Danny, yes, you choose the for the beta. We'll add more later. You would have to log in to see the rest of the site. Okay. Is it okay if I review this now and maybe like for another one, like if you have more, if I can log in or something? I think that could be good. Because I can imagine this kind of like branding aesthetic for the website or like for this landing page would be similar to the rest of the site. I'm just trying to find like a way for me that's like super frictionless where just, I just come in, I look at what's here and that's it. I don't need to like figure out anything on top of it. But yeah, so let's get started on what I see here. So for me, One for me doesn't really like again. I'm going to say whatever I think. Take it with a grain of salt as usual, and okay, the site is fairly different. Okay, we can figure that for like the next stream. It's it's no problem as well. Yeah, but I think that could help as well. And also, I'm not like a. I'm not a website designer specializing. I mean, yeah, I don't specialize in website design, so it's just my two cents. But for me, it doesn't feel super like professional. I'm going to use Mobin sites just to like have a reference. What I'm trying to always do is not so much like I like to compare, but I don't want to like say this is good, this is bad. I'm just trying to figure out. What do they have in terms of principles that I could use and apply to what I have? So for example, what I see here, and I'm not sure which one we could take. Let's see, let's see. Maybe ClickUp could be good. Like. The thing is usually like having a colored background is always a bit tough or can be a double-edged sword simply because things don't really blend too much and you have to think to add another layer. Usually a white background or like a black background is usually like a more black and white. Okay, that's no pun intended, but it's a lot easier to figure out like the colors, the color palette. Simply because that's like the base. Here with the purple, you have to rethink a bit more the color palette and the aesthetic of things. So that's why I'm a little bit cautious on that. I would rather have like a white background and then like, yeah, like this kind of like ClickUp like models almost or sections where it's like embedded and this would be purple. That could be, that could be really cool. But the whole thing, I'm like not sure. Also, it's, uh, it feels like this is like a container that's a different size from the, the hero section, right? Yeah, you see like there is still— it's not the same container size or width. So probably like have a max width on the whole website. And make sure that everything is like well aligned. So already you tighten things up a little bit, and that's going to give a lot more of that professional and clean look. In my opinion, Lex, so minimalism is okay, but people want a story. How does it help me? Yeah, I mean, ultimately it's still a better, and what's missing probably is just like the visuals. When you look at this, for example, you see a design of the product. I don't see anything of why would I join the beta? There's no visual for me to look at and get some preview. And I think that's always what we try to do is, for example, onboarding flow, you always want to know, match expectations, what's going to happen next? What if I click on this? That's why Airbnb, for example, when you want to book something, they say right underneath, they say, we're not going to charge your credit card or whatever that is, but you're not going to pay by clicking this button. And you build that expectation and that safety in a sort of like, okay, I can click on it and see what's behind it. Here it's like, I'm not really sure what's behind it. I don't know what to expect. There's also a lot of text. Like, I try to not have that much text, but I'm quite happy with the design of the product, so I skipped adding a picture. Okay, cool. Yeah, I mean, to be fair, like, you had a picture here, you tightened things up in terms of width Um, and you're already like a lot better. I would remove this like outline on the cards, and to be fair, we could— that could already be pretty cool. I don't know if there's another one that could be nice to look at, but actually I, I was a bit wrong on this because when you look at a lot of the websites, they have like colorful backgrounds. I think it's more about how do you match the colors of the rest of the product of the rest of the website with the background. But you see, this is a lot more colorful and they go all in on these colors. So I'm wondering if there's a way to bring some of that going all in on that as well. But again, if you worked more on the website, I could, for next stream, I could log in or if there's a way for me to see the designs and we can work on that as well. Especially like, that would be super cool to again have this. And I get like, usually you have a bit more. I, again, I don't know exactly, but like having a section to maybe each card could be like a section or like it could be like this, like ClickUp again, like a little, a little model or a little section here. I like this actually. That's, that's pretty cool. Like everything is like you have like a right balance with the fonts, with the typography, with the spacings and paddings. Here everything feels a little bit even. So yeah, I would try to explore on that, have a few more explorations. But yeah, that would be, I think, yeah, next stream could be cool to review the actual product itself. If that's, I didn't understand from your submission that it was the product. I thought it was the, Landing here, so my bad on this. And then we have Samir with Synag right here. You could show a more visual way to tell it, more metaphorical. You need to see the UI to want to try the product. Yeah, yeah. And thanks again for submitting, and Danny, I appreciate it. Metaphorical could be cool. I think it requires more graphic design and visuals, and it could go sideways depending on how much you push on that, because not everybody gets the visual translation with the product and ideas. So I would— that's still a good suggestion. I probably— that would be a good idea to try that and let's experiment and iterate on this. And that's where, you know, A/B testing would be really cool. Henschel, welcome to being a pro designer. Welcome to the to the members of the YouTube channel. I really appreciate it. Thank you for for supporting the channel. That's super cool. Cool. So we have this from Samir. What did Samir say? I want feedback on UX and visual design mainly. Also, how can I optimize the website to increase conversion? Okay, so you want my like website, web designer, strategic designer perspective on this, right? Okay, let's look at it. Let's have a little pass. It's good to have visuals. It's good to have logos, like create trust on this. There's so much spacing and so little content on the, on the Dany's website. I mean, again, like, I think it's, it's a good thing because he didn't overcrowd it with too much. And if you can again tidy things up, if you can better organize the space, have a bit more visuals on the features, have some— okay, yeah, um, have some more like trust signals on the website if he can, I think that could already like move him into like top 40, top 20%. And then from there, just iterating a lot, improving. But if his focus right now is on the product itself and on the website, that's understandable that you just want— like, I just want the basics here and that's it. I don't know, like, the timeline on this, Danny, but you, you have to prioritize anyway. Okay, so logos, that's really cool, really nice. I like the rated as well. That's good social proof. We are here if you're looking for email marketing retention. So is this the details of the features of the service? And then see the results. Really good to have this kind of Uh, these numbers, something I'm not a big fan of is written case study 1, 2, 3. I'd rather have the name of the product right here. It feels a bit like you— a template. If you had an image and it gave user more idea about it, yeah, like a nice little, a nice little mockup of the product that could go a long way. And here for client, that's really good as well. Usually for the testimonials, the best way to show them is to have like the, the image of whoever gave that review with their name and the title and the company. But you have the company already, so if you can, that would be like a great little like extra addition to it. Why us? Okay, very, very standard. That's good. I would say there is a little bit too much text. Like, I'm probably not going— as a user going through it, I'm probably not going to scan through all of it. I'm going to go maybe like the 2 first rows and then the 2 last and ignore a little bit the chunk in the middle. Um, I don't know if there's a way to make it more like visual with like an icon, if there's a way to Maybe change the opacity of some of the text to highlight specifically what's good about yours and what's bad about them. If there's a way to maybe, instead of locks you in long-term contracts, maybe that could be like 3 to 6 months contracts versus you where it's like come and go as you want. Iterating on that could be interesting, I think. Yeah, I tried to ask a client about testimony images but couldn't get it. And you can Go on LinkedIn and take their LinkedIn profile. Because technically you don't have to ask them for a selfie or something. You can just say, is it cool if I use your LinkedIn profile and show your name on the testimonial? And then also your FAQ. Also, usually for— I get that you want to have this double typography style with 2 lines, but FAQ could just be FAQ. Okay, that's good as well. I'm actually even wondering, maybe it's worth A/B testing on this, but I'm actually wondering if the FAQ should not be under the book free call. But that's like super high level. Okay, now let's see, like dive into the details a bit more. I think 3 lines is A bit too much. I think I would probably not read it. I would probably read the top, read the bottom, and ignore the middle. So if there's a way for you to tighten the text and make it 2 lines, that would be great. Also, I'm trying to connect the dots between the 2. Scale your e-commerce brand profitably with email and SMS marketing, and then visuals here. For me, when I see that, I expect— when I see like this, I expect an AI ad. Platform where you can create ads with AI, with like just you enter stuff and you get like some cool stuff, but it's more like an agency, right? So I would probably like try to optimize or improve the copy so that even if you add a bit more text in the description, but yeah, make it a bit easier for me to like understand, oh, okay, they make the visuals, if that's what you do. Oh no, you do like it's a whole platform, right? Backend subscription system, segmentation. On this, I would— it feels a little light in terms of visuals. I'm not going to lie on this. I do web design, Webflow, focused on SaaS with your product. Um, I do web design and Webflow dev focused on SaaS. Would your product design subscription membership help me better understand product thinking and improve my SaaS sites? I don't do like website design and review if that's what you're looking for. I do product thinking, design strategy, all of that, but I don't do like website design. Um, yeah, cool. So I would probably like try to polish this section here. Like, I'm not sure if this is like the features, if this is the service itself, if these are like all of the options. We can try again. Like, looking at this, for example, I love to do that, like compare like left and right. And see what are the differences between the two. And so for example, here you're gonna see like 2 lines and then like visual. And here it's not even description, it's just like the benefits, what you get. And if like that could be really interesting to like A/B test on that and see, for example, like let's just A/B test for a week and see which hero section works the best. But like right away you get a ton of trust signals here. You see all of the benefits that you can get or like all of the features that they have. You see all of the benefits here. Try for free. I mean, it's a free book. Actually, on this, you look at the CTAs a little bit, like book my free audit, work with us, get started, view full case study, view all case studies. None of the CTAs look the same, but they kind of all do the same thing, right? It's either you go book a call or you go check the case studies. So for me, it's like I would probably polish also the copy on this, like make sure it's like book my free audit. It could just be like book a free audit call and then you could have the same thing here because here it probably sends you. Yeah, right. So like, and then when you click on services, it's here. And if I click get started, it's here, right? So it's And then case studies. Oh, probably if I click on case studies and I— if you're close to this, yeah, I would probably expect to go here. And this looks more like a blog. I would try to— if you can redesign this, I would probably try to make it more like part of the website rather than a blog section and a blog post. But I still get the idea, and it's, you know, like To get started, that's completely fine. But yeah, when you click on this, send it to the case study page and tighten things up with the CTA copy. And then you could try this, right? Again, I don't know how you would organize all this, but you could have the text on the left, the visuals on the right, and that would leave enough room to show all of those brands. I think that's super cool. And let's see, it's made on Framer. So I use also Framer for my website, and you could like create a component for the logo, and then you could show easily like which one is like a case study, like Oovee Laser or like Breeze I saw, and which one are just logos. And then that would make it easy for people to like, oh, right away. And even at this section, they don't even scroll. And they can already like check out the case studies and you build all of that trust right away. That would be super cool. And you still see like the first kind of section of the website. So making sure to tie things up on this could help. Can we portfolio website through vibe coding? If possible, can you make videos on it if you have idea? I have no idea how to make like a actually like you know like a portfolio website. Keep it super simple. Uh, like, I use Framer. You could use like a free, free template on, on Framer. You could learn Framer. I think that's still like a really good skill to learn if you want to specialize in website— in web design, or just have like that side skill ready. Even like, I don't— I, I can work on some website projects, um, but like, it still helped me a lot as a designer. Like, understood how to do— how to work with like containers, with max-width, with auto layouts, right? Like, that can give you a more depth and a different perspective on product design or UI/UX design. So because I don't want you to be like, I'm going to VibeCut it and it's more like a shortcut to actually have a website and not really learn it, than taking a bit more time to like slowly build something. But yeah, like I'm not really sure. I think we, we do have, we do have some case study Yeah, I did one before, a case study video for members, but I probably— I'm not sure if I have other videos for free on the YouTube channel. But yeah, so that would be my feedback. What else for you, Samir? This one, yeah. But I think that's about it. Like, I don't know if we could I know there are other kind of websites or like shopping. I would try to like— you don't have to go here, you can find other products and other like other platforms that show, you know, website inspiration. But like any kind of e-commerce business shopping kind of websites could be really good because they care a lot about conversions and They, you know, it's like every section, every element has to create trust with the user, has to make them want to buy. And so if you can take some principles from them, and I don't know if we can find more of those, but if you can learn principles from them and apply to your website, I think that could really, like, that could go a long way. I saw one before on this, but I'm not really sure where. Anyway, I think you kind of get the idea on this. Actually, this one is nice. It's a nice— actually, it's a nice exercise because I can also take the time to like look at some website design, and that's always nice to learn about it. Like here, like that's still like a really cool thing. Maybe you could have this CTA You could have this CTA here as like this, like a bigger bar. And then at the bottom you could have this one here, kind of like what they have in the style. That could be something else to iterate. I would advise like, if you're not already doing this, like every week you set like a new like little A/B test to run, whether it's like the copy, whether it's like the hero section, like something specific that you can track and then you compare. That's always a cool little habit to have. Yeah, they have like this cool— they show this testimonial very early on. That could be nice as well. You can see here that could be an option for you as well if you don't want to do this, like these variants. You could have like this, a whole thing for hover which sends straight to the case studies. That could be super cool too. I can imagine it right next or below the comparison that you have here, like why us? And then right below it, depending on if you know your type of buyers and the type of companies, if it's a specific niche, if it's a specific user type, you could be like, okay, for wellness companies, this is that. For clothing companies, we do this. And then you link some benefits with that. And here that could be like a case study example. Could be like a blog post if you want, right? Like, and obviously, like, the more insights and trust signals you give, the better it is all the time, even if you repeat yourself, right? Like, I'm sure some of those testimonials you hear are also testimonials and like numbers here. So food for thought on this. I'm working on Framer. Thanks for Framer. Sorry, feedback. No, no problem, no problem. Uh, but yeah, hope it was helpful on this. And that's it. If you guys have any questions— why, it's almost an hour. Wow, actually we are on time. It's perfect, perfect timing. What is the title of the case study video you mentioned earlier? The case study video? Oh, the video on YouTube. I think it's like the— it's like an after-hours video with like case study. I think it's like 4 videos ago, 5 videos ago. It's pretty recent, recent, if that's what you're, you're mentioning. But that's about it. If you guys have any, any questions as well, that would be super cool. Uh, I hope this stream was Interesting and knowledgeable and entertaining to some extent as well. So it's cool to chat with you guys and connect. I will see if we keep doing Saturdays, if we do Wednesdays, if there's another day that could work. Even like hours, I don't know the— I think usually like this time of the day for me, I don't know where you guys are, works for me. It's like, you know, like the transition between after work and before like Uh, the evening. So it's really cool. But yeah, make sure again, like, if you have time today or tomorrow, like, just look at some designs, grab some, like, nice visuals, nice colors, you know, like inspiration. Make sure to, like, surround yourself with good quality design. That's the easiest habit you can have to, like, slowly build your design palette, if you can call it that, or like design taste. That's like super, super important. Oh yeah, actually that was kind of like this for, for Danny on his website. Like, that's so cool. Hex has done some really cool— that's a unique, very unique website. Oh, that's what I, that's what I meant for, for Samir. That's what I meant, like having that little plus here. Wow, they do such cool work on Hex. So cool. Like something like this is like, it's perfect. Uh, where is it for Danny? Like this, Danny, for, for like your features, maybe you could have something like this. Maybe not the hover state with learn more, but like, you know, you keep the text, you keep everything, you just add like that little, that little visual. You can brainstorm as well with the AI and to like think, okay, this is my, this is my text, this This is my card. What kind of visuals could I bring in? It doesn't have to be crazy. It doesn't have to be super creative, but that could be like a nice little easy win to have. Do you design the graphics like illustration yourself or use AI? I don't design like illustrations. I'm not— I wish I was at that level where I could design my own illustrations. But yeah, I rely on AI for all of that stuff. Or we have like, we hire, we can hire also like, you know, designers for specific projects. The product is PatternCraft for the backgrounds. I'll try it. Oh, I actually didn't even notice the background, uh, but like it's pretty close to what you have, right? I don't know if it's any— it looks like it's, it's animated, but maybe I'm, I'm tripping on this. It looks like it's moving a little bit. But yeah, like that's super cool. Yeah. Okay. Nice. Again, like if it's the kind of projects you like and the kind of design that you like, try to like find other things like this, this kind of surround yourself. Have that. I don't know if you have that mood board for like the website and product, but really recommend it. It doesn't have to be like a super, super, you know, You know, two hours to work. You can just be ten minutes, twenty minutes going on like Pinterest, on Mobin, Instagram, whatever works for you. Or like other, like I've talked about it a hundred times probably on other videos, like Landbook, Curated, SaaS Landing Page. These are like really, really good resources to have. That's a cool website. Something I've realized recently is that there are so many products we don't know about that are super niche or specialized, and they don't advertise to us, and they look super cool. They have a clean brand, they have a cool website, a cool product, and you don't even know they exist. Oh, wow, that's so cool. So definitely keep exploring that. Oh, and that sends you to specific areas of the website. Okay, that's next level on this. But yeah, that's about it. If you guys have any more questions, let me know right now. Otherwise, I will sign off for this week. I will probably see you next week. I will share on the YouTube community page on my channel next stream. And yeah, make sure to have the bell notification on so that you don't miss new videos and new streams as well. There is a new redesign dropping probably Wednesday. I'm still editing it, but it should be a cool one. And then I'm working on some strategic more like product strategy focused videos as well. I'm going to try, see how it goes, see how I feel about it. Should be short videos, like 10 minutes-ish. That could also be fun. So might post it next week, or if it's not next week, in 2 weeks. Yeah, but that's pretty much it. You can always watch the replay as well on the channel. It's like the live tab that's new now. I mean new because I started. But yeah, you can always catch up on this, rewatch it, and enjoy it. So thank you so much everyone. Have a great rest of your day and weekend. Make sure to rest enough. It's super important. Spend time with your family and friends. And I see you for next one.










