To Create, Understand; To Understand, Create.

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:

Screen Shot 2015-09-19 at 2.40.49 PM

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.

teaching_portfolios
Portfolio building begins in grade 4

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.

2 thoughts on “To Create, Understand; To Understand, Create.”

  1. Hi Randi,

    Good for you — I’m sure your co-workers really appreciate that site! Our department head recently did a similar thing for our science department and it is hugely successful. No longer do I have to go searching through my inbox for that form that I use all the time–it’s on the page!

    One thing he did that I really liked was put small logos next to the category titles. For example, for the links to the various calendars and events pages, there is a little ‘date box’ with a red circle around it, sort of similar to what you’d do to a physical calendar. It really helps you when your brain is tired and you just kind of “blaaaah out” when you see a page full of text.

    He’s also got a “suggestion field” (just a text submission box, really) that we can use if we have an idea for an improvement to the page. That is also really nice (and I sometimes wonder if he might get some non-web-page-related feedback through that as well!).

    I also enjoy the elementary spelling of CARP 🙂

    Like

    1. Hi Ryan,
      I really like the idea of a suggestion box. Going to try to figure that out with the faculty sites. I’d love to better understand what your department head did with the logos next to the category titles – any chance you could send a picture?
      Thanks for your ideas,
      Randi

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s