Subscribe to RSS Subscribe to Comments

Teaching Hacks.com

Templates For School Websites

When you are thinking about the design of a template for your school website try to keep in mind these concepts. They will help you to improve the impact of your design.

Warm or Cool Colors Colors evoke moods, warm is more active, cool is calming, what mood
are you trying to create?
Depth Cues Indicate Importance The larger the object the closer it seems, the higher the importance
attributed to an object.
Use Icon For Easy To Recognize Tasks Most people seem to recognize a printer as something that allows you
to print, you can use these memorable icons as part of your design
Navigation at top, bottom, or sides of screen. Navigation is most easily used when the targets are on the edge of
the screen.
Balance Positive and Negative Space Keep in mind where the textual information is on your screen and where
it is not. Keep this balanced on your web pages.
Blue is for Backgrounds Blue is an excellent background color and good for providing contrast
to elements of your web page.
Similar Color and Shape to Denote Relationships When colors and shapes are not exactly the same but very similar a
relationship is suggested.
Avoid Scrolling Avoiding scrolling and keep the your web
pages above the fold.
Chunk Information Limit chunked information on a web page to five to nine related points,
or three to four unrelated points for maximum effectiveness.
State Goals Goals of the website stated at the Beginning
KISS Keep it short and simple
KILL Keep it large and legible
Be Consistent Use graphics, menu items, and links in a similar way throughout the
website.

For more information regarding designing for the web you really need to review this online book “Design Principles for Interactive Texts� by Julie Jacobs & William Mueller. It will give a detailed understanding of designing for the web.

Deleloping Navigation For School Websites

When you are thinking about navigation for your school website don’t make it flashy, consider that the end user wants to get to the information as quickly as possible. If the visitor has to watch a three second Macromedia Flash animation of chalk writing on a chalkboard whenever they click on a navigation button or have to enable JavaScript just to get around your website, then they are going to get annoyed. Use simple buttons or even text links as your jumping off points. Try to avoid using fancy fonts, converting them into images and then using them as buttons.

Why not just use plain text links it will mean that your web pages will load much faster, and it will be easier to read. If you are going to include images as navigation hyperlinks, then it is often useful to include plain old text links at the bottom of a page. This allows for persons with computer assisted devices such as screen readers, an easy navigation area to follow.

Goals Of A School Website

When creating a school website it is always important to have a goal in mind throughout the design and development process. When visitors come to the website they should be able to identify this main goal quickly. An example of a goal could be to communicate with parents interesting events that have happened at the school. This could be done in a weekly updated “What’s New� section on the website. If a parent visits the school website and is able to see on the very first page information about current events that are occurring in the school then the goal will have been accomplished. It might also be accomplished through the inclusion of an electronic newsletter, or a calendar of events. All three would help to achieve the main goal of this school website.

When coming up with the main goal of the website define the audience. Who is it that you are gearing your school website to and why?

Laying Out A School Website

An overall system design is a methodology for organizing any application including a web site before you start creating a web page or a line of code. The overall system can design is basically a simple flow chart that shows how a visitor will be able to move around your school web site.

There are many different tools that you can use to help create your flow chart for the overall system design of the school website. Many schools have concept map software like Smart Ideas, Inspiration, Microsoft Publisher or other organization tools. If these tools are not available you can look for a product called IHMC Cmap this is a free concept mapping tool and FreeMind that you can use to organize your website.

Think About Student Privacy

Creating a school website also means that you must be consciousness about what information is going out on the web in any format. Just because you’re creating a school website doesn’t mean that only members of your school community will be viewing the school website.

If you do decide to post images of students or their work, then you must get written permission form their parent(s). The permission form should specifically state that it’s okay to use a photo or student work on the World Wide Web.

School Website Makes Business Sense

A year ago I was teaching a grade 7 and 8 class at The Divine Infant in the Toronto Catholic District School board. I was looking for a collaborative project that would meet curriculum expectations and improve Internet Communication Technology (ICT) skills. I looked into the Schoolnet GrassRoots program in order to help support projects that we might undertake. I learned that the creation of a school Web site would be a good introduction into ICT for my students and provide the school with an Internet presence.

Over the course of three weeks the students went through the stages of Web site development. We started with the overall system design using a flow chart and narrowed our focus so that groups of students were responsible for different sections of the school Web site. We had groups for each section of the Web site: class, administration, home page, template and navigation. All students were free to submit a logo and students voted on the one they wanted to see on the school Web site. Students took pictures, interviewed staff, and created content for each section of the Web site.

Students learned quite a bit about the history of the school and the stories of the educators that taught there. They also learned the basics of Web page design as well as html. They were able to use html code to connect Web pages in the school Web site through a central navigation area and include external hyperlinks.

After submitting a report to the Schoolnet GrassRoots program we received grant money for our school Web site. We were able to purchase the school domain name, TheDivineInfant.com, as well as Web server space for the school Web site for one and a half years. I then began using the Web site for promoting other online collaborative projects with my students. It helped begin a process of integrating technology into the curriculum and opening doors for students.

But the story doesn’t stop there. Earlier this year, a school promotional manufacturing company — The Hilderand Sporting Goods Team Outfitters, contacted our school secretary through the school Web site. They were looking for a school with the name “The Divine Infant Catholic School.� They had boxes of t-shirts, shorts, sweatshirts and sweatpants that they produced for a school in Illinois that had closed down. The school was also named “The Divine Infant Catholic School.� They were left with hundreds of promotional items and wanted to donate it to a school instead of destroying the merchandise. The manufacturer had used the Internet to find our school Web site.

After a few Emails back and forth with the company, the school principal decided to travel to Chicago, where the manufacturing company was located, to pick up the materials instead of paying for shipping.

The school plans to sell the merchandise to the community as a means for school fundraising. With hundreds of t-shirts, shorts and sweaters they are sure to raise thousands of dollars, all at the cost of a grade 7 and 8 class project promoting the school using a school Web site and the Schoolnet Grassroots Program.

When asked what he thought of the school Web site Thad Baker said, “The Web site allows us to advertise our school to the community at large and also helps us to connect to the other schools outside our board and in other parts of the world. In my opinion, every school should have their own Web site so the students can also have an opportunity to make authentic connections.�

Design Principles Primer

I have often referenced Julie Jacobs and William Muellers interactive text in order to review design principles for LO’s, although this a great resource for web design in general. It reviews psychological, graphic design and evaluation principles in an easily understandable way. I wouldn’t say that I have mastered all of these principles, but it helps me to use a critical eye when judging what I see online.

Mathematic Interface Design

The goal of mathematics interface design (MID) is to enable the learner to perform tasks with as much mathematical understanding as possible by encouraging the learner to think about the task at hand. The goal of user interface design (UID) is different; it is to accomplish tasks as quickly and effortlessly as possible.

June Lester, is an advocate for mathematical interface design principles. She expresses the need for mathematical ideas to be communicated in a clear, intuitive and appropriate way, in the design of learning object.

The example that June Lestor uses to show the difference between the two interface designs is the use of tangrams to teach children geometric transformations, such as rotations, reflections and translations. If the goal of the learning object was to solve the tangram puzzle as a game then good UID would make the movement of pieces easy and the use of visual spatial skill of primary importance. An example of good MID would have the user decide on the most appropriate center for rotation and apply a value for the angle of rotation in order to move the piece. In this case, the movement of pieces is slower than that of UID, but the learning object takes on elements of a learning exercise rather than a puzzle.

One of the challenges in creating mathematical learning objects is including aspects of good user interface design, but making sure that it did not conflict with sound mathematic interface design.

Creative Commons License

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License.