Extreme Sites Makeover

We all love the ease and flexibility of Google Sites, however when you are trying to create a slick, professional looking website, the default themes can leave us wanting.

Information that is visually well-presented can help aid retention and understanding. (Check out this gorgeous infographic for more information on the subject.) We want our sites to be clear, easy to navigate and great to look at.

Here are some great tips on how to give your Google Site an extreme makeover, which will make it more visually appealing and user-friendly to your viewers.

1. Create your own Header

Why make do with other people’s headers when it’s so easy to design your own? My colleague Dave Caleb came up with a clever solution to the header design conundrum by creating a custom slide in Keynote, and exporting it as an image. The screencast below takes you through the process.

If you would like to use the Keynote template, click here to download it. Simply drag your own photo in and change the text (or customise to suit your needs)

Colleague Andrew McCarthy used a similar technique in creating a customized header for our Secondary School Research Hub, however this was created using Pages & taking a screenshot instead.

Screen Shot 2013-09-05 at 7.48.20 PM

2. Customize your Palette

Digging around in the back of Google Sites offers a world of possibilities. There are so many ways to customize the palette and backgrounds of your site, and so many tools to help you do so!

Some of my favourites include ColourLovers and Image Color Picker.

ColourLovers is a site which, among many other things, allows you to do the following:
– Create your own palette
Colour a pattern with a palette you like
– Share your creations with the ColourLovers community.

Screen Shot 2013-09-05 at 8.03.22 PM

Image Color Picker is a fantastically clever online tool which allows you to upload a photograph, click on different parts of it, and get the hex codes (the codes designers use to specify each unique colour) for the different colours within the photograph!

Eye Dropper is a Chrome Extension that does the same task, right from your browser!

The screencast below will take you through the process of uploading a photograph to Image Color Picker, using it to create a custom palette in ColourLovers, and bringing the palette over to customize your Google Site to make it look cohesive and well-designed.

Here are some examples of Grade 5 students who customized their Google Sites using ColourLovers. If they can do it, you can too! (Note that as Grade 5 students are not old enough to create an account with ColourLovers, the teacher created an account which the students logged in with.)

Screen Shot 2013-09-05 at 9.10.23 PM Screen Shot 2013-09-05 at 9.10.04 PM

I would recommend you also check out Color Scheme Designer as another palette generating alternative.

3. Lose the sidebar 

“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away.”

I am confident that while French writer Antoine de Saint-Exupery probably didn’t have Google Sites in mind when he wrote the delightful quote above, it certainly applies nicely to design in general, and designing gorgeous Google Sites in particular.

In order to achieve simplicity and to maximise screen real estate, I recommend removing the sidebar (which appears on the left of most default Google Sites), and opting for horizontal navigation instead.

Our Junior Research Hub (and the majority of sites we develop for student/teacher use) features horizontal navigation.

Screen Shot 2013-09-05 at 8.42.49 PM

As does the Research Skills site created by colleagues Andrew McCarthy & Katie Day for teacher professional development.

Screen Shot 2013-09-05 at 8.19.54 PM

4. Add a slider using Google Presentations

I stumbled across a little gem of an idea via Stephen Hind’s great tutorial site, which was to embed a Google Presentation in a site (by way of a gadget) to create a slider effect on your site. This elevates Google Sites to new heights!

The screencast below takes you through the steps needed to create a slider on your site, and the Google Presentation underneath that contains the links you will need to complete the process.

I hope you find these tips useful!

9 thoughts on “Extreme Sites Makeover

  1. Thanks for these awesome tutorials. I have used them a couple of times. I’m doing a new site and for some reason my image comes into my site much too small. Do you have any idea why? I have even used your keynote template. Thanks, Leslie


    • Not sure yet sorry! I will email you so you have my address. Maybe we can work together to solve the problem. I think I need to see a screenshot…


  2. Dear mrs.Beasly I was wondering how to create different styled bars at the top of my site like the examples of grade 5 students site (how they made kate’s site orange and royces site black


    • Hi Malaika,

      They were created using palettes and patterns from colourlovers.com You need to click on the more actions cog at the top of your page, then Manage site. From there, choose colours and themes. There is a video tutorial on this page that can take you through it. I am happy to help you out at school if you need. Let me know!

      Mrs B


  3. Thanks for your hot tips! I’ve just tried to add a slider to a Google Site and it works well on laptop but when I try on iPad it takes me out of Chrome to Drive App and shows me Slide presentation. Any ideas on how to stop this?


  4. Pingback: Design Matters | itisallaboutart

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s