National Day 2021
The design brief for 2021 was Singapore spirit – following the NDP tagline, Our Singapore spirit. The theme of the website evolved around local drinks or “spirits” and the web design had to link each singaporean value to a drink.
When we started this design, we explored what did the Singapore Spirit mean to us, what do we want to feel when we visit 2021’s NDP Website.
And the idea we decided upon, was home, fluid and familiar. This year focuses on spirits/drinks so we incorporated the idea of fluidity and transformation into the design.
We came up with two sets of drinks for the nine values – one set is alcoholic, another is non alcoholic. Following that, we chose the non-alcoholic set to develop into the web design as it would have been more family-friendly for an event like National Day.
I was in charge of the design team – which consisted of 4 interns, and an consulting developer. The interns assisted in conceptualisation, animations and copywriting and we collaborated as a team while brainstorming the entire work into existence.
Set 1
Set 2
Animations
Inner pages
As the theme this year is drinks, we wanted to convey the idea of fluidity throughout the site. The fluid background animation is imagined to ripple when mouse interaction occurs.
The drinks transition is conceptualised to be a fluid motion that reveals each drink one by one so that the drinks are prime feature of the site.
Hovering on the drink will have individual drink animations and description reveal
This animation is a 3 step description of how we plan the interaction of the site to be.
The visitor hovers on the drink and it expands to show the drink’s rationale, then shrinks and pans to the inner page where the stories are shown, using a motion akin to pulling put the page from the side.
Most of the animations are fluid and connected to further convey the idea of fluidity through the site.
Inner pages
To pique the interest of visitors, we opted for a highly graphical horizontal story wall. The wall allows the visitors to quickly skim through the stories without having to click too often.
The brown of the inner page represents the specific drink, symbolising the stories emerging from within the respective drink.
On scroll, will show more stories listed for this theme. The wall contains the name and excerpts of the stories from the individuals.
Another way of presenting the story would be through a horizontal scrolling carousel that presents the ability to quickly skim through the stories for easy perusal.
A carousel approach allows for a more clear cut segmentation of information for the visitor, In addition to this, this layout was presented in the event of the stories having a higher word count.
This layout gives the visitor the option of choice, to select and bring stories they are interested in into focus, while also retaining a brief image of all the stories involved in the drink theme. It’s an editorial style that allows for large amounts of information.