how many tabs do you have open right now? 5, 10, 20? The specific number is not important, but you know what is important? The quality of the tabs that you have open. So what I'm going to suggest in this video is that you declare tab

bankruptcy and start again. I declare bankruptcy and as you start your new life on the other side of tab bankruptcy, you're going to start with the six websites that I'm going to share with you today. And these websites are the websites that I'm using pretty much

every single time I'm going into a design and development project now. I'm going to split this into two main parts. The first is inspiration, so this is the gathering resource kind of something to actually help you design better phase. And the second part is improving

workflow. Now it's really surprising how few tools there actually are in this space, and I think there is a huge opportunity for more tools that do this. But the one tool I have that really improves my workflow has a massive impact. It's made me so much quicker at

working. It made my kind of day-to-day actually more enjoyable and it's had a really big meaningful impact on the world work that I do, the process, and really every single thing inside my business. So let's get into that first site and that is called To Inspiration. Now

Call to Inspiration is a really really nice website because most websites that you come to for inspiration are just full of main websites, they're the full website, and a lot of the time you don't necessarily need a full website for inspiration because maybe you're

designing a specific section of that site now what C to inspiration does really well is it breaks everything down into little modules so it breaks it down into two parts of a website or parts of a product that you'll be designing and then you can find inspiration for that

specific thing so if you are designing a sidebar you can come onto here click into here and see so many different examples of really well-designed sidebars but you can also see all the different styles inside of here now after one of my biggest pet peeves with

the typical kind of design inspiration sites is it takes so long to find what you're looking for cuz maybe you'll like a certain design style but if you're looking for a sidebar maybe they don't have a sidebar so it's just it speeds things up but it also focuses on designs

that really pay a lot of attention to detail on the really small things they're sweating the small things and it just it makes the design feel so crispy this is one of my absolute favorite inspiration sites to just jump around on as you can see here there's a bunch of

different elements inside of here there's also a lot of unique layouts that you can kind of experiment with when you're going through the whole design process now the second website I want to share is one that you've probably used before and that is onepage

Love by Rob hope now this is a website that I think I may have used pretty much for my whole career as a freelancer as a designer and I consistently come back to this with every single project because what onepage love does is it it curates

a lot of great landing pages, but it also has really good filtering abilities so you can find exactly what it is you're looking for when you come to this site. And it's consistently updated over time, so if I start to jump around the site you can see I can browse all the

different pieces of inspiration in here. There's a bunch of different resources, but what I like about this is just how well curated all the information is on here. Now an added benefit of OnePageLove is that Rob actually has really good learning resources. Now there's an ebook he created a couple

years ago called "100 Tips to Design Better Converting Landing Pages", and that's one of my most recommended resources that really helped me improve my design skills when I was actually working on landing pages. Now for me, this is pretty much the first place I come when I'm looking for inspiration on

designing different landing pages. For example, I actually found this Atmos landing page that is for James Caan's new app inside of here. And one thing I really like when you jump actually into the specific pages with the screenshots with all the information inside of there is it actually shares who has created

this landing page alongside that. There is a bunch of other tags inside of here. You can see it was built using Webflow, you can see when they actually published this, and then we have the full screenshot to the actual landing page itself. If I want to jump around I can

click on it and then actually go off to that specific site. And this is perfect because what I will typically do is go off to this site, then I will go in and grab a full screenshot of the landing page and pull that into my Figma file.

now with this third website it's pretty much become a hobby at this point just to browse the site and really just appreciate all of these different brand guidelines and that is Brand Guide and then they shared a website with those brand guidelines so if we

just click into CL for example what you're going to see here is we're going to have a specific page on the CL website often it is on a subdomain or somewhere kind of hidden on their main website and then as we kind of jump

down the page you can see a bunch of really interesting design that is sharing everything they've done in terms of the brand work for their company now often really large companies will have this so they can use this internally but people externally can also use their brand guidelines so they know how to

show the brand when they're designing assets this collection of micro sites may be one of my favorite things I found recently there's so many interesting pieces inside of here Cotto is a really great Studio by the way if you see anything designed by Cotto I'm I'm a big

fan of of that stuff inside of here but there's just so much inspiration you can get if you're working on any branding if you're looking for colors that work well together or if you're just kind of a little bit nosy like me and you like to

just see well documented good design but something I've also found is this is actually one of my favorite things to build we built a bunch of these inside of Webflow and it's so fun to actually design these and really bring the branding to life now whenever I'm

jumping into a branding project I'm going to come in here just kind of reference a bunch of different inspiration from all these other brands and see how other people are doing it well often do is actually just screenshot a bunch of different pieces from other people's branding and see how

they're kind of experimenting with layouts and then I can use that in my own work now this fourth website is more of a recent addition to my tool stack and that is godly. website and again this is a curation of a bunch of unique

website designs in a lot of ways this is very similar to onepage love but the great thing about a curation like this is you're going to see different things on this site than you are on one page love there's a bunch of different unique

Designs in here there's a lot of Animation inspiration and there's so many different pieces that you can see this is especially useful for Tech websites I find like often if we're working with a kind of more Tech focused startup and more of a modern design

focused company this is a really great place to get a bunch of different inspiration and kind of just see things that you wouldn't be seeing otherwise now this fifth website takes a slightly more nerdy approach and is less of a visual resource and honestly to be

honest it's more of a Learning Resource than it is an inspiration resource and that website is design systems. surf now what this website does is it curates the different Design Systems from some of the biggest companies in the world for example we can go into Apple's design

The system is going to give us the ability to easily scan through their design system that they document on the web. We're going to be able to learn from some of the biggest companies in the world and some of the best designers in the world how they

think about different things. For example, if I click on their color system here, you can see inside of here they just have a bunch of documentation about how they think about design in the company, and a lot of people in the company will be using this as a resource to onboard

themselves when they join Apple. Now, personally, a lot of this stuff is way overkill for the types of projects that I'm working on because they're often website projects, and a marketing website changes so much that you don't need to document to this extent, but I personally

find this a fascinating resource to use and learn from. And ultimately what I try to do is learn different pieces and kind of pick what works for me and understand, here is how some of the best designers in the world, who are way, way better than me, are thinking. Why are they thinking

like that? There must be a reason they're thinking like that. So, what can I pull from what they do that would actually help me improve my own workflow? It's also just really interesting to look in here and see how all these different companies do things slightly differently.

But ultimately, a lot of them operate in a very similar way. It's just the way that they actually word things. It's the way that they actually kind of work on those small details. It's ever so slightly different, but the overall structure of how they think about design

The system is pretty much the same throughout, so if you want to learn a little bit more about design systems, this is a really good resource to check out. Moving on to part two, improving your workflow, and I really wish there were more tools that made a meaningful impact.

Here's something that actually made a real difference. I've personally been designing and developing websites for like nearly six years now, and there are very, very few different tools that have helped me improve my own workflow and actually speed up the whole process, that is except this tool here, and that tool

is Retool. Now, at this point, I feel like I'm a bit of a broken record talking about Retool because every time someone asks me how do you kind of improve as a designer? How do you kind of work better as a freelancer? How do you build better

websites inside a flow a lot of time, I will suggest Retool in some capacity. Now, in the beginning, when I first started using it, it was just a component library for Webflow, and that kind of pretty much changed the game because things like that didn't exist, at least in a

properly organized way at that point. They then added in their own Figma components, which really helped because if you did want to actually design and build with Retool, then you could. But the other thing that really helped here is the fact that they used Fin Su's Client

First, which is a class system that I've personally been using, and and we use at Demandflow pretty much since it came out. Then, along the way, they've added a bunch of other tools like an icon converter that I ended up using a bunch.

of times but ultimately the biggest game changer for Retool and the reason that I always recommend it is their recent addition of the AI site builder and more specifically inside their AI site builder tools it has been their sitemap generator Now this is one of the few

tools that has really made an absolute huge difference to the way I work and it sped things up so much So what you can do inside of here is you can utilize AI to generate a sitemap for a different type of company So for example let's just say

inside of here we want to make a sitemap for a small gardening services company and I want that to be let's say one to five pages and then I want to go English UK Now I'm going to generate this sitemap and what's going

to happen is it's going to generate roughly a five-page site for that type of company and then what it's going to do is it's going to break down the homepage section by section Now I'm not just using this and sending this off to

a client and saying okay AI has generated this must be a great sitemap because often it isn't an amazing sitemap but what it does is it speeds up this process so so much because what you can then do is you can utilize the existing pieces here you can start to delete out

pieces that you don't think are necessarily needed and then what I will personally do is go through each individual section and I will think okay I've now got this outline so I know okay here's probably the main pieces I'm I should be including on this site then

I'm going to go through each individual section, write the heading, and then I'm going to go through and actually give some context to whoever it is that's writing the copy for the site, how I think this actually should be structured. So for example, I like to go down the

story framework of building a website. And ultimately, that means at the very top, at the very heading on the homepage, often that's going to be what is the most condensed version that is very ambitious and it very much kind of like, it's like the mission statement in

a sense of, here is the problem that we solve. Ultimately, you're trying to tell the visitor, you're going to use us, you're going to use this tool, this service, whatever it is, because we solve this problem. Then we're going to go down the page and we're going to go into the

problem because we want to relate to who the actual user is and we want to kind of start to break down, here are some of the pain points. We understand the problem that you actually have. Then we're going to start showing how we actually solve the problem through the

tool, through the service, whatever that is. Then we're going to start to go into kind of building some trust. So we want to make sure we're showing testimonials, we're going to make sure we have all the questions answered, the calls to action, all that kind of stuff as we go down the

page. And that's personally something I will do, and you know, it's not a very quick process to do that because you have to ultimately think through each individual section. But what Loom does is it gives you an outline of a bunch of different things to include inside of

here and then you can use this as a basis to work from so you can see we've already started to build out our sitemap I could go in here generate all the other pages and what I can then do is go through and adjust all of these pages to

however I want them to be adjusted once I have that actually done what I can then do is I can go over and share this with our internal team if we want to invite someone else to this file and they can adjust things and then once we're completely happy with this we will

send it to the client and they can come into this file and add comments to the sitemap so we can work back and forth as we would inside a figma file on this sitemap now you might think why would you just not use figma for this because you

can very easily design something that looks like this in figma but it's so fiddly to actually use it in figma and it's not built specifically for that purpose the fact that relo does this and automatically starts generating the content for you is really useful to

speed up that workflow now what you can also do here is you can change this over to wireframing and what it's going to do is going to generate each of those pages using the reloom component library and then if you wanted to you could actually

just pull this exact page into figma or directly into web flow to then use as a basis to design from now personally this is not something we use often but it's nice to have the ability to actually do this the other thing that's really great

about the way their sitemap builder works is you can build global components so you can create kind of these global sections that are going to be used through a multiple different pages on the website and you can have them inside of here and then you just have to change them in one

place it's very similar to having a component so what you essentially do is you create it one time you can change it throughout the whole site and it just makes it nice and easy to then kind of communicate with everyone inside the project that this is a section that we

will design and we will build one time and then we'll use it on a bunch of different pages because we want to get that repetition in we want to make sure for example a call to action often looks very similar throughout each page and we can just utilize that as we go through

the process the other thing we do inside of this site mapping is we would make sure to highlight each individual section and give it a color if it's doing a specific thing for example if it's a call to action section we want to easily see that the call to action

section is slightly different to the rest of the content or if you want to see that is connected to the CMS we want to make sure that it's very obvious that the CMS connection needs to be made for this section of the site and honestly this tool alone is worth paying for

reloom in my opinion but they also include the components and all the other pieces of reloom in that monthly subscription and I really do think there's room for more companies who build tools like this if they could actually improve the overall workflow for people who are using these tools for

their work and be happy to pay for them, but often what I find is that people are building tools to replace workflows. So they're not trying to speed you up in the thing that you're already doing, they're trying to take you away from that thing and do something else. And

that's great if it's multiple magnitudes better than the existing solution, but often it's not. And these little tools that just kind of improve your workflow and just really kind of embed in the whole process are very, very useful, and they are probably some of the best

software tools to build. Okay, so they are the six websites I think that every web designer needs to use, especially if you're using the kind of workflow of Figma over to Webflow. And if you have any other websites that you recommend, especially ones that are more like

Reeloom, then I'd love to see them in the comments. Anyway, thanks very much for watching, and I'll catch you in the next one.

6 Websites Web Designers Need to Use

6 Websites Web Designers Need to Use

Scripts