drag

case

VitaKey

A corporate website we created back in 2019 for a FoodTech company based in Washington

vitakey.com
back to all works
task

To create a corporate website, give a clear presentation to the biotechnology and communicate the image of professionals open to cooperation and communication with their target audience — technical experts in big manufacturing companies.

client

VitaKey

industry

FoodTech

year

2019

deliverables

Wireframes
Web Design
Illustrations
Motion Design
Frontend Development
Backend Development

Key Idea

The concept uses illustrations to explain the complex subject in understandable terms. We’ve complemented the text blocks with animated charts and wrapped the information into a structured presentation to provide an easier reading experience.

More About the Company

VitaKey provides a revolutionary new vitamin and micronutrient encapsulation technology under an exclusive licensing arrangement with the Massachusetts Institute of Technology and the Langer Lab. The unique method helps preserve all the nutrients throughout the storage, cooking, and consumption processes.

Overall Perception

Leaving a lot of white space between blocks helped us achieve the feeling of air and freedom, together with the chaotic movement of molecules. A rounded typeface used resembles round-shaped microparticles. And the color scheme used was built off the logo, as there was no established branding identity.

We’ve animated the logo and turned it into the preloader. To add an extra feeling of responsiveness, we paired the cursor with moving particles to follow it around.

Scroll-linked Animation

The scroll-linked animations and hover elements on the main page resemble moving molecules. We designed smooth illustrative transitions to break down big text blocks, add clarity, and structure the material for a more comfortable perception of scientific writing.

 

To speed up loading times, we broke the 3D microparticle video sequence into many raster frames and linked them to scroll. Users can break up the microparticles by scrolling down or reverse the animation by scrolling upwards.

Animated Graphs 

Static diagrams and graphs were animated to illustrate the research process and add the feeling of a real-time increase in figures. To attract attention to the results, we designed the charts to grow at first appearance. A simple and clean color scheme did its work as well.

Ten stand-alone illustrations and thirty-four animated objects work for the comfortable perception of the scientific text.

Backend

Full-custom backend development of the project was built using WordPress CMS. We based it on Bedrock, a WordPress template with modern tools for developers that ensure easy cross-platform work with any operating system — and fast loading on any device.

The mobile version of the website inherits the white space between blocks and animated molecules.

Communication

The Who We Are page introduces you to the team of directors and scientists. Apart from names, personal cards include bios of board members available through a single click. It inspires confidence, demonstrates expertise, and shows the company is ready for collaboration. Users can find the contact details on every page and easily access VitaKey with any question they might have.

The website has a personal dashboard for content administration that provides the client with the ability to easily change or add content in the future.

technologies

Gsap

Canvas

Lottie

JavaScript

TypeScript

WordPress

Bedrock

Advanced Custom Fields

reviews

Wayne R. Reynolds
Wayne R. Reynolds
Founder & Board Chairman

We are most appreciative of your recent development of the VitaKey website. From the creative design and animations to the timeliness of the build and professional staff communications, the Red Collar team successfully achieved our desired results. You were able to effectively use the information we provided about our new VitaKey company, understand the intricate scientific components, and properly illustrate our key points in a user-friendly website to expand our reach. 

see also

Infusion Games

An associative website design for a mobile game developer

Creddy

A corporate website for a P2P lending service

Barcelona Realty Group

A site with a user-friendly catalogue for a real estate agency

let us know

Have an idea in mind?

We’re Red Collar. And what’s your name? We actually need your e-mail to get in touch Wow, this load is way too heavy for us. Files larger than 10 MB can be sent to hello@redcollar.co You made a mistake, but it’s fine. We all do. Please, enter a valid e-mail

By submitting this form you agree to our privacy policy

we craft award-winning digital experiences that reach both minds and hearts of people

8
65
13
4
36
8