Make Your Branding and Design Irresistible with Joana Galvao

In this Episode

• [01:13] – What makes a website really bad, in Joana’s opinion? She answers by also addressing why it’s important for a website to be good.
• [03:22] – Stephan talks about a popular trend that he’s really sick of because it doesn’t create a great user experience. He and Joana then talk about how long you have before a visitor loses interest, and what you need to convey in that short time.
• [06:27] – What sort of feeling does Joana suggest creating, and how does she start the process of getting to the right feeling?
• [09:09] – Joana talks about who is in charge of creating the mood board that she has been discussing. She then addresses how she goes through the process of creating a mood board.
• [12:31] – How does Joana come up with an iconography style for each of her branding projects?
• [14:06] – Stephan responds to Joana’s point that you don’t need a website to be successful.
• [15:29] – Joana addresses what the costs are for doing a website build from beginning to end, including everything she has already mentioned.
• [17:39] – Joana likes to find out a client’s needs and curate a team based around those needs.
• [19:44] – Is copywriting included in the costs Joana has been discussing, or is it an additional cost?
• [20:42] – Joana discusses the concept of having a brand, and explains what a brand is.
• [23:01] – Joana addresses the question of whether she does focus groups or surveys to identify clients’ pain points.
• [24:58] – We hear Joana’s thoughts on challenges, which she thinks are a great way to get clients invested in you.
• [27:03] – Joana discusses things that do (and don’t) help with conversion by sharing a story about a rumor that was going around a few years ago.
• [28:48] – Stephan brings up a related point: there’s a big difference between correlation and causation.
• [31:27] – What is Joana’s view on parallax?
• [33:08] – Joanna briefly covers some best practices for typography.
• [36:07] – Joanna goes into more depth about images for use in headers, addressing whether they need to have a deeper meaning or just look good.
• [37:24] – Is there a way to leverage metaphors in the design? Stephan offers an example to clarify what he means by this question. Joana then discusses a couple of stock photo options.
• [40:27] – Stephan and Joana talk about a few free stock photo sites.
• [41:44] – Joana recommends a Chrome extension called WhatFont. She then explains what font foundries are.
• [46:04] – What one piece of advice would Joana like to offer listeners that she hasn’t already provided?
• [49:50] – How can listeners get in touch with Joana to work with her or learn more about the next steps? She answers, then offers listeners a generous free gift!

Transcript

Branding and website design go hand in hand but one comes before the other, which one? Well, branding, of course. If you don’t get branding right then the website design isn’t going to work. It’s not going to convert your visitors into buyers, at least not effectively. Joining us today to teach us how this works is Joana Galvao. The co-founder of Gif Design Studios, an award-winning digital agency specializing in world-class brand identities and conversion-obsessed design. Joana’s work has been featured in the Guardian UK, Brand Brilliance, Smart Marketer, and Digital Arts Magazine. Joana, it’s great to have you on the show.

Thank you for having me, Stephan.

Let’s talk about websites and what makes them amazing and what makes them suck. I’m sure you’ve come across lots of bad websites. What makes a website really bad?

There are so many things that I could say here. One thing that I wanted to maybe start with is not just what makes the website bad but why should the website even be good. I feel that a lot of entrepreneurs have gotten to a point where their business is really amazing and they haven’t needed a great website for that. They’re great at selling on the phone, or they’ve got a really great Facebook group, or great sales team. But what I invite people to consider is how much money are you actually leaving on the table? When was the last time you looked at you bounce rates, your conversion rates and you wished they were better because the possibilities, if your website becomes your greatest salesperson by having a design that converts, the sky’s the limit. Right?

For sure. What’s the difference between a nice looking website and a website converts? Can they both dovetail and work together or is a highly designed website potentially bad for conversion?

I love that question. This is actually something that I find myself talking to my designers on my team a lot about. The first thing I’ll say is that the point of design is not just to make things pretty, it is a lot more than that. You can have a beautiful website that doesn’t convert at all. An example of that is I have a really great designer on my team who created a beautiful monochrome website, that’s keeping the same colors throughout. That meant that the buttons didn’t stand out. It wasn’t clear for the viewer, when they land, where their eyes should go to. That’s an example of a good design but doesn’t convert, because if the user doesn’t know exactly what they’re meant to do when they land on the page, then that’s not a great experience, and that’s not going to convert.

Yea. That makes a lot of sense. One popular trend I see that I’m really sick of is ghosting buttons or ghosted buttons, where it doesn’t really stand out, the button is maybe just a small outline until you mouse over it and then it pops for you, it becomes all colourful and vibrant. I think it needs to be vibrant and attention getting before you mouse over it.

Oh, definitely. In this day and age, where our attention span is getting more and more reduced by the second, we really only have two seconds to capture someone. With that said, the simpler the content is on your website, and the clearer the call to action is, the better chance you’ve got of them actually clicking where you want them to click. Definitely, the button has to stand out.

How many seconds would you say we do have before the visitor loses interest and moves on their way?

I do think it’s between 2-8 seconds. This is a study that I personally geek out about and there hasn’t been one amount of seconds but I noticed that over the years, the studies that come out just gets lower and lower.

Two to eight seconds and what to do you need to convey in those 2-8 seconds in order to have success with keeping them and getting them to convert?

First, the visuals have to grab the viewer. Because our brain can recognize visuals much faster than it can read words. It can create millions, thousands of associations from that one visual hit. The visual has to grab them and it has to speak to your target audience. If you’re a luxury brand, and that’s really what you want to communicate, the first feel that they got from the visuals, from the way the copy is laid out, not even the actual words, but just the shapes that it makes on the page, and the font that you’re using, and the colors, and the image, that has to attract your ideal customer, and that has to create a feeling. I think one thing to note there is what is the feeling you want to create when people land on your website? What do you want your viewers to feel? If you’re an insurance company, people have to feel like they can trust you. Otherwise if you’re using a lot of red which gets our adrenaline going and warning signs in our bodies, that’s not going to be an ideal color that’s going to make the viewer feel maybe a little uncomfortable and blood pressure’s going to rise and hey might unconsciously know that you’re not right for them because of that.

Let’s say that you want to create a feeling for the visitor and your service provider, a coach, or consultant, what sort of feeling might you suggest creating and how do you start? Do you create a mood board first? Do you create some sort of wire frame? Do you do some brainstorming? How do you start with this process of getting to the right feeling and injecting that into the design?

The first step would be to concentrate first on do you know exactly what is the feeling that your audience should feel? And do you know your brand’s strategy and how you’re positioning yourself? Because if you don’t, I would start there, with brand strategy. A really great one to start with as a fun little quiz, I would actually recommend Sally Hogshead’s How to Fascinate Quiz for your fascination.

Oh yeah, she’s great. In fact here is an episode on my podcast where I interviewed her. Listeners, definitely check out the Sally Hogshead episode. She’s awesome.

I just met her actually, two weeks ago in San Diego. I absolutely love what she’s about and I could see it really relating to the work that we do because fascination essentially, is in your logical state of intense focus. Your brain is actually completely consumed by the visuals or the brand, if we’re talking about the website in specific. I would suggest taking that and seeing which ways you fascinate. If it’s a mystique, how can we create that feeling in your website, because if this is about you-the service provider, you-the consultant, then let’s make sure that we’re using your natural ways that you can actually fascinate when you’re with someone face to face, let’s bring that on to the website and create that feeling. When you know that, then I would definitely suggest that the second stage is creating the mood board. Now, how do we do that? You can go on to Pinterest. I think that’s my favorite one because you can easily create a board and then there are many amazing images already populating the platform. But you can look through magazines and things as well. Just start looking at what you’re naturally drawn to, and then also think about where do your customers actually shop. You start to piece that together and see if there is any visual trend about where they shop, because if they shop, again, in high-end luxury stores, you’ll notice that most of those brands have a serif font. Maybe you’ll consider using that as well because you want to them to feel like they already belong to you when they see the first visual hit. Of course you still want to be different, right? But you don’t want to be so different that they can’t identify themselves with you, with your brand. Does that make sense?

Yeah. It does. Who designs the mood board? Is that the client’s job? Is that the designer’s job or the brand strategist’s job? Or all of the above?

It totally depends where someone is at. I would say that if you’re starting out and you’re doing this yourself, definitely try it out, see how you feel, and see if it comes easy to you or not. With us, as an agency in particular, I like to take that job away from the client because we like to make it as easy and a great experience for the client as possible. The way I see myself as a translator, I can take what’s in your head and show it back to you in a visual form. We would normally do all the research and then present three different concepts. I know that some brand strategists do this, but it really depends if the brand strategist is a visual person or words person. Because I’ve seen brand strategists do hear your words instead of hear your colors, and here’s your look and feel. But if you actually are clear on your brand strategy, then definitely show that to a designer and see what they can come up with.

Is these three design concepts that you come up, is this something that is somewhat templated? How do you create a mood board? I’ve seen some examples, I don’t know if you can include any examples or offer any examples that we can show maybe in the show notes.

Sure, sure.

Yeah. It seems like a mystery to me. I’m not really the designer, I don’t understand the nuances of creating something like a mood board. What’s the process look like? Do you start with something that’s a template and how do you do the research for it? It seems very mysterious to me.

Sure. There is no right or wrong way to do this, as long as it’s very clear, the colors you’re going for. It’s very clear the style of typography because what I see happening a lot is that people start collecting everything they are visually drawn to. And then you’ve got a logo that looks like it was handwritten, a logo that looked like it was painted with watercolours, a logo that is serif, the one that has a bunch of icons. Although you are visually drawn to, if you bring that together, that does not create a mood board. A mood board already has defined and cohesive elements. In terms of being templated or not, I tell my designers just do what you want with it as when I look at it, it’s clear to me what’s the call to action color that turns out to me when I look at the board. What’s the three primary colors or two primary colors that’s going to take over the general look and feel. Then you want to identify typography styles, maybe iconography styles. What’s going to complement your brand? Is it really beautiful photography? If you’re a tech company, are you going to start using more icons and digital illustrations?

How do you come up with an iconographic style? Are you looking at a coach or a consultant and thinking this person or this company is very innovative so we need to come up with icons that are bold or that are thin. How does that work?

We do this in the initial phase. We recently branded a Facebook ad agency. They’re really fun and innovative, but they’re also spread all over the world and they don’t have an office. It’s not like you can photograph them working in their office and it looks like something out of Google or Amazon. When we spoke about what’s the imagery style of the website, I asked, “Are you okay with us creating a concept for a fun photoshoot that showcases your personality?” But they actually were so spread out all over the country that it was inconvenient for us to do that. We went back to the drawing board and came back with, in that case, since we can’t do fun photoshoot, let’s go with illustrations.

Got it. The client was happy with the outcome?

Oh yeah.

Awesome.

Actually, the website is live. It’s tierevelen.com, if users want to see it.

Oh, perfect.

All the illustrations are custom animated. The whole website is just animated illustrations for every touch point.

Awesome.

There actually isn’t any. That’s the great thing about this one.

Oh right. Okay. It’s a brand new agency.

They were operating by word of mouth for two years. This is what I say, you don’t necessarily need a website to be successful.

That’s true. That is true. I actually had one of my friends and guests on the show, Ephraim Olschewski, who didn’t have a website for years and was making a very comfortable seven figure income. He’d actually charge seven figures just to work with one client as a coach. Just privately, they hire him, he’s $100,000 up front, no refunds. Pretty cool. It’s a great episode, by the way because we’re going to a lot of strategies around high ticket sales. It’s pretty cool.

I’ll have to listen to that.

He’s very good.

I know I’m shooting myself in the foot here but I want to be honest with everyone. If that’s your business model, high ticket sales, then maybe don’t invest a ton of money in the website. But if you want to make more passive income and you have online courses, then definitely look at your bounce rates and ask yourself, are you leaving a lot of money on the table for not having a website that you know converts the best it could. It’s really look at your business model, and does this make sense to do it well or not.

Yeah, for sure. What are the costs for doing a website design and build from beginning to end, including the mood boards, the brand strategy, brainstorming, the wireframes, mockups, everything, soup to nuts, until the site is finally live.

Is that with us in particular or in general?

Both.

I think in general, I’ll say that it’s like how long is a piece of string? As well as you get what you pay for. If you were building a house, you can go for hardwood floors and marble surfaces and of course, that’s going to up the cost. It depends on how you want it to look. I’ve seen people do great websites for $6000. That’s fine. I think as an agency, what we provide is a lot more comprehensive and we have eight people work on a project at once. Our prices are $20,000 if you want to go from very beginning, you’ve got no branding, you’re not sure of your colors, and your strategy, all the way to the end with the six page working website fully responsive, video tutorial library on how use it, all of that. On that note, actually, I would say that the way that a website is going to work even if you’re hiring someone cheaper to get started on Elance or I don’t even know the platforms these days, 99designs or what have you. One thing that I will say is that it takes a whole team to create a website. I know a lot of people get lost on to where do I start? Do I get a copy first or do I get the design done first? What I’ve actually found works best is to get them working as a team and get them collaborating together, both the copywriter, the brander, the web designer, the developer, and communicate your vision and your mission to the team as a whole. You make sure that the copy doesn’t sound really unprofessional and then the visuals look really laid back and there’s a mismatch there.

Right, of course. If somebody is getting a professional copywriter involved, is that somebody that you provide from your agency or is that somebody from the outside, like a special sales copywriter. Sales copywriters tend to be very expensive if they’re good.

What I like to do is find out the client’s needs and curate a team around their needs. We have a lot of copywriters we partner with, some are specialized in humor, other are specialized in sales pages, and they do all the research, and they actually interview the customers as well for you. If we’re designing a funnel, we’ll go with that person. Deepening on the client’s needs and this is where we offer really bespoke services. I curate my team as superstars to help them and I’ll bring on a calligraphist if I see that the brand should go in that direction, or I’ll bring on a custom illustrator, or an animator to animate all the icons. Most of all of what I said is internal except for the copywriter’s which we partnered with on a freelance basis.

Got it. Okay. Let’s say you’ll get an animator involved and that animator is creating an explainer video, is that something that you would do in house or would you outsource that?

We can definitely do that in house. We would probably get someone to do the voice over from a platform that we use, then we’ll do the rest in house.

Okay. An explainer video, is that something typical for a client engagement or is that pretty unusual because I know that those used to be very, very popular, they don’t seem to be as popular these days.

I think where our area of expertise really is is that a rebrand in a website design. We will do that for any client has gone through that first. In that we’re confident that we know exactly what they need. Someone came to us and they just needed an explainer video, we would probably be most comfortable referring them to a partner of ours.

Alright, makes sense. Is the copywriting included or not included, let’s say in a hypothetical example, it’s a $20,000 site redesign, is the copywriting included in that or is that another maybe $5000 or $10,000?

That is another $5000. We have multiple tier packages. It’s hard to say exactly cost on the call because sometimes I curate a proposal so if I see that the client would really benefit from a video in their header, then I will speck that out and present a quote with the video production team flying out to them, creating a video to feature on the website.

Got it. Okay. Let’s talk about branding a bit more because that is such an important component, if you don’t have the branding right, the design won’t be good, the conversion won’t happen like you envisioned it. One of my favorite definitions of a brand is it’s a promise delivered. What is your definition of a brand and what’s your process for strategizing with a client who’s not sure what their brand should be?

My favorite one is actually just Jeff Bezos’s definition which is, “A brand is what people say about you when you’re not in the room.”

I like that too. That’s great.

It’s no longer about what you say you are. You could say you’re the fastest, the cheapest, the best or what have you. But it’s really about what they think of you.

Yup. So true. That’s where Sally Hogshead’s research and process really comes in handy because it really is about how the world sees you and not how you see the world.

Exactly. I see that how we break branding down is the 3Vs of branding. That’s your vision, what you do, your objectives, your actions as a brand in the company, your voice, what is your message and this is also you’re copying your tone of voice and then the visuals, and those 3Vs of branding is what, if they’re working together creates an effective brand. What we initially do with clients is just ask, we have the really in depth questionnaire and then we have a discovery call to get clear on where did they see themselves going in 5 years, 10 years as a company, what is their ideal client, what is the transformation they provide for their clients, what is the pain point they solve. This is very common, deep dive questionnaire into your business and vision. From that, that’s when we can start bringing ideas together. Like, oh, they actually could position themselves as a really funny agency and maybe we can go with cartoons and maybe the tone of voice could be light. That’s when the magic starts happening and that’s when we bring the whole team in together for a big brainstorm session.

Okay. It’s so important to identify the pain points and know how to poke at those pain points without being too aggressive or too in-your-face about it. You got to be subtle but also not afraid to bring them to that pain so that you can show them the end point, the outcome, the ideal scene of what would happen if they got what they needed and wanted. Do you do any kind of focus groups or surveys or anything like that to help identify the pain points?

For now I would love to scale this to a point where we could just actually create surveys, email it out to my client’s audiences or bring some people on the phone, but for now we trust that either the client can go ahead and do that or we just do it from one [inaudible [00:27:21] with the client and then also [inaudible [00:27:23] the competitive landscape.

Got it. Okay. Anything else that you want to mention about branding before we move on to another topic?

When you touched on pain point, it reminded me of Scott Oldford, he says that most people, what they’re selling is a vitamin and we really should be selling painkillers. I guess if I was selling my services as a vitamin, it would be, “I can make your brand look better.” It’s just enhancing. But if it’s a pain point, I could say something like, “We can get your website to be your best salesperson so that you no longer have to jump on calls that don’t convert.”

Yup. That’s good. That’s very good. I’m familiar a bit with Scott Olford’s work. He’s got a really cool five-day challenge that I’ve loosely emulated with the 5-Day SEO Challenge. It’s a pretty cool free funnel. Are you familiar with the five-day challenges or seven-days, like my wife has a seven-day challenge on self-love and for single woman so that they get in touch with their inner goddess and become irresistible to their potential soul mate, and my five-day challenge is to take somebody from really not knowing where to start with SEO to having some sense of the different aspects and what it’s going to take and getting some immediate success just within the first five days. Any experience with the 5-days, 7-days, 14-day challenges?

Yeah. I love challenges. I think for my clients it’s what we see convert the best because you’re giving them transformation right at the beginning of their interaction with you and by giving them transformation, no matter how small or big, they’re already a lot more invested in you. Probably, a lot more likely to buy from you because you’ve already shown them that you can get them from A to B if they trust you and follow the steps.

Yeah. Let’s move onto another topic. Let’s talk about conversion and techniques that help with conversion and techniques that don’t help with conversion. Like some of the design styles that have become popular that actually conversion killers and then there are some things that are not intuitively obvious that would really help with conversion that websites just aren’t doing.

Sure. On that, I love to tell this story, I don’t know if you remember but I don’t know if that’s a few years ago but everyone says you should have a red button that’s scientifically proven that red buttons convert better.

Everyone says you should have a red button, that’s scientifically proven that red buttons convert better. Share on X

I actually never heard that.

Maybe it’s just more people that look into this all the time. For a while, everyone was saying red is the color that your button should be, it’s the color that converts the best. Suddenly, we have all our clients asking us to change their buttons to red. I was a little curious about this because it didn’t sound right to me because it shouldn’t be the rule for every brand. What I found was that the company that had AB tested this, their whole website was green and their buttons were green. They changed the buttons from green to red and they saw like a 50% increase in their conversions. But here’s the thing, everyone thought it was the red but the trick was there was a big enough contrast between the brand color and the call to action color that the button now started to stand out immediately when you landed on the page. I think that’s the first myth that I want to debunk is that it’s not about the color of your buttons in your call to action, it’s about how that stands out against everything else on the page.

Right. You’re action color needs to be very different from the background color or other primary colors you’re using.

Yeah.

Makes sense.

And for an easy way to check this, just Google the color spectrum and try and make sure they’re opposite for most contrast.

Yup. This brings up another point. The fault here is in the study and on the presupposition that one thing causes another but actually they could just correlations. With h1 tags, if you added a keyword rich headlines or headings, and you wrapped them in h1 container, okay, that would improve your SEO, you’ll get a rankings benefit because now you’ve added keyword rich copy in a large font typically. The way the styles are setup with h1s, they tend to be larger size fonts, so Google figures that out and we’ll give you more credit for keyword prominence because of that. But if you already have headings, and they were using font tags to get that particular size font, and what have you, then you switch it to an h1 tag thinking, I heard that h1s are important for SEO, no effect. It’s important to have the right kind of study and to only test one variable at a time, which is tricky if you don’t know what you’re doing. You might inadvertently incorporate multiple variables and think I’m just testing to see if h1 tags work or not. I’m going to add h1 tags across my site but you also added keyword rich headings that you didn’t have before. Key keypoint that people tend to miss.

I agree 100%. I think it’s a common thing for it to happen. It’s so easy to hear about what someone’s doing that works for them and just want to try it out but not necessarily is it going to be the right thing.

Parallax design is something has been overdone to death. I see that trend dropping away, thankfully. It was cool when it started but I was not a big fan of what tended to go with that which was a one page website, which is terrible for SEO. What’s your view on parallax?

I think you can still do cool things with it. We like to use it when we need to create depth and you want to have things moving at different speeds and different layers, that can work really well. If it’s always the image in the section, in the background that moves at a different speed, then I get that it’s getting a little dated.

Yeah, a little tired.

But I think you can play with it to make something really great. If it’s relevant to the concept.

Yeah. I think there is a way to do it in way that is more subtle and makes sense for the brand and there’s a way to do that as a gimmick because everybody else is doing it. Let’s do ghost the buttons, let’s do parallax, let’s do a huge video playing in the background just because that seems to be the approach of the years. I’m not a big fan of just using gimmicks as a gimmick.

Yeah. I’d love to go back, because you asked about conversions and best practices for website conversions. We spoke about the contrast of the buttons. There are couple of other things that I’d love to share. It’s actually really simple. The end goals that you give your viewer the best experience possible, how do you do that? You make sure that everything is very clear. It’s very clear what’s the title. There’s a contrast in typography, in hierarchy of the content. It’s very clear for them to know what they should read and then what order of importance does it have. It should be very clear for them where they should click. If you make it easy then most likely, they’re going to stay and read. You want to follow some key best typography practices and I’ll very quickly go through them because you don’t want your lines to be longer than 12-14 words. Because that actually is proven to tire the eye out if the eye has to go through more than 14 words. It gets lost in its way back to the margin to try and get to the second line below. That’s the most common mistake that I see on everyone’s websites. If you take one thing away from this podcast, if you go check your website and check that there are no more than 12-14 words per line and if you do fix it and see if that helps, I’d be happy if that was the one take away that people got from this podcast.

I love that. Is there a tool, by the way, to check that across your whole website? That would be pretty cool if there was.

No. But we could make that.

That would be a good viral marketing strategy.

For me it’s second nature. Like, oh, there it is again. I don’t even have to read and count the words. I can already see when the line is too long. But that definitely would be a really cool tool to do.

I think so too. Yup.

Then the second thing, you want to make sure that the text is at least 16 pixels for it to be easy on the eye. These days no one likes to jump through hoops, so if you want the viewer to give you their email, you have to make sure everything is very easy for them, the experience is very easy so they clearly read and they don’t have to squint their eyes so that the line is then appropriate size. And it’s also an appropriate distance apart from the line below. I’m trying not to use too much jargons so we don’t lose everyone, but look at the spacing between the lines. In development terms, it should be 1.5 em. If that sounds Chinese, just space them out a little bit, just to give double spacing in Word documents, that’s what you’re trying to go for for a very easy read. Then also don’t have very long paragraphs. Split up your content as much as you can, break it up with images just to keep the users engaged. You want to use also a lot of white space to rest the eye. If you use white typography over dark background, it’s actually harder for us to read. Again, make the experience as easy as possible. Make sure you have contrast throughout the website. That’s between white space and images, but also if you have a header with an image, another common thing that I see is that people choose headers that are beautiful but really busy. When you put text over it, it’s very hard to now read the text with everything that’s going on in the background. Make sure there is contrast there as well. So simple.

Just a real quick question on this. When you have a header with a beautiful image, does that beautiful image have to tell a story or have some metaphor behind it or do you just look for really beautiful images that aren’t too busy?

Definitely images that aren’t too busy should be rule number one. Because you could find an image that tells the story, it’s the perfect image but if text can’t go over it, then don’t use it in the header, save it for later. It really depends. When we have clients that have their own personal brand, they generally want to be featured in the header. What we do is recreate a photography style guide that with very clear directions to their photographers that says, “Shoot against this brick background because the call to action is bright yellow. We need a darkish background so the call to action stands out. Make them stand on the left end side of the photo and have a lot of space to the right so that we could put the text from there.” And we make sure that images are created to the website’s needs. If it’s something else, we try to use images that do create that feeling. If it’s a meditation teacher, a photo of water or the sky is perfect for that because it’s blue, it’s one of the most calming colors, it’s nature. It really depends.

Got it, okay. Is there a way to leverage metaphors in the design? Is that something that is part of your strategy or not?

What do you mean by leveraging? Because we use a lot of metaphor images.

I guess to incorporate metaphors into the design. For example if you’re doing a PowerPoint deck and you want to convey a concept. Let’s say that you want your audience to get into a higher vibrational state when they’re going to absorb the information from you talk. So you show a picture of an oscilloscope, which is kind of metaphorical because you don’t immediately make the connection when you see the words in the picture on the screen and it says, “Tune in to the right frequency.” Or whatever. And then you explain, you need to get into the right vibrational state so that you are most receptive for learning this material. That kind of a metaphorical image choice I think is more powerful than just having a really nice looking stock photo that doesn’t really say much. Some people shaking hands or something like that, that most overused stock photos of all time, that you see on so many websites. That’s what I was talking about regarding metaphors.

Yeah. Definitely. I think those work really well. It does become harder to avoid clichés and you don’t want it to be so disconnected that people don’t understand. Why is there a photo of the jungle there? What am I meant to get from that if this is about SEO? This is where the copywriter and the designer should work together. Because they could come up with the metaphors together, both visually and through the writing. For stock photos, I actually recommend Stocksy as a website.

How do you spell that?

Stock as in stock photos, s-y.com

Okay, got it. 

If you look for handshaking, you’ll find either an arm that’s all tattooed or a lady shaking a man’s hand and she’s covered with jewellery. They really try to be diverse in the models that they use so that it’s multicultural. They’re like stock photos but with more personality and more original.

Oh I like that. It’s awesome. What’s the pricing model? Is it $1 per photo sort of thing? How does that work?

It’s a little bit more expensive. Again, I believe that you get what you pay for. They start at $15 and then depending on the size, go up to $30-$50 per photo. Another cheaper alternative that we use, it’s actually a friend of ours runs Death to Stock. Very extreme name but a great company, and I’m not sure what their prices are now but I know they were thinking of launching a package with most of the photos they’ve released.

That’s cool. 

They have a lot of free ones. Sorry if I forgot to make that clear.

That’s awesome because I was going to ask about that. There’s one site in particular that I recommend to people who have no budget for stock photography and that’s Pexels.

Pexels, yeah. We use that as well. There’s Unsplash. There are many good ones out there. Is Pexels the directory? Because there is a website but I can’t remember of.

No, Pexels is a stock photo site that everything on there is free. The options are limited. Like if you put in candle as a keyword, you’re not going to find many options there or handshake or whatever. But they’re nice photos. If it fits, if the metaphor fits, if the mood of the image fits, or how professional, or quirky, or fun, or whatever it is, if it works, and then great. You don’t have to pay any money for it, but it’s pretty limited with the options. Those are great resources, Stocksy, Death to Stock, and Unsplash and all that. Was there anything else you wanted to share in terms of tips for typography? The 12-14 words max per line, the 16 pixels, the spacing at 1.5 em, and the white space and all that, the header image not being too busy, anything else?

I also don’t want to overwhelm everyone, but I think those are the best practices. Those are the ones that will give your user great experience. But since we’re on resources, a really fun one is a Google Chrome Extension called WhatFont. What it does is if you’re on a website and you think, oh, I really like this font and it’s really easy to read, you can click that extension and it’s like an eye drop tool and you can know exactly what typography, what font they’re using in that page, what size is it, what spacing it is between letters and between lines, and you could just take that and run with it. You could see where you can buy that font, if it’s a Google font, or if it’s from a foundry that you have to actually pay for. I love that. We use that all the time. When land on a website, they were like, oh, really like how the text is laid out. We always use that tool to find out every detail about it.

That is so cool. Let’s say that you find the name of the font using this Chrome Extension and it’s not one that you have already, how do you find that font? Is there a directory or tool? For those people aren’t familiar with foundries, what exactly is that?

Font foundries are where you buy the fonts from. Normally, what they do is when you’re a font designer, you have them as your agents, just like stock photos. First I love Google, I think Google now is investing a lot in fonts. A lot of friends of mine are freelance font designers and they are now working for Google, creating really great quality fonts. I think that’s a great place to start and they’re all free. Another one that’s really great is myfonts.com. If you’re looking for something that is more custom and really unique, it’s not just let me find the right font for the body copy of my website. If you’re trying to find a really edgy one that’s completely out of the box, you’ve never seen it before, then I would go to creativemarket.com. That’s actually a website that is great for more than just fonts. You can find stock photography there as well, you can find illustrations, you can find templates, and mock up. Let’s say you’re wanting to create an image that shows the inside of your online course, you can actually go and buy a mock up from there that, when you see those photos, that’s like a desk, and there’s the iPad, and there’s a little sheet of paper with information on, and the nice pen arranged, those are most often than not actually not real photographs, they’re mock ups.

Right. The idea of taking an online course and making a DVD set that doesn’t actually exist in the real world but it looks like it a set of DVDs with really nice box and imagery on the DVD itself, and that was all done on Photoshop or something, or using some sort of template. Right?

Yeah. Exactly. Or when you’re having a free ebook and it looks like it’s a hardcover book as a photo to draw you in or in the Facebook ad. That’s something that is very easily done with the mock up. It’s a file that you literally just open, drag and drop the photo that is meant to be the book cover and done. It’s on there. You can also do it with t-shirts, packaging, anything from supplements to boxes. It’s really crazy, what you can do with it, it’s great.

That’s awesome. Is that something that is done inside a Photoshop or just inside of the website?

It is done inside of Photoshop, yes.

Okay. So that’s a Photoshop effect? Is that what it’s called? I’m not a big user of Photoshop. I know there’s filters, and effects, and things like that. I don’t know what the right terminology is for this kind of function inside of Photoshop. You’d buy this as a separate add on or whatever for Photoshop from a creator market?

You just buy it as a file. The file has multiple layers and you just have to drag and drop in the layer that is says, “Insert photo here” and I’ll do the rest.

Got it, okay. Very cool, very cool. If you wanted to offer, impart one key piece of advice that you haven’t already imparted to our listeners, what would it be?

Okay. It would be about working with designers. I’m so heart broken when I hear this a lot, “Oh my designer just disappeared.” I think it’s because designers egos get bruised very easily. I would say that be prepared to have a little patience and the way I would approach working with a designer. I just know that it’s likely that they don’t get it right the first time, and that’s okay. See it as a partnership of explaining them what’s the end goal rather than can you try this in purple or can I try it in yellow, now try it in green. I think it’s very important for people when they’re hiring creatives to communicate the end goal rather than to try and be a creative director and try and edit the process themselves. Just be patient. I know we’re like red [inaudible [00:55:37] of service providers. I’m sad that we have the reputation that we have. That is why I love running an agency to make sure that that doesn’t happen to any of our clients but because we can be the bridge between that.

Right. I always tell people if they’re trying to convey something that’s critical, use the criticism sandwich approach. First say something that’s really nice, that you appreciate about the design, the deliverable, the strategy, or whatever. And then give the negative, critical feedback in an empathic way and then say something nice again. You’re book ending the criticism with positive comments so they don’t feel like you’re just something all over their work that they poured their blood, sweat, and tear into. I don’t think it’s just designers that can be seen as little too precious or sensitive. I think it can apply to any industry. Like when I’m coming in to help with SEO and if I’m not empathic or sensitive in dealing with the IT people, and I tell them all the things they didn’t know, they didn’t know, that they built wrong, without being empathic or compassionate, then I break rapport and they hate me, and they want to sabotage the engagement and make sure that I’m fired. You want to make them your friends, you don’t want to make them your enemy, and same goes if you’re hiring a designer a design firm or contractor. Use that criticism sandwich approach, I think.

I love that. It’s true that it’s not just designers. I do feel that designers have a harder time because designers are subjective. You can really just hate a color for no reason.

Or just have this approach like, I’ll let you know if I like it when I see it. How am I supposed to design something if the only feedback I get is I don’t like it? Try something else, I don’t like that one.

I always ask our clients for what they feel when they look at it or do they associate, does it remind them of something, so we can understand that better. But actually, on that note, Seth Godin says, “There are four types of clients for a designer and one of them is “I know what I like when I see it.””

Yes. That’s true, frustrating.

That was one of them.

If somebody want to work with you and their not that type, how would they get in touch with you and what are the next steps?

Just head over to our website gifdesignstudios.com. I think it’s important that before you hire an agency, you resonate with the work that they’ve created because it most likely will be in that style even though it’s completely different. People say that our design is very clean and modern. If you like that, then great. Yeah, just email us through the contact form.

Alright. Awesome. Thank you so much Joana and it’s great, very actionable advice that you conveyed in this episode. What we always do is we create a checklist of action items to take from content of the episode. So the listeners can download that and action it. Listeners, that would be at marketingspeak.com. Go check that out along with the transcript of this episode, the show notes, all that is at marketingspeak.com. Now it’s time to actually take this advice and run with it. You could even hire Joana and her team to do a full site redesign for you and I’m sure you’ll get very happy with it. Thank you Joana and thank you listeners! This is Stephan Spencer, your host signing off. We’ll catch you next week on next week’s episode.

Thank you Stephan, it was a pleasure and I hope that I could provide value to your audience. Actually, if anyone wants to find out and want some help to find out and want some help to find out what about their website is not working well, I’m willing to offer 50 reviews, 50 website reviews. The first 50 people that sign up, just reach out to us through the contact form on our website and we’ll get you on the list and when I can, I’ll do that for you.

Wow. That is quite a generous offer. Definitely listeners, take her up on that. That is incredible. Thank you again, and we’ll catch you on the next episode.

Important Links:

Your Checklist of Actions to Take

☑ Establish my branding before designing my website. I should know how I want my business portrayed prior to hiring a designer.

☑ Don’t just focus on “pretty.” Having a beautiful website is not beneficial if it doesn’t convert well.

☑ Choose the right website elements by creating a mood board. Go on Pinterest and pin the visuals, style and aesthetic I want.

☑ Give my viewers the best experience possible by making it clear what they should read and where they should click.

☑ Make my website buttons stand out by choosing clear fonts and vibrant colors.  

☑ Keep my content simple so that it’s easy on the eyes. Highlight the message I want to get through for conversion.

☑ Make sure that I capture my viewer’s attention the second they enter my site. I only have between 2 to 8 seconds to grab a website visitor’s attention.

☑ Check my text and make sure that every line has a maximum of 12 words. The longer the sentence, the harder it is to understand.

☑ Make sure I have a great contrast within the website with the right balance of white space, text, and images.

☑ Invest in a designer and a copywriter who can help me achieve a good-looking, professional website that also converts.

About Joana Galvao

Joana Galvao is the co-founder of Gif Design Studios, an award-winning digital agency specializing in world-class brand identities and conversion-obsessed design. Joana’s work has been featured in the Guardian UK, Brand Brilliance, Smart Marketer, and Digital Arts magazine. Based in Porto, Portugal, Joana runs a team of 10 designers and developers, offering the full range of print and digital design services to industry leaders in seventeen countries on five continents.

SaveSave