How To Design Websites So Fast It Feels ILLEGAL

I've worked with companies worth over $160 billion, making over $25,000 a month as a solo designer. And in this video, I'm going to tell you 2 strategies that you can use today to design websites so fast it feels illegal. All right, so the first strategy that I found to make designs faster is to already have the visuals, the copy, is to already have the structure. And so what we want to do is we want to find those landing page design, those hero section design, pricing designs, and we want to be able to redesign them. It's going to let us Basically build a portfolio. It won't be our designs, it will be redesigns or concepts from other products that already exist. And that's going to give you a lot of opportunities to express the type of designs that you want, that you like to do, but also attract the kind of clients that you want to have. Because if you only want to do websites for SaaS companies, then you can just redesign SaaS companies' websites and apply your own style to it and your own thinking and strategy behind why you made those decisions in the redesign. And that's going to be a great case study, a great piece of portfolio. Portfolio to share with companies, with leads, even for job interviews. So I'm using, for example, bin.com. It's not paid, but I just use it. So I'm sharing it with you. They have like a marketing page. And you can see here, they have all of those, like the website, the products that they use, they share, they take screenshots of all of those sections, landing pages. And so for example, if I wanted to redesign one, I could pick this one here. I like this design. I could just copy it. Then I can go on Figma, paste it right here. One thing I could do is just make a frame that's the same as the design and then try to understand why they made the design. So I can be like, okay, So they've made this navigation here at the top. It's roughly 76. So they're using like multiples of 4 or maybe it's not. Maybe it's like, I don't know, less than that. Then they've made— they have a logo, probably this size here. So maybe 32 like this. Then they have like— do they have like the same text style? So sign in, you can see it's a little higher than that. So I can improve it. Maybe it's 18, 18 like that, 18, 20. Like, okay, cool. So that's the text style. Then let's see how they made their button. Maybe it's 48. Yeah, it's 48. Cool. So it's 40 now of spacing top and right. So it's probably going to be maybe 28 or something like that. So I can just try to do that like here and you got it. So it's a little tighter here, but I have pretty much 14 or, you know, something like that of paddings for the button. Do they use the same text for the button that they use for their navigation? And you're like, yeah, they use the same. And you see, just doing that already gives you like some ideas of breaking down the design and understanding how they make it and why they maybe take decisions like why this specific text height, what's the spacing between this one versus this this one. Like, you just try to analyze the design, reverse engineer it, and then the kind of next steps you can do is to actually redesign it. Like, you could have the design on the left and you could be like, actually, I don't really like this. I don't really like this text here, this headline. I feel like it's a little— I don't like having it in the middle. I think it would look a lot cooler if it were like left aligned and at the bottom like that. You would have these big cards that are in the back like here. Try to think about, okay, what's the structure like? How could I do it? What could be a different story to tell? And what could be something that converts that can also be on brand, that has potential to be an actual real page. I think that's what I'm trying to say here. And so then you can use that for your portfolio case studies and be like, okay, this is the reason that I've done, this is why I've done it, this is the story that I want to tell, here's the benefits that I think would come out of it. And then you could just use it as inspiration. Like you really like this design, the layout, the presentation, the use of the screens they have, and you can just save it in a page. Like you can make a page that's like inspiration and you just drop it there. And speaking of inspiration, there are other websites that are good. Like this one, Mobbin, is a paid one. So obviously not everyone can afford it, but you also have curated.design. This is free. I'm not even signed up and you can already access a ton of designs. It's really easy to get inspired by what, you know, great designers, great studios, great companies do to share their products, services. And it's a really good inspiration. And so you can just click, you can just visit the website and you can like, you're like, wow, that's super cool. I love it. Screenshot, put it in the file. Like you see this kind of like Apple kind of model and you're like, I absolutely love this. Take a screenshot and then just drop it there. And that's it. That's another inspiration. That you have, and the goal is not so much like you're going to say well then it's easy to just copy what they have. But the goal is not to just copy what they have. The goal as a designer is just to use a lot of sources from a lot of different places, a lot of different products, services, and even outside of design, and just try to combine them into something that's very unique and very you because then you apply your style, you apply your thinking, you apply your experience as a designer onto like those designs, those inspirations, the project you're working on, and that's where you can create something that's new, fresh, but still. Understandable by most people or by your target users. And that's where the magic happens really. Another one that's really good is startups.gallery. It's just a lot of startups. And I think the also benefit of that is you can find potential companies that you would want to work with. The other benefit of this platform is that you can also find companies that you could work with. Maybe there's a product that you really love. There's a design that you think you could improve or bring value to, and you can just go see if they have like a job for you. Like here, this company here, you can see they have a lot of jobs. They have a product designer. Job in San Francisco, you click and you've got it. If you are in San Francisco and you want to work there, then that's a perfectly good opportunity to apply for. And the next benefit, like you can combine what we've just talked about. Like you could go on their website, you could be like, well, this is a cool website, but I think I could make a better one. You just redesign it. You record like a Loom video of you going through the redesign and your decision as to why you did it this way compared to what they have. And you give it in your job submission. I'm a product designer, I'm a web designer, and I believe that I can improve your website, improve conversions, be more in in line with the brand that you have. Here is my version of it. And that's it. And that already goes a long way compared to just applying like anybody else. And then the last one is Landbook. It's a very landing page focused platform where you can see a lot of different websites. And I think just like the problem also that I want to highlight in this video, it's maybe not a problem, but something that usually happens is you're going to be surrounded by people who might not have the same standard as you do in terms of design, in terms of aesthetic preciseness. And what's going to happen probably is your Standards are going to drop. Maybe not today, maybe not tomorrow, but after a month, after 6 months, after a year, if you do not surround yourself with good quality designs, you are going to lower your standards naturally. And I think that's kind of like the one of the side effects of doing what I'm saying here, which is that you're going to stay grounded into those high-level, highly creative, well-thought-out designs, experiences, and that's going to naturally improve your standards in terms of design. And just that is already a win. Quick heads up, if you're designing websites for clients or even and just for yourself, this might save you a ton of time and stress. Elementor now offers high-performance web hosting made specifically for WordPress. It's packed with features that make your life easier as a designer. Your site runs on Google Cloud servers with Cloudflare's Enterprise CDN built in. You also get premium SSL, daily backups, and protection against DDoS attacks and botnets, so your site always stays fast and secure at no extra cost. Getting started is super easy. You get A free migration, one-click WordPress installation, and everything's pre-configured to work with their Elementor website builder. Whether you're moving a client site or launching something from scratch, it's smooth, fast, and a simple experience. And no matter which plan you choose, you get access to 24/7 support, so help is always just a message away when you need it. The best part? Elementor Hosting has a 4.9 out of 5 score on Trustpilot, outperforming most, if not all, of the hosting giants on the market. So you're not just taking my word for it. Plans start at just $2.99 a month. And if you're managing multiple clients, the ultimate plan lets you host up to 30 sites for $99.99 a month. All plans have a 30-day money-back guarantee. So check the link in the description to learn more. And thanks again to Elementor for sponsoring this video. The second strategy that I want to talk about here is kind of related to that, but it's pretty much to inspect the code. Inspecting the code is what designers do when they work with engineers and they want to check if design is correct, if the components are done right, if the spacings are good. And it's also something that you just can do to learn and deeply analyze a website. So for example, let's take the one that we talked about. We were not sure what the spacings were, what the dimensions were exactly in terms of specific pixels. And so what you can do is go on the website, right-click, inspect, and then click on this little arrow to inspect it precisely. And then we're going to check the spacings, the padding. So you can see the paddings were actually 20 pixels from the edge of the screen. Then you can see the height of The navigation bar is 60 pixels. And then you can see the text is 14 pixels with 8 pixels top and bottom and 12 pixels on the sides. And then the paddings inside is going to be 10 everywhere except on the logo. And you're like, okay, that's interesting. So they have 10 more pixels on the logo because that's a really cool way to do it. The headline, you're like, oh, that's an H2. That's not even an H1. It's 52 pixels. And then they have this one here, the paragraph, and it's going to be 18 pixels. And they're also going to add paddings on the sides and at the top to do the spacing between those 2 blocks. You can see that the blocks are together, but there is no spacing, no paddings, because it's applied on this. So already that gives you more context on how they think about implementing the designs. You can see more details about the buttons, etc. What's also really good is you can understand responsiveness, because when you make websites, it's not just for your ideal screen size, it's for desktop, mobile, tablet. And so you can easily just click on those and you can even change here the size that you want to have. So this is 390 pixels. Here's how it looks like on the minimum mobile experience possible. You can even select like predefined screens, like 900 for like tablet. You're like, okay, so that's how it looks in tablet. And that's a really helpful way to dive deeper into the design, dive deeper into the implementation. It's cool to make good websites and beautiful websites, but at the end of the day, whoever's paying you to design those or whatever the project is on needs to be real. It needs to be implemented. And you can always make passion projects, catch people's attention. You do not want to make them real and they just look beautiful, but like you're going to get paid because people are going to make money from it. If they want to make money from it, they need to implement it. It's a really good strategy to use. And the last thing I want to talk about is, again, with this inspect, what you can do is directly get the logo, the SVG logo. So you like, again, you click on this little arrow, you select the, when it says SVG, then you're going to go on the SVG in the code, copy, copy element, then back to Figma and we can drop it. The benefit is that it's an SVG, so it's going to scale infinitely and you can easily modify the colors in whatever shape or way you want. And I think for me, that's like the best thing you can do because Finding logos is really difficult. And so this way you can easily add the logo to your redesigns. You can also do that with icons. For example, if you redesign, if they don't have that many icons and you want to stay relevant, then you can also do that for icons. And it's again really good. That's the end of the video. I really hope you liked it. A big thank you to Elementor again for sponsoring this video. Make sure to leave a like and subscribe. Also, YouTube thinks you will like this next video. So if you haven't watched it already, or even if you have, go have a look. Good luck. Bye.