Site Design


Site Design deals with the aesthetics of your site, that is, the look and feel. Choosing one of the many Google Sites Themes initially sets your site design. This initial design, however, can be further customized as desired.

Site Design includes the background images, colors, and fonts used within your site. These options can be configured in the Manage Site - Themes, Colors, and Fonts section. To access these settings, click the gear in the upper right and select Manage Site. Then click on Themes, Colors, and Fonts. The screen grab below shows you what you should see:

Things to note:

  • In the top right is a Browse More Themes button. This takes you to a gallery of various "templates" that you can use to quickly set up a site design.
  • In the grey box at the top left is a Theme pull-down. This shows you a list of the various themes that Google includes with Sites. You can select one of these to get you started and then customize it if desired.
  • On the left, you see 6 sections. By selecting one of these sections, the configureable options will appear in the center. Selecting one of these options reveals the parameter settings that can be changed on the right.
The best way to learn about these design settings is to make some changes, click the red SAVE button at the top, and then view your site. I often have two browser windows open, one with the site and one with the above settings. After making a change, I switch browser windows, refresh and see if I like the changes.

Just a note here about the specific settings for Entire Page - Background - Color, Image, Wrapper Image:
  • Color: Use this setting to specify a solid color that sits on the very BOTTOM layer of your site.
  • Image    : This setting is what you would typically expect of a "background image." As with the wrapper image (next), there are some settings you can use for more granular control. These options include:
    • Repeat: vertical, horizontal, both or none
    • Horizontal Position: left, center, right
    • Vertical Position: top, center, bottom
    • Fixed Position: yes or no (example site)
    • Stretch to cover: yes or no
  • Wrapper Image: The wrapper image is a second background image to give more flexibility to what you can do. It is important to note, however, that the wrapper image sits ON TOP OF the Image specified in the previous setting.

Design Help Sites

The following is a list of sites to help you in designing your site. Many have to do with colors and getting the right combinations.
Showing 11 items
NameDescription
Sort 
 
Sort 
 
NameDescription
0 to 255 This site provides a "simple tool that helps web designers find variations of any color." 
Adobe Color CC A simple site to help you pick colors that go together to create your own theme. 
? Color Much like Piknik, you can browse infinite colors and have the color values returned to you. 
Color Scheme Designer This site provides a dynamic way to picking colors that work together to help give your site an attractive design. 
ColorZilla Extension This Chrome extension provides a color picker which allows you to snag the hex code for any color you find on the web. 
Colour Lovers This nifty site allows you to create color schemes and share them with the world...after giving them a name of course. 
Favicon Creator This site lets you upload an image and then have a favicon created for your site to add just a touch of personalization to it. 
Fonts 500 A collection of the web's top 500 FREE fonts! 
Logo Maker This site can help you brand your site by creating a personalized logo. 
Palette for Chrome This extension provides the means to take any picture and create a color palette from the colors it contains. 
Piknik This site allows you to scan for a color that catches your eye and then gives you the color values for it. 
Showing 11 items