7 SaaS UI Mistakes Non-Designers ALWAYS Make - Avoid These 🚫
Read full transcript 10 segments
-
if you feel like your website scares if you feel like your website scares customers off before they have a chance customers off before they have a chance customers off before they have a chance to understand what you've built you're to understand what you've built you're to understand what you've built you're going to want to watch this video the going to want to watch this video the going to want to watch this video the design of both your marketing website design of both your marketing website design of both your marketing website and your SAS application can make or and your SAS application can make or and your SAS application can make or break your startup but when you're just break your startup but when you're just break your startup but when you're just starting out you usually don't have the starting out you usually don't have the starting out you usually don't have the capital to hire a professional designer capital to hire a professional designer capital to hire a professional designer so a lot of us Founders handle design so a lot of us Founders handle design so a lot of us Founders handle design ourselves and the results can be hot ourselves and the results can be hot ourselves and the results can be hot garbage I'm not a designer I don't claim garbage I'm not a designer I don't claim garbage I'm not a designer I don't claim to be a designer so in today's video I'm to be a designer so in today's video I'm to be a designer so in today's video I'm going to mix it up and I'm going to going to mix it up and I'm going to going to mix it up and I'm going to bring on Tracy Osborne who does have bring on Tracy Osborne who does have bring on Tracy Osborne who does have real design shots she's even written a real design shots she's even written a real design shots she's even written a book about how to be a better designer book about how to be a better designer book about how to be a better designer and she's here to help you learn about and she's here to help you learn about and she's here to help you learn about some critical design blenders that you some critical design blenders that you some critical design blenders that you can easily avoid over to you Tracy can easily avoid over to you Tracy can easily avoid over to you Tracy thanks Rob with over two decades of thanks Rob with over two decades of thanks Rob with over two decades of experience as a visual and user experience as a visual and user experience as a visual and user experience designer and having reviewed experience designer and having reviewed experience designer and having reviewed hundreds of SAS websites in my role as hundreds of SAS websites in my role as hundreds of SAS websites in my role as program director at Tiny Seed I have program director at Tiny Seed I have program director at Tiny Seed I have seen every design mistake Under the Sun seen every design mistake Under the Sun seen every design mistake Under the Sun today I'm here to tell you the top today I'm here to tell you the top today I'm here to tell you the top visual design mistakes I see visual design mistakes I see visual design mistakes I see non-designers make over and over and how non-designers make over and over and how non-designers make over and over and how to fix them later in the video I'll let to fix them later in the video I'll let to fix them later in the video I'll let you know the mistake I too often see you know the mistake I too often see you know the mistake I too often see Founders make even after they paid Founders make even after they paid Founders make even after they paid thousands for a designer to create a thousands for a designer to create a thousands for a designer to create a professional landing page so let's get professional landing page so let's get professional landing page so let's get started let's take a look at this started let's take a look at this started let's take a look at this hypothetical startup sassy SAS this hypothetical startup sassy SAS this hypothetical startup sassy SAS this startup has a pretty typical template startup has a pretty typical template startup has a pretty typical template for their landing page and at first for their landing page and at first for their landing page and at first glance it looks pretty okay you know glance it looks pretty okay you know glance it looks pretty okay you know things are looks like they're all in the things are looks like they're all in the things are looks like they're all in the right place not a lot of colors looks right place not a lot of colors looks right place not a lot of colors looks fairly clean but there are some big fairly clean but there are some big fairly clean but there are some big things we can change that can improve things we can change that can improve things we can change that can improve this by like a th% let's jump down to this by like a th% let's jump down to this by like a th% let's jump down to the content and at first glance it looks
-
the content and at first glance it looks the content and at first glance it looks pretty good but you might notice that pretty good but you might notice that pretty good but you might notice that the text is a fairly light gray and I the text is a fairly light gray and I the text is a fairly light gray and I see this a lot by non-designers and even see this a lot by non-designers and even see this a lot by non-designers and even designers because it looks very designers because it looks very designers because it looks very designning it looks very clean however designning it looks very clean however designning it looks very clean however there's not enough contrast on that text there's not enough contrast on that text there's not enough contrast on that text so it's easily readable maybe the so it's easily readable maybe the so it's easily readable maybe the younger set can read it but as folks are younger set can read it but as folks are younger set can read it but as folks are getting older as computers are getting getting older as computers are getting getting older as computers are getting farther away when there's small text farther away when there's small text farther away when there's small text light gray text it's an often used but light gray text it's an often used but light gray text it's an often used but bad choice for your content all you need bad choice for your content all you need bad choice for your content all you need to do to fix this is just look for light to do to fix this is just look for light to do to fix this is just look for light gray text on your page and bump up the gray text on your page and bump up the gray text on your page and bump up the contrast and if you don't have a lot of contrast and if you don't have a lot of contrast and if you don't have a lot of experience kind of judging by eye how experience kind of judging by eye how experience kind of judging by eye how much contrast there is or how much much contrast there is or how much much contrast there is or how much contrast there should be there's tools contrast there should be there's tools contrast there should be there's tools out there like web Aim so you can put in out there like web Aim so you can put in out there like web Aim so you can put in the the color of your text and the color the the color of your text and the color the the color of your text and the color of your background and it'll let you of your background and it'll let you of your background and it'll let you know if there is enough contrast to be know if there is enough contrast to be know if there is enough contrast to be readable and a good example of this is readable and a good example of this is readable and a good example of this is gathers homepage ignoring that gigantic gathers homepage ignoring that gigantic gathers homepage ignoring that gigantic beautiful looking headline the content beautiful looking headline the content beautiful looking headline the content underneath it is still a very dark gray underneath it is still a very dark gray underneath it is still a very dark gray but there's enough visual contrast but there's enough visual contrast but there's enough visual contrast between it and the headline to between it and the headline to between it and the headline to differentiate it but it's still super differentiate it but it's still super differentiate it but it's still super readable all right going back to this readable all right going back to this readable all right going back to this content on our hypothetical SAS yeah content on our hypothetical SAS yeah content on our hypothetical SAS yeah we've bummed up the contrast on that we've bummed up the contrast on that we've bummed up the contrast on that text but still pretty hard to read text but still pretty hard to read text but still pretty hard to read because the text is really small happens because the text is really small happens because the text is really small happens all the time I see a lot of people all the time I see a lot of people all the time I see a lot of people gravitating to like really small text gravitating to like really small text gravitating to like really small text sizes especially if they've been on the sizes especially if they've been on the sizes especially if they've been on the web for a while because back in the day web for a while because back in the day web for a while because back in the day we were working with like 8 pixel and 10 we were working with like 8 pixel and 10 we were working with like 8 pixel and 10 pixel fonts But as time has gone on pixel fonts But as time has gone on pixel fonts But as time has gone on people have gotten used to a larger text people have gotten used to a larger text people have gotten used to a larger text size large text sizes are easier to read
-
size large text sizes are easier to read size large text sizes are easier to read they also look more modern and so the they also look more modern and so the they also look more modern and so the Quick Fix here is just a look at your Quick Fix here is just a look at your Quick Fix here is just a look at your text sies and bump it up a bit if you're text sies and bump it up a bit if you're text sies and bump it up a bit if you're working in pixels a minimum of 14 pixels working in pixels a minimum of 14 pixels working in pixels a minimum of 14 pixels in terms of size is what I would go with in terms of size is what I would go with in terms of size is what I would go with and probably larger in this case it's and probably larger in this case it's and probably larger in this case it's still pretty small but it's bigger than still pretty small but it's bigger than still pretty small but it's bigger than it was before and is way more readable it was before and is way more readable it was before and is way more readable good example of this is savy Cal and good example of this is savy Cal and good example of this is savy Cal and this is like great beautiful large text this is like great beautiful large text this is like great beautiful large text here savy Cal's website is a great here savy Cal's website is a great here savy Cal's website is a great example if you are unsure about how big example if you are unsure about how big example if you are unsure about how big you can go take a look at savy cow's you can go take a look at savy cow's you can go take a look at savy cow's website the tech sizes are gloriously website the tech sizes are gloriously website the tech sizes are gloriously large and it looks really normal it large and it looks really normal it large and it looks really normal it doesn't look like it's an overly large doesn't look like it's an overly large doesn't look like it's an overly large Tech size so you can kind of see how far Tech size so you can kind of see how far Tech size so you can kind of see how far you could bump your Tech sizes uh in you you could bump your Tech sizes uh in you you could bump your Tech sizes uh in you know that direction before it starts know that direction before it starts know that direction before it starts looking weird which you have a lot of looking weird which you have a lot of looking weird which you have a lot of room to grow and on the topic of room to grow and on the topic of room to grow and on the topic of typography if we scroll up we might typography if we scroll up we might typography if we scroll up we might notice now that we've increased the text notice now that we've increased the text notice now that we've increased the text size a little bit we've increased the size a little bit we've increased the size a little bit we've increased the contrast on our text a little bit but contrast on our text a little bit but contrast on our text a little bit but your readability is still not quite your readability is still not quite your readability is still not quite there because the line lengths are too there because the line lengths are too there because the line lengths are too long here I'm specifically talking about long here I'm specifically talking about long here I'm specifically talking about that sub headline in that hero section that sub headline in that hero section that sub headline in that hero section where it goes all the way from the left where it goes all the way from the left where it goes all the way from the left side to the right side of the page when side to the right side of the page when side to the right side of the page when lines are that long and you kind of have lines are that long and you kind of have lines are that long and you kind of have to like move your head back and forth to to like move your head back and forth to to like move your head back and forth to read that sentence it's no people are read that sentence it's no people are read that sentence it's no people are going to skip it they're not going to going to skip it they're not going to going to skip it they're not going to read it it's super hard to read and I read it it's super hard to read and I read it it's super hard to read and I see a lot of non designers do this see a lot of non designers do this see a lot of non designers do this because they're working at templates because they're working at templates because they're working at templates that are full width of the page and they that are full width of the page and they that are full width of the page and they plunk in their text and it goes to full plunk in their text and it goes to full plunk in their text and it goes to full width of the page don't do that add a width of the page don't do that add a width of the page don't do that add a little space to the left and the right little space to the left and the right little space to the left and the right of that content shorten those line
-
of that content shorten those line of that content shorten those line lengths and it will vastly improve your lengths and it will vastly improve your lengths and it will vastly improve your readability so what we did was added readability so what we did was added readability so what we did was added those spacers around that content in those spacers around that content in those spacers around that content in that hero so the line lengths are that hero so the line lengths are that hero so the line lengths are significantly shorter it's much easier significantly shorter it's much easier significantly shorter it's much easier to read at a glance and you know your to read at a glance and you know your to read at a glance and you know your customers will actually read that sub customers will actually read that sub customers will actually read that sub headline and hopefully cook through into headline and hopefully cook through into headline and hopefully cook through into what your product is good example of what your product is good example of what your product is good example of this is the user list website so it this is the user list website so it this is the user list website so it looks pretty similar to sassy SAS in looks pretty similar to sassy SAS in looks pretty similar to sassy SAS in terms of the headline content and the terms of the headline content and the terms of the headline content and the CTA is underneath it but it's another CTA is underneath it but it's another CTA is underneath it but it's another example of showing how you can bump in example of showing how you can bump in example of showing how you can bump in the sze of your content when you have the sze of your content when you have the sze of your content when you have these headlines at the top of your page these headlines at the top of your page these headlines at the top of your page so that the line lengths don't go too so that the line lengths don't go too so that the line lengths don't go too long moving on to my favorite one which long moving on to my favorite one which long moving on to my favorite one which is whitespace and by whites space I is whitespace and by whites space I is whitespace and by whites space I don't mean the actual color white space don't mean the actual color white space don't mean the actual color white space of the page I mean the empty space of of the page I mean the empty space of of the page I mean the empty space of the page the part of the page that isn't the page the part of the page that isn't the page the part of the page that isn't images icons or content so looking at images icons or content so looking at images icons or content so looking at sassy SAS the white space that we have sassy SAS the white space that we have sassy SAS the white space that we have already would be a lot of the space already would be a lot of the space already would be a lot of the space that's in this green bar in this hero that's in this green bar in this hero that's in this green bar in this hero section we're using whites space section we're using whites space section we're using whites space essentially to shorten those line essentially to shorten those line essentially to shorten those line lengths in that previous section but lengths in that previous section but lengths in that previous section but whites space is a powerful tool we can whites space is a powerful tool we can whites space is a powerful tool we can use to make the content on your website use to make the content on your website use to make the content on your website more readable make it easier for people more readable make it easier for people more readable make it easier for people to go through it because everything's to go through it because everything's to go through it because everything's not going to be crammed up together so not going to be crammed up together so not going to be crammed up together so if we add even more white space to this if we add even more white space to this if we add even more white space to this hero section on sassy sess we added more hero section on sassy sess we added more hero section on sassy sess we added more space at the top and the bottom of this space at the top and the bottom of this space at the top and the bottom of this hero section you can see that the eye is hero section you can see that the eye is hero section you can see that the eye is more easily d drawn into that headline more easily d drawn into that headline more easily d drawn into that headline it goes directly there because it's it goes directly there because it's it goes directly there because it's that's the the the thing in the middle that's the the the thing in the middle that's the the the thing in the middle and there's nothing competing with it
-
and there's nothing competing with it and there's nothing competing with it around it we can use white space to kind around it we can use white space to kind around it we can use white space to kind of draw the eye through the page from of draw the eye through the page from of draw the eye through the page from that headline into the content without that headline into the content without that headline into the content without having all these elements crammed having all these elements crammed having all these elements crammed together and competing with each other together and competing with each other together and competing with each other if we jump down to the content we can if we jump down to the content we can if we jump down to the content we can see there's a lot more opportunities to see there's a lot more opportunities to see there's a lot more opportunities to add wi space and we can use that WID add wi space and we can use that WID add wi space and we can use that WID space to make this page feel cleaner space to make this page feel cleaner space to make this page feel cleaner more modern and easier to use so if we more modern and easier to use so if we more modern and easier to use so if we add some spacing between those columns add some spacing between those columns add some spacing between those columns yeah spacing between the pieces of yeah spacing between the pieces of yeah spacing between the pieces of content so between those feature columns content so between those feature columns content so between those feature columns and that sub headline between the sub and that sub headline between the sub and that sub headline between the sub headline and the content below it headline and the content below it headline and the content below it between that content and the section and between that content and the section and between that content and the section and where that image is all of those things where that image is all of those things where that image is all of those things are adding more wi space to the page but are adding more wi space to the page but are adding more wi space to the page but it's also making the page easier on the it's also making the page easier on the it's also making the page easier on the eyes it's less complicated there's less eyes it's less complicated there's less eyes it's less complicated there's less things competing for attention it's things competing for attention it's things competing for attention it's easier for the eye to go between all easier for the eye to go between all easier for the eye to go between all these sections without being like wait these sections without being like wait these sections without being like wait where am I going next whites space is where am I going next whites space is where am I going next whites space is also something that makes a website feel also something that makes a website feel also something that makes a website feel more modern and more trustworthy the more modern and more trustworthy the more modern and more trustworthy the websites we used back in the '90s were websites we used back in the '90s were websites we used back in the '90s were pretty clant cramm together pretty close pretty clant cramm together pretty close pretty clant cramm together pretty close and as the internet has been moving and as the internet has been moving and as the internet has been moving towards more modern designs whites space towards more modern designs whites space towards more modern designs whites space has been added and is now expected by has been added and is now expected by has been added and is now expected by consumers as a sign of a trustworthy consumers as a sign of a trustworthy consumers as a sign of a trustworthy product a good example of this is the product a good example of this is the product a good example of this is the scraping be website and if you're scraping be website and if you're scraping be website and if you're looking at this website you know there looking at this website you know there looking at this website you know there is an illustration there's a headline is an illustration there's a headline is an illustration there's a headline subheadline in a CTA uh but the negative subheadline in a CTA uh but the negative subheadline in a CTA uh but the negative space the white space um there is a lot space the white space um there is a lot space the white space um there is a lot of it there's a lot around that of it there's a lot around that of it there's a lot around that illustration there's a lot below that illustration there's a lot below that illustration there's a lot below that that content and if you're worried that that content and if you're worried that that content and if you're worried that people aren't going to scroll because people aren't going to scroll because people aren't going to scroll because there's a giant you know empty space there's a giant you know empty space there's a giant you know empty space there scraping be is doing a cool thing
-
there scraping be is doing a cool thing there scraping be is doing a cool thing here by having that diagonal color line here by having that diagonal color line here by having that diagonal color line going through that kind of draws the eye going through that kind of draws the eye going through that kind of draws the eye down into the next section if you jump down into the next section if you jump down into the next section if you jump into that next section you can see into that next section you can see into that next section you can see there's still a lot of beautiful white there's still a lot of beautiful white there's still a lot of beautiful white space here I mean the space between that space here I mean the space between that space here I mean the space between that hero section and that first content hero section and that first content hero section and that first content section is actually pretty darn big it's section is actually pretty darn big it's section is actually pretty darn big it's like 200 pixels but this web page looks like 200 pixels but this web page looks like 200 pixels but this web page looks cohesive it looks easy to use it doesn't cohesive it looks easy to use it doesn't cohesive it looks easy to use it doesn't look out of whack the amount of wh space look out of whack the amount of wh space look out of whack the amount of wh space here is appropriate and it's something here is appropriate and it's something here is appropriate and it's something that you should be trying to achieve in that you should be trying to achieve in that you should be trying to achieve in your own designs I know in this video your own designs I know in this video your own designs I know in this video we're focusing a lot on content but we're focusing a lot on content but we're focusing a lot on content but that's because the content is a really that's because the content is a really that's because the content is a really important part of your page and there's important part of your page and there's important part of your page and there's a lot of mistakes being made when you're a lot of mistakes being made when you're a lot of mistakes being made when you're designing your web page visually and designing your web page visually and designing your web page visually and trying to you know fussing with how it trying to you know fussing with how it trying to you know fussing with how it looks but you're not really looking at looks but you're not really looking at looks but you're not really looking at the content itself and so in addition to the content itself and so in addition to the content itself and so in addition to making sure your content is easy to read making sure your content is easy to read making sure your content is easy to read with high contrast making sure it's easy with high contrast making sure it's easy with high contrast making sure it's easy to read with uh larger text sizes and to read with uh larger text sizes and to read with uh larger text sizes and shortening those lines links and adding shortening those lines links and adding shortening those lines links and adding that white space around it because it's that white space around it because it's that white space around it because it's not crammed up with with everything we not crammed up with with everything we not crammed up with with everything we also want to look at the content itself also want to look at the content itself also want to look at the content itself and see if there's any opportunities to and see if there's any opportunities to and see if there's any opportunities to change what we've written to make it change what we've written to make it change what we've written to make it more compelling so taking a look at this more compelling so taking a look at this more compelling so taking a look at this headline it's very typical for a you headline it's very typical for a you headline it's very typical for a you know a biger startup to start out with know a biger startup to start out with know a biger startup to start out with they start with a headline that says they start with a headline that says they start with a headline that says what this startup is it is a data what this startup is it is a data what this startup is it is a data collection service but that's not collection service but that's not collection service but that's not compelling no one wants to sign up for compelling no one wants to sign up for compelling no one wants to sign up for that why would you want to sign up for that why would you want to sign up for that why would you want to sign up for that what does that do for the consumer that what does that do for the consumer that what does that do for the consumer consumer when you're working on a design consumer when you're working on a design consumer when you're working on a design working on your landing page as a working on your landing page as a working on your landing page as a non-designer make sure you're nitpicking non-designer make sure you're nitpicking non-designer make sure you're nitpicking your content and rewriting those your content and rewriting those your content and rewriting those headlines to make them compelling I see
-
headlines to make them compelling I see headlines to make them compelling I see this all the time people writing very this all the time people writing very this all the time people writing very boring headlines when this is like one boring headlines when this is like one boring headlines when this is like one of the smallest changes you can do that of the smallest changes you can do that of the smallest changes you can do that could vastly affect your conversion in could vastly affect your conversion in could vastly affect your conversion in your bottom line so sassy SAS is a daily your bottom line so sassy SAS is a daily your bottom line so sassy SAS is a daily collection service but that tells you collection service but that tells you collection service but that tells you nothing about what the company actually nothing about what the company actually nothing about what the company actually does what it actually does is it unlocks does what it actually does is it unlocks does what it actually does is it unlocks actual insights and secures your data actual insights and secures your data actual insights and secures your data now we could probably improve this even now we could probably improve this even now we could probably improve this even further this is still kind of generic further this is still kind of generic further this is still kind of generic but at least it's a little bit closer to but at least it's a little bit closer to but at least it's a little bit closer to what we wanted to do which is talk about what we wanted to do which is talk about what we wanted to do which is talk about what it does for the consumer versus what it does for the consumer versus what it does for the consumer versus what it is this is a lot more compelling what it is this is a lot more compelling what it is this is a lot more compelling than just saying it's a data collection than just saying it's a data collection than just saying it's a data collection service because it tells people about service because it tells people about service because it tells people about why they might want to sign up for it so why they might want to sign up for it so why they might want to sign up for it so we can take this work that we're doing we can take this work that we're doing we can take this work that we're doing on these headlines and also apply it to on these headlines and also apply it to on these headlines and also apply it to our content so if we scroll down we look our content so if we scroll down we look our content so if we scroll down we look at this features area you know there's a at this features area you know there's a at this features area you know there's a lot of words for each of these sections lot of words for each of these sections lot of words for each of these sections is a chunk of text and no one wants to is a chunk of text and no one wants to is a chunk of text and no one wants to read a giant chunk of text but they will read a giant chunk of text but they will read a giant chunk of text but they will read something that's shorter Snappy has read something that's shorter Snappy has read something that's shorter Snappy has strategic Bolding basically you want to strategic Bolding basically you want to strategic Bolding basically you want to make sure the content you have is easily make sure the content you have is easily make sure the content you have is easily read for people who are scrolling fast read for people who are scrolling fast read for people who are scrolling fast on your website maybe they're just you on your website maybe they're just you on your website maybe they're just you know reading things at a glance And when know reading things at a glance And when know reading things at a glance And when they see giant chunks of text like this they see giant chunks of text like this they see giant chunks of text like this they're just going to skip it so let's they're just going to skip it so let's they're just going to skip it so let's take these chunks of texts and we'll take these chunks of texts and we'll take these chunks of texts and we'll split them up so A good rule of thumb split them up so A good rule of thumb split them up so A good rule of thumb for paragraph does you know writing your for paragraph does you know writing your for paragraph does you know writing your paragraphs is to keep them to two to paragraphs is to keep them to two to paragraphs is to keep them to two to three sentences Max per paragraph but three sentences Max per paragraph but three sentences Max per paragraph but that shorter is always better so even that shorter is always better so even that shorter is always better so even you can short it further than two to you can short it further than two to you can short it further than two to three sentences that's great so for three sentences that's great so for three sentences that's great so for these chunks of texts we a shortened these chunks of texts we a shortened these chunks of texts we a shortened them B we broke them into separate them B we broke them into separate them B we broke them into separate paragraphs we also added some Bolding so
-
paragraphs we also added some Bolding so paragraphs we also added some Bolding so the important words in the sentence will the important words in the sentence will the important words in the sentence will pop out to people who are just scrolling pop out to people who are just scrolling pop out to people who are just scrolling through quickly on the web page this through quickly on the web page this through quickly on the web page this makes it a lot more compelling and makes it a lot more compelling and makes it a lot more compelling and increases the chances that someone as increases the chances that someone as increases the chances that someone as they're like going through your website they're like going through your website they're like going through your website super quickly they'll catch on something super quickly they'll catch on something super quickly they'll catch on something that looks interesting to them and that looks interesting to them and that looks interesting to them and they'll start reading further whereas a they'll start reading further whereas a they'll start reading further whereas a giant Buck attacks the person's just giant Buck attacks the person's just giant Buck attacks the person's just going to skip it Z zoing back out we've going to skip it Z zoing back out we've going to skip it Z zoing back out we've updated this features area but now we updated this features area but now we updated this features area but now we have that chunk of text below to contend have that chunk of text below to contend have that chunk of text below to contend with and this is what you're probably with and this is what you're probably with and this is what you're probably going to do for your entire website going to do for your entire website going to do for your entire website going through piece of content by piece going through piece of content by piece going through piece of content by piece of content and shorten up and I mean of content and shorten up and I mean of content and shorten up and I mean every piece of content everything so you every piece of content everything so you every piece of content everything so you know a lot of people on their about page know a lot of people on their about page know a lot of people on their about page writes their life story cut that down writes their life story cut that down writes their life story cut that down make that short make it snappy use any make that short make it snappy use any make that short make it snappy use any opportunity you can to shorten and opportunity you can to shorten and opportunity you can to shorten and snapify your content so it's easier to snapify your content so it's easier to snapify your content so it's easier to read and increases the chance that read and increases the chance that read and increases the chance that people are actually going to read it and people are actually going to read it and people are actually going to read it and then click through to being a customer then click through to being a customer then click through to being a customer so even in this section below you know so even in this section below you know so even in this section below you know we need a little bit more words here but we need a little bit more words here but we need a little bit more words here but we can break that giant paragraph up we can break that giant paragraph up we can break that giant paragraph up into three different paragraphs we can into three different paragraphs we can into three different paragraphs we can still use some of that strategic Bolding still use some of that strategic Bolding still use some of that strategic Bolding for those important parts and make it for those important parts and make it for those important parts and make it way easier for people who are skimming way easier for people who are skimming way easier for people who are skimming the page to see the important parts and the page to see the important parts and the page to see the important parts and read what you're doing and a good read what you're doing and a good read what you're doing and a good example of this is cloud forecast example of this is cloud forecast example of this is cloud forecast website their headline is excellent it website their headline is excellent it website their headline is excellent it references something that you would know references something that you would know references something that you would know if you're an AWS customer it's funny if you're an AWS customer it's funny if you're an AWS customer it's funny it's short it's easy to understand it's it's short it's easy to understand it's it's short it's easy to understand it's super compelling so this is a good super compelling so this is a good super compelling so this is a good example of the kind of things you can do example of the kind of things you can do example of the kind of things you can do with your headlines to make your startup with your headlines to make your startup with your headlines to make your startup more compelling to the customers you're more compelling to the customers you're more compelling to the customers you're working with simply by changing the text working with simply by changing the text working with simply by changing the text on your headlines I've got one more tip on your headlines I've got one more tip on your headlines I've got one more tip for you but before that I want to let for you but before that I want to let for you but before that I want to let you know about microcon for remote it's
-
you know about microcon for remote it's you know about microcon for remote it's a two-day online conference where we a two-day online conference where we a two-day online conference where we bring in outside experts to help you bring in outside experts to help you bring in outside experts to help you level up your skills this event will be level up your skills this event will be level up your skills this event will be focused on early stage marketing and the focused on early stage marketing and the focused on early stage marketing and the talks include topics like the talks include topics like the talks include topics like the bootstrapped startup marketing checklist bootstrapped startup marketing checklist bootstrapped startup marketing checklist hiring a copywriter that doesn't suck hiring a copywriter that doesn't suck hiring a copywriter that doesn't suck building a sustainable customer building a sustainable customer building a sustainable customer acquisition funnel and how to increase acquisition funnel and how to increase acquisition funnel and how to increase conversions and reduce churn in your conversions and reduce churn in your conversions and reduce churn in your email marketing additionally we'll have email marketing additionally we'll have email marketing additionally we'll have some founder by founder sessions where some founder by founder sessions where some founder by founder sessions where you can meet Founders who are tackling you can meet Founders who are tackling you can meet Founders who are tackling the same problems as you are the two-day the same problems as you are the two-day the same problems as you are the two-day event kicks off on November 1st to learn event kicks off on November 1st to learn event kicks off on November 1st to learn more and to get your ticket head to more and to get your ticket head to more and to get your ticket head to microcon promote.com last but not least microcon promote.com last but not least microcon promote.com last but not least a thing I see a lot is Founders and a thing I see a lot is Founders and a thing I see a lot is Founders and non-designers making a lot of work on non-designers making a lot of work on non-designers making a lot of work on their homepage and their landing pages their homepage and their landing pages their homepage and their landing pages and making sure they look good but not and making sure they look good but not and making sure they look good but not translating any of that any of the translating any of that any of the translating any of that any of the changes they made into the app itself so changes they made into the app itself so changes they made into the app itself so sassy SAS we've been working on the sassy SAS we've been working on the sassy SAS we've been working on the headlines we've been working on the headlines we've been working on the headlines we've been working on the content we already have a style of this content we already have a style of this content we already have a style of this website um pretty defined we have a lot website um pretty defined we have a lot website um pretty defined we have a lot of greens we have certain fonts we use of greens we have certain fonts we use of greens we have certain fonts we use but if we click through to the app but if we click through to the app but if we click through to the app itself The Sassy SAS app looks good it's itself The Sassy SAS app looks good it's itself The Sassy SAS app looks good it's also using a really goodlook template also using a really goodlook template also using a really goodlook template looks very modern and clean but it looks looks very modern and clean but it looks looks very modern and clean but it looks nothing like that homepage and this is nothing like that homepage and this is nothing like that homepage and this is an easy fix all you need to do when you an easy fix all you need to do when you an easy fix all you need to do when you have uh you know any changes you make to have uh you know any changes you make to have uh you know any changes you make to your landing page those fonts and the your landing page those fonts and the your landing page those fonts and the way that things look you just want to way that things look you just want to way that things look you just want to make sure that you flect those things on make sure that you flect those things on make sure that you flect those things on your app itself so sassy SAS here still your app itself so sassy SAS here still your app itself so sassy SAS here still looks the same as before it's still looks the same as before it's still looks the same as before it's still using a good-looking template but it using a good-looking template but it using a good-looking template but it brought in those greens it brought in
-
brought in those greens it brought in brought in those greens it brought in those fonts it created a um design those fonts it created a um design those fonts it created a um design language that matches what we see on language that matches what we see on language that matches what we see on that landing page when your app looks that landing page when your app looks that landing page when your app looks different than your landing page it different than your landing page it different than your landing page it creates this disconnect that can make creates this disconnect that can make creates this disconnect that can make customers feel like they're on a customers feel like they're on a customers feel like they're on a different service that something went different service that something went different service that something went wrong and they went to the wrong place wrong and they went to the wrong place wrong and they went to the wrong place so so when you're making these changes so so when you're making these changes so so when you're making these changes or you're trying out a new template or or you're trying out a new template or or you're trying out a new template or doing anything on the front end of your doing anything on the front end of your doing anything on the front end of your website make sure that the customer website make sure that the customer website make sure that the customer facing pages also have the same design facing pages also have the same design facing pages also have the same design language and that includes fonts colors language and that includes fonts colors language and that includes fonts colors sometimes it can spacing could be the sometimes it can spacing could be the sometimes it can spacing could be the way you're using your lines just make way you're using your lines just make way you're using your lines just make sure they look like they're part of the sure they look like they're part of the sure they look like they're part of the same brand that wraps up some of the key same brand that wraps up some of the key same brand that wraps up some of the key user interface design tips for user interface design tips for user interface design tips for non-designers you're building a SAS non-designers you're building a SAS non-designers you're building a SAS product make sure to avoid critical product make sure to avoid critical product make sure to avoid critical mistakes that could sync your startup mistakes that could sync your startup mistakes that could sync your startup check out this next video to learn what check out this next video to learn what check out this next video to learn what p all to watch out for when launching p all to watch out for when launching p all to watch out for when launching your SAS business thanks for watching your SAS business thanks for watching your SAS business thanks for watching and I'll see you next time
Summary
This video addresses how crucial design is for marketing websites and SaaS applications, especially for founders without design experience who often make critical, easily avoidable visual mistakes. The practical takeaway is to fix issues like low text contrast to ensure readability and improve user experience, preventing potential customers from being scared away.