Recently, twentysix were proud to complete work on a brand new set of pages for NHS Blood and Transplant to answer questions people had about Organ Donation and provide a valuable education resource.
From our creative team, Nik, Conor and James break down the thought process behind their work on the project.
Nik – “pop-up book paper style was chosen because it is friendly and approachable”
“The biggest challenge when designing the Organ Spotlight pages was to present complex information about the main organs of the human body in an engaging, appealing way.
The pop-up book paper style was chosen because it is friendly and approachable, meaning we were able to depict the process of each organ in a clear, visual way without cheapening or dumbing down the functions to the point of being useless as an educational piece.
The minimal colour palette was chosen to keep things consistent, complimenting the NHS brand colours, with a slight twist to feel less corporate and formal.”
Below – a few of Nik’s early sketches alongside the final organ designs.
Conor – “creating a true to life yet playful piece”
“Once Nik had established the art direction for the project, the challenge was to bring the paper skeuomorphism to life and give it that feeling of an old pop-up book. I have always worked with flat design within Adobe After Effects so this was a little bit of a learning process, adding lights to the stage to allow elements to cast shadows when they “fold” out. Perhaps the steepest learning curve on the project wasn’t in production but in gaining an understanding of how each organ actually works, as this would be imperative to creating a true to life yet playful piece. If I am completely honest I had no idea what the “Right Atrium” or the “Duodenum” was prior to the project but it was great to learn a little about what is inside of us and in-turn help to educate others on this.
There were six organs and four options – that’s twenty four different pieces isn’t it? I enjoyed creating the unique animations on each ‘pull out tag’. Oh, also each video had to be rendered in three different formats for cross browser compatibility”
James – “programmatically gaining control of the video at pre-determined cue-points”
“From a build perspective my role was to take the flat designs, integrate the videos and bring the remaining static design elements to life. Collectively we wanted the interactivity to closely match the look and feel of the various organ videos and the original design concept. This meant paying close attention to the animation of shadows and the speed of transitions on page elements such as pull-tabs and content blocks.
This was officially a non-responsive build but with semi-responsive behaviour! Basically this meant that the site was optimised for desktop delivery but only certain page elements would behave in a responsive manor when we hit landscape orientated tablet sized devices.
The immediate technical challenge was in the delivery of the video across various key browsers. Mainly this involved programmatically gaining control of the video at pre-determined cue-points so that we could pause the video at certain positions and then continue playback based on decisions made by the end user – and then launch other videos automatically. Security restrictions on devices such as the iPad meant this had to be conditionally implemented and proved to be the biggest challenge – and one which we eventually nailed.
What might not be immediately apparent to the end user is that the text on the pop-out circles in the video is not actually in the video. This was a key SEO decision and this text is actually dynamically positioned and animated onto screen based on pre-defined cue-points.”
Example video – Pancreas “Endocrine”
We’re very happy with the end result. View the live project here: