Designing Good Looking Sites

Whether you want to build a class website, a student portfolio, or just give your students a new way to present their work, Google Sites is an easy way to create beautiful and functional websites. Once you know how to build a Site you will find plenty of uses for them around your school. Even if you know nothing at all about web design, you'll leave this session with lots of ideas about building a website! Please come along with some ideas about what you might like to create and let’s start building it!

This session will get you hands-on and building a website with Google Sites.

Things to consider when designing a Site

Identify your audience

Who is your Site for?

Students
Other teachers
Parents
The wider community
The whole world

Think about who the audience is and consider what they will be looking for on the Site. What kinds of things will they be likely to want to do on this Site?

Plan with purpose

Different kinds of Sites will have different collections of information on them.

Each Site will have different structures and content, depending on its purpose. The nice thing about Google Sites is that it can integrate lots of different types of assets, including lots of integrations with Google Drive files, Google Maps, YouTube, etc.

Some possible suggestions might include..

Student portfolio - Docs, Sheets, Slides, Videos, Photos, links
Class website - News, Information, maps, videos, links
Science project site - aim, description, photos, results, linked data, charts, Sheets
Parent information site - new and information, calendar, documents, maps, videos
Year team portal - calendar, information, maps, videos, links, docs, sheets, slides
Collaborative student project - docs, links, videos, maps, information,
Web-based newsletter - stories, photos, videos, links
Resource sharing site - docs, sheets, slides, drawings, photos, links

What other ideas for a Site do you have?

Think about Information Architecture

What are the logical sections for your site?
How many pages should you have?
How will you group them together?
What names will you use for the different sections of your Site?
Think in terms of your audience!
What assets will you need (photos, maps, videos, files, links, etc)
Keep it simple to start with!

As you develop a plan for your Site, map it out! Use paper, post-it notes, or some other means to plan the architecture of your site.

Build it! (And they will come)

Use the plan you’ve come up with to start building your site.

Start by creating the collection of pages, structure them according to your plan, then add content to each page. Be willing to change and redesign your structure if you need to!

For example, some examples of typical pages you might find on a school website include...

Home - Welcome page, with a couple of paragraphs of introductory text and supporting photos
About Us - Description of the school and some of its important features, including photos
Where are we? - Embedded map of the school's location
Calendar of events - Embedded calendar of key events for the school
Resources - Description of the various resources available on this part of the site
Videos - Page with several embedded videos
Photo Gallery - Page with several embedded images
Useful Links - Page of useful links to external websites
Documents - description of documents available in the section of the website
Policies - embedded Google Drive folder containing documents
Presentations - embedded Google Slide presentations
Feedback - embedded Google Form asking for name, email address and comment

Create a Site

OK, it's time to build something!

Come up with an idea for a site, consider your audience, plan your site structure, and start building!

Your checklist

Choose the header image on each page
Add appropriate content to each of these pages
Arrange the pages however you wish, but think about good design! What works best for your audience?
Design the page layout using the grid - drag components into position, but respect the grid.
Use the pre-built Layout Sections
Choose a theme for your site. Try them all.
Add a logo for your site.
Decide of your navigation style. Top or Side?
Navigation Buttons where appropriate
View your site for web, for tablet, and for mobile! Check often!
Ask others for feedback on your Site and be willing to make changes if necessary.
Publish your site so that anyone can see it, but don't make it visible to search engines unless you want to.

Adding Standard Google Embeds

Google Sites has built in support for different types of Google services, and these can be easily embedded into a Sites page.
- Drive Folders
- YouTube, Maps/MyMaps, Calendar
- Docs, Sheets, Slides, Charts (Drawings, PDFs, etc)

Adding Graphics

Inserting graphics
Create a page header using this template (courtesy of Alice Keeler)
Using Graphic headers
Adding Site Logos
Break up the page with coloured sections (Standard, Emphasis 1, Emphasis 2, or Image)

Understanding Page Linearisation - Warning! Nerd stuff ahead!

See this example - https://sites.google.com/edtechteam.com/actmay17/home-basic

Understand how text and images flow together. Check for Web, Tablet and Mobile version! This is important when moving from desktop to tablet to phone layouts using responsive design.
Drag and note the blue line. This will show you where an item will attach itself in the page flow.
Flow priority puts page wide Divs first, then Section Divs. This has implications for how your text and images flow on a page.
Test your designs using Preview mode - Web, Tablet, Phone
Get more detailed with Chrome Console View
- Open Developer Tools (Ctrl + Shift + i) then Toggle Device Toolbar (Ctrl + Shift + m)
- Use this mode to preview your site in a range of specified devices, or completely responsive mode.
- Great to see how your site will look on multiple platforms and devices.

Embedding other services

As well as the standard Google embedded content like Docs, Calendars, Maps and YouTube you can also embed many other services. If a service will let you generate embed code, you can probably add it to your site.

You can find a collection of embed examples, with instructions, on this page.

Note that while most of the time it's simply a matter of generating and copying the embed code from your chosen service and pasting it into the embed section in Sites, there are a couple of quirky exceptions that are not obvious.

Page updated

Report abuse