1
00:00:00,690 --> 00:00:11,510
Filip Valica: Hey, everyone. Welcome to the Product Startup Podcast, a podcast that helps bring your product idea to life by chatting with successful inventors, product designers, and other industry professionals. This podcast is run by Mako

2
00:00:11,510 --> 00:00:24,910
Filip Valica: Design + Invent, and hosted by Filip Valica. Our goal here is to get to the bottom of what makes a product successful, from initial idea to putting your product on the shelf. We're taking you step by step to build a functional product and scale your product business. Now onto the show.

3
00:00:26,530 --> 00:00:40,770
Filip Valica: This is the Product Startup Podcast, Episode 3, Heidi Pungartnik, and Design for Founders. Welcome to the Product Startup Podcast, helping you turn ideas into successful products step by step with your host,

4
00:00:41,810 --> 00:00:42,750
Filip Valica: Filip Valica.

5
00:00:43,800 --> 00:00:47,600
Filip Valica: Hi everyone and welcome to the Product Startup Podcast. This is episode three.

6
00:00:48,630 --> 00:01:02,490
Filip Valica: Today I'm joined by Heidi Puntgartening. I first heard about her through a free email course I took. She provided the course for startup founders looking to learn the basics of graphic design. She's a designer gone entrepreneur and she'll talk with us about the importance of

7
00:01:02,510 --> 00:01:04,070
Filip Valica: graphic design in our business.

8
00:01:05,320 --> 00:01:11,020
Filip Valica: She also works with bootstrapping founders to figure out branding, marketing, and conversions at Design for Founders.com.

9
00:01:11,980 --> 00:01:25,220
Filip Valica: During our conversation today, we'll talk about some design hacks, including testing and converting more website visitors into buyers, why she thinks founders should use templates, and what softiles are, and how to get a professional design and save money using them.

10
00:01:26,120 --> 00:01:33,930
Filip Valica: At the end, she shares how to download a free e-book to help us get started with our graphic designs. So let's get to the interview. Hi, Heidi. How are you doing?

11
00:01:34,850 --> 00:01:46,090
Filip Valica: Oh, good, Philip. How are you? I'm very good. Well, I'm really glad to have you on because I think the topic that we're going to talk about today is relevant to basically anybody that's starting a business. Can you tell everybody a little bit about yourself?

12
00:01:46,970 --> 00:02:01,950
Filip Valica: Sure. First of all, thank you for having me. What I do basically is I run a design website called Design for Founders, where I try to teach people, especially entrepreneurs, how to achieve

13
00:02:01,950 --> 00:02:15,210
Heidi Pungartnik: certain things with design and to to kind of introduce the importance of design and how it can help with sales conversions and marketing. You know, I think that's a really good point that you bring up

14
00:02:15,210 --> 00:02:19,530
Heidi Pungartnik: because sometimes people get lost in the marketing. They feel like, oh, it's just marketing.

15
00:02:20,030 --> 00:02:31,890
Filip Valica: It needs to just look pretty. But I'm glad that you're tying in your craft to the end goal, which is to sell more product or services or to increase conversions. Yes, yes. Actually, when I talk with

16
00:02:31,950 --> 00:02:44,050
Filip Valica: designers even, not even, not only entrepreneurs, but even lots of web and graphic designers don't really have this knowledge of increasing conversions. And they don't really know what's going

17
00:02:44,050 --> 00:02:57,990
Filip Valica: to affect the bottom line in business. And they see their jobs as strictly just making things pretty. And while that is a part of that, it's very important how your company looks on the outside, right?

18
00:02:58,750 --> 00:03:09,230
Filip Valica: But this won't actually, it won't necessarily affect the bottom line and your sales in a good way. Right. No, I can, I could see that. So you work with startups and entrepreneurs

19
00:03:09,230 --> 00:03:22,050
Filip Valica: and small business owners now? Actually, I used to. When I was a freelancer still, I used to work with small businesses and startups. So I kind of got the feeling of what's needed in the space,

20
00:03:22,350 --> 00:03:32,510
Heidi Pungartnik: what these people want and learn something about the lean startup methodology. and stuff like that. And basically now I'm trying to take that knowledge and I just put it into

21
00:03:32,510 --> 00:03:41,270
Heidi Pungartnik: blog posts, books and videos. That's great. I know at the end of this episode, we can start talking about some free training that I'm sure you want to roll out to everybody. Yes, yes, for sure.

22
00:03:41,450 --> 00:03:55,690
Filip Valica: So that's awesome. Thank you for sharing that. Let's focus on some of your experiences. And maybe you can talk a little bit about the common mistakes that people make when they're first starting their business when it comes to graphic design. Yes. I find that many people start with, you know,

23
00:03:55,690 --> 00:04:00,890
Filip Valica: there are websites and stuff by just buying a template, which is good. Actually,

24
00:04:01,830 --> 00:04:15,810
Filip Valica: there's a lot of misunderstanding of what templates do. And I think that designers generally don't like them because they see templates and themes as kind of a competition, which I think is very, very much not true.

25
00:04:15,850 --> 00:04:25,750
Filip Valica: But I think it's like a good idea to take the design that's already out there that's already available and it's well done mostly. and just use that.

26
00:04:25,990 --> 00:04:38,870
Filip Valica: But what people are sometimes doing is because they've probably read something about how templates are the source of all evil and not like a good way to build your brand,

27
00:04:39,050 --> 00:04:53,570
Filip Valica: they decide to just DIY it from scratch from just the very beginning without like having any kind of idea what design requires. So I see a lot of very bad design and very kind of ugly website.

28
00:04:54,630 --> 00:05:07,250
Filip Valica: that could definitely be fixed by using a template. And I know this is not a popular opinion among designers, but I think that from the very beginning, when you don't have the cash or the time

29
00:05:07,250 --> 00:05:10,290
Filip Valica: to get a professional designer or training

30
00:05:10,290 --> 00:05:24,270
Heidi Pungartnik: that's required to build a nice, very professional-looking website, it's actually a good idea to start out and to test your ideas, your business ideas, by just using a template. So I'm really happy to hear you say that.

31
00:05:24,290 --> 00:05:39,290
Heidi Pungartnik: for multiple things here. First of all, I think you're going to get a bunch of letters from designers, some angry letters in your mailbox, right? How dare you promote templates? It's interesting that you say how people start with their designs because I've seen a lot of people modify templates

32
00:05:39,290 --> 00:05:44,270
Heidi Pungartnik: not know why they should change what they're changing. And the simplicity and beauty of some

33
00:05:44,270 --> 00:05:54,110
Filip Valica: templates that even though they might be very basic ends up being lost because now someone's changed the intent of it and they don't know why really. Maybe we could talk about that

34
00:05:54,110 --> 00:06:04,810
Filip Valica: a little bit. Yes, yes. That's a good point, actually. I think that if you're using a template, generally, if it's well done, probably you will have to pay for something that's well done most of

35
00:06:04,810 --> 00:06:16,070
Filip Valica: the time. But for these templates, it's not a good idea for someone who is not a designer or doesn't really know what they're doing to change the fonts or change colors dramatically or just

36
00:06:16,070 --> 00:06:27,070
Filip Valica: play with spacing because that's going to really ruin the whole idea, right? Because each design piece is something completely different. You know, there's really, it's really hard to establish

37
00:06:27,070 --> 00:06:32,530
Filip Valica: very general rules for all designs that are out there. You know, every one of these templates

38
00:06:32,530 --> 00:06:47,390
Heidi Pungartnik: was carefully crafted and designed custom for that particular feel. So if you want to capture that feel or that visual impression, you should not touch anything that's inside except for the

39
00:06:47,390 --> 00:06:51,990
Heidi Pungartnik: content. Great. So that's excellent advice. And you touched on one topic,

40
00:06:51,990 --> 00:07:02,350
Filip Valica: really quickly. You said there are no specific rules or hard rules, but maybe you can talk a little about how many fonts I should have and how they should be laid out. And we can start talking about

41
00:07:02,350 --> 00:07:12,590
Filip Valica: colors a little bit. Yes, actually, I talk about this in the freebie that you mentioned. It's free to download. You know, you'll see the link in the description of this episode. But that's where I also

42
00:07:12,590 --> 00:07:25,810
Filip Valica: pick apart everything. I try to create a general rule exactly what I was saying that doesn't exist. but some rules can be applied without having a lot of knowledge of design.

43
00:07:26,010 --> 00:07:37,550
Filip Valica: And one of these is definitely what you mentioned, which is fonts. It's great to limit the number of fonts, and it's best to keep it at maximum of two different fonts.

44
00:07:37,610 --> 00:07:51,650
Filip Valica: I recommend that people really use one font for body text, and that's everything from lists to paragraphs, everything on a website, except for the headlines. And then for the headlines, you use a different font.

45
00:07:51,790 --> 00:08:03,950
Filip Valica: That's a lot more contrasting to the body font. And this will create a nice little contrast and create some kind of hierarchy for all your text. Now, how do you pick these two fonts? It's actually pretty easy.

46
00:08:04,230 --> 00:08:18,990
Filip Valica: You can go ahead and just research this and maybe make it more complicated. But there's one hack to take one typeface family, such as Helvetica, for example, or Open Sans. These are both typeface families. And then you take two very different fonts from these.

47
00:08:19,170 --> 00:08:29,590
Heidi Pungartnik: Same fabric. So let's say for the open science, I'm not sure exactly which fonts are inside. I'm sure it has a regular, which is for body. And then you take like a very

48
00:08:29,590 --> 00:08:37,790
Filip Valica: thick, very black kind of font for the headlines. They have like a bold or an ultra bold font for the headlines.

49
00:08:38,250 --> 00:08:46,730
Filip Valica: So basically the intent here is to have as much contrast as possible between the heading and the body text without seeming like it's written by two different people.

50
00:08:46,730 --> 00:08:57,290
Filip Valica: Yeah, kind of. That's a good point. That's a good way to put it. There's like also such thing as too much contrast. And this is what you can get if you've combined two

51
00:08:57,290 --> 00:09:08,650
Filip Valica: very different fonts. And, you know, there's really a huge kind of debate around which fonts look well together. But this is like what I described was really just the most basic thing that

52
00:09:08,650 --> 00:09:16,510
Heidi Pungartnik: even designers recommend. If you don't know what exactly to pick, just pick two different fonts from the same typeface family. There are other ways of picking.

53
00:09:16,730 --> 00:09:29,730
Filip Valica: different fonts. That's also like and pairing funds and stuff, but I just really just wanted to keep this very simple. Yeah, understood. And that makes things pretty easy and you can always go back and hire somebody like yourself, help them make that decision if they want to get really

54
00:09:29,730 --> 00:09:42,370
Filip Valica: complicated. Yes, of course. Actually, I'm sorry to interrupt, but I think this is very important. On my website, on Design for Founders, I talk about style tiles a lot. This is a fairly new, modern

55
00:09:42,370 --> 00:09:50,790
Filip Valica: kind of tool that designers use in the stage between the initial meeting with their clients,

56
00:09:51,070 --> 00:10:03,490
Filip Valica: before they develop an actual website or the layout, they create like what's called a style tile, which, you know, it's kind of hard to explain, but it's basically a document that just

57
00:10:03,490 --> 00:10:14,970
Filip Valica: has these different styles and different fonts in it. So the client can kind of get the sense of how it will all look in the end, but it's not the end layout yet.

58
00:10:15,490 --> 00:10:26,850
Filip Valica: So I think that for entrepreneurs, this might be the way of getting professional design. You can get designer to create just the style tiles because it won't take that long.

59
00:10:27,010 --> 00:10:32,590
Filip Valica: It'll just take a few design decisions such as pairing fonts and picking the right colors.

60
00:10:32,590 --> 00:10:37,950
Heidi Pungartnik: And you can then apply these styles to the website that you're developing to your own map or

61
00:10:37,950 --> 00:10:48,970
Filip Valica: whatever your product is. And your entire design is based on professional design decisions. And you know, this is like a way of really saving a lot of money, you know, in the process. Right. So

62
00:10:48,970 --> 00:11:00,190
Filip Valica: it's basically like a mood board. Yeah. Yeah. That's exactly. Yeah. Some people call it a branding definition. Yeah. Branding guidelines also. But that's that's actually like a slightly different

63
00:11:00,190 --> 00:11:13,930
Filip Valica: document that larger companies have. And it has all the details around how much white space should be left around the logo and which fonts can be used and exactly at which sizes and stuff like that.

64
00:11:13,990 --> 00:11:28,530
Heidi Pungartnik: But this style tiles are just much simpler way of kind of combining all the styles together, producing that final feel that the whole branding will have, and then just applying that to every little thing that you produce. Okay.

65
00:11:28,750 --> 00:11:36,670
Heidi Pungartnik: So actually, that brings up another question. Whenever people are starting their business, a lot of times you'll see them order their business cards first or create their stationery.

66
00:11:36,830 --> 00:11:51,170
Filip Valica: their website or something like that. But then we also get told you need to focus on your clients first and all that other stuff will come later. Do you think that, you know, entrepreneurs should be creating some of their graphics piece by piece as they needed? Or is that something that maybe

67
00:11:51,170 --> 00:12:01,930
Filip Valica: they should create like a mood board or a style tile first and then that kind of drives everything? I think these are two questions. Because one is, is it okay to start a business, not focusing on

68
00:12:01,930 --> 00:12:12,610
Filip Valica: clients, but just starting out with some of the stuff like stationary and business cards, which I think is actually, I think that most people, you know, that are out there are right. You know,

69
00:12:12,710 --> 00:12:24,310
Filip Valica: you shouldn't start with focusing on the perfect logo. You need to start by focusing on getting the first client, right? It's just to validate the idea you have and stuff like that. But you ask if a

70
00:12:24,310 --> 00:12:36,470
Filip Valica: founder or an entrepreneur should produce different pieces that are needed in a business piece by piece, which yes, they should, I think. But everything that's in a brand should look about the same, you know,

71
00:12:36,830 --> 00:12:43,690
Filip Valica: this is how you build your brand. Logo is not exactly what people will recognize as your company.

72
00:12:44,030 --> 00:12:57,730
Filip Valica: What people recognize is part of this huge or small company is actually the entire branding. So every little detail counts like what color of t-shirt you're wearing for a meeting, for

73
00:12:57,730 --> 00:13:09,650
Filip Valica: example, or your business cards obviously and everything you deliver, even the emails and stuff like that. So it's not just the visual feel, but it's also the way you speak and which words

74
00:13:09,650 --> 00:13:21,330
Filip Valica: you're using and stuff like that. So I think that these all needs to have a guideline, right? And I think this is another way of using style tiles is to basically take the guidelines that are embedded

75
00:13:21,330 --> 00:13:33,090
Filip Valica: in the style tiles and just apply it to every single thing that you produce, even though you can print the business cards now and then a year later you might, I don't know, develop a mobile app for

76
00:13:33,090 --> 00:13:43,850
Heidi Pungartnik: or a business. But you always need to use the same rules for all your branding. So I think, yeah, to answer your question, it would be definitely, it would make sense to start with style tiles.

77
00:13:44,230 --> 00:13:53,990
Filip Valica: It doesn't take that long to just create them and then basically to base everything on those rules. Right. Absolutely. That way you're staying consistent. Step one, we create our style tile

78
00:13:53,990 --> 00:14:03,070
Filip Valica: and step two, we start thinking about some of the font choices. I guess after that we start looking at color. Yes. Actually, a heck for picking the colors. It's very,

79
00:14:03,090 --> 00:14:15,590
Filip Valica: similar to the one for the fonts. It's basically to only pick two, right? A very common error that I see people make. And I used to make this mistake when I was starting out in design. It's to pick

80
00:14:15,590 --> 00:14:23,470
Filip Valica: very kind of darkish, almost like dirty looking colors because you see that all the bright

81
00:14:23,470 --> 00:14:34,830
Filip Valica: colors are already used by companies like Twitter and MailChimp and stuff like that. So basically what you need to do is to not try to be too creative.

82
00:14:35,310 --> 00:14:49,910
Filip Valica: This was a problem when I started out because I was always afraid that if I use the rules that or tips that design blogs were recommending, that I would just create designs that would be just nothing original, right?

83
00:14:50,310 --> 00:15:04,750
Filip Valica: But, you know, eventually you kind of let go of this kind of idea that design is art because it isn't. It's the only purpose is to create better businesses, in my opinion. And I think that's also like true for a lot of people and a lot of companies.

84
00:15:05,170 --> 00:15:19,830
Filip Valica: Right. So it's communication, basically. Yeah. The way to you should pick colors is to basically steal them. I know this kind of sounds crazy, but it's not actually. There's this website called flat UI colors. We'll link it in the description.

85
00:15:20,230 --> 00:15:32,510
Filip Valica: It's basically like a list of colors that are pretty and that will work basically with in any kind of combination. And I personally recommend this website or just like another website with these colors.

86
00:15:32,830 --> 00:15:46,450
Heidi Pungartnik: And just I recommend that if you don't know which colors to pick, just take two from these websites or from this, from these patterns. Trying to create a new color from the Photoshop's color picker, it just gives you way

87
00:15:46,450 --> 00:15:50,130
Heidi Pungartnik: too many options and you will pick something that's ugly. So, you know.

88
00:15:51,700 --> 00:16:04,460
Filip Valica: I totally understand that. And I'm glad that you said that about design because I think design is. just a way of connecting with other people. As you said, choosing colors that are things that people have seen before is a way of

89
00:16:04,460 --> 00:16:12,680
Filip Valica: speaking a language that they're used to seeing elsewhere. That's right. Yeah, I wanted to just add something to this. That's completely right. I agree with that.

90
00:16:13,080 --> 00:16:26,400
Filip Valica: If we're looking at maybe a bigger picture of this concept, it's very common for people to kind of try to reinvent the user experience of websites and web applications and mobile applications.

91
00:16:26,520 --> 00:16:39,800
Filip Valica: And that's not really beneficial because you really need to take the experience that people are already used to, right? If you just invent a new kind of way to navigate a website, that won't help you.

92
00:16:40,100 --> 00:16:51,460
Heidi Pungartnik: It will maybe give you some exposure in terms of, oh, look at this person who is very crazy and created this very new experience. But in terms of sales, it won't help you.

93
00:16:51,520 --> 00:17:04,020
Heidi Pungartnik: So it's very, very good to simply copy the experiences. and the way websites already work because people already know how to use them. Excellent advice. No, I totally agree.

94
00:17:04,800 --> 00:17:19,560
Filip Valica: We talked about colors. And by the way, I've used the Adobe Culer tool as well for that. And I agree. One last thing about colors, do you put any stock, any thought in what colors actually mean? Or do you just suggest for people to pick colors that they feel strongly about?

95
00:17:19,840 --> 00:17:30,060
Filip Valica: For me, to be entirely honest, I don't think that's measurable enough for me to do. I never really paid attention to what the colors mean.

96
00:17:30,140 --> 00:17:42,220
Filip Valica: I do know what they mean and I've done the research because I needed to have some kind of arsenal to defend my design choices to my clients, but I never quite believe that.

97
00:17:42,660 --> 00:17:56,400
Filip Valica: So in my opinion, from what I've been doing a lot of research on conversions, because that's something that I'm really interested in. And it turns out that picking a very contrast in color for call to action, for example, if

98
00:17:56,400 --> 00:18:09,760
Filip Valica: your website is mainly white and a little bit blue, right? And if you pick a blue color for your call to action button, it will very likely have a lower conversion rate than if you would

99
00:18:09,760 --> 00:18:17,540
Filip Valica: create a button that's orange or red, because it's a lot harder to miss a very contrasting

100
00:18:17,540 --> 00:18:30,680
Heidi Pungartnik: color, right, in the landing page. So this is something that's measurable and I like it. And that's why I don't generally talk about what colors mean a lot, but it's up to anyone. If they believe

101
00:18:30,680 --> 00:18:41,600
Filip Valica: that red color will make their branding look a lot more energetic, that's totally valid. That's fine. And just go ahead and use it. But myself, personally, I don't care so much. Right. So basically

102
00:18:41,600 --> 00:18:52,720
Filip Valica: just use whatever you feel that matches the brand or the feeling that you're going for and don't worry too much about psychology. Yes, exactly. Exactly. Yeah. Well, so what's next? Once we pick our colors and our fonts.

103
00:18:53,540 --> 00:19:07,940
Filip Valica: Next is spacing. And this is a very tough topic because this is hard to put any actual numbers on. Step number one is to group things that are related contextually. For example, I think

104
00:19:07,940 --> 00:19:20,100
Filip Valica: that most people already do this. It's really hard not to not to do this. From time to time I see interfaces that are really very much ignoring this principle. What it means, it's actually like to

105
00:19:20,100 --> 00:19:30,360
Filip Valica: take every item in the navigation bar, for example, and just grouping them together and just separating them from the rest of the website. This is something that we all probably do quite

106
00:19:30,360 --> 00:19:42,280
Filip Valica: instinctually, but it's just good to note what exactly is going on. And then second is alignment. Basically, what you want to do is to use a grid, preferably. Not only when you build,

107
00:19:42,500 --> 00:19:55,900
Filip Valica: you're building a website, grids can be also used for posters and logos and stuff like that. What's very common is to have people use the grid, but then they also use the margins. For example, you have

108
00:19:55,900 --> 00:20:08,240
Filip Valica: a layout for a blog and then it's all well aligned, but the block post has some margin on the left side. So it doesn't look right because it's not really aligned visually. It's just technically

109
00:20:08,240 --> 00:20:18,720
Filip Valica: it's aligned, but it also has the margin that came from somewhere. So it's a good idea to just get rid of all the extra padding and margins and just align the elements.

110
00:20:18,920 --> 00:20:29,980
Filip Valica: to the grid. And in this freebie that we're talking about, I recommend the layouts that you should use and just avoid the 12 or 16 column grids that most designers use, because that's

111
00:20:29,980 --> 00:20:41,240
Filip Valica: way too complicated. And I'm not sure if anyone really uses that, except for fashion magazine designers or whatever. So that's the second part of spacing. And the third part is adding

112
00:20:41,240 --> 00:20:52,720
Filip Valica: white space. And really, this is the hard part because it's really hard to give you a good guideline on how much white space is good. There's one guideline and it's better to apply more

113
00:20:52,720 --> 00:21:05,000
Heidi Pungartnik: white space than less white space, which is something that I see as like a very common error. To basically be afraid that people won't scroll down the landing page, then people just remove the

114
00:21:05,000 --> 00:21:15,760
Filip Valica: white space that's on the website. And this causes the hierarchy to fall apart and it's just not good for the flow of the website or any kind of content.

115
00:21:16,680 --> 00:21:31,140
Filip Valica: talk about white space a little bit more because if you go to a museum and you look at a piece of art on a wall many times especially if it's a really important piece it's surrounded by completely nothing on a white wall why is that that's the idea yeah exactly what you said the point

116
00:21:31,140 --> 00:21:43,460
Filip Valica: of white space is to basically drag more attention to what's surrounded by the white space there's a huge difference in how much white space you use for example this is a good

117
00:21:43,460 --> 00:21:56,860
Filip Valica: experiment to do if you're feeling like it because it's quite simple to do, you just take one headline and leave it with zero letter spacing. And then you take another headline and you add

118
00:21:56,860 --> 00:22:08,360
Filip Valica: a few pixels of letter spacing between the letters, right? And you'll start to notice that as you add more space between the letters, the headline starts to become a lot more luxurious.

119
00:22:08,360 --> 00:22:13,440
Heidi Pungartnik: You kind of expect that you're going to have to pay for this product a lot more than you would

120
00:22:13,460 --> 00:22:23,620
Filip Valica: if there was no letter spacing in there. So this is a really nice example of how white space can make your product feel differently

121
00:22:23,620 --> 00:22:37,300
Filip Valica: and even look more expensive than it would be if you use the very basic design or even like non-professional kind of design. That's a great tip. And it's free, right? White space is free. Exactly.

122
00:22:37,800 --> 00:22:49,580
Filip Valica: You can get as much as you want. Yeah, exactly. But, you know, because it's so hard to get, it takes a long time to learn this feeling of applying the right amount of white space.

123
00:22:49,880 --> 00:22:57,220
Filip Valica: This is probably why lots of entrepreneur designers, they really, like, it's really hard to get. That's the problem.

124
00:22:57,420 --> 00:23:11,860
Filip Valica: So, you know, if you want to play around with it, if you have a more luxurious kind of product and you want to apply more white space, then I just recommend people in general when they're looking to learn design to just try and recreate a.

125
00:23:11,880 --> 00:23:22,720
Heidi Pungartnik: couple of great designs that they find. I think that's the best way to learn anything. They're just like recreating great pieces of whatever you're trying to learn. And if you're

126
00:23:22,720 --> 00:23:35,460
Heidi Pungartnik: into that and you don't want a higher designer, just find a nicely designed website that has the luxurious kind of and try to recreate it because you will start to learn how much

127
00:23:35,460 --> 00:23:41,160
Heidi Pungartnik: spacing you need to live between different elements. Great tips. Thanks. We talked about

128
00:23:41,160 --> 00:23:53,540
Filip Valica: spacing a little bit more and grids which basically just are a way of laying out information so it's set up in an orderly way did you want to start talking about the hierarchy a little bit about how

129
00:23:53,540 --> 00:24:05,940
Filip Valica: sometimes i see websites that have three or four things on a page they're all screaming for my attention how can people prevent that or why is that even a bad thing because if i make everything large and

130
00:24:05,940 --> 00:24:15,020
Filip Valica: red why won't people read it all that's a very good question actually so uh This is also something that I see a lot. It's like this lack of hierarchy.

131
00:24:15,220 --> 00:24:29,540
Filip Valica: And you need to realize that people who come to your website, they are not really, you know, invested in you. They're not going to read your entire website. It's very likely that they won't even read most of it.

132
00:24:29,880 --> 00:24:42,840
Filip Valica: They will probably just read maybe the headline and maybe the pricing and some notes, side notes or something like that. So you really need to figure out, first of all, what's the most important. information on your website,

133
00:24:43,620 --> 00:24:56,060
Filip Valica: and then put as much visual emphasis on this information. So, for example, if let's say I created a video course, right, and I'm selling this video course on a landing page.

134
00:24:56,680 --> 00:25:08,220
Filip Valica: What's most important for me on this landing page is the call to action, because that's the whole point of this landing page. I don't want people to go and follow me on Facebook.

135
00:25:08,220 --> 00:25:17,300
Filip Valica: I don't want people to go and become affiliates of this video course. I don't want people to go and read my blog. I want people to buy this course, right?

136
00:25:17,740 --> 00:25:30,020
Filip Valica: So, you know, in my hierarchy kind of list, call to action would be number one element in terms of importance. The second most important thing is probably the headline because this is something that

137
00:25:30,020 --> 00:25:44,660
Filip Valica: will either draw people in or push them away or just if it's not good enough, they will close the website. What's a good way of making sure that you? you're creating a well laid out landing page is to write out all the elements in a kind of a list,

138
00:25:45,040 --> 00:25:50,160
Filip Valica: basically, and then order this list in the order of importance. So you start with the most

139
00:25:50,160 --> 00:26:01,640
Heidi Pungartnik: important, which is for me the call to action, and then the second most important, the third most important, et cetera. And then you want to put a lot more importance, visual emphasis,

140
00:26:02,040 --> 00:26:14,100
Heidi Pungartnik: basically on the first one than you would on the fifth element, for example. Just to recap But this is basically to encourage people to take action or to just put emphasis on something

141
00:26:14,100 --> 00:26:25,680
Filip Valica: that's the most important thing there because people won't read your entire landing page that won't ever happen. Don't count on that. Right. People will basically scroll from top to bottom sometimes and they just want to kind

142
00:26:25,680 --> 00:26:40,660
Filip Valica: of get the point of it. Yeah. And the best way of maybe doing that is making sure that you've got your headings set up and maybe some bullet points or things like that. So if people only read the headings or only read the bullet points that they're getting a good part of the story. Yeah, exactly.

143
00:26:40,860 --> 00:26:49,500
Filip Valica: So we've talked about layout and colors and fonts. What's another important design element that people sometime overlook? I think that would be a logo.

144
00:26:49,780 --> 00:27:01,940
Filip Valica: People overestimate how important logo is because it is not that important, actually. It's just symbolizing some things about your company. But it doesn't have to say anything, honestly.

145
00:27:01,940 --> 00:27:11,760
Filip Valica: It needs to kind of set the rules for the rest of the branding. That's all the logo does. So this is something that I think many founders like to put way too much emphasis on.

146
00:27:12,060 --> 00:27:24,180
Filip Valica: And this is the reason I never, like, I used to do logos, but then I stopped because people put way too much personal meaning or maybe like every little detail in the logo was

147
00:27:24,180 --> 00:27:37,260
Filip Valica: a part of their business or of their personality. And it turned out that you can't quite capture that. Clients wanted the logo to be descriptive of themselves. then they would have to design it themselves, right?

148
00:27:37,520 --> 00:27:50,660
Filip Valica: And I don't think that's a good idea either. So in my opinion, make the logo as simple as possible, how it looks, what it symbolizes, just make it simple and clean and don't put too much emphasis on it.

149
00:27:50,840 --> 00:27:56,920
Heidi Pungartnik: A good way of figure it out if your logo is simple enough is to just make it as small,

150
00:27:57,140 --> 00:28:06,640
Filip Valica: like very small, like maybe an inch by inch. That's like, that's how small the logos can get. And it needs to work in black and white as well.

151
00:28:07,340 --> 00:28:22,280
Filip Valica: So this is something that if it's readable, if it's very well legible and and looks right on the small sizes, then it's probably simple enough. If it doesn't look right, then you can't read the letters and stuff like that. You need to make it simpler.

152
00:28:22,820 --> 00:28:32,480
Filip Valica: That's right, because you don't know how that logo is going to be used in the future and you want to make sure that when you start, it's going to be flexible enough to apply to all sorts of different media. Yeah, exactly.

153
00:28:32,480 --> 00:28:41,340
Heidi Pungartnik: especially like, what are you going to do when you need to print out a t-shirt, for example, or create a, I don't know, a stamp or something like that.

154
00:28:41,520 --> 00:28:52,940
Heidi Pungartnik: Then suddenly you need to redesign the logo or put a lot more effort into creating a new version of the logo. And it's not worth it. In my opinion, don't pay too much attention to the logo. Just make it very simple.

155
00:28:53,200 --> 00:29:07,100
Heidi Pungartnik: Use the colors that you use for the branding and use the phones that you use for the branding. So it kind of connects the entire branding together, but it's not that important. You need the logo, but you don't need to pay too much attention to what it says. I have a convention to make.

156
00:29:07,460 --> 00:29:13,200
Heidi Pungartnik: When I was creating my logo for the product startup, I can't tell you how many hours I spent on it.

157
00:29:13,320 --> 00:29:24,660
Heidi Pungartnik: I probably spent, I know I spent more time than anybody else does, but I probably spent like eight to 10 hours plus on creating maybe 20-something versions, going

158
00:29:24,660 --> 00:29:30,300
Heidi Pungartnik: through the different colors and making sure there's symbolism and trying to show that there's a startup and there's a startup.

159
00:29:30,300 --> 00:29:41,560
Filip Valica: up and there's this upward trajectory and you get this feeling behind the logo and and reading all the blog posts and all the, you know, because everybody will give you advice on it and,

160
00:29:41,620 --> 00:29:53,300
Filip Valica: and, you know, all of a sudden there was all this pressure to make like the best logo because that's how people judge your brand. To be honest, after a while it was just so overwhelming that I just

161
00:29:53,300 --> 00:30:07,300
Filip Valica: settled on the logo that I have now, which is just typography because it was the easiest decision and then I had to move on and make other decisions that were more important to the business. Yeah, exactly. I think that's a good way to kind of procrastinate on the rest of the business,

162
00:30:07,520 --> 00:30:21,580
Filip Valica: to just obsess over the logo. I don't think that makes a lot of sense. I think that you think about where will the logo be, right? Because people, like you said, people will judge your company by your logo.

163
00:30:21,720 --> 00:30:31,240
Filip Valica: But that's not quite right because people don't actually see the logo on its own, ever. almost, almost never. Maybe they see it on your t-shirt or whatever, you know.

164
00:30:31,520 --> 00:30:40,700
Filip Valica: Most of the time your logo will be in the context of like a website or a, I don't know, any kind of marketing material.

165
00:30:41,200 --> 00:30:51,800
Filip Valica: And the whole thing will be what people judge you by, not just the logo. So I think there's way too much obsession around this part of branding.

166
00:30:51,840 --> 00:31:03,260
Filip Valica: So I would recommend that people who are currently obsessing over that, to just put the pencil down and walk away yeah maybe yeah but maybe just to focus on on style tiles

167
00:31:03,260 --> 00:31:14,920
Heidi Pungartnik: instead because that's what what's going to actually drive the whole branding for them picking the right colors picking the right funds and stuff like that and just being consistent with using those

168
00:31:14,920 --> 00:31:20,120
Heidi Pungartnik: that's also like some one point that I'm constantly making is to sure you need to use the same

169
00:31:20,120 --> 00:31:32,140
Filip Valica: kind of logo and it needs to look exactly the same on every page or you know wherever but you also need to make sure that the rest of the branding is very consistent and that your Facebook page and your

170
00:31:32,140 --> 00:31:41,800
Filip Valica: website and your Twitter account, they all look the same. So that people can actually connect those three. So everything goes back to the style tiles, basically. Yeah, something like that.

171
00:31:42,980 --> 00:31:56,320
Filip Valica: Well, and I talked a little bit about what people think of your brand. Let's talk about something that's a little bit more important than that, right? I want people to use my service or to buy my product. Is there a way of testing that? Does design play a factor in that? Yeah. I

172
00:31:56,340 --> 00:32:06,540
Filip Valica: I think that, you know, this is something that a lot of people don't use, but there's a way to even test how well your design is performing, and that is by doing A-B testing.

173
00:32:06,900 --> 00:32:11,900
Filip Valica: This is something that I would very warmly recommend to anyone who has a website.

174
00:32:12,280 --> 00:32:25,880
Heidi Pungartnik: If they have, like, an extra half an hour per week, for example, just apply this A-B testing. It can be free. You can use Google Analytics, which has the experiments feature, and you just set it up. It's quite simple.

175
00:32:26,340 --> 00:32:31,960
Heidi Pungartnik: did it on Design for Founders, and you can measure every little detail from color of your buttons

176
00:32:31,960 --> 00:32:44,660
Filip Valica: to which headline to use for your blog posts or for your landing pages. These changes and these measurements can really change your conversion rate and therefore revenue quite a bit. So,

177
00:32:44,660 --> 00:32:59,300
Filip Valica: yeah, this is something that if you're not doing this yet, just do it as soon as possible. Yeah, no, I definitely need to do that. I've got some clients that I'm working with on the side And usually they're my test group. I ask them, hey, what do you think about this? Because they're my ideal client.

178
00:32:59,460 --> 00:33:13,980
Filip Valica: I want to make sure that what I create resonates. Is that something that you recommend? Or do you think testing online gives you better or faster results? Well, this is just a different type of measurement, which is, I think it's called quantitative testing or something like that. It's also very valuable.

179
00:33:14,140 --> 00:33:17,600
Filip Valica: It can give you good ideas on what exactly to test on your website.

180
00:33:17,780 --> 00:33:28,700
Heidi Pungartnik: But it's true that hopefully you have more traffic on your website than just the five clients you work with, right? Right. So I would still recommend you do set up this, this AB testing,

181
00:33:29,120 --> 00:33:40,660
Filip Valica: but, you know, since you have the access to exactly your target audience, this is useful to get ideas for what exactly you should test. Maybe they say, okay, well, I don't quite understand what

182
00:33:40,660 --> 00:33:51,880
Filip Valica: DIY product development means. And then you would want to rethink this headline that you have on your website and just try to test something else that's maybe more up there alley, you know? Absolutely.

183
00:33:51,880 --> 00:34:04,840
Filip Valica: So yeah, I guess both these methods are really, really valuable. Well, great. I think we talked a lot about all the things that people can do themselves with graphic design. How can you tell if you're ready to move on to the next step?

184
00:34:04,980 --> 00:34:09,580
Filip Valica: Do you think people should be in business for a certain amount of time before they reach out to someone for help?

185
00:34:09,640 --> 00:34:23,240
Filip Valica: Yeah, actually, I would say that when you can afford it and not just any designer, but when you can afford it like a professional high class designer, you should hire them. and when it makes business sense, obviously,

186
00:34:23,720 --> 00:34:37,200
Filip Valica: don't just invest $500 into, oh, I have a new website, or don't do just redesigns because of the redesigns, right? Because design is very important, but there's a lot you can already do by yourself,

187
00:34:37,720 --> 00:34:44,700
Filip Valica: just by investing a couple of hours into developing style tiles and the rest of the branding.

188
00:34:44,960 --> 00:34:58,260
Heidi Pungartnik: So you can afford a high-priced premium designer do that. But until then, it might not make sense because it won't necessarily affect your revenue in any kind of way.

189
00:34:58,600 --> 00:35:05,480
Heidi Pungartnik: And I would recommend that following up from the previous point that start testing your conversion rates right now

190
00:35:05,480 --> 00:35:20,340
Filip Valica: and your behavior of people on the website so that you can compare your current design with whatever the designers are going to develop later. Because you might find out, I'm not saying that this will be the case, but you might find out that your previous design,

191
00:35:20,340 --> 00:35:28,700
Filip Valica: which was amateur and non-professional might be better for your revenue. Right. It all depends on your target audience and I guess what they respond to.

192
00:35:29,640 --> 00:35:40,620
Filip Valica: Well, great. As we're wrapping up now, are there some things that you want to mention really quick that you feel are the top three or five mistakes that people make? I know we talk a lot about how to do design from the ground up,

193
00:35:40,660 --> 00:35:49,340
Filip Valica: but are there some classic mistakes that you see everywhere that you just wish that people would stop doing? Some pet peeves. I don't know.

194
00:35:49,340 --> 00:35:57,480
Filip Valica: Actually, like, I think one, I already mentioned this, that people are trying to be way too unique and way to creative.

195
00:35:58,180 --> 00:36:06,960
Filip Valica: And I think that people, not only founders, but maybe especially designers, need to realize that design is not art.

196
00:36:07,320 --> 00:36:14,700
Heidi Pungartnik: As I already said, design's point is to create more sales and to kind of build a brand.

197
00:36:14,700 --> 00:36:24,760
Heidi Pungartnik: It's not to show off the designer skills or to, I don't know, to do any kind of brand new reinvented user experiences.

198
00:36:25,400 --> 00:36:36,560
Filip Valica: So, yeah, this is something, you know, if you can, you know, you should always copy what's already out there because of course you need to kind of put your own twist on it, right?

199
00:36:36,740 --> 00:36:42,880
Filip Valica: You know, it doesn't make sense to try to invent new kind of design or new kind of experiences and layouts.

200
00:36:44,700 --> 00:36:57,980
Filip Valica: if people won't know how to use them in the end. Great advice. We're nearing the end of the show here, and I wanted to make sure that we mentioned that you've put together a guide that covers all the content that we've talked about today. And I'll make sure that we link that in the show notes.

201
00:36:58,400 --> 00:37:07,320
Filip Valica: Can you tell everybody where they can find you? And can they shoot you a tweet or an email if they have any questions? Yeah, I would just direct people to designforfounders.com,

202
00:37:07,900 --> 00:37:16,300
Heidi Pungartnik: which is the main website where they can find my blog, also my book on design and I think there's also

203
00:37:16,300 --> 00:37:22,080
Filip Valica: the links to the social media and stuff like that. But yeah, I would really recommend people to

204
00:37:22,080 --> 00:37:36,160
Heidi Pungartnik: download this freebie, 10 steps to fixing design because while I did try to mention a lot of tips in this episode, there's many more tips in the guide itself and also examples. So I would love

205
00:37:36,160 --> 00:37:49,100
Heidi Pungartnik: to get your audiences and the listeners feedback on it. Maybe I can even feature them inside this guide once it's out for real. So yeah, I want to mention that this is a exclusive pre-launch

206
00:37:49,100 --> 00:38:03,240
Heidi Pungartnik: copy. So you should totally go there and download the guide. Great. Well, thank you very much, Heidi. It was good talking to you. And hopefully we'll have you on in a show in the future and we can talk about some of the more advanced topics. Yes. Thank you, Philip. Thank you for having me.

207
00:38:03,520 --> 00:38:14,840
Heidi Pungartnik: Well, we'll talk about more in the future episodes. And that concludes today's episode. Thanks for listening. I've put all the links that we've covered under the show notes posted on the product startup.com slash episode three.

208
00:38:15,460 --> 00:38:26,580
Filip Valica: Join me next time as we talk with Brad Summey from the Savage Jerky Company. Brad and his friends set out to create flavorful spicy beef jerky that wasn't terrible for you and didn't contain ingredients that belong in a lab instead of a kitchen.

209
00:38:27,200 --> 00:38:38,070
Filip Valica: They launched a Kickstarter in February 2014 and extended their goal in less than 30 days. Savage Jerky Company, Episode 4. And one last thing. If you like this episode and you want to see more like it,

210
00:38:38,270 --> 00:38:52,610
Filip Valica: or even if you want to see something different, please leave me a review on iTunes by going to the product startup.com slash review. I really appreciate your support and I read all the comments and questions and try to incorporate them into future episodes. Reviews also help me get guests on the show.

211
00:38:53,270 --> 00:38:53,830
Filip Valica: See you next time.

212
00:38:56,070 --> 00:39:08,330
Filip Valica: Thank you for listening to this episode of the Product Startup Podcast with your host, Philip Velica. For more great content and to stay up to date, visit theproduct startup.com. Your guide to getting there.

213
00:39:13,830 --> 00:39:27,910
Filip Valica: Thanks for tuning into this episode of the Product Startup podcast, the show that teaches you what it really takes to bring your product to market and turn it into a big success. This podcast series is brought to you by Mako Design + Invent, the first firm in North

214
00:39:27,910 --> 00:39:39,350
Filip Valica: America to provide global caliber end-to-end physical consumer product development to startups, inventors, and small product businesses. If you're looking for product development help on your invention, head over to macawdesign.com.

215
00:39:39,590 --> 00:39:49,290
Filip Valica: That's m-a-k-o-design.com for a free consultation from one of Mako-designed for design studios from coast to coast. Thanks for listening and see you next time.