5 Web Design Resources You Should be Using | EP 661

5 Web Design Resources You Should be Using

1. Undrawn 01:26
2. UIgradients 03:42
3. Lottiefiles 04:18
4. Colorhunt 05:44
5. Blobmaker06:59
6. Bonus 10:04

Read the full episode transcript below:

00:25 David Blackmon: Hey everybody. Welcome to another episode of WP. The podcast brought to you by Wpgears.com. I’m David Blackmon

00:35 Tim Strifler: And I’m Tim Strifler.

00:37 David Blackmon: And this episode is brought to you today by the Divi Business Expert Course, if you’re a Divi user and you’re wanting to take your business to the next level. Come see what all the students have to say about the Divi business expert course, we’ve got about 500 students and it has really taken their business from zero to six figures, some of them a year. Well, that’s huge. Come see what they have to say. Head on over to WP gears.com. Check out the Divi business expert course, Tim is going to get us kicked off with today’s topic, five web design resources you should be using. And I promised yesterday that these are not typical normal ones that will list as a bonus at the end.

01:26 Tim Strifler: Yeah, absolutely. So, uh, as David mentioned, we wanted these to be a little bit outside the box things you haven’t heard of yet, uh, kind of newer resources, but very, very useful. And the first one on our list is Undrawn.co. So that’s the, the website domain dot co. And basically what undrawn is, is it’s. Open source illustrations. Now you’ve probably seen, uh, these types of illustration images on different  websites, for example, elegant themes, uh, for the Divi layouts, they produce, they have a lot of, uh, layouts that have these types of illustrations. Um, I think theirs are like fully custom, but not every company has the resources to hire a full time illustrator to draw these types of things. And so. If you go to dot co, well, you get to use open source, um, illustration images, and they have a whole bunch for different things, uh, that are common, uh, on the internet. And then what’s really cool is these things are SVG, which means they’re very, very small, very, very, uh, Lightweight in terms of, they’re not going to slow down your website. And so you can actually put in your highlight color. And so they’re mainly black and white, but then they have an accent color and you can put in your accent color that you want for your website. And then you basically, you just download the SVG and you can add that to your site. Um, so I’ve used him once. I didn’t use it for our website per se. I use it actually for a presentation I gave last month. And so it was a great way to add some color and, uh, Just kind of some graphics onto my presentation slides and completely free, very easy. You can use the search to type different things, you know, web page or, you know, customer service or whatever, uh, and then add your, your, your accent color and then boom, download it. You’re done.

03:42 David Blackmon: Awesome next on our list. Number two is UIgradients.com. If the URL doesn’t give it away, this has to do with gradients. And this kind of, what it does is it’s a site that allows you to see what colors work well together. And then we’ll give you the gradient of those colors and stuff. So it not only gives you the gradients, you know, the code to put into your site, to use for the gradients. It also shows you. What colors look good with as with a gradient, such as like red, for example, or orange or yellow or green, you want to know, well, what colors work well with this? Cause you want to keep your brand on point, but you want to give it a little spice and a little bit of creativity and make it look a little bit different. And gradients is a great way to do that. So check out UIgradients.com. Fantastic website. Totally free. Go check it out.

04:17 Tim Strifler: Yeah. The next one on our list is Lottiefiles.com. Now a lot of animations are, uh, supposedly the future of interactive design. So they are, uh, really cool animated, uh, images or graphics. And what’s really cool is Lottiefiles.com. Has like a marketplace. And so there’s a bunch of free ones that you can use right away, but then you can buy premium ones from independent designers, animators all over the world. Uh, you know, some of them, a couple of bucks, some of them are expensive and, uh, yeah, they’re, it’s a modern, uh, interaction. Divi animation, uh, type of graphic. And so there’s actually a WordPress plugin, um, that will allow you to add these types of animations easily to your WordPress site. I think it’s just called something. If you search wordpress.org, it’s one of the only ones last time I checked, uh, and it’s L O T T I E a is the type of animation. And then the websites, Lottifiles.com, L O T T I E F I L E S. Dot com.

05:12 David Blackmon: Awesome. That was a new one for me. I’m going to be honest. And it’s, I have been perused in that website. Just checking out all of the different, uh, things that they have. And, and I gotta tell you that’s, that’s pretty awesome. I’m glad that’s the future of web design Tim, because I think it’s clean and it looks just awesome. So, yeah.

05:39 Tim Strifler: Yeah, definitely. Um, you want to do the next, your next one, David?

05:44 David Blackmon: Yeah, let me do the next one. Next one we’re going to talk about is a color hunt.co C O L O R H U N T.co. And what this is, is this is a color website, similar to Adobe’s or many of the other color sites that are out there, which will allow you to put. Color swatches together. So for example, if you’re designing a website and you’re, you know, there’s no brand. You know, there’s no, um, color palette already associated with the site and you’ve got to come up with some things on your own. This is a great site do that because it’s going to give you five colors that go really well together. It’s going to give you there. They’re hex codes or however you use it, RGBA whatever it’s going to give you everything you need and it’s free. It’s going to show you examples of, so if you have a primary color, for example, it’s going to give you four other colors that are going to go really well with it. If you have two colors, it’ll give you the other three. So it’s a pretty powerful tool. It’s awesome. It’s similar to, um, kind of Adobe’s. Which we’ll talk about at the end and the bonuses and stuff, but it’s a great tool. Check it out. Colorhunt dot C O

06:59 Tim Strifler: yeah. Yeah. And the next one on our list is Blobmaker. So it’s a Blobmaker.app is the URL and it is a really cool tool for coming up with creative blobs. Now you might not have seen this before. Maybe you have, uh, but blobs have become. A somewhat popular design, a tool, I guess a design element, I should say. Um, Especially for like background image types, things, you know, behind, uh, you know, overlapping or, you know, image overlaps the blob. And it’s just kind of like a subtle design element on the page. And so the blob maker allows you to generate these SVG blobs and you can, uh, Control how many sides it has, you know, the shape you can randomly generate it. Um, and it’s really cool. You can set the color and then you just download the SVG, uh, and add it to your site. And so, um, it’s a really cool way to add something different to your site. Um, I wish I had a better example. Um, To show. 

08:07 David Blackmon: Yeah. I remember whenever these came out a few years ago when people started using them with like Divi, for example, and you know, it was kind of really good section dividers, you know, normally web’s webpage would be broken down and let’s just say it would have five sections and about section a portfolio, section a you know, an FAQ section and those sections typically broke with color distinctions, you know, like, you know, they would be different colors or something, but it would be a straight line across. And, you know, these, these dividers started being curvy, wavy lines and stuff, and it’s very similar to this. This blob maker, you know, is it’s, it’s a, it’s like a blob that you can put it’s, it’s included in the design element. And that’s the closest thing visually that I can give to you. Audioly that may help you visualize it.

09:01 Tim Strifler: Yeah. And I found a good example. If you go to ElegantThemes.com, the creators are Divi. You can scroll down their homepage and they have these blobs in the background, you know, there’s these blob type shapes they’re not using. They’re using some Brown circles as well as blobs, uh, as kind of subtle background. Uh, and so that can give you an idea of what I’m talking about here. Um, so yeah, definitely check that out. 

09:25 David Blackmon: And ElegantThemes. Boy, it doesn’t surprise me that they’re they’re way ahead of the curve design wise, Kenny sing over there at elegant themes is he is on point. He’s a world class designer. That’s right. All right. Tomorrow we’ve got another great episode for you. WordPress plugin highlight…

09:43 Tim Strifler: Wait we have bonus!

09:44 David Blackmon: Oh, we’ve got the bonus!

09:46 Tim Strifler: Bonus resources.

09:48 David Blackmon: Bonus resources ding, ding, ding, Tim. Thanks for catching it. Uh, you know, some of them are common things that every web designer uses that may or may not use, but you’ve probably used is, uh, I’m just gonna name them really quick, Tim. Is that okay?

10:04 Tim Strifler: That’s okay. Yeah.

10:05 David Blackmon: Uh, is B hats. That’s the Adobe network where you can go get some design inspiration. Another design inspiration is dribble. It’s also a place where designers will, will, uh, post their work so that they can get hired. So if you’re looking for a designer head on over to dribble, you can probably find one as long with pants, CSS, tricks and code pen are two awesome websites for the latest things like. Blob maker. They teach you how to, how to, how to do these things with code and how to pop the code and give you the code away for free they’re open source platforms. It doesn’t cost anything. Oh, check them out. Code pen, CSS tricks. Be Hanson dribble. Those are our four free bonus that’s you’re probably already using. And we didn’t want to just use those. We wanted to give you some new off the wall, out the box. As Tim said, stuff. Alright tomorrow, we’ve got another great topic. A WordPress plugin highlight advanced custom fields. Come check us out tomorrow and learn what we think about that. Plugin Tim until tomorrow. We’ll see you then.

11:13 Tim Strifler: Take care. Bye. Bye.