BLOG

Girl petting horse

An Intro to Website Design Principles

August 22, 20245 min read

It's time for a website that gets you clients. Let's be clear: Your WORK as a heart-led horse-first professional is anything but boring. It's vital and horses need more of what you offer! With just a few small changes, you can completely transform your website to showcase your business and generate clients. Let’s get into an Introduction to Website Design Principles.

Whether you’re opting for a DIY-approach to redesigning your own website or hiring a professional, it helps to understand the basics of web design so that you can implement these very simple, but very high impact principles that have been proven time and time again, to work. The whole purpose of this endeavor is to make it so that the meat and potatoes of your website - essentially your copy - or the part of your website that speaks to the visitor directly gets to shine. The design should make it easier to consume so that you can communicate effectively with your website visitor.

A few factors that go into a cohesive website design are:

  • Font selection

  • Font size

  • Paragraph spacing

  • Color family

  • Color organization/guidance

      

Common mistakes include:

  • Having all 1 size font

  • Large blocks of run-on text that are difficult to read

  • Having only 1 font style OR 6 or 7 font styles because people find them fun to look at and fun to play with

  • Having way too many colors OR not enough color to help guide the eye

So, how can we avoid these pitfalls? Regarding Font Size: Often, designers like to use either a three to four ratio or two to three ratio. Essentially, you start with your smallest font size, which would be for your body. With a three to four ratio, you add three sizes up to get to your subheading and then three sizes up from that to get to your heading sizes. You could also use the two to three ratio and increase it even larger. Ultimately, this has the effect of making your website feel more cohesive.

Think of it like chapters in a book, for example. If you open a book to a specific chapter, especially if it's a nonfiction book, chances are it's going to have a chapter heading, which is going to be in a larger, blockier, more robust font that draws your attention and lets you know what to expect in the chapter to come. Then, you might have subheadings or subchapters that break it up even further and break up larger, more robust concepts to guide you through the text. After that, of course, you have your body text of the content of the subchapter within the larger chapter. This establishes a hierarchy of how you move through the text. Your website should be no different. It makes your content much easier to consume and digest.

Next stop: Paragraphs. When the body of a website is just long strings of text, it makes it very hard to read - especially for people in the modern age with shorter attention spans. Much of what you have to say gets lost in the shuffle. Breaking it up into sections and adding lots of spacing in between each section, sentence, or paragraph makes it significantly easier to consume.

Ideally, you want your website to be scannable, because that's what most people will do.

Upon their first perusal of your website, visitors will scan through it, see if there's more information that they want to read in depth, and then they may decide to go back and read more.

You can also guide your visitor's eye by bolding or CAPITALIZING text, especially for elements that are extremely important or that have a high impact to your message.

Break sentences apart to really drive home important concepts by guiding the eye through, giving it a place to take a break, and letting your reader’s brain process the information they’ve just read before moving on to the next piece.

How many Fonts should you use in your design? Websites often contain WAY too many different fonts. It makes reading harder and actually diminishes the power of your words. You're better off picking at most two different, contrasting fonts. This way, one would be recognizable as the heading of a section and the other (more simple) font would make reading the body of your text easier and faster.

This brings us to: Colors. When looking at a brand board, our priority is the consistency of the colors that are being used. Colors should be able to help guide people through your website. We recommend having one specific color as your designated Call-to-Action color. This helps people understand that, when they see that color, there's a specific action item embedded for them.

Think of it like traffic lights. We know that when we see red, we stop. When we see yellow, we prepare to stop, slow down, and have caution. When we see green, we're clear to go. Your website is no different. By using color consistently and harmoniously, you can soothe the reader’s eye AND indicate that there are either important things to look at or actions to be taken.

Which colors to use? That’s up to you! Whether you have stable colors that you like to use to represent your business or brand aesthetic colors - being able to use these across different elements like social media, emails, and on your website builds a sense of brand cohesiveness. When people see these colors, they know that they are seeing something that relates to you and your business, which is a really powerful way to start building trust and recognition.

And there you have it! A few simple - yet tried and tested - ways to help look at your website and create an easy-to-navigate and easy-to-consume platform. Through these strategic elements, we can ensure that your design does not detract from the most important part of your website: the copy.

At HorseBizAutomated, we're here to help you create a beautiful, clean and effective website that makes you proud of what you do and generates the perfect clients for your heart-led horse-first business. Click here to learn how!

Website DesignDesign PrinciplesHorse BusinessHorse WebsiteMarketingWebsite Growth
Back to Blog
Girl petting horse

An Intro to Website Design Principles

August 22, 20245 min read

It's time for a website that gets you clients. Let's be clear: Your WORK as a heart-led horse-first professional is anything but boring. It's vital and horses need more of what you offer! With just a few small changes, you can completely transform your website to showcase your business and generate clients. Let’s get into an Introduction to Website Design Principles.

Whether you’re opting for a DIY-approach to redesigning your own website or hiring a professional, it helps to understand the basics of web design so that you can implement these very simple, but very high impact principles that have been proven time and time again, to work. The whole purpose of this endeavor is to make it so that the meat and potatoes of your website - essentially your copy - or the part of your website that speaks to the visitor directly gets to shine. The design should make it easier to consume so that you can communicate effectively with your website visitor.

A few factors that go into a cohesive website design are:

  • Font selection

  • Font size

  • Paragraph spacing

  • Color family

  • Color organization/guidance

      

Common mistakes include:

  • Having all 1 size font

  • Large blocks of run-on text that are difficult to read

  • Having only 1 font style OR 6 or 7 font styles because people find them fun to look at and fun to play with

  • Having way too many colors OR not enough color to help guide the eye

So, how can we avoid these pitfalls? Regarding Font Size: Often, designers like to use either a three to four ratio or two to three ratio. Essentially, you start with your smallest font size, which would be for your body. With a three to four ratio, you add three sizes up to get to your subheading and then three sizes up from that to get to your heading sizes. You could also use the two to three ratio and increase it even larger. Ultimately, this has the effect of making your website feel more cohesive.

Think of it like chapters in a book, for example. If you open a book to a specific chapter, especially if it's a nonfiction book, chances are it's going to have a chapter heading, which is going to be in a larger, blockier, more robust font that draws your attention and lets you know what to expect in the chapter to come. Then, you might have subheadings or subchapters that break it up even further and break up larger, more robust concepts to guide you through the text. After that, of course, you have your body text of the content of the subchapter within the larger chapter. This establishes a hierarchy of how you move through the text. Your website should be no different. It makes your content much easier to consume and digest.

Next stop: Paragraphs. When the body of a website is just long strings of text, it makes it very hard to read - especially for people in the modern age with shorter attention spans. Much of what you have to say gets lost in the shuffle. Breaking it up into sections and adding lots of spacing in between each section, sentence, or paragraph makes it significantly easier to consume.

Ideally, you want your website to be scannable, because that's what most people will do.

Upon their first perusal of your website, visitors will scan through it, see if there's more information that they want to read in depth, and then they may decide to go back and read more.

You can also guide your visitor's eye by bolding or CAPITALIZING text, especially for elements that are extremely important or that have a high impact to your message.

Break sentences apart to really drive home important concepts by guiding the eye through, giving it a place to take a break, and letting your reader’s brain process the information they’ve just read before moving on to the next piece.

How many Fonts should you use in your design? Websites often contain WAY too many different fonts. It makes reading harder and actually diminishes the power of your words. You're better off picking at most two different, contrasting fonts. This way, one would be recognizable as the heading of a section and the other (more simple) font would make reading the body of your text easier and faster.

This brings us to: Colors. When looking at a brand board, our priority is the consistency of the colors that are being used. Colors should be able to help guide people through your website. We recommend having one specific color as your designated Call-to-Action color. This helps people understand that, when they see that color, there's a specific action item embedded for them.

Think of it like traffic lights. We know that when we see red, we stop. When we see yellow, we prepare to stop, slow down, and have caution. When we see green, we're clear to go. Your website is no different. By using color consistently and harmoniously, you can soothe the reader’s eye AND indicate that there are either important things to look at or actions to be taken.

Which colors to use? That’s up to you! Whether you have stable colors that you like to use to represent your business or brand aesthetic colors - being able to use these across different elements like social media, emails, and on your website builds a sense of brand cohesiveness. When people see these colors, they know that they are seeing something that relates to you and your business, which is a really powerful way to start building trust and recognition.

And there you have it! A few simple - yet tried and tested - ways to help look at your website and create an easy-to-navigate and easy-to-consume platform. Through these strategic elements, we can ensure that your design does not detract from the most important part of your website: the copy.

At HorseBizAutomated, we're here to help you create a beautiful, clean and effective website that makes you proud of what you do and generates the perfect clients for your heart-led horse-first business. Click here to learn how!

Website DesignDesign PrinciplesHorse BusinessHorse WebsiteMarketingWebsite Growth
Back to Blog

© 2021 HorseBizSuccess I Privacy Policy I Terms of Use