Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Episode 108: Our Favorite Tools for Website Visuals
185 Plays4 years ago
We talk a lot about strategy on the Brands that Book podcast, whether it be mailing lists or social media, or scaling and building a team. But one topic Krista and I noticed was missing is a practical conversation about pulling together the visuals of your website in a way that really elevates your aesthetic. So today, that's what we discuss: some of our favorite tools for all things visual on your website.
Krista shares some of her favorite resources for finding the right fonts, creating a color palette, finding solid stock photos and videos, how to create product mockups for launches, and embedding or not embedding an Instagram feed on your website. And, we also have a brief conversation about some of the strengths of Showit and Elementor.
For the show notes, visit https://daveyandkrista.com/btb-episode-108/
Recommended
Transcript
Exploring Web Safe Colors
00:00:05
Speaker
And these color palette generators that I linked to, a lot of them have an option for putting in web safe colors. So there are certain colors that if you know that if you pick that one and you pick a certain range of hex codes, it's most likely going to be displayed correctly on more sites and more monitors and devices.
Brand Building Insights with Davy Jones
00:00:25
Speaker
Welcome to the Brands at Book Show, where we help creative service-based businesses build their brands and find more clients. I'm your host, Davy Jones.
00:00:35
Speaker
We talk a lot about strategy on the brand set book podcast, whether it be mailing lists or social media or scaling and building a team. But one topic Kristin I noticed was missing is a practical conversation about pulling together the visuals of your website in a way that really elevates your aesthetic. So today, that's what we
Tools for Enhancing Website Visuals
00:00:54
Speaker
discuss. Some of our favorite tools for all things visual on your website.
00:00:59
Speaker
Krista shares some of her favorite resources for finding the right fonts, creating a color palette, finding solid stock photos and videos, how to create product mockups for launches, and embedding, or not embedding, an Instagram feed on your website. We also have a brief conversation about some of the strengths of Show It and Elementor.
00:01:16
Speaker
Be sure to check out the show notes at DavyandChrista.com for the resources we mentioned during the episode. And I want to hear from you. Let us know what kind of content you'd like to see on the Brands at Book podcast as we move forward. To leave your feedback, just send us a DM on Instagram at DavyandChrista. Now, on to the episode. All right, we are back with another episode of the Brands at Book podcast on a rainy October day.
00:01:44
Speaker
You look like it's rainy. You literally have your hood over your head and your earphones over it. Like you were the ultimate cozy look today.
00:01:53
Speaker
Yes, but it's cold. It's freezing. I feel like it's freezing all the time in our house, but especially as we have colder weather. But lots of exciting things to look forward to. I'm just looking out the window here as the holidays are coming up. So we have what, Halloween, Thanksgiving, Christmas, New Year's all coming
Holiday Excitement and Family Gatherings
00:02:12
Speaker
up. Real quick, what are you most looking forward to? Go.
00:02:15
Speaker
I'm most excited about Christmas and our first Christmas in this house and decorating and we're making all of our families come to us for all of the holidays. So I think that'll be fun too. Since we've been the nomads for the last two years, it's everybody else's turn to come to us. So I'm most excited about Christmas as well. I love the Advent season. You know this, but very excited about all of that coming up.
00:02:36
Speaker
Anyways, we are not chatting about that today. We are chatting about some of our favorite website resources, and this will be largely an episode kind of run by you because a lot of the resources we're talking about today are resources that you use or tools that you use on almost a daily basis, but I am not as familiar with. I see the finished product
00:02:55
Speaker
after you've used these tools, but I am not the one that's actually in there using these tools. So I'm excited to ask you some questions about this, these and different use cases. And basically if you are designing your website yourself or even just customizing building your website yourself, because really you shouldn't be designing your website yourself. If you're not a designer, you should be not starting from scratch. That would be our recommendation.
00:03:17
Speaker
And that's true of anything. We're not saying that just because we're website designers, you know, for anything focused on your strengths, your specialties. So anyways, we're going to dive into that quick update though.
Morning Routines and Productivity
00:03:28
Speaker
If you listen to our daily routine episode, we talked a little bit about how Krista used to start her day at five and I would start my day at four 30 in the morning.
00:03:36
Speaker
I feel like you were so proud of this win. I feel like you considered this a personal win for yourself. Since then, Krista has started getting up at 4.30 in the morning. It's a big win for me over here in the Jones household.
00:03:49
Speaker
And it hasn't been as bad as I thought it would be. I fall asleep by 9 15 most nights. Like I try to read a book before I go to bed and I don't get very far at all, but it has been nice to have like three whole hours of work to get stuff done, especially with so many things just popping up. School was closed because of pipe burst and all sorts of things like guests come and you spend a whole day doing farm tours and I'm still able to get a lot of work done.
00:04:15
Speaker
Yes, it is very nice starting your day at 4.30, as I told you, and I also told you, wouldn't it be that much harder than waking up at five in the morning? You're right, I'm still not sold on you getting the alarm clock that slowly wakes us up with light though, because I feel like it might start getting bright at what, like 4.15 in the morning, which is so early.
Debating Alarm Clock Preferences
00:04:34
Speaker
I don't know, if anybody has any good alarm clock recommendations out there, here are really, I think the only
00:04:41
Speaker
There's only two preferences that we have when it comes to alarm clocks. One is that the light on it is so dim that it wouldn't keep the room bright while we're trying to sleep. I don't want to see the numbers at all.
00:04:54
Speaker
I want to see the numbers. That's why I wanted a clock in the room without having to look at my phone. That's the whole point of an alarm clock today. If I get up in the middle of the night because I have to go to the bathroom and I'm walking back and I see the time and I'm like, oh no, now I only have two hours left to sleep. I will be more stressed. I'll position it just so that I can see it. But I want to be able to see how much time I have left.
00:05:14
Speaker
And you really are the opposite with that. I want to see how much time I have left, know exactly how efficient I have to be with my sleep, the remaining sleep that I have, but I don't want to look at my phone because even though I put my phone on do not disturb, you know, you can still see if you have notifications. You don't have to look at your, like, I just don't look. I need to know how much time I have left. Yeah, that just stresses me out. That's why I can't wear one of those whoop things that you have.
00:05:38
Speaker
Yeah, but the great thing about the whoop is that it doesn't have a face to it. It doesn't have any watch face. Anyways, how we make websites pretty.
Preferred Website Builders
00:05:45
Speaker
That's our topic today. Yeah. So these are tools and correct me if I'm wrong, these are tools that anybody can use. So whether you are a designer listening to this website or you're a non designer and you have to customize your own website, or you just want to be aware of some ways and tools that you can use.
00:06:00
Speaker
to sort of level up your website. So that's what we're chatting about today. And Krista put together this really long list. So we're going to talk about things like fonts, because that's a question that I think we get a pretty good amount. We'll talk a little bit about website builders, although I think going into the differences between our two favorite website builders, show it in Elementor or WordPress, we should spend a whole episode of that. So we won't spend a ton of time on that today. But we'll be talking about fonts, color palette generators, and we can talk even about why one would want to use a color palette generator.
00:06:29
Speaker
Things that Davey has never used. That's right. Stock photos and videos. I think that's a good thing to cover. We're going to talk about product mock-ups. So especially for launch graphics, we get a lot of questions because when we launch a new website, we'll typically create a suite of graphics for the people that we're launching for. And it'll have a scrolling GIF in it, you know, so that it scrolls through the website. We'll get a lot of questions about that. So we'll dig into that as well. Some of this other stuff though.
00:06:53
Speaker
cart systems, mailing lists, countdown timers, webinars, course hosting, podcasting, we should split that into another episode. So that's what we're going to do with that because that is, I mean, that's a lot of content to cover. So it is. And we'll also talk about embedding your Instagram feed and a few things that we've seen with that. So a couple options when you, if you want to include Instagram feed on your website and an option, if you want to include Instagram feed, but you don't want it to slow down your website, that's something that we've been seeing with things like snap widget and light widget, right? And they just
00:07:21
Speaker
break a lot. So I've gone onto a lot of people's websites lately and just seen that they're broken and they had no idea that they were broken. And yeah. Yeah. Cause it's at the very bottom of your website usually. Yeah. So alternative to that that we've found is more than sufficient, but let's start at the beginning. Let's talk about website builders real quickly. We prefer two website builders.
00:07:43
Speaker
Yeah, and we've tried a bunch of other website platforms. We tried Squarespace and Divi and some of the others. Out of everything that we've tried, we really love Show It and Elementor on WordPress the most. Why those two? Because they are definitely by far the easiest and most robust. So if you want the absolute easiest, Show It is that. It's drag and drop. You put an image exactly where you want it to go by moving your mouse.
00:08:08
Speaker
If you're used to the Adobe Suite, it's super similar. You can easily set colors and add custom fonts and do pretty background videos, and it's just really straightforward.
00:08:19
Speaker
I've come around to Elementor, not that I didn't ever not like Elementor, but show it I thought I was so used to for a long time that it was really hard for me to make the switch. But I would agree. And I think just one clarification I want to make about what you were saying about showing Elementor, they are easy. I wouldn't say that they're the easiest. I'd say that they're among the easiest. But I think what we found is that that intersection of easy, but then also
00:08:47
Speaker
being able to do what you want because there are maybe a couple other that the others are technically easier, but it's because they're so limiting that you only can pick from like a couple of color palettes and a couple of fonts and you can't have more than a few columns where you put text. And so it's just as a designer, that's really frustrating. But I think if you, the kind of person who just wants such a limited amount of options, maybe there are other platforms that you could consider. But if you want a beautiful, robust to say, these are our favorites,
00:09:17
Speaker
Yes, absolutely. So show in Elementor, I don't think you can go wrong. I really enjoy working in both. I would say Elementor is a little bit more technical and robust for that matter. But because of that, it just takes a little longer maybe to get used to.
00:09:33
Speaker
Yeah, because it's a lot more clicking around and finding the menu that you need to adjust something whereas show it it's really you right click it and you can kind of see it right there exactly what you can adjust. Elementor has more things that you can adjust and I think that's why it takes a little more time to learn it.
00:09:50
Speaker
But it's also nice about Elementor. It's easier to keep things on a grid and use columns and keep things formatted nicely. I think with Elementor, both of them use WordPress, which we're big fans of. We didn't say this, but Elementor is a plugin that you add to WordPress. And it's like $49 a year.
00:10:08
Speaker
That's right. And I think it even renews at a discount as well. So both are great options. Again, we should do a whole episode about this. I do have a blog post about this specific topic. It probably needs a little bit of updating, but a few other notes about that. I would say, especially amongst service-based professionals, we design more show it websites than WordPress. So that's typically the option people choose. And I think in part because you get a ton of design flexibility. You can do pretty much whatever you want.
00:10:38
Speaker
and it's pretty easy to use. So that's a pretty powerful combination right there. I think when it comes to some of the more e-commerce, digital marketery, what if that's a word? It's not a word. Of course it's not a word, but digital marketery type websites, we do probably a little bit more Elementor WordPress.
00:10:56
Speaker
Right. So you can add a shop to show it and we've done it many, many times, but we found that once you get to a certain number of products, it gets a little bit tedious to update. And there are certain features of shops that can be a little more challenging with show it than with Elementor because Elementor is going to let you use WooCommerce built in and you have complete control over that. And so it just has a lot more capabilities when it comes to a shop.
00:11:21
Speaker
Yeah, absolutely. Whereas show it not a native e-commerce platform. But anyways, like I said, we won't go too much further into that. The last thing I'll say about just not even about website builders, but what you were saying about using a shop on show it, we're starting release case studies, just featuring different websites that we've either built or people have used our templates to build.
00:11:43
Speaker
and talking about what we're calling their website stack. So the different tools that they're using with their website. And so one of the first ones that we're releasing is actually a preset company. So they're selling mobile precepts, I guess desktop presets as well.
00:11:57
Speaker
they actually use show it with Shopify light and it's a beautiful website and it actually features two of our fall line website. Like you just seem to say what it's veil presets. If you want to look it up and check out their line and that will, that case study will have been released by the time this episode is released. So chill a shout out and we'll be releasing a bunch of those featuring different websites probably once a week for the foreseeable future. But moving on, let's talk about fonts.
00:12:22
Speaker
So the first source and one of my favorite sources for fonts is Google Fonts because it's free and because both Showa and Elementor are automatically connected to Google Fonts.
Typography's Role in Web Design
00:12:32
Speaker
So if you're using one of those platforms and you pick a Google Font, they're already there. You don't have to do any embedding or loading.
00:12:40
Speaker
Awesome. So you have a number of different font options listed here. I'm just going to go through real quick all of them. Okay. Maybe you can let me know where you would recommend people start. And if there's any, there's little things about each that people should know, or if they're looking for something specific. So you have Google fonts, which you just talked about a little bit. My fonts, creative market, font squirrel, avoid. No, you're saying avoid.
00:13:04
Speaker
I was going to make a list of places not to get your fonts. Sure. Sure. Not part of that list. So part of the list of other places that you can use Adobe and lost type Co. Correct. All right. Awesome. And what the font.
00:13:17
Speaker
You don't actually get fonts there. That's how you identify fonts. So it's this great website. I think it's whatthefont.com obviously play on words, but you can take a screenshot or upload an image there and select the font and it will help you identify fonts. It's connected with my fonts. So if it is a premium font that you're looking at, it will show you that font and similar fonts.
00:13:38
Speaker
and then you can purchase that font and use it on your website. My fonts, like I just mentioned, they have a really great preview text. So you can preview all sorts of different fonts. You can look at different families. You can look at similar groups of fonts. And then one thing I like about them is that they show the variations of different characters. So a good high-end font.
00:13:59
Speaker
is going to have different variations of characters, especially with a script font. They might have different ways of doing the capital letters. And you can see all of those variations on my fonts. They're just really high quality. You can also buy either the desktop or the web versions or both of a font. And if you're going to use a font on a website, you do need to have the web version and the web licensing for that.
00:14:23
Speaker
And then likewise, a web licensed font isn't going to work on your desktop. So if you wanted to do like print pieces or a logo, you would need the desktop version of that. As far as fonts go, I don't think there's anything in this list, but you talked about some of the characteristics of a high quality font. What are some fonts that people should or characteristics even of fonts that maybe people should avoid?
00:14:43
Speaker
I think like free ones from a website that kind of looks cheap because a lot of times they're stolen from other sources and so they're not going to have the correct licensing with them. And sometimes they're just outlined versions of fonts, which means that if you really were to zoom in on that font or make it big, you'll notice that it's not very smoothly drawn. They won't have the variations of different characters and it might even have a virus that could hurt your website or your computer.
00:15:09
Speaker
It's good to know, want to avoid that. Also along those lines, maybe you could talk us through what people should expect to pay for fonts. What's in the ballpark of reasonable? What would you recommend, let's say, to a client of ours, pay for a font versus stuff that's just outrageous? And then how can we go about making sure that we do get the right licensing and we're using the correct version for our websites?
00:15:31
Speaker
I really only ever buy fonts from My Fonts and Creative Market. Creative Market has a lot of really beautiful hand-drawn scripts and more contemporary fonts, which are also on MyFonts.com. My Fonts just has so many options that sometimes it takes a lot of filtering to really find what you want, whereas Creative Market is a little bit more limited. I think it's a newer platform, and so if you go on there right away, you kind of see the trendier fonts.
00:15:56
Speaker
Those range from like $19 to maybe like $50. They're not a lot of money. With that one, there are different licenses that you can buy when you're downloading it. So you just want to make sure that you're selecting the right license for how you're using it. So it will tell you this can be shown on this many websites or this can be used in an e-publication or this can be redistributed and so on. If you're using it on a larger, more popular website, you'll have to pay a little bit more money than if you were just using it like in a print piece.
00:16:24
Speaker
Sure. So and all that stuff's outlined typically when you purchase on myphones.com. They really just have like desktop version and then web version. And so when you go to buy any font, you can see like, you can select I just want the desktop. I just want the mobile or I just want the web.
00:16:40
Speaker
web, or I want both. And typically if you buy both in a bundle, you'll save a little bit of money. And those again, probably range from like 20 ish to over a hundred. If you're buying multiple licenses with multiple font variations. So a variation would be like, if you're buying a font and you're buying the bold version and the italic version and like a thin version and all of those variations and the more you buy, they'll bundle it. And so sometimes you can get a better deal by buying the bigger bundle.
00:17:07
Speaker
So just to summarize, if you come across a font that you like online, you can use a tool like what the font to help you identify it. Correct. All right. You should avoid lots of free fonts out there. Right. Unless maybe you find them from Google fonts. Awesome. So, and just probably in general, avoid downloading things that you're not quite sure about onto your computer.
00:17:30
Speaker
Anyways, moving on. You specifically get most of your fonts from My Fonts and Creative Market. When you go to purchase the font, it will outline for you what the different licenses are and what they mean. And it's pretty clear in terms of what version you want to get. If you need it for your website, you want to get the web version.
00:17:49
Speaker
Correct. There's one more source. If you use Adobe, you have access to the Adobe fonts and they don't turn all of them on at once when you first sign up for Adobe, but you can go to the Adobe website and turn them on and you can use more of those fonts on your desktop. If you want the web licensing for a lot of them though, you would have to go buy them and usually I buy them from my fonts.
00:18:09
Speaker
Awesome. So just a note, like if you're using something in your logo and you can't find it on your website, like in the Google list, you might just need to look at my fonts and see if you can find it there. One question. We might not be prepared for this. Okay. But would you agree that the font that people choose for their website makes a big difference in how their website looks, right? I took multiple typography classes because the fonts that you choose are so important.
00:18:37
Speaker
Yeah, absolutely. So when you think about websites, it's a collection of words and images. I mean, obviously that's oversimplified. So how your words look make a big difference. Do you have any recommendations on maybe what people should shy away from when choosing a font?
00:18:54
Speaker
so many recommendations. You don't want to use too many fonts. So a general design rule of thumb is one display font. So a display font is going to be like a script font or like a more unique font that you'd really only want to use for headlines because it would be too difficult to read at a smaller size for body copy. So career, you know, like the typewriter looking font, that would be also considered a display font just to give you like an easy visual.
00:19:22
Speaker
You also, ideally, only want to use one serif font. And so a serif font is going to be a font where if you look at the characters, like the letters have those little feet on the ends, that's a serif. And then you'd also want to use one sans serif font. And so a sans serif is the opposite of a serif. It's going to have no feet on it. And that'd be like Ariel, Helvetica, those like cleaner looking fonts.
00:19:43
Speaker
So ideally no more than three per website and then limit your use of display fonts to only headlines and you want to make sure that your fonts are big enough for like your grandmother to read ideally. One mistake I see a lot of people make and I've made this plenty of times in the past is to make fonts too small on a website especially on mobile.
00:20:04
Speaker
And this is more of a risky run, I think, too, if you're not designing on maybe a bigger monitor. Right. Yeah, so something to keep in mind. Maybe you're using your iPad or something to customize your website just because it looks okay on an iPad doesn't necessarily mean it's going to look okay on an iPhone or vice versa, I guess.
00:20:23
Speaker
Um, that's, you know, more, more information than I probably ever wanted to know about, about fonts. But I think, uh, helpful for a lot of people out there. And again, one of those things where, I mean, some of the things you're going through, just in terms of how many fonts you should choose for a website, I think pretty intuitive or should be pretty intuitive to people. Even if you've never taken a topography class with that said, it is a mistake that we see pretty frequently on, on websites is people are just using too many different kinds of fonts and fonts that are really, really hard to read.
00:20:52
Speaker
like a script in like a sentence, like scripts should really be no more than a couple of words for like things like that. And it's almost like an accent to the design, right? All that's great to keep in mind for fonts. Let's move on to color palette generators first. Did you even know these were a thing? Probably not. You know, maybe, I don't know. Like I barely pick out the colors I wear, you know, on a daily basis. I need a color palette generator just for like my outfits. You were literally only wearing gray today.
00:21:19
Speaker
I know. Okay. Well, typically I'm not in sweatpants. This is like the first day in a long time that I've just been in sweatpants. It's just, if you all could see what it looks like outside, it's a sweat pant day. Okay.
Crafting Cohesive Color Schemes
00:21:29
Speaker
Moving on. Color palette generators. One, why use a color palette generator?
00:21:34
Speaker
Sometimes it's really hard to come up with a color palette of multiple colors that look good together and so there are all sorts of palettes that you can do. You can do like a monochromatic color palette so that's where you take one color like maybe it's your primary brand color and you do lighter and darker
00:21:50
Speaker
and maybe even brighter and more muted shades of it to create a visual. That's one of my favorite things to do because I don't love using a huge variety of color. I like to just have subtle pops and so that's a good way to do that. It's hard to figure out what colors compliment each other and look good together and so these color palette generators could be random. You can do a lot of like random generations and just keep hitting like shuffle until you find one that you like or you could put in a few colors you know you like and it's gonna come up with complementary colors that are gonna all look good together.
00:22:20
Speaker
And so a lot of them are really similar and we'll have a list of all the links in our post that accompanies this podcast, but Colormind, Palaton, Color.Adobe, so that's Adobe's color palette, Color Hunt, and then if you want Color Hunt, which has like pre-designed palettes, if you just need ideas, and then Squirt,
00:22:41
Speaker
So C O O L O R S dot co that's going to let you generate a color palette from an image, which might be nice if you, maybe if you're a photographer and you tend to shoot the same style of image and use the same kind of tones in your images, you could use that to generate the colors and frequent tones in your image and then pull those out and use them. And then you know that it's going to coordinate well with your work and your images.
00:23:05
Speaker
Yeah, you probably use that for something like Instagram if you're really trying to keep your Instagram feed like cohesive. I think if you wanted like graphics that go with it because it's going to pull the tones out of your colors. And we use this a lot for mood boards when we're trying to figure out a color palette for our clients. So we'll put in a couple of their images and see if there's a general theme to their image style and then generate a palette from that.
00:23:27
Speaker
Yeah. And so those were a lot of links. So like Chris said, those will all be in the show notes as well. Anything else to say about color palettes? Just, I mean, obviously you have preferences for the colors that we like to use, for instance, in our brand, but in general, maybe as people go, go about choosing brand colors, creating a color palette, things they should keep in mind, things they should avoid.
00:23:50
Speaker
I think it's similar to fonts, like not too many colors. Like I would probably pick five or six colors that use consistently and maybe pick one color that is always your button color and use one color, which probably needs to be like a darker gray or black for your fonts and your text except for headlines. Headlines can be different colors.
00:24:09
Speaker
if you're going to use a color like pink not the most ideal for text because it's going to be really hard to read so pink should be used for especially if it's on white yeah even pink on black i guess would look that'd be hard to read yeah and if you use a fun on black
00:24:24
Speaker
It probably needs to be white and then it needs to be probably bigger than normal in order to account for all of the black and like the way that your eye travels through it, if that makes sense. So no pink for fonts unless it's like a headline and it's a darker pink. Yeah. And I'd say also just some colors don't look great on web.
00:24:47
Speaker
Yeah. And some colors, I tried it generally in my design. I try to avoid going too bright because if your colors are too bright, it's going to feel really busy and it's going to overwhelm the images of your work, which typically, like I know a lot of people who listen to us, the images of their work are how they sell their services. So those are more vital than using bright colors, for example.
00:25:10
Speaker
Yeah, and I feel like some people's monitors just display colors. Oh, yeah, they do. So, awfully, you know, it has nothing to do with the website. Obviously, there's only so much we can do to prevent that. I assume that certain colors are probably more susceptible to that than others. Yeah, and these color palette generators that I linked to, a lot of them have an option for like putting in web safe colors. So, there are certain colors that if you know that if you pick that one,
00:25:35
Speaker
and you pick a certain range of hex codes, it's most likely gonna be displayed correctly on more sites and more monitors and devices. Perfect.
00:25:45
Speaker
All right, so moving on to stock photos and videos. And after that, we have product mockups and we'll talk about Instagram a bit. So we're getting through stuff, but stock photos and videos is so important, especially, I mean, I'm just gonna use case here. Are you using TIL? Yep, that's right. Guys, they have no image. They have a couple of headshots and that is it.
00:26:09
Speaker
for photographer especially. Typically they don't have any issues with having imagery for their website. The problem that we see or the challenge rather that photographers often have is that they've been in their work so long they just don't know how to curate the work. So that typically means maybe they could just get overwhelmed choosing images or choosing way too many images and not be able to whittle it down to their very best.
00:26:32
Speaker
So, I think that's one of the advantages of hiring a professional designer is that they can help you with that process and really eliminate some that might be great images but not part of that curated budget. Oh yeah, because the designer is not emotionally tied to any image and so it's just easy to just crop out the ones you don't like and add the ones that you do.
00:26:52
Speaker
Sure. But then there's also clients out there. Till would be one of those. We just haven't spent the time doing brand photography. And maybe we should. I know there's an argument for that, but it's just not something that we prioritize. It's so hard to think about you guys posing for brand photos anyways. Exactly.
00:27:11
Speaker
I took a few photos of you and you were so awkward. And we have, I mean, even beyond that, so we have a team and we really haven't been able to get, and our team's grown a lot in 2020, but obviously like everybody else in the world, we haven't really been able to get together as a team. So it's one of those things where we want to invest in something like brand photography, we want to get,
00:27:32
Speaker
updated headshots for the entire team. But right now, we can't get the full team together. And so it's almost like, well, we should just wait until we can instead of getting bits and pieces of the team together. So all that to say, a perfect example of a company that doesn't have a lot of imagery.
00:27:49
Speaker
So relying on some stock photos and videos was important, but finding good stock photos and videos is tough.
Choosing the Right Stock Photos
00:27:57
Speaker
And I'd say even photographers occasionally hear, hey, my style has changed pretty drastically. This is kind of where I'm going. This is where I came from. I don't have a lot of images that fit this particular style. Or they need something for like a more like a product mock-up or like a thing like that, a specific image that maybe they don't have.
00:28:17
Speaker
So let's talk through maybe some of our favorite stock photo and video resources, and maybe a few things people should be concerned about when it comes to stock photos.
00:28:26
Speaker
Social Squares is one of my favorites. We are friends with Shaye Cochran who started it and she's been on the podcast a long time ago. She has talked about Social Squares in particular. And it was a great episode about productizing your service. So basically taking a service and turning it into a product. So if you're interested in a little bit more passive income, that's a great episode to check out. So that's a monthly subscription. You get access to hundreds of maybe even thousands of images at this point. I haven't counted so I don't know.
00:28:53
Speaker
but they release new batches of each month they have themes they're always thinking ahead for seasonality so like right now they're starting to release thanksgiving and christmas and holiday and winter images they have a lot of desktop and like device mock-ups and marketing type images which was helpful and we used some of those for till
00:29:13
Speaker
And they're just great for social media and also for filling up a website, especially if maybe you're like Till and you don't have a lot of images. I wouldn't recommend that a photographer use a lot of their images on their website because I think it could be misleading. But I think it's okay to use a couple, especially to make up the product type images on a site. Sure. Another one, Sourceco. Who has also been on your website, on the podcast. Yes, Taylor has been on the website, sorry, on the podcast, yes.
00:29:40
Speaker
Not twice, I think once. I think she's been on the podcast once. She's also a copywriter. That's right. Yeah. Yeah. Um, we're just giving shout outs to everyone today, but she has a beautiful collection of wedding industry related stock images. And you can, I, last time I was on the website, you can buy them individually or you can buy them as a big group of images. And so you get access to just tons of images. Clients of ours have done that before too, to help fill up their website.
00:30:06
Speaker
Awesome, so of the ones you have remaining, Creative Market, iStock photo, Unsplash, Pexels, is that right? Or is it Pexels? I think it's Pexels, I don't know. I never say them out loud. Spelt P-X-E-L-S, Cover, Pixabay, Picjumbo, styled stock.
00:30:21
Speaker
Hold on, let me group them because Creative Market and iStock photo are pretty like stock photo-y. They do have a ton of options. Those two are paid. And so generally I try to avoid using those. I use Unsplash and Pexels a lot. And then for some of our newer templates that we're releasing for our fall line that have video in them, I used Cover.
00:30:43
Speaker
And I think I used some videos from Pexels too because they all have a ton of really great high quality stock photos. We used a lot of their agricultural and marketing images for the Till website. Till has a subtle, if you can't tell from the name, like Till, like to Till Ground has a subtle agricultural branding theme. So we used a lot of images from those sources because they're free. They have really good quality images and then you can also filter by photographer. So if you find a photographer that you really like,
00:31:10
Speaker
you can get different images from the same collection and sometimes even the same shoot, and that can also help fill up a website. So a few things to know about stock photos. One, I think it goes without saying, some are cheesy, they look like stock photos, important to find, maybe the right fit for whatever you're using it for. Your brand and your audience. Yeah, absolutely. And I think, I mean, I think we did a great job with Till. Not that we did it, you did a great job with the Till website.
00:31:40
Speaker
And if you haven't checked out that new website, you can go to till.agency, T-I-L-L dot agency, and check that out. But anyways, also when it comes to stock photos, probably just like fonts, we have to worry about licensing and use, right? And so I assume that there are directions, or at least if you look in the different terms of service, you can figure out how and when you can use
00:32:03
Speaker
because some photographers even on a site want to be credited and others do not. So it really is going to depend on the exact imaging that you're using. I know that with creative market and iStock photo, they're similar to the fonts. And sometimes if it's being used a certain way, you have to pay for a different license than if you were just using it in one print piece.
00:32:26
Speaker
Okay. Okay. Awesome. So definitely something to be aware of, right? Yeah. Just in general, anytime you're using somebody else's images on your website, you want to make sure that you're giving credit where credit is due and, you know, staying above approach. So moving on to let's see product mockups. Yes. I feel like this ties into stock images a little bit.
00:32:48
Speaker
Yeah. And then a little bit about creating graphics and lead magnets too, because they're kind of, they kind of go together. Sure. So if you want to do like a product mockup, like you want to take a picture of your website and put it in a like desktop or laptop and use that as your launch graphic, I tend to, well, I use a plugin called script go full page and that's a Chrome extension that you can add for free. And that will take us all like a long screenshot.
00:33:17
Speaker
of your website pages. And so you can go through your site page by page if you want and take screenshots of your website. So I use that. And then I typically buy or download the actual like computer mockups from Social Squares or Creative Market. And then I use Photoshop to actually drop the image into the design. And I know that's probably kind of confusing. So we have a launch graphics tutorial if you go to daivianchristo.com so I'll show it.
00:33:45
Speaker
Yeah. And we'll make sure the launch graphics tutorial is in, yeah, is in there. So if you're just like that made zero sense to me, there is a video tutorial on how to do this. We'll have it in the show notes linked. You can watch that video and figure out how to launch product mockups.
00:34:02
Speaker
And there's a bunch of different tools that will take full page screenshots. I think that's just the one we use. I always warn Krista, whenever you're downloading a free tool, you want to make sure just for privacy reasons, like you understand what you're downloading and stuff. Anytime you're going to record something or download something that's going to record your screen or whatever.
00:34:22
Speaker
That's just my small little disclaimer about tools. Chris is looking at me like I'm crazy. You are. Sort of a security privacy nut over here. Anyways, moving on to...
Design Tools for Creatives
00:34:34
Speaker
Other tools for creating graphics. Yes. So we use Sketch. That's also what our designers or till use as well. And we create websites. We do like the design for websites in this. We do a lot of our launch graphics that we create for clients in Sketch. All of our ads are done in Sketch. So Sketch and Illustrator in design are the three professional tools that you've listed. So if you are a professional,
00:34:58
Speaker
A lot of people have access to the Adobe suite because if they're like a photographer and they want Photoshop on Lightroom, they probably pay for it. I guess my question is for somebody like me, of the tools that you list here, Sketch, Adobe, InDesign, Canva, and Google Docs slash slides, what tools should I be using?
00:35:16
Speaker
For you, just Google Docs. Not even Canva. Canva was like made for people like me. No, I'm sure that you could handle Canva. But yeah, you can create graphics. Did you say Canva? Canva. Canva, yeah, okay. But Sketch, Adobe Illustrator, InDesign, all professional tools, InDesign and Illustrator are both Adobe tools. I feel like people are probably pretty familiar with the other ones that we just mentioned.
00:35:41
Speaker
And again, just to recap that, Canva and Google Docs in particular, if you don't feel like you're much of a designer, those are great places to start. I'd say Canva in particular. Well, Canva for creating graphics, Google Docs probably for doing like a lead magnet. Sure. And you can export it as a PDF. And exporting, and same with like Google Slides. Or Google Slides rather, even more so than Google Docs. And Keynote even if you're on a Mac, you can also create some Keynote and then export it.
00:36:07
Speaker
as a PDF. Sketch and I'm sorry, going back to sketch though, what are some of the main benefits of sketch? Like why do you sketch for most of your design work, right? Yeah, they have great typography within sketch. And I love how easy it is to export files. So I can do a design and have like,
00:36:27
Speaker
the about page, next to the homepage, next to a services page. And then if I want to export different pieces in Adobe Illustrator, I'd have to like take a little design and put it in its own document or cut it out and it's just more challenging. But with Sketch, I can select multiple things and then export them as like twice as big as a JPEG or as an SVG. And it's just really easy to export a ton of different pieces of a design at once.
00:36:53
Speaker
They also let you do what they call a symbol so I can make the header file a symbol and I only if I can update it once and then it'll update on all of the pages. So you can do that for like headers and footers and really anything that you wanted to be shared across multiple pieces of a design.
00:37:09
Speaker
One other thing they just rolled out with, I'm having Emily or one of our designers over at Till explore this is sketch for teams, which I think will maybe allow it designs to be more easily updated or the most recent version updated across a team. Right. Which is great. So that's exciting. Yeah.
00:37:25
Speaker
I use Adobe Illustrator more for illustration. So if I'm illustrating for a logo or if I really need to modify a font, Sketch doesn't really let you not modify the pieces of a font the way that Illustrator does. And so Illustrator is what it sounds for. If you really want to draw or you really want to do a logo, that's what I use Illustrator for.
00:37:47
Speaker
And then InDesign is good for like documents. If I was designing a lead magnet, I would use InDesign. Davy does not like InDesign. That's because if Krista designs like the, let's say we have a lead magnet, a lot of our lead magnets are text heavy because I like to write and then she'll design it, then she'll send it to me in InDesign and then I want to make update like the text and then the text doesn't like go on to the next page.
00:38:10
Speaker
Well, it does, but you have to know how the different boxes work in order to have it flow between the pages. And so that bothers Davey. And then images can be finicky in InDesign because they have to stay in the same place in order to be linked into work. And that also drives Davey crazy. So he gets really frustrated. Lots of things driving me crazy. Yeah, he gets really frustrated. He gets used InDesign.
00:38:31
Speaker
All right, so we
Integrating Instagram Feeds
00:38:32
Speaker
are here at the end. We're talking about embedding an Instagram feed, which I feel like it doesn't really fit with the rest of our tools that we're talking about, but it is sort of one of those things that people, yeah, visual elements that people want to add to their site. I go back and forth on really whether it's worth it or not. I guess one of the things though, is that if I'm researching a company and a product and I kind of want to know what they're doing on social, which is ironic.
00:38:54
Speaker
for a lot of reasons. Because Till does not update any of their social media. We're getting better at it. We're working on it. We have been busy. He was like 10 people and they can't even... We feel very fortunate that we've been busy with client work and so that's been the focus and it hasn't necessarily been making sure we stay on top of our Instagram feed.
00:39:14
Speaker
Anyways, it is nice if I had never heard about a company before. With that said, I don't typically look at an Instagram feed and say, oh, you know, they don't have X amount of followers, so they're not legit or something like that. You don't look at their feed on their website and say like, oh, this doesn't match their actual feed. Yeah, I mostly do it just to learn more about the company, I guess, you know, kind of see what things they're posting.
00:39:38
Speaker
Definitely a case to be made. And if Instagram is a huge asset for you, I can see why you would want to link to it on your website. Now, the question comes down to how you want to link it because there's quite a few different ways. One, you could just include an icon and that you could link from that icon and that can be it. You could embed your feed, which we used to do in the past, but we found after running a number of speed tests that it just slowed down our website significantly.
00:40:03
Speaker
And they've been really fragile lately and just breaking and coming unlinked and people don't know that. And then they have this like broken, not so pretty widget in the bottom of their site. Yeah. And I just think it's not worth the slowdown in your website to have your feed dynamically embedded in your website. So what I mean is by embedding it, people can always see like the most recent five, six posts or whatever. What we've been doing is we've just been creating these fake Instagram feeds. Which is actually how the templates come.
00:40:32
Speaker
This is nice for a number of reasons. One, you can include whatever Instagram posts you want to include there. So maybe your latest post or whatever doesn't really fit on your website. Well, that doesn't matter because your website's not dynamically updating every time you post. So I think that's a great way to go. And I think on one hand, you know, it gives people something to see from your Instagram feed. They can click into it and go to your Instagram still. At the same time, it doesn't slow down your website.
00:40:57
Speaker
But if you do want to embed your website, there are really only two ways to do it, especially if you're a show it user. Snap widget and they have a free plan, but it's not going to link directly to your Instagram images unless you pay to upgrade it. Snap widget is definitely one of the more finicky ones. And then light widget, which is $10 to upgrade it once. And then that will let you use it on an HTTPS version of your website, which ideally everyone would be using the HTTP version of their website. Especially now. It's one of those things that
00:41:27
Speaker
I think. I mean, a lot of browsers, if you go to a website, it's the SSL certificate. It's not secure. You can't even see it. So you want to, if you're on show it, you just have to ask them to make it secure with the SSL and they'll do it for you. And other website hosts will typically, they have some way to do it, but you can't even use light widget on any version of a site that is secure unless you pay to upgrade it.
00:41:50
Speaker
Yeah. So those are really options, snap widget, light widget, and then creating a fake Instagram feed. If you're a WordPress user, you can use other plugins too. Oh sure. Yeah. But again, check, check what it does to your website speed, you know, and ask yourself whether that trade-off is, is really worth it.
00:42:08
Speaker
So that's it. Can you believe that Krista also wanted to talk about countdown timers, webinars, course hosting tools, podcasting tools and shops and shop tools. Okay. And mailing lists. That's also on this list. Unbelievable. We are about it. I just was thinking of all the different elements and pieces that people use to build their website that you don't think of. I think this is good. We haven't talked about any of these.
00:42:32
Speaker
Outside of some of the stock photo tools, because we've had their founders on the podcast before, we really haven't talked about a lot of what we talked about today. So I think that's good. This is a good place to cut it off because we are hitting 45 minutes here. Did you think I could talk about fonts and colors for that long? I was wondering, I was like, what else is there to say about fonts? And I asked you and we got all sorts of good information. So look at that good stuff.
00:42:55
Speaker
Anyways, we're going to be back. This would be part of a little series here probably on different website related topics. If you have a question, let us know. That's often how we come up with different podcast topics. And that's how we look for guests even is figuring out, okay, what questions people have. So let us know best way to reach out to us is either via email or DM on Instagram at Davian Christa. Until next time. All right. Thanks guys.
00:43:24
Speaker
Thanks for tuning in to the Brands That Book Show. If you enjoyed this episode, please consider subscribing and leaving a review in iTunes. For show notes and other resources, head on over to dvandchrista.com.