MEMORY TREE
Designing and coding an interactive website based on the themes of a chosen poem.
|
|
|
|
The vision
While web design projects usually start from a customer need, this project took on a slightly different approach aimed at creative thinking. This project involved taking a poem and uncovering its themes and metaphors, using these themes to conceptualise a website idea, researching to find out the intended target audience, designing visuals and resolving a layout iteratively.
While there was no interaction with a real audience, I gained experience in converting ideas into tangible design solutions. Since we were constrained to using HTML and CSS, I had to create a concept that was practical to implement while finding ways to make it interactive.
While there was no interaction with a real audience, I gained experience in converting ideas into tangible design solutions. Since we were constrained to using HTML and CSS, I had to create a concept that was practical to implement while finding ways to make it interactive.
Video navigating through the live webpage
Chosen Poem
April Comes She Will - Simon & Garfunkel
|
April, come she will
When streams are ripe and swelled with rain May, she will stay Resting in my arms again June, she'll change her tune In restless walks she'll prowl the night |
July, she will fly
And give no warning to her flight August, die she must The autumn winds blow chilly and cold September, I'll remember A love once new has now grown old |
Audience
As this poem is a journey throughout life and has a special focus on everlasting love and memories, my audience will focus an older age group of 50-70 years. Particularly people that have experienced the loss of their partner in some way or the other.
The audience is introspective and reflective of their past. They have a fondness for things that are still real and organic in this modern age of technology. They would engage with my project to remind themselves of the person they love. My website would need to invoke a personal, human touch so that they find value in it.
The audience is introspective and reflective of their past. They have a fondness for things that are still real and organic in this modern age of technology. They would engage with my project to remind themselves of the person they love. My website would need to invoke a personal, human touch so that they find value in it.
The Idea
My website's purpose is to help people get through the tough times of losing a loved one by providing hope and advice. I will provide the audience with messages that are tailored to how they are feeling when they view the website. Each message will end with a call to action as a reminder or suggestion for the user.
The colour theme and visuals for these pages will be based on seasons.
The colour theme and visuals for these pages will be based on seasons.
Semiotics
COLOUR
My overall colour palette will invoke harmony, a key principle in this concept. I will achieve this by using spectrums of complementary colours. The colour palette will vary per page, as they are based on colours associated with seasons. I metaphorically link each season to a mood, so when the user expresses how they feel they will be directed to the page with the appropriate colours. The main page will have a neutral colour palette with black, white and shades of grey. This page will be minimalistic so that the imagery and message shines through, and so that the season pages stand out.
My overall colour palette will invoke harmony, a key principle in this concept. I will achieve this by using spectrums of complementary colours. The colour palette will vary per page, as they are based on colours associated with seasons. I metaphorically link each season to a mood, so when the user expresses how they feel they will be directed to the page with the appropriate colours. The main page will have a neutral colour palette with black, white and shades of grey. This page will be minimalistic so that the imagery and message shines through, and so that the season pages stand out.
FONT
My audience is middle to older aged people that value introspection and things that are real. The typeface I use should get them to take a step into the past and explore their memories as they navigate my page. It should evoke nostalgia. At the same time, I want my page to be readable and clearly understood. As there isn’t a lot of text on each page, the font size can be fairly large.
My audience is middle to older aged people that value introspection and things that are real. The typeface I use should get them to take a step into the past and explore their memories as they navigate my page. It should evoke nostalgia. At the same time, I want my page to be readable and clearly understood. As there isn’t a lot of text on each page, the font size can be fairly large.
Visual Assets
I created a seasonal tree gif for the main page and other seasonal elements for the following pages. Simple hearts would be used to illustrate the feeling of love, which this website is centred around.
|
|
The piles of leaves/ seasonal elements are rollovers, which on hover get scattered to reveal messages. This adds interactivity.
|
|
Buttons - Normal state and hover state
|
|
|
|
|
|
|
|
Site Map
Layout Variations
HOMEPAGE
The purpose of this landing screen is to draw the user in and become curious about what the website offers. It is minimalistic without much information, but the name suggests it is to do with memories and potentially love and loss.
|
Interactivity The tree is a GIF, with its leaves changing colour every second – from green+pink to green to orange to no leaves. This instantly conveys that the webpage has something to do with seasons. |
Graphical Elements I illustrated the tree GIF with different seasons along with the hearts around the page. These images together convey the love for the person and the ups and downs of their loss. |
Background and colours I have chosen a black background to set the tone for the website as this is a serious and valuable topic. |
|
|
|
On scrolling down from the landing screen, this page is to use storytelling to give an idea of what this page is about. The positive message gives the user comfort. This is followed by a question where the user can interact by clicking a button
|
Interactivity When you hover over the buttons, they change to the colour of the season associated with that mood. Happy turns yellow, sad turns blue, hopeful turns green and anxious turns dark orange. |
Graphical Elements The hearts on the side add a personal touch to an otherwise minimalist page. |
Background and colours I chose a light grey background as I want this page to be plain and the season pages more colourful. The buttons are black as this is a neutral colour and doesn’t overlap with any of the hover colours. |
|
|
|
SEASON PAGES
The user is led to these pages depending on what they answer to how they are feeling. A seasonal theme is used to give the page the appropriate mood. The message provides advice to the user, with a hidden call to action hidden beneath a leaf pile. When the user hovers over the leaf pile, the text underneath is revealed.
|
Interactivity The call to action at the bottom gives the user an action to take. This is initially hidden, but revealed on hovering over it. |
Graphical Elements Seasonal illustrations are used to convey the mood. These images are textured to give them an organic feel. |
Background and colours I chose different coloured backgrounds that match the theme. I used my seasonal colour palette on the illustrations. |
Final Result
I chose the variations that I felt conveyed my message best. I used principles of balance, hierarchy, contrast, emphasis and harmony. I also add a link back to the home page, which is not visible in these prototypes.
You can view the full project as a live website through the link below, or by watching the video below (no audio).
You can view the full project as a live website through the link below, or by watching the video below (no audio).
|
|