palmtree leaflet v.png

WEBSITE CANVAS

We use the Wix platform for our website. Our main design principle is based on the following factors:

  1. Since we are a volunteer non-profit organization, operating on a shoe string budget, we do not want to outsource web development.

  2. The website should be easy to develop and maintain.

  3. The main criteria though is, if the webmaster quits, some one else in the organization with limited computer skills should be able to take over and maintain it.

Why Wix?

If you have worked with a Word document or Power Point, you do not need any additional skills to develop a website in Wix. Selecting objects like text boxes, images, changing fonts, colors etc. are all similar to actions that you do on Microsoft Office tools. That is a very important factor to consider for any web development for wood turning organizations. We often hear the same grumbling from webmasters in our fellow wood turning clubs. The main complaint being, they are stuck with it because no one else wants to do it. Majority of the wood turners feel they are not technologically savvy enough to do web development. With Wix, you do not need much development skills to get a decent website in place.

Templates

We use each page like an open canvas without the use of templates. This gives us a lot of freedom to paint each page like an artist. Using templates vs. not using templates is like using a cored blank for creating a bowl vs. turning a bowl from a rough blank. The cored blank predefines the shape of the finished bowl, where as starting from a fresh blank gives you tons of freedom to shape the bowl as you like it. Though a majority of websites use templates, there are many reasons why a template can hinder the evolution of your website over time.

What we use instead of templates is a set of vertical guide lines where the website elements  can snap during placement. We use the same vertical guides on all the pages. It looks something like this.

guidelines.jpg

Color scheme

We want to avoid bright and flashy colors. We use a color scheme that is easy on the eyes. After looking at 100s of color schemes at color-hex.com we narrowed it down to Woodland Times Color Palette. A few colors that are not part of the Woodland Times palette are also used sparingly on the website. A sky blue color is used sometimes for links. Black and white are also used. A neon green color is used at a couple of places for highlights.

Woodland Times Color Palette

Woodland Times Color Palette 2-1.jpg

This palette provides a rich blend of colors that are easy on the eyes. The five colors go well together.

colorpicker.jpg

Font scheme

The font used predominantly on the site is called Futura. Futura has a geometric sans-serif typeface. It was created by Paul Renner in 1927.

Heading 1 : Futura 34px Bold

Heading 2 : Futura 24px Bold

Heading 3 : Futura 20px Bold

Heading 4 : Futura 16px Bold

Paragraph 1 : Futura 20px

Paragraph 2 : Futura 16px

Paragraph 3 : Futura 16px

Third party plugins

We do not want to use third party plugins as much as possible. Some third party plugins have a tendency to become a little stale over time or completely stop working since they tend to be usually developed by one person and may lag behind in maintenance updates. Wix does offer many third party apps though. We have used one such app for filling out forms. Everything else we use is standard Wix technology developed and supported by Wix. We want to keep it simple so that it becomes easy to maintain the website.

Image galleries

We have tons of image galleries and it is hard to keep track of how many. All the technology we use for image carousels and image slide shows etc are developed and offered by Wix as part of their platform. The setting we use in most of the image galleries will take the thumbnail image to full screen mode on a black background when you click/touch on it. The full screen mode provides navigation for previous and next on the left and right sides as well as a minimize and close buttons on top.

Animations & transitions

Though animations make some websites 'cool' (if you are in the 20 something category), they make us (the wood turner category) a little dizzy. We have stayed away from animations on all pages except the Home page. We jazzed up the Home page with some cool animations.

  • The first block you see on the Home page called "This is our STORY" uses an animation called 'Hover Box'. When you move your cursor into the box, it comes alive with some animated text and a video playing in the background, and when you move the cursor out of the box, it winds back to the 'rest' state.

  • The second animation you see are for the tiles on the Home page. Each row of tiles fly in from the right and falls in place on the rows.

  • The third animation you see is the image carousel with 12 images on the bottom of the home page. Those images tell the story or the process of how a fallen tree gets transformed in to beautiful turned objects.

Apart from the animations mentioned above, on all pages, the header bar will smoothly get out of the way when you scroll down on the page, and as you start scrolling up, the header bar comes back down.

There is one other animation that happens when you transition from page to page. As the new page gets loaded, the new page will drop down like the New Year ball drop in Time Square, but at a faster pace.

Scripting

We have used scripting sparingly. The main reason to limit the amount of scripting as much as possible is to have the ability to easily hand over the development/maintenance process to the next succor who unknowingly falls victim to this chore.

We have limited custom JavaScript code in a few pages like the site search page and other pages where we want the listing of tiles on the right side of text boxes to wrap around to the bottom like in the Club Socials page.

Databases

All our pages are derived from the contents of multiple databases. Our databases are tailored to facilitate our FSA Fuzzy Logic algorithm for site search. In that respect they are a little complex. But they are easy to maintain and update. Adding new data to pages or creating new pages is a breeze using the underlying data structure.