Heartbeat
Giving life to our plus sign, using it to boost, turbo charge or as a transitionary device reinforces our overall ‘more power’ proposition. This should always be quick with the screen never lingering on a solitary plus sign without being resolved with P+S as per the intro/outro animations.
Easing
We use two main easing curves; high energy intro and eased intro/outro to achieve consistent motion throughout our communications. High energy intro for a ‘pop in’ movement with with gradual deceleration to the finish, and eased intro/outro for a stylised high velocity middle that’s eased in and out.
Pacing
We need to ensure we maintain consistency and never fatigue the viewer when animating elements in and out. Intro animation duration should remain short, sharp and never lacklustre.
Rhythm
We need to ensure we maintain consistency and never fatigue the viewer when animating elements in and out. Intro animation duration should remain short, sharp and never lacklustre.
Typography
Our typography is how we speak, graphically. We have to ensure our tone of voice is delivered by communicating clearly, without distraction or showing off. We’ve set a few ground rules to achieve this.
Short headings
Short headings or statements should use word by word animation, keeping the movement minimal and sharp.
Long headings
Longer statements or blocks of text should use line by line animation to reduce visual load and keep it to the point.
Impact headings
Impactful short headings can use more impactful text animation with a flash of brand colour
Text blocks
To keep text legible on footage or photography, we suggest using animated block backgrounds. Consider colour and composition when paired with the image/footage.
Sonic identity
Our sonic identity is compromised of a heartbeat at the most simplest form, combined with a light and identifiable musical motif that compliments the heartbeat.
Quick intro outro
This is a super quick 1 second animation intended for social media where getting to the content as quickly as possible is paramount. The plus attracts the P+S, simple.Available with a black or yellow background, to be inserted as a hard cut from the end of the video content.
Statement outro
With this outro we’ve got a short animation that weaves in our proposition. This outro would suit a case study video or where we’ve been talking about our services.The text is editable so the spin through of services/business functions etc. can be adapted to fit, but the ending should always remain as business.
Burst outro
This outro features a super quick burst of imagery to reflect the breadth and quality of work output from P+S. The imagery in this example is our brand work and would fit most applications, however it is adaptable and can use imagery of digital design for example - this would need to be approved by the video team.
Conceptual imagery
We have a suite of generated imagery and various suggestions for prompts to generate similar imagery to use only where appropriate.Mixing up generated imagery with typography, subtle fx and editing makes the sequences visually engaging.
Icon full set
Our iconography is a key element, representing our services and approach for usage on our digital interfaces. We have an initial set to use (ideally as lotties / animated svg for web) that are animated to loop, with an inital base state that is recognisbile and fully formed.
Transitions
We have a set of transitions to use, to be used sparingly when needing to divide up content where a hard cut just doesn’t ‘cut it’. These move either upward or ‘forward’ (left to right) to symbolise growth / progression.
Lower Third
Our lower third is to be used on interview style footage. Always left aligned, and placed within the video safe zones of the intended platform.
Subtitles
Where subtitles are required, we should ensure they are simple and legible, in the medium weight of Gothic, low on the frame and with a slight gradient behind for legibility against light backgrounds.
Title screen
When title or question screens are required, creative use of the animated backgrounds combined with coloured shapesand blending modes can be used to create distinctive graphics. Legibility is crucial when creating these.
Responsive
Motion should be responsive to your users interaction. An energetic and accurate movement, caused by a click, scroll or hover. Never stagger or slow the movement of an element, visitors should never have to wait for an animation to finish.
Natural
Motion should be Inspired by real world forces, taking physics into consideration. Use easing in an apporopriate manner to achieve a realistic feel. Unnatural, linear movements can look out of place, or robotic.
Aware
Motion should be aware of the user, and the other website elements surrounding it and should be choreographed accordingly. Elements should never move in different directions, or cross paths, causing a jarring feel.
Intentional
Motion should be intentional. All movements should direct the user to the right place at the right time. Drawing attention to other elements can distract the viewer, and pull them off course.