6 Tips to Make Your Website Look Legit & Reliable
With all the DIY website building platforms out there, more people than ever are taking a stab at creating their own website. From Shopify to Wix, Squarespace to Bluehost, there are plenty of platforms to facilitate creating your own website in a snap. I’m super pumped that technology has made this easier than ever, but I also cringe a bit at some of the creations that were hastily posted.
I know you’ve seen them - the obviously self-made sites that either look like a ton of other ones (because they all used the same template) or are just… cringe. From too many font styles to an overload of color and moving images, sometimes they’re just not the greatest.
Don’t get me wrong - I’m all for people going full DIY on their website… buuuuuttttt I think there are some easy tips you can follow to help your site look more legit and professional. And let’s face it - looking legit and professional can go a long way to building trust with your potential customers.
Ready to level up your website game?
Let’s go!
Tip #1: Limit Your Colors
I love color as much as the next person, but trying to incorporate too much of it on your website can be overwhelming for your visitors.
A great rule of thumb to follow is the 60-30-10 rule for color. This rule actually originated in the interior design world, but I learned about it from my favorite website and Squarespace expert Paige Brunton (check out her article on it here!)
Basically you want to pick 3 colors that complement each other and then use them in ratios of 60%, 30%, and 10%. If you’re a newbie to the design world, it’s definitely ok to keep things simple at first. Your main color that will be used around 60% of your site should be a light neutral (some shade of white here is fine.)
The next color should complement your first one, but should be even less attention-grabbing (think another neutral) as it will be used more sparingly (only 30% of your site). And that last 10% color should really pop and stand out, since it will be used to highlight important sections of your site.
So what does this look like in action?
Here is an example of a color palette using this rule:
As you can see, the Main and Secondary colors are neutrals, while the Accent is something different that pops.
So how would you incorporate this into a web page? Take a look at this example of that palette in action:
You can see how the Main and Secondary colors take up the majority of the image, with the Accent color being used to highlight the important action for that page (Select Card button). This is where your 10% color comes into play by letting you direct attention where you want it.
Here is another example of this rule in action:
This one is a bit different because the Secondary - or 30% - color is seemingly bolder than the Accent - or 10% - color. As you become more and more familiar with design you can play around with colors like this. The important thing is to keep your chosen colors to these ratios.
Tip #2: Keep Pages Uncluttered
If this is your first time designing a website, you may not realize how crucial it is to leave lots of space between elements on your pages. I know I certainly didn’t realize this was a thing when I was starting out!
Basically, however much space you’ve left between one section and another - you can probably double it. It might seem counter-intuitive or even incorrect, but trust me! You don’t want too much text or too many images crowded together on your page because at first glance a visitor will get overwhelmed and think “this is going to be way too much work - nevermind!”
You’ve probably never noticed the spacing of a web page you’ve visited unless the page was too crowded.
Take a look at this webpage. It’s got a lot of images going on, so a visitor wouldn’t know what to click. It’s busy and the text is rather small, making it difficult to read.
You want to keep your page simple and easy to navigate, and one of the best ways to do that is by leaving lots of space. “White space” on a page is forgiving to the eye and calming to a visitor. Here’s an example of a site that’s doing this well:
This is a shoe company based in Amsterdam. What I like about this home page is that you immediately understand the focus because there is only one image asking for your attention. The top navigation is simple, the majority of the screen is a picture of their product, and the text is minimal.
Note the amount of literal white space on this page. You probably wouldn’t think twice about it until we compare it to something busy, right? Simple and easy to navigate = perfection.
Tip #3: Choose Easily Readable Fonts
Even if your web pages are well-spaced, if the text on them is difficult to read you’re going to lose your visitors’ attention. Have you ever seen a tattoo in that old timey script font? You probably had to look twice or even 3 times to understand what it was saying.
You want to avoid creating any difficulty for your website visitors! And that includes making your text easy on the eyes. Stick with around 2-3 different font choices, and make sure they complement each other. Squarespace makes this easy, as they let you filter by font pairings/families when you set up a website with them.
If you’re worried 3 fonts won’t be enough for your creative juices, don’t forget you can augment their appearance with italics, bolding, size, capitals, and colors to spice it up.
Look at this website:
They’ve used 2 main fonts here, but are still varying the look by playing with font size and weight. Scrolling through this page the fonts are consistent, easy on the eyes, and clear. You don’t need a TON of fonts to be creative! Play around with sizing, color, and italics to see what feels right for you.
Another reason to limit your font choices is to keep everything on-brand. If your logo and general site aesthetic is clean and minimal, you won’t want to pick something like Comic Sans. It will throw off your vibe and be jarring to anyone who looks at it. And it may even give off the impression you haven’t nailed down your brand - definitely not something I want for you!
Tip #4: Include High Quality Photos
I don’t think anyone will argue that photos and images are an integral part of almost every website. So naturally it’s important that the photos you include on your site are crisp and clear. Generally pictures taken with a good quality DSLR camera or even a newer model cell phone camera will look great on a website, but it’s worth doing a double check before posting.
If the photo files are on your computer you can right click the file name, go to Properties, then Details and check the dimensions and resolution. (If you’re on a Mac, right click on the file in the Finder, click Get Info, and under the "More Info" tab you will see the dimensions of the image.) You’ll want to look for at least 300 ppi (pixels per inch) to make sure the photo is hi-res.
Now, where exactly you want to place the photo on your site can determine the best size, but a good rule of thumb is to make sure your photos are around 1500 - 2000 pixels wide. The height is slightly more variable, but making sure your photos are 1500 - 2000 pixels wide will make sure the photos on your site looks good on all sizes of screens, from a tiny phone to a giant iMac.
Another thing you’ll want to check is your image file size in KB. It is technically possible to upload pictures up to a whopping 20MB to your site, but that will seriously slow your site’s speed. And no one wants a slow-loading page! So make sure you’re keeping your images to a maximum of 500KB in size.
Not sure how to resize your images? I got you! Here’s the easiest method I’ve found for both PCs and Macs:
On a PC:Open the image you want to resize using the Photos app.Click the ellipsis button on the menu bar at the top, then click Resize.Choose from the default size options provided (or choose Define Custom Dimensions)Choose where to save the new image (make sure the file type is .jpg or .png, but I recommend .jpg as it usually keeps better quality while getting the file size as small as possible)
On a Mac:Open the image in PreviewClick Tools → Adjust SizeIn this dialog box, you can resize the image to whatever size you wantClick OK, and then save your new image
Tip #5: Keep the Navigation Simple
As we’ve seen in some of the example sites from earlier, a crowded top navigation looks cluttered, and is just generally too many choices for your visitor. Remember, you want to direct your visitors’ attention - not just have them wander around and hope they get to the right page on your site.
I generally advise clients to keep their top navigation bar to 5 or fewer buttons/tabs, and in most cases that’s plenty. You might have an About, Services, Portfolio, and Contact up there. Or About, Store, Blog, Contact. It’s not necessary to have a Home tab because you can make your business’ logo a clickable image that will go back to the Home screen (don’t waste valuable space on that!)
It’s also fine to include your social links in the top navigation as well. If you don’t want to put them up there, then I would suggest putting them in your footer.
One last thing I want to address is having a search bar on your website. Even if you don’t think you need one, if you think there’s no possible way someone will need to search for something on your site - include it anyway. It doesn’t hurt, and will make you look extra profesh!
And who knows! There might come a time when someone was sure they saw a reference to a super delicious recipe on your site but can’t remember where and then that search bar will come in handy!
Tip #6: Prioritize Mobile Responsiveness
Ok, this is something you probably already know, but let me just emphasize it some more.
People. Browse. EVERYTHING. On. Their. Phones.
That means your site needs to look great on that small screen as well as on a big desktop one.
If you’re using Squarespace, Shopify, Wix, or Wordpress you can preview your site through a mobile-viewer as you’re building it.
This is a great tool to help you make sure spacing, text, and images are lining up how you want them to even on a smaller screen. A good website building platform makes it virtually painless to get a beautiful site - even on mobile (shoutout to Squarespace for doing a great job at this!)
At times you may have to make a choice between a page looking great on a desktop and a little less great on mobile, or vice versa. But 97% of the time there is a workaround to solve any issues that come up (just get to know your platform!)
Bottom line is make sure you’re checking your pages on a mobile viewer to ensure a great user experience no matter where your visitor is browsing from!
