In today’s video, I’m talking about 5 amazing web design tools that you can use for inspiration when you’re designing your dope projects. Let’s go.
Let’s do this list quickly ‘cause I do not want to waste your time.
Now for most folks, they might go to Behance or Dribble for web design inspirations. And those websites are great, they provide a plethora of amazing designers, developers, and UI folks that are creating really great content and displays with their knowledge of designs and web development.
But what I wanna do with Lapa.ninja is show you this amazing platform where it aggregates all the best websites organized by categories that are live and out there. So with Dribble and Behance, a lot of those projects are spec projects, right? They might not be rooted in true development.
With Lapa.ninja, you’re getting a look at websites from all across the internet that are actually live and in front of you. So you can actually visit the sites, look at the interactions, use them for motivation.
So let me show y’all, it’s pretty built. So as you can see, I’m on the homepage here. Now what it’s gonna do is it’s gonna aggregate this based on what’s most recent.
What you wanna do is if you’re looking for inspiration, sometimes you can lose that, right? You’re working on a project and sometimes you’re, “Well, I don’t have any ideas, I don’t know what concepts will work on this.” What you can do is you can hit the Landing Pages dropdown, and it has everything by category.
So let’s say you’re working on a health & fitness brand, then you click Health & Fitness. And what’s dope here is you can also organize it by color. So if I click that dropdown, I can do “okay, well I’m looking for a dark theme, or a lighter theme, or maybe something white.” And it’ll pull all the designs based on that.
So I’m hitting Health & Fitness, and here I am. So here’s all the pages that have been uploaded and I can grab inspiration from these to get motivation for my design. We do this all the time when we’re creating art boards for our website projects, as well as brand guidelines.
So I’m scrolling through anything that stands out, I’ll go ahead and check it out. So let’s go back to the top, and let’s just click Drink.Zuzu, for example. It’ll bring you to that landing page, and you’ll be able to see the categories that it’s refined as, when it was added to the platform, and I’m looking at it here.
And then, what I can do is I can scroll to the top and I can either click this or click Visit, and it’ll give me a live version of the website—which is pretty dope. So now I can see what that site looks like in real time.
Now when we’re doing our different projects and creating inspiration, we’ll use a platform like Figma. Now what it does is it helps out for motivation in regards to our designers, collaborations, and things like that.
So if I go here—I’m just gonna show you some inspiration here—I can go to Website Artboard. And once I’m here, I just add in images and screenshots of these websites. So as you can see, I’ve got three websites here, I can hit the comments, and I can see recent comments that I’ve left and added here.
So again, going back to Lapa.ninja, it’s just a really great tool for looking at websites, getting inspiration, and then being able to see that website in real time. That’s the biggest pull with that.
One thing I’m gonna add too—and this is going into the second web design tool that I love—is called Wappalyzer. So it quickly identifies technology on websites. Now the great thing about this is, it does this instantaneously through Google Chrome.
So let’s say—going back to Lapa.ninja—I go to Drink.Zuzu, I’m like, “Okay, what technology is this website using? How do you build this out?”
I can click the Wappalyzer link here and it’ll tell me, “Okay, this site was built in Webflow, they have Facebook Pixel, Google Analytics, and they’re using Shopify for the ecommerce components of their site.” So this site might be split in half, where you might have the frontend through Webflow, the backend through Shopify, or maybe they’re using some third party platform where you can connect those like ---.
So it’s really cool to be able to see that technology quickly.
Now, bonus tool: it’s called Built With. So Built With is just like Wappalyzer, but it just gives you a more thorough look at the technology behind a website. And it organizes it per category, so I can see analytics, what’s installed in a website, I can see the widgets they’re using, right?
They’re using Elfsight, they’re using MailChimp, I can look at the content delivery network: CloudFront—most Webflow websites are on AWX, so you’ll probably see this in most of those. Cloudflare as well, Webflow, so all of those are included here.
So as you’re scrolling down, you can see the SSL, and you’re gonna have tons of information. So if you wanna see a quick bird’s eye view, check out Wappalyzer. If you wanna see more details, check out Built With.
We use these all the time when we’re in the part of our research phase for web design. So that’s the first tool—I know that was a mouthful, but I hope you got some value from it.
This is an amazing tool. I’m a big proponent of Webflow, as you all know if you’ve checked some of my other videos. But man, this tool is just phenomenal.
So what the folks at Flowbase have done is they’ve created—essentially—templates, components, apps, that you can use for your website where you can literally drag and drop sections of the site.
Now I won’t go into detail on Webflow as a content management system, but just know that if you go here, and if you go into Premium Components, you can go in and grab components that you need. So Popup/Modal, Content—it’s organized by categories.
So if I need Navigation, I can look at different navigations. Like this simple kind of dropdown, or a super mega menu—there are just tons of resources here.
Now there’s different sections on Flowbase. It does have a premium subscription site, which is $39 per month—which, if you know, is a super steal because their library is just huge. They’ve got dozens and dozens of components you can use to build that site.
So think of Flowbase as a component library. You can go there and basically piece together a website that’s cohesive and that looks really great for what you’re trying to accomplish.
Now they’ve also got free stuff. They have free templates here, where you can get blog templates, CMS job boards, portfolio pages.
So if you’re just starting out and you’re building a website or you’re doing something internal and just wanna get started, check out Flowbase. It’s an amazing tool. They’ve got tons of free and premium resources that you can use to build out your site to inspire your design.
Next tool that I wanna show you is UI8.net. Now this is the design industry’s best kept secret. Now this site curates design resources to help you in your creative workflow, and they’re organized by category.
So if I hit Browse, they’ve got wireframe kits, illustrations, icon sets, fonts, presentation. I mean, if I click Wireframe Kits—and we actually use these for our wire frames with Figma and it’s just easy to start from a library, especially if we’re doing a low fidelity wireframe.
Now if you click one of these, it’s extremely affordable. You have Vyro App Wireframe. So if I’m doing an app—let’s say it’s a financial-based app—it’ll tell me what platform it’s available in. Looks like Sketch and Figma.
It’ll give me previews of what those look like, and I can literally purchase it for $29. I mean, it doesn’t get any better than that.
They also have illustrations—we purchased a few illustrations on this pack as well. And they even spotted some of the designs that we created also. So if you’re working on a project that needs a 3D illustration or want some visual feel, you can grab those from the site.
And you’ll get some real high quality illustrations here that are really super affordable. I mean, look at this: this one’s $34 for amazing illustrations that you can really leverage and use in your projects.
Also, you’ve got Presentations, Fonts, Icon Sets—if you need some icon sets, you can do that. The organization that I love about this tool is everything is categorized, right? So let’s say you wanna do Social Icons, or maybe wanna do solid colors, or maybe something revolving around food.
And I can pick the platform. So I can do Adobe Illustrator, Photoshop, Sketch, Figma, Xd—all that. It’s just an amazing platform, we’ve used it tons of times for just ideas, creative inspirations, sometimes we’ve leveraged the icon sets as well.
So this is a really great tool for web designers to use.
And last but not the least is The Creative Edge, which is a blog on 99designs. So they have really great content on things going on in the design industry. So, how to find your brand target audience, growing your agency, learning design—I mean, it talks about conceptual design, universal design.
I try to read one or two of these a day just to keep acclimated in the industry, to know what’s going on, to keep my fingers on the polls or what’s happening. And these blogs are actually really well put together. 99designs is a logo design company, but the blog content is just really, really great—it’s thoroughly researched and it’s by real bloggers and designers in the space—and it’s just a really cool concept to be able to use.
And that’s it guys. That’s the five that I’ve got for you.
If you wanna grab a link, there’s a link below where you can just grab it. It’s a Google Doc, but there’s no opt-in. You can grab that when you need it. And I hope this helps!
