Backgrounds, Layout, and Call to Action

Intro


Here at Kirksville Web Design, we aren't afraid to try new things. New gadgets, backgrounds, layouts, and styles. It great to test the creative mind and think outside the box.

Everything in a website has to work in symbiosis, it has to agree. The background image on a Google Site largely dictates the flow of a website, the layout leads your visitor, and the call to action creates conversions (e.g. a product sold, a form filled out, page read). Here's an example of everything working together - synchronicity.

Like a Clownfish in the Anemone - Elements need to work together for mutual benefit


Background


There are two primary background images for the Google Sites Designer: background image wrapper and background image. One usually acts as the header, one as the footer (and doesn't matter much which one is which).

The header can be understated or a huge attention grabber. If you are using a slideshow - you want the header to be short in height, because the slider is your more important element. That's why Kirksville Web Design recently cut down it's header to a third the height - to make the slider standout and allow the visitor to now have to scroll down as much.

Make sure your footer isn't an arbitrary color/pattern/dimension - it can match the header or at least compliment it.

You can see it all, no scrolling down. Get to the meat of the subject - those sample websites.


Layout


Content is king. Layout makes sure that content is easily deciphered by the visitor. No walls of text, please.

Google Sites is limit on it's page layouts - 1,2,3 columns. I usually go with three columns or create a table to make four or five. This is usually for listing information. Visitors will most likely read only your titles, subtitles, and the first sentence of a paragraph.

Work your layout around your images, slideshow, and finish it off with a big, audacious, highlighted call to action.

Three columns - simple, elegant, spaced out. Modern = Space between elements.


Call to Action


The Call to Action button is a huge deal on the home page. Send the visitor instantly to where they need to go.

Sign up, Get Started, Search, Buy, Contact Us - whatever your conversion is. Contrast it, make it stand out. This isn't the time for a muted, subtle, hard to read element.

A different font, a contrasting color, big and easy. Like the easy button.








Comments

  1. Great work on your site!
    Please allow anonymous comments, it will be easier to comment

    ReplyDelete
  2. Thanks for the suggestion Elash. I'll try out public comments for a while and see how it goes.

    ReplyDelete
  3. You have discuss all the issues very clearly regarding web design. I want you to keep doing such a wonderful work done by you in this blog. Beautiful. Thanks!

    ReplyDelete
  4. anemone, not amoeba.

    ReplyDelete
  5. Hey Kyle - What slider plugin do you use with Google Sites? I love the one you use on your main Kirksville design site.

    Thanks

    ReplyDelete
  6. @Doug

    I use several different slider plugins. I'm glad you like the one on our website. It has worked very well for us and looks amazing.

    I could install one for you if you want. Send me an email and we'll make arrangements =)

    ReplyDelete
  7. Thank you for all of your advice. Just wondering, on the website below, how did you get the navigation to highlight when the mouse hovers over the icon?

    http://www.googlesiteswebdesign.com/2010/11/google-sites-tip-background-layout.html

    ReplyDelete
  8. Superb, brilliant weblog structure! I like your blog post Backgrounds, Layout, and Call to Action and method of writing,

    ReplyDelete

Post a Comment

Popular posts from this blog

Tip - Using Social Media Buttons

RSS Feed for Google Sites!

Google Sites Tutorial - Background and Favicon Design