During my last year as a classroom teacher, and my second year at RVIS, I developed an elementary faculty website in response to a huge communication need. Partly because my school was only 5 years old and partly because I was new, it felt like I was blindly feeling my way through a dark cave, never knowing what lay ahead. In my second year, and as a classroom teacher, I knew exactly what information needed to be more transparent in order for other new (and returning) teachers to be more successful and in sync. So, I set out to build a website that would house all those insights.
The trick, as it is with most people according to Brandon Jone’s post Understanding Visual Hierarchy in Web Design, is to organize lots of information “in a way that’s usable, accessible, and logical.” As visual thinkers, and teachers pressed for time, it was imperative that I create a site that was quick and easy, in order for it to become our ‘home base.’ I met with my principal to come up with a list of things to include from both our perspectives; she was keen to use the site to lessen whole school emails that quickly got buried. We decided that the most important and information-packed elements should go on the home page: our calendar and announcements. Here is a shot of the home page:
After reading Dustin Wax’s blog post called Design Better with CRAP, I realized I had used the key design strategies before I had the vocabulary to realize what I was doing. On the sidebar navigation I put things that were procedural, policy like, or PLC and other meeting minutes. Across the top are tabs for initiatives, groups, and other specialist areas. Looking back, I arranged them by proximity to help teachers locate what they need. I also realized from personal behavior, that users weren’t likely to use the scroll feature, so don’t hide important things below the page. My goal was for this to be a site that was opened each morning and used on a regular basis, therefore I made sure to link all the external sites needed such as our login pages to PowerSchool, lunch count, NWEA, the PGP Framework, Atlas, the library catalogue, and a few others.
Alignment and repetition also play a part in the easy navigation and homepage design. I took out most of the ‘dead’ space on the sides and utilized it for the three main vertical features. The horizontal navigation bar has repeating, color contrasted tabs, which in some cases have related pages or links that drop down from the main category.
Admittedly, Google Sites eliminated some of the design woes, because it doesn’t easily incorporate fancy images or other textures and styles the way Weebly or Wix does; but the choice of Google for the site was a no-brainer since our school is so heavily immersed in Google Apps for Education. Plus, the ability to adjust the share settings to accommodate a single teacher maintaining the page or allowing the whole group editing rights, is another way the the whole ES has ownership and sees validity in the tool.
Students at my school from grade 4 to grade 12 are using Google Sites to build and maintain their educational portfolios and as the technology integrationist it’s my job to make sure they understand the importance of their design. While many have suggested using a template to streamline the process, I think building the website is an important part of learning how to use the tool. Reorganizing to include more content or manipulating the design to showcase their new interests or learning, can be an independent process if they have built their site from the beginning.
After learning about the design ‘rules’ of CARP, I can now build in a common vocabulary around web design at my school. In addition to those 4 rules, I found an article that explains a few more areas to consider. 10 Top Principles of Effective Web Design by Sofia Woods talks about usability, form and function aspects of web design. These principles pay particular attention to purpose and communication – arguably the first things to consider in design. It’s hard to explain to 4th graders why using a Pokemon background is misleading to their website’s purpose, however its a discussion (and at times a battle!) that needs to be taught in order for our students to develop a sense of visual literacies. Just as one should learn to read and write, we should be teaching our students to decode hypermedia and advertisements, in conjunction with creating effective web design that serves their communication purposes.