Website design and style best practices

Have you ever visited a website that took your breath away? Good design can make your website stand out from the competition and look more professional. Here are some fun graphic design tricks and best practices to take your online presence up a notch.  

We’ll cover: 

• Breaking up text with images and empty space to improve readability

• Using headings to call out important information

• Applying color to delineate website sections

• Giving your images different shapes

• Creating image backgrounds 

• Creating backgrounds that appear to span two sections

• Creating color fades between sections

• Using images as headings or in place of text 

At the end of the day, your website should look and feel like you. Creating custom designs is a great way to give your site a more personal touch.

Break up text with white space and images

The majority of people scan or skim websites searching for keywords and information. Giving your words breathing room makes them easier to read. 

If you’ve got a lot of written content to share on your website, it’s helpful to break up large chunks of text with white space and images. You can also use bold and italic fonts, as well as different layouts, to draw attention to specific sections. 

Many visitors will pass over sections that look like this. 

But here’s how that same section looks with line breaks and some bold text to draw the eye. 

Going a step further, here’s how this section could look with images breaking up the sections.

And finally, here’s another design where some text is used in a grid format to call attention to specific things. 

All these layouts look better than a mountain of text, and they’re also easier for your audience to read and comprehend. 

Use headings to call out important information 

When search engines read your website, you can tell them what’s most important by using headings. Page titles should be the most prominent type of heading on your page, also referred to as H1s. Section headings should be the second most prominent type of heading on your page, or H2s. Smaller sections are H3s and so on. 

Use headings to make important information stand out, both to your readers and the search engine robots.

Here’s a section without any headings. 

Versus a section with headings. 

Headings make your page much easier to skim since information stands out. 

Use color to delineate website sections 

Why have plain white walls in your house when you could have colorful ones! Don’t be afraid to use some colors in the background sections of your websites since this helps separate different sections and show readers where to look. 

In the section below, the eye immediately goes to the dusty pink color in the middle. This is great for highlighting your most important content. 

Refer back to your brand colors from Chapter 3 and use these as a starting point for choosing background colors. 

Stick to simple text colors with high contrast. 

If you’re using a dark background, choose a light text color. If you have a light background, use a dark text color. You don’t always have to use black and white, but you shouldn’t make readers squint to see your text. 

When you use dark-on-dark or light-on-light in your sections, it’s really difficult to read the text. 

But swap the text colors around, and voila! 

Giving your images different shapes 

Different image shapes add interest to your page. If you’re a Podia user, image shapes are built into the website builder. All you need to do is pick the shape you like and we’ll resize the image correctly. 

Here’s how square and circle images look alongside text. 

You can also make different image shapes using Canva . 

Open a new design in Canva and go to “Elements”. Search for “Frames”, and find a frame with the shape you like. 

Add your image into the frame and it will adopt the same shape. Then download the design as a PNG with a transparent background. 

The transparent background feature is only available on Canva Pro, so a little workaround is to download your design with a white background and use a free background eraser tool or app.

Then you can upload your image with a transparent background into Podia just like you would any other image. 

Creating image backgrounds 

Adding image backgrounds to your website sections can give your page an elevated look. To do this in Podia, click on the “Design” tab and you’ll see a space to upload or search for an image background. Once you add an image, you’ll also see tools to edit the image. 

You can search for patterns and colors using the Unsplash integration to find images that provide texture without being too overpowering. Be careful with readability here. 

Here’s an example of how a noisy background can lead to poor readability. This is a background image straight out of the box with no adjustments. 

And here’s the same section after decreasing the opacity and adjusting the blur and grayscale for a subtle, textured look. Much better, right?

Here’s another example of how having a nearly transparent background can be subtle while still making the section appear more dynamic.

If you do want to use a more exciting background, put your content in cards so that it’s not text over a vibrant picture. 

Here’s how this page looks with no cards (messy, hard to read).

Here’s how it looks with cards. Much easier to read. 

Creating backgrounds that span multiple sections

Want to create backgrounds that appear to span multiple blocks of your website?

To do this, head to Canva and open a new “Blog Banner” sized design. Add the shape you’d like to use as your background design, and pick the color that you’d like it to be. 

Export the image and head back to Podia. 

Upload it as the background image for one of your sections, and set the opacity and contrast to 100%.

Then go to the section below the block you just edited, and set its background color to match that of your shape. 

The result? Your background color appears to span multiple sections for a unique look. 

Don’t be afraid to experiment with different shapes and colors. 

Note: It might take some adjusting in Canva to get your shape in the correct layout. It took me a few tries to get the wave right where I wanted it. Trial and error is all part of the fun!

Creating color fades between sections

You can use the same technique as above to create a fading effect between two sections. 

Head to Canva and open a new “Blog Banner” project. Search for a “fade” graphic in the “Elements” section. Once you find a fade that you like, add it to your image and adjust the color of the graphic so it matches the section it will fade into. I’m making a blue homepage fade, so I changed the graphic color to the same shade of blue. 

Download the image and return to the Podia website builder. Find the section where you’d like to place your fade effect, and click on the “Design” tab. 

In the “Background image” section, upload your fade graphic from Canva and adjust the settings to full opacity, no blur, no grayscale, and full contrast. 

If your fade doesn’t line up correctly, go back to Canva and try moving the graphic up or down a bit. It might take a few tweaks to get a smooth seam. 

You can even continue the fade to the bottom of the section by flipping your Canva fade image upside down and uploading it as the background for the section below. 

Here’s the final effect: 

Using images as headings or in place of text

It might be tempting to use an image with text on it in place of actual text on the page, but there is a downside to this. Search engines can’t read the text on images as easily. They could have trouble figuring out what your site is about which could negatively impact search rankings. 

Instead of creating text-heavy images like this:

Try creating an image with fewer words, and write out the most important details in a text section. 

This way you can still use fun graphics and font decorations without harming your website’s SEO. 

Bringing your favorite web design elements together

At the end of the day, making your website easier to understand and more visually appealing can result in a better user experience and more sales. I encourage you to tinker around with the settings, layouts, backgrounds, and blocks to create different looks. Remember your website is not set in stone. You can change things around any time you want, so don’t be afraid to color outside the lines a bit. 

Now that you’ve made some stylistic updates, the last step is to complete the website launch checklist. You’re almost there!