Green Living Matrix: Web design and Emotion

GLM web layout design

 Green Living Matrix is a non-profit organization that is dedicated to connecting the ecological communities, transition towns, and organic farms in many regions of the world. The idea began in Hungary in 2011 and has plans to expand outwards across Europe. This site will offer opportunities for those involved to educate and share their knowledge and resources.  Project themes include Bio-intensive/permaculture, renewable energy solutions, and sustainable building design. In these three main themes are a chance to dive deeper into sustainability on a technical and social level; with instructables, tutorials, forums, discussions, and wikis. There is also a live projects update according to region and a gallery showing the many affiliates to the Green Living Matrix. 

This is a test layout done in photoshop and illustrator.  Also, there are many animatable elements that will be done in flash. There will also be a global map depicting the communities, towns, and farms that function according to the sustainability principles of GLM. 

In this post I discuss the basic process of planning and design for a website of this nature. There are many aspects to this and it can be overwhelming and complicated so this blog will mainly focus on effective design and communication of website intent/purpose. 

Inspiration images are important for inspirational design

This was the only image that GLM gave me for the site. They said that this is the "emotion" they want with the website and that all the colors and shapes accurately display the GLM image. So I went with it...and this is what came out! 

First, before sketching anything out in paper we made a brainstorming session about the content and direction of the site. We discussed user interface possibilities, user experience functionality, and overall navigation of the site. Here is a table to help show us the how and why.

Quick draft layout sketches and coloring

Second, I did a couple sketches for the layout design of the website. The goal in these sketches was to create a simple, clean, and organic website that is able to adapt to future expansions of GLM projects. We agreed that the most successful of the designs is the third sketch at the bottom of this image. It incorporates all the main elements and connects them together easily and legibly. 

Communication sketching - more detailed UI/UX element sketches

And then, it was time to refine the layout sketch and design the specific functions. Button and icon animations, UI, UX, and easy content access  was the most important at this stage. This sketch lead to the final drawing in photoshop and illustrator that you see at the beginning of this post. 

Update: This was a great start to the project but unfortunately was canceled due to financial reasons. Unfortunately, ideas like this, which include freeing humanity from tedious and monotonous labor, constant money acquisition, and the wasteful/destructive consuming culture we live in today, are not adequately encouraged or supported in todays society. One day this project will take form in a completely different way without established guidelines, restrictions, or company logos. Take care to all direct and indirect participants of this project. 

Love and Light!

-Attila