Internal Research Banner


Created with the objective of experimenting with motion in web design, this interactive work sample acts as a landing page for a small coffeechain. The motion design and art direction were inspired by theexperience of sitting down for coffee with friends or colleagues.

Grayscale sample version of layout

Low Fidelity Layout

The process began by identifying key components the website would require. Various grayscale layouts were then created to determine a rough layout of content. As well, at this stage was brainstorming of final visuals and accompanying animations.

Final visual design

High Fidelity Visual Design

The completion of the visual design and all required assets was then completed. It was at this stage that the look and feel of the overall product was decided upon. Research into competitor’s stylistic choices was also incorporated at this stage.

Final visual design

High Fidelity Mock Up

With the visual design complete, the design was mocked up in context and the animations for the final design were planned.

Concept Demo

Finally, utilizing After Effects, a demonstration of the final product was created. This stage finalized the look and feel of the final proof of concept.