Saturday, November 23, 2013

#GIESummit 10am - Creative Google Sites

Why I chose this one:
We are starting to use Google Sites for some of our extended programs at the Co-op. I want them to be transformed into something that doesn't "look" like it's a Google Site.

What I am learning/have learned:
Ken Shelton's design site:
https://sites.google.com/site/edsitedesign/home?pli=1
(If says unavailable, try again later. just means he is updating)

ePortfolios can be created and stored with Google Sites and Blogs. The SItes contain the digital components (images, videos, etc) and the blog is used as reflective writing on selected works from the student's site.

Pick a color then develop a scheme based on that color. Examples on his Resources page. PIKNIK site allows you to move your mouse to visually choose a base color. http://color.aurlien.net/ another is 0 to 255:  http://0to255.com/ (Allows you to choose a base color and then the hue of near colors) Copy the hex code.

Color Scheme Designer - colorschemedesigner.com - paste your hex code into the site and choose palettes.

Once you have the scheme, go back to the site and consider the layout, page structure, purpose. Students should be able to present their content within two clicks.

Amazon redesigned their site based on customer metrics - too many clicks to search and buy.

Students must visualize their layout and navigation.

Add a page: Put at Top Level or Put Under an existing page.

Use programs like Inspiration to design structure concepts (mind-mapping tools)

Students must make a creative decision as to where they put navigation. This will affect the layout of the whole site. Edit site layout. Ex: Disable sidebar, but must provide a way to get to child pages. Ex: Horizontal navigation. Can change style: Tabs, boxes, etc. From the Nav layout, add pages in the order you want (can rearrange). Indent sub/child pages.

Custom Footer - School crest, school info, etc required by every student for consistency.

Page Layout - Edit page, choose layout based on content to be provided on the page.  Keep it simple, make it look good.

Color selection: Have students look around for palettes: Shoes, scarves, shirts, outfits, etc. USe Colourlovers.com (Set a time limit for student exploration!)

You can export from ColorSchemeDesigner to Photoshop ACO, XML, text as hex, etc. Can also do a color list with hex values.

What is main/dominate color? In Sites: Under MORE, MANAGE SITE, under "Theme, Color, Fonts," you can change, say, background and paste the hex. Change Content Area to be contrasting (either different hue or complementary).

You can let students look through fonts and have a discussion about font styles and appropriate typefaces. Comic Sans is a no-no for professional documents, sites, etc. Students need to be aware of the size of the text, kerning, etc.

Teach students to work with patterns, shapes, and other design elements as accents for their sites.

Home - Calendar
-- Project Categories
---- Projects

No comments:

Post a Comment