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.

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.

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.)

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.

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

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!