Neom. Crowd Funder: Motion Principles

About this document

Landor & FITCH have been asked to restyle an existing framework for the NEOM Crowdfunding website.
Just Coded are a development partner of NEOM and have an existing white label website framework for crowd funding websites. You can see the initial framework WIP for the NEOM crowdfunding site here
The following document outlines motion guidelines to bring the site to life.

The following pages detail recommendations for how the site should move and animate. These guidelines have been created to be consistent with other sector based sites that are currently in development for consistency.
The core thinking behind these guidelines is bring the site to life in a professional and confident way. This will emphasise the authenticity and professionalism of the site, we want to instil trust in the sites users, innovation start ups, and innovation investors. We have tried to keep motion simple so that it can be replicated on other aspects of the site where possible.
We acknowledge that Just Coded are on a tight timeline, and so these guidelines are delivered as a recommendation for how the site should animate. It is up to just coded to use these guidelines and deliver as close to these as is feasible within their scope and timeline.

Motion
How might our site speak with motion?
Simple motion creates a sleek experience but does not distract
Add dynamism by moving individual components
Use simple hover states to inject motion out also uncover additional information.

MOTION
NEOM CROWD SOURCING
Homepage hero
Title and text build up [appears]
Image builds in from right with a slight zoom out.
Revealing text and content panels modules during the scroll using parallax effect.

MOTION
NEOM CROWD SOURCING
Cards
Cards are revealed once at time showing element in order of hierarchy.
Example of hover effect on the light CTA.

MOTION
NEOM CROWD SOURCING
Hero Section 1
Revealing text and side image.
As the image is being revealed it has a slight zoom out to end on it's final state.
Hover effect on yellow CTA.

MOTION
NEOM CROWD SOURCING
Hero Section 2
Revealing text and full width image.
As image is revealed it has a slight zoom out to land on it's end state.