Website prototype process

We initially had a lot of thoughts about what we should include in this virtual platform since it has so many possibilities in its very own nature. After a few brainstorming sessions we finally settled down on the idea that the website would be an online repository of the messages people left in the garden.

A place to store people’s messages and emotions

In the visual design part, we found ourselves trying to get away from the common grid based website design. Instead, we try to reference illustrations about gardens like Secret Garden and frame free website design like we feel fine.

One of the earliest wireframe of the website

After a few discussion, we have all came to the decision that the main functions of the website would be:

• Preview, read, and listen to the message
• Read about the project and information about the garden
• Understand the current state of the community through the visuals

Then we went on to design some different elements for the website:

Explore how different elements and different color can fit in the canvas

With the elements we had, we continued in to build a prototype to explore the possible composition and interactions:

First prototype

However the visual designs seemed a bit too much like a website for children. Also, we wanted to see more of the other elements in the composition. So we modified the visual design:

Modified visual design

Compared to the old design the new design has a more clean look as it uses flat design for the elements. And we toned down the saturation to prevent it from looking like a children’s book illustration. Finally, adding a different elements like apples, peppers, and people help create more of a sense of the garden’s community.

After adding all the code, the prototype can be reviewed here.