Good Design Gets You Far, Design & Audio Visual Content

Your garden and website should be well designed and full of beautiful and stimulating content. Your website’s template is like your overall garden blueprint; your visual content is like individual plants or specific types of gardens within the larger garden. The goal is to maximize engagement and delight visitors.

Using the proper spacing, hierarchy, symmetry, scale, color contrast, etc. in gardening will make for a visually pleasing garden design. Even a single unique plant or tree used as a focal point will attract visitors from miles around. Also don’t forget to consider the other aspects of plants that make them engaging, (things like fragrance, texture and edibility).

Your website should be designed by a professional using design best practices. Like in your garden, many of the same design rules apply to building your site: spacing, hierarchy, symmetry, scale and color contrast. Good design builds trust and increases the perceived value of a product or service. Bad design may turn people off, hinder readability or cause confusion or suspicion. Even if you have the latest and greatest information about hydroponic gardening on your website, if it looks like it was designed in 1994, people will not believe that you have current or reliable content. Naturally, they will quickly move on to the next website.

If you plan to build your own website, use a CMS like WordPress that has customizable templates designed by professionals. Some of the drag-and-drop site builder tools offered by Vista Print or GoDaddy might be easy to use, but often they result in awkward looking (or plain old ugly) designs. If you don’t have the “design eye” and can’t tell if what you are building looks good or bad, model your website after other professionally built sites or have friends and family give you a friendly critique.

Resource: A great place to find beautifully designed WordPress templates is Theme Forest: http://themeforest.net.

You want the design of your website to match your other marketing materials. This is important for branding as well as building trust. You website should use the same colors, imagery, design style and graphics to match as closely as possible. Fonts may be the exception to this rule.

Fonts on the Web

There are many limitations to using fonts on the Internet because most fonts are proprietary and have strict licensing agreements. Internet browsers (i.e. Chrome, Internet Explorer and Firefox) interpret code to display web pages to people. If you use a font on your website that the end user does not have installed on their computer or device, the browser can’t display that text. Thus, designers are restricted to using only very common “web-friendly” fonts, such as Arial, Helvetica and Times New Roman. Nearly everyone has these basic fonts installed.

Another option is to use something called “hosted fonts.” These are collections of fonts made available by the designers/founders for use (free or paid) by website developers. The fonts reside on the Internet and thus are available for nearly any computer or device to display “live” text.

Resource: To find free hosted fonts you can use on your website, check out www.google.com/fonts. To find additional hosted fonts available in a paid subscription, check out https://typekit.com.

In order to get around this font limitation, some designers will embed text in images so they can use a specific font that may not be available on the web. This strategy can make for a very visually pleasing, unique website that is quick and easy to build. However, many business owners and novice web designers don’t understand the negative impact this has on their SEO.

You want the vast majority of text on your website to be “live” text, not text embedded in images. Image-based text is readable only to humans, not search engines. Thus if you have a site where the navigation and headlines are all image-based, you are missing some of the most important areas for live text keywords on your website. Hint: If you can’t tell if text is live text or embedded in an image, try to copy and paste the text into a text editor. If you can’t highlight, copy and paste it, it is probably part of an image.

Visual Content

Images and graphics are a must on every website and blog! Having a website without visual elements is like having a garden that is made up entirely of grass. Sure everyone loves a nice lawn, but it’s really not that interesting in and of itself. Your website could have the greatest text content in the world, but if it has no images, people will likely not read it.

Non-text content is essential for user engagement. It communicates in a different way than written content and naturally motivates people to interact with it.

Images can be used to break up text, to illustrate a point, to add visual explanations, to delight and more. Using images of real people who work at your business or organization can build trust a lot more effectively than the ubiquitous lady-with-a-headset stock photo. Customers like knowing there are real people behind the website. The best images are professional photos of your business, you and your staff, your products and your services in action. Hiring a professional to take photos is a wise investment.

Resource: If you don’t have any images of your own, we recommend stock photo websites such as www.dreamstime.com or www.shutterstock.com to find high quality images. Stock photos are always better than no photos!

Highlighting visual and multi-media elements often makes content easier or more entertaining to consume. Visual content can include photographs, graphics, animations, illustrations and infographics. Multi-media content (audio and video) have proven to dramatically aid in SEO. Many users are far more likely to watch a five-minute video than they are to read an article for five minutes. The longer users remain on your site and engage, the better your Google ranking will be. In one study of 600 marketers, 82% surveyed confirmed that online video marketing has had a positive impact on their organization or business. Just 10% felt video has had little impact on their overall marketing ROI with 7% confirming they had not yet integrated video into their marketing programs.

Design & Readability

In addition to being pleasing to the eye, good design will help users consume and understand information more easily. To make a big block of text easier to read, add subheadings to break up text and introduce new topics. Headlines should follow a hierarchy, with the most important headline being the largest text on the page. This allows people to quickly scan and find what they are looking for and identify what the most important things are to read.

In the body text, make sure there is extra vertical space after paragraphs (more space than between sentences in the same paragraph) to visually separate each paragraph.

In addition, use short bullets and numbered lists whenever possible. For example, instead of writing one big block of text about your favorite flowers, write “My Top 10 Favorite Flowers” and break up the article with subheadings and numbers for each flower. That way, someone who may not want to read the entire article can quickly see what the top 10 flowers are.

Make sure the font size is easy to read and the contrast between the text color and the background color is high enough that your eyes don’t have to strain.

Designing with large buttons, arrows, images and other graphics can drive viewers to take a specific action much like signage and a path in a garden can direct people to a specific place. Design can help dictate the flow a user takes through your website: to complete a contact form, download an e-book, purchase a product or the like. If the verb used is a command, this type of element is known as a “call to action.” “Buy Now,” “Click Here” and “Download Your Free Resource” are all examples of calls to action.

Responsive Design

Design plays a major role in SEO when it comes to the latest technology. The vast array of Internet-connected devices (things like smart phones, smart watches and Google glasses) and the infinite number of screen sizes on everything from tiny tablets, to jumbo computer monitors create significant challenges for web designers. With all the different ways your site might be viewed, web designers have had to change tactics to create websites that will meet the needs of users on all of these different types of devices (or at least to provide them with an experience that isn’t terrible). Enter “responsive design.”

Responsive web design is the approach in design and development wherein the website responds to the user’s behavior and environment based on screen size, platform and orientation. Responsive design is created by using a mix of flexible grids, layouts and images. A responsive web design will dynamically optimize itself for phones and tablets, as the of size screen on which it’s being displayed changes.

A responsive website is different than a mobile app because you don’t have separate mobile, tablet and desktop versions of your site. Regardless of what device a visitor is using to access your site, they’ll see all of the content you have to offer (no more partial-content mobile versions of sites) and they’ll encounter it in an easy-to-read format.

With mobile use on the rise, user experience on these various devices is more important than ever. Buttons must be large enough to be easily clicked with a finger without touching another link or button. Important content must be accessible without having to pinch and zoom or scroll sideways. Designs must work on dozens of different sized monitors, some as small as a dollar bill, others the size of a huge TV. Responsive design is the answer to this challenge. We will look at responsive design more in the next chapter.

The better optimized your site is for all these different devices, the higher user engagement you will have. When users stay on your website for longer periods of time, click to multiple pages and ultimately take the action you want them to take, Google will reward you.

Invest in a website that is interesting to look at and easy for people to use, and it will definitely pay off. While form may not trump function, there’s no question that design plays a vital role in user experience, engagement, perceived value, readability, trust building and your search engine optimization.

Sore Thumb SEO

It is possible to hide content on a website by making the text the same color as the background in order to show content to search engines but not humans. Google’s robots are smart enough to detect this, and you will be penalized for it!